Componentele randate într-un cadru inline nu au acces direct la fişierul design.css. În schimb, există un pas suplimentar pentru a obţine adresa URL pentru design.css din componenta dvs. şi adăugaţi-o la pagina respectivă. Apoi este necesar să vă actualizaţi componenta, pentru a reflecta stilul selectat de utilizator.
design.css în componenta dvs., sunt necesare modificări în fişierul render.html:
Localizaţi şi includeţi adresa URL în fişierul design.css
Obţineţi valoarea clasei de stil exclusive de fiecare dată când se modifică
Actualizaţi şablonul, pentru a reflecta clasa styleClass selectată
Reflectaţi modificările clasei de stil selectate în componenta dvs.
Asiguraţi-vă că se redimensionează cadrul inline atunci când stilul se schimbă
Iată instrucţiunile detaliate pentru editarea fişierului render.html:
Localizaţi şi includeţi adresa URL în fişierul design.css.
Adăugaţi în mod dinamic fişierul design.css la secţiunea <head> a paginii. După ce a fost încărcat, setaţi înălţimea cadrului inline, deoarece este posibil să fi fost modificat prin aplicarea stilurilor.
Adăugaţi următorul cod în obiectul 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);
}
});Obţineţi valoarea clasei de stil exclusive de fiecare dată când se modifică.
Creaţi o valoare observable, pentru a urmări când se modifică proprietatea styleClass. :
self.selectedStyleClass = ko.observable();
Reţineţi că nu putem face randarea până când nu avem clasa de stil. Modificaţi acest cod:
self.customSettingsDataInitialized = ko.observable(false);
self.initialized = ko.computed(function () {
return self.customSettingsDataInitialized();
}, self);
Utilizaţi în schimb acest cod:
self.customSettingsDataInitialized = ko.observable(false);
self.styleClassInitialized = ko.observable(false);
self.initialized = ko.computed(function () {
return self.customSettingsDataInitialized() && self.styleClassInitialized();
}, self);
Obţineţi valoarea iniţială pentru clasa de stil selectată, adăugând:
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);Actualizaţi şablonul, pentru a reflecta clasa styleClass respectivă. Modificaţi acest cod:
<p data-bind="attr: {id: 'titleId'}, text: titleText"></p>
Utilizaţi în schimb acest cod:
<p data-bind="attr: {id: 'titleId'}, text: titleText, css: selectedStyleClass"></p>Reflectaţi modificările clasei de stil selectate în componenta dvs. Modificaţi acest cod:
if (settings.property === 'customSettingsData') {
self.updateCustomSettingsData(settings.value);
}
Utilizaţi în schimb acest cod:
if (settings.property === 'customSettingsData') {
self.updateCustomSettingsData(settings.value);
}
if (settings.property === 'styleClass') {
self.updateStyleClass(settings.value);
}Asiguraţi-vă că se redimensionează cadrul inline atunci când stilul se schimbă. Modificaţi acest cod:
// 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();
Utilizaţi în schimb acest cod:
// 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(); Salvaţi şi sincronizaţi fişierele pe serverul de instanţă Oracle Content Management.
Verificaţi rezultatele de la pasul 14
Reîncărcaţi pagina din site-ul dvs., astfel ca Generatorul de site-uri să poată prelua modificările aduse componentei.
Treceţi pagina în modul Editare.
Glisaţi şi plasaţi componenta dvs. pe pagină.
Aduceţi panoul Setări în dreptul componentei dvs.
Accesaţi fila Stil.
Comutaţi între stilurile Gothic şi Plain definite în fişierul dvs. design.json.
Veţi observa că dimensiunea fontului din cadrul componentei dvs. se ajustează pt. a reflecta modificările, atunci când face trecerea la clasa CSS aplicată pt. fiecare selecţie.
Continuaţi cu Pasul 15: Integrarea cu comportamentele Anulare şi Repetare din pagină.