Składniki, gdy są renderowane w ramce wstawkowej, nie mają bezpośredniego dostępu do pliku design.css. Zamiast tego jest wykonywany dodatkowy krok, mający na celu uzyskanie adresu URL dla pliku design.css składnika i dodanie tego adresu do strony. Następnie trzeba zaktualizować składnik, tak aby odzwierciedlał wybrany przez użytkownika styl.
design.css i używać go w składniku, trzeba dokonać zmian w pliku render.html:
Odszukać i dołączyć adres URL do pliku design.css.
Uzyskać wartość wybranej klasy stylu, gdy się ona zmieni.
Zaktualizować szablon, tak aby odzwierciedlał wybraną klasę styleClass.
Odzwierciedlić w składniku zmiany dokonane w wybranej klasie stylu.
Zapewnić zmianę rozmiaru ramki wstawkowej, gdy styl zostanie zmieniony.
Poniżej są podane szczegółowe instrukcje edycji pliku render.html:
Odszukać i dołączyć adres URL do pliku design.css.
Dodać dynamicznie plik design.css do sekcji <head> strony. Po załadowaniu pliku, ustawić wysokość ramki wstawkowej, ponieważ mogła zostać zmieniona przez stosowanie stylów.
Dodać do obiektu viewModel następujący kod:
// 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);
}
});Uzyskać wartość wybranej klasy stylu, gdy się ona zmieni.
Utworzyć obiekt "observable" do śledzenia zmian wartości właściwości styleClass:
self.selectedStyleClass = ko.observable();
Należy pamiętać, że — dopóki nie ma klasy stylu — nie można renderować. Zmienić następujący kod:
self.customSettingsDataInitialized = ko.observable(false);
self.initialized = ko.computed(function () {
return self.customSettingsDataInitialized();
}, self);
Zamiast tego użyć następującego kodu:
self.customSettingsDataInitialized = ko.observable(false);
self.styleClassInitialized = ko.observable(false);
self.initialized = ko.computed(function () {
return self.customSettingsDataInitialized() && self.styleClassInitialized();
}, self);
Uzyskać początkową wartość wybranej klasy stylu, dodając:
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);Zaktualizować szablon, tak aby odzwierciedlał klasę styleClass. Zmienić następujący kod:
<p data-bind="attr: {id: 'titleId'}, text: titleText"></p>
Zamiast tego użyć następującego kodu:
<p data-bind="attr: {id: 'titleId'}, text: titleText, css: selectedStyleClass"></p>Odzwierciedlić w składniku zmiany dokonane w wybranej klasie stylu. Zmienić następujący kod:
if (settings.property === 'customSettingsData') {
self.updateCustomSettingsData(settings.value);
}
Zamiast tego użyć następującego kodu:
if (settings.property === 'customSettingsData') {
self.updateCustomSettingsData(settings.value);
}
if (settings.property === 'styleClass') {
self.updateStyleClass(settings.value);
}Zapewnić zmianę rozmiaru ramki wstawkowej, gdy styl zostanie zmieniony. Zmienić następujący kod:
// 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();
Zamiast tego użyć następującego kodu:
// 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(); Zapisać, po czym zsynchronizować pliki z serwerem instancji Oracle Content Management.
Sprawdzanie wyników dla etapu 14
Aby konstruktor serwisów mógł pobrać zmiany do składnika, odświeżyć stronę serwisu.
Przełączyć stronę do trybu edycji.
Przeciągnąć składnik na stronę.
Wyświetlić panel "Ustawienia" składnika.
Przejść do karty "Styl".
Przełączać się między stylami Gothic i Plain, zdefiniowanymi w pliku design.json.
Można zaobserwować zmianę rozmiaru czcionki w składniku, spowodowaną przełączaniem stosowanej klasy CSS.
Kontynuacja: Etap 15: Integracja z funkcjami "Cofnij" i "Ponów" strony.