A beágyazott keretben megjelenített összetevők nem rendelkeznek közvetlen hozzáféréssel a design.css
fájlhoz. Ezért egy további lépés szükséges az összetevőjében a design.css
fájlhoz tartozó URL-cím beolvasásához és az oldalhoz való hozzáadásához. Ezután módosítania kell összetevőjét a felhasználó által kijelölt stílus alkalmazásához.
design.css
fájl összetevőjében való bevételéhez és használatához módosítások szükségesek a render.html
fájlban:
Keresse meg és vegye fel a design.css
fájlra mutató URL-címet
Olvassa be a stílusosztály értékét, amikor megváltozik
Módosítsa a sablont a styleClass
kijelölt értékének megfelelően
Érvényesítse összetevőjében a kijelölt stílusosztály módosításait
Ügyeljen arra, hogy a beágyazott keret átméreteződjön, amikor megváltozik a stílus
A render.html
fájl szerkesztéséhez a részletes utasítások a következők:
Keresse meg és vegye fel a design.css
fájlra mutató URL-címet.
Dinamikusan adja hozzá a design.css
fájlt az oldal <head>
szakaszához. Ennek betöltése után állítsa be a beágyazott keret magasságát, mivel megváltozhatott a stílusok alkalmazása miatt.
Vegye fel a következő kódot a viewModel
objektumban:
// 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); } });
Olvassa be a stílusosztály értékét, amikor megváltozik.
Hozzon létre egy observable (megfigyelhető) elemet annak követésére, amikor a styleClass
tulajdonság megváltozik:
self.selectedStyleClass = ko.observable();
Figyelje meg, hogy a stílusosztály beolvasása előtt nem lehetséges megjelenítés. Módosítsa a következő kódot:
self.customSettingsDataInitialized = ko.observable(false); self.initialized = ko.computed(function () { return self.customSettingsDataInitialized(); }, self);
Ezt a kódot használja helyette:
self.customSettingsDataInitialized = ko.observable(false); self.styleClassInitialized = ko.observable(false); self.initialized = ko.computed(function () { return self.customSettingsDataInitialized() && self.styleClassInitialized(); }, self);
Olvassa be a kijelölt stílusosztály kezdőértékét a következő kód hozzáadásával:
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);
Módosítsa a sablont a styleClass
értékének megfelelően. Módosítsa a következő kódot:
<p data-bind="attr: {id: 'titleId'}, text: titleText"></p>
Ezt a kódot használja helyette:
<p data-bind="attr: {id: 'titleId'}, text: titleText, css: selectedStyleClass"></p>
Érvényesítse összetevőjében a kijelölt stílusosztály módosításait. Módosítsa a következő kódot:
if (settings.property === 'customSettingsData') { self.updateCustomSettingsData(settings.value); }
Ezt a kódot használja helyette:
if (settings.property === 'customSettingsData') { self.updateCustomSettingsData(settings.value); } if (settings.property === 'styleClass') { self.updateStyleClass(settings.value); }
Ügyeljen arra, hogy a beágyazott keret átméreteződjön, amikor megváltozik a stílus. Módosítsa a következő kódot:
// 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();
Ezt a kódot használja helyette:
// 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();
Mentse és szinkronizálja a fájlokat az Oracle Content Management példánykiszolgálójára.
A 14. lépéshez tartozó eredmények ellenőrzése
Frissítse az oldalt webhelyén, így a Site Builder át tudja venni az összetevő módosításait.
Jelenítse meg az oldalt szerkesztési módban.
Húzza át összetevőjét az oldalra.
Nyissa meg az összetevőhöz tartozó Beállítások panelt.
Nyissa meg a Stílus lapot.
Váltson a Gothic és a Plain stílus között, amelyeket a design.json
fájlban definiált.
Megfigyelheti, hogy az összetevőn belül a betűméret az alkalmazott CSS osztály közötti váltásnak megfelelően módosul.
A következő témakör: 15. lépés: Integráció az oldal visszavonása és visszaállítása viselkedéssel.