Komponenter som er gjengitt i en linjebundet ramme, har ikke direkte tilgang til filen design.css
. I stedet finnes det et tilleggstrinn som henter URL-adressen for design.css
i komponenten og legger den til på siden. Deretter må du oppdatere komponenten slik at den gjenspeiler den brukervalgte stilen.
design.css
i komponenten, må det gjøres endringer i filen render.html
:
Finn URL-adressen, og inkluder den i filen design.css
Hent verdien for den valgte stilklassen hver gang den endres
Oppdater malen slik at den gjenspeiler styleClass
som er valgt
Gjenspeil endringer i den valgte stilklassen i komponenten din
Pass på at størrelsen på den linjebundne rammen blir endret når stilen endres
Her er detaljerte instruksjoner for redigering av filen render.html
:
Finn URL-adressen, og inkluder den i filen design.css
.
Legg til filen design.css
dynamisk i delen <head>
på siden. Når den er lastet, angir du høyden på den linjebundne rammen fordi den kan ha blitt endret da stilene ble tatt i bruk.
Legg til følgende kode i objektet viewModel
:
// Dynamically add any theme design URL to the <head> of the page self.loadStyleSheet = function (url) { var $style, styleSheetDeferred = new $.Deferred(), attempts = 100, numAttempts = 0, interval = 50, pollFunction = function () { // try to locate the style sheet for (var i = 0; i < document.styleSheets.length; i++) { try { // locate the @import sheet that has an href based on our expected URL var sheet = document.styleSheets[i], rules = sheet && sheet.cssRules, rule = rules && rules[0]; // check whether style sheet has been loaded if (rule && (rule.href === url)) { styleSheetDeferred.resolve(); return; } } catch (e) {} } if (numAttempts < attempts) { numAttempts++; setTimeout(pollFunction, interval); } else { // didn't find style sheet so complete anyway styleSheetDeferred.resolve(); } }; // add the themeDesign stylesheet to <head> // use @import to avoid cross domain security issues when determining when the stylesheet is loaded $style = $('<style type="text/css">@import url("' + url + '")</style>'); $style.appendTo('head'); // kickoff the polling pollFunction(); // return the promise return styleSheetDeferred.promise(); }; // update with the design.css from the Sites Page SitesSDK.getSiteProperty('themeDesign', function (data) { if (data && data.themeDesign && typeof data.themeDesign === 'string') { // load the style sheet and then set the height self.loadStyleSheet(data.themeDesign).done(self.setHeight); } });
Hent verdien for den valgte stilklassen hver gang den endres.
Opprett et observerbart objekt som kan spores når verdien for egenskapen styleClass
endres:
self.selectedStyleClass = ko.observable();
Vær oppmerksom på at det ikke er mulig å gjengi noe før stilklassen er på plass. Slik endrer du denne koden:
self.customSettingsDataInitialized = ko.observable(false); self.initialized = ko.computed(function () { return self.customSettingsDataInitialized(); }, self);
Bruk denne koden i stedet:
self.customSettingsDataInitialized = ko.observable(false); self.styleClassInitialized = ko.observable(false); self.initialized = ko.computed(function () { return self.customSettingsDataInitialized() && self.styleClassInitialized(); }, self);
Hent den opprinnelige verdien for den valgte stilklassen ved å legge til:
self.updateStyleClass = function (styleClass) { self.selectedStyleClass((typeof styleClass === 'string') ? styleClass : 'hello-world-default-style'); // note that this 'hello-world' prefix is based on the app name self.styleClassInitialized(true); }; SitesSDK.getProperty('styleClass', self.updateStyleClass);
Oppdater malen slik at den gjenspeiler styleClass
. Slik endrer du denne koden:
<p data-bind="attr: {id: 'titleId'}, text: titleText"></p>
Bruk denne koden i stedet:
<p data-bind="attr: {id: 'titleId'}, text: titleText, css: selectedStyleClass"></p>
Gjenspeil endringer i den valgte stilklassen i komponenten din. Slik endrer du denne koden:
if (settings.property === 'customSettingsData') { self.updateCustomSettingsData(settings.value); }
Bruk denne koden i stedet:
if (settings.property === 'customSettingsData') { self.updateCustomSettingsData(settings.value); } if (settings.property === 'styleClass') { self.updateStyleClass(settings.value); }
Pass på at størrelsen på den linjebundne rammen blir endret hver gang stilen endres. Slik endrer du denne koden:
// create dependencies on any observables so this handler is called whenever it changes var imageWidth = viewModel.imageWidth(), imageUrl = viewModel.imageUrl(), titleText = viewModel.titleText(), userText = viewModel.userText();
Bruk denne koden i stedet:
// create dependencies on any observables so this handler is called whenever it changes var imageWidth = viewModel.imageWidth(), imageUrl = viewModel.imageUrl(), titleText = viewModel.titleText(), userText = viewModel.userText(), selectedStyleClass = viewModel.selectedStyleClass();
Lagre og synkroniser filene på tjeneren for Oracle Content Management-forekomsten.
Kontrollere resultatene for trinn 14
Oppfrisk siden på området ditt slik at områdebyggeren kan plukke opp endringer av komponenten.
Sett siden i redigeringsmodus.
Dra og slipp komponenten din på siden.
Åpne ruten Innstillinger for komponenten.
Gå til fanen Stil.
Bytt mellom stilene Gotisk og Vanlig, som er definert i filen design.json
.
Legg merke til at skriftstørrelsen i komponenten blir justert slik at endringene gjenspeiles, når den veksler mellom den brukte CSS-klassen for hvert utvalg.
Gå videre til Trinn 15: Integrering med Angre- og Gjør om-atferden for sider.