Komponenty vykreslené vo vloženom ráme nemajú priamy prístup k súboru design.css
. Namiesto toho je tu ďalší krok na získanie adresy URL pre súbor design.css
vo vašom komponente a pridanie tohto súboru na stránku. Potom bude potrebné komponent aktualizovať, aby sa prejavil štýl vybraný používateľom.
design.css
do komponentu a jeho použitie si vyžaduje zmeny v súbore render.html
:
Vyhľadajte adresu URL a vložte ju do súboru design.css
.
Vždy, keď sa zmení výber triedy štýlu, načítajte hodnotu triedy.
Aktualizujte šablónu, aby sa v nej prejavila vybraná trieda štýlu styleClass
.
Zmeny vo vybranej triede štýlu implementujte do komponentu.
Zabezpečte, aby sa pri zmene štýlu zmenila aj veľkosť vloženého rámu.
Tu sú podrobné pokyny na úpravu súboru render.html
:
Vyhľadajte adresu URL a vložte ju do súboru design.css
.
Súbor design.css
dynamicky pridajte do sekcie <head>
na stránke. Po jeho načítaní nastavte výšku vloženého rámu, pretože po použití štýlov sa mohol zmeniť.
Do objektu viewModel
pridajte nasledujúci kód:
// 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); } });
Vždy, keď sa zmení výber triedy štýlu, načítajte hodnotu triedy.
Vyberte pozorovaný objekt observable, ktorý bude sledovať, keď sa zmení hodnota vlastnosti styleClass
:
self.selectedStyleClass = ko.observable();
Upozorňujeme, že vykreslenie nie je možné bez nastavenia triedy štýlu. Zmeňte tento kód:
self.customSettingsDataInitialized = ko.observable(false); self.initialized = ko.computed(function () { return self.customSettingsDataInitialized(); }, self);
Namiesto toho použite kód:
self.customSettingsDataInitialized = ko.observable(false); self.styleClassInitialized = ko.observable(false); self.initialized = ko.computed(function () { return self.customSettingsDataInitialized() && self.styleClassInitialized(); }, self);
Načítajte počiatočnú hodnotu pre vybranú triedu štýlu pridaním kódu:
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);
Aktualizujte šablónu, aby sa v nej prejavila trieda štýlu styleClass
. Zmeňte tento kód:
<p data-bind="attr: {id: 'titleId'}, text: titleText"></p>
Namiesto toho použite kód:
<p data-bind="attr: {id: 'titleId'}, text: titleText, css: selectedStyleClass"></p>
Zmeny vo vybranej triede štýlu implementujte do komponentu. Zmeňte tento kód:
if (settings.property === 'customSettingsData') { self.updateCustomSettingsData(settings.value); }
Namiesto toho použite kód:
if (settings.property === 'customSettingsData') { self.updateCustomSettingsData(settings.value); } if (settings.property === 'styleClass') { self.updateStyleClass(settings.value); }
Zabezpečte, aby sa pri zmene štýlu zmenila aj veľkosť vloženého rámu. Zmeňte tento kód:
// 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();
Namiesto toho použite kód:
// 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();
Súbory uložte a synchronizujte na serveri inštancie Oracle Content Management.
Kontrola výsledkov pre krok 14
Obnovte stránku na svojej lokalite, aby generátor lokalít mohol vybrať zmeny komponentu.
Otvorte stránku v režime úprav.
Myšou presuňte komponent na stránku.
Otvorte panel Nastavenia pre váš komponent.
Prejdite na kartu Štýl.
Prepnite medzi štýlmi Gothic a Plain, ktoré sú definované v súbore design.json
.
Uvidíte, že veľkosť písma v rámci komponentu sa upraví tak, aby odrážala zmeny, ku ktorým dochádza pri prepínaní tried CSS pri každom výbere.
Pokračujte na Krok 15: Integrácia so správaním odvolania a opakovania na stránke.