I componenti visualizzati in un frame in linea non dispongono dell'accesso diretto al file design.css. Esiste invece un passo aggiuntivo per ottenere l'URL per il file design.css nel componente e aggiungerlo alla pagina. È quindi necessario aggiornare il componente per riflettere lo stile selezionato dall'utente.
design.css nel componente è necessario apportare delle modifiche al file render.html:
Individuare e includere l'URL nel file design.css
Ottenere il valore della classe di stile selezionata ogni volta che cambia
Aggiornare il modello per riflettere il valore styleClass selezionato
Propagare le modifiche apportate alla classe di stile selezionata nel componente
Assicurarsi che il frame in linea venga opportunamente ridimensionato quando lo stile cambia
Di seguito vengono fornite informazioni dettagliate per la modifica del file render.html.
Individuare e includere l'URL nel file design.css.
Aggiungere dinamicamente il file design.css alla sezione <head> della pagina. A caricamento del file completato, impostare l'altezza del frame in linea perché potrebbe essere stata modificata in seguito all'applicazione degli stili.
Aggiungere il codice seguente all'oggetto 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);
}
});Ottenere il valore della classe di stile selezionata ogni volta che cambia.
Creare un elemento osservabile per tenere traccia delle modifiche del valore della proprietà styleClass:
self.selectedStyleClass = ko.observable();
Tenere presente che non è possibile eseguire il rendering finché non si disporrà della classe di stile. Modificare questo codice:
self.customSettingsDataInitialized = ko.observable(false);
self.initialized = ko.computed(function () {
return self.customSettingsDataInitialized();
}, self);
Usare questo codice in sostituzione del precedente:
self.customSettingsDataInitialized = ko.observable(false);
self.styleClassInitialized = ko.observable(false);
self.initialized = ko.computed(function () {
return self.customSettingsDataInitialized() && self.styleClassInitialized();
}, self);
Ottenere il valore iniziale per la classe di stile selezionata aggiungendo quanto segue:
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);Aggiornare il modello per riflettere il valore styleClass. Modificare questo codice:
<p data-bind="attr: {id: 'titleId'}, text: titleText"></p>
Usare questo codice in sostituzione del precedente:
<p data-bind="attr: {id: 'titleId'}, text: titleText, css: selectedStyleClass"></p>Propagare le modifiche apportate alla classe di stile selezionata nel componente. Modificare questo codice:
if (settings.property === 'customSettingsData') {
self.updateCustomSettingsData(settings.value);
}
Usare questo codice in sostituzione del precedente:
if (settings.property === 'customSettingsData') {
self.updateCustomSettingsData(settings.value);
}
if (settings.property === 'styleClass') {
self.updateStyleClass(settings.value);
}Assicurarsi che il frame in linea venga opportunamente ridimensionato quando lo stile cambia. Modificare questo codice:
// 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();
Usare questo codice in sostituzione del precedente:
// 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(); Salvare e sincronizzare i file nel server dell'istanza di Oracle Content Management.
Controllare i risultati per il passo 14
Aggiornare la pagina nel sito in modo che SiteBuilder possa selezionare le modifiche apportate al componente.
Attivare la modalità Modifica per la pagina.
Trascinare e rilasciare il componente sulla pagina.
Visualizzare il pannello Impostazioni per il componente.
Andare alla scheda Stile.
Alternare gli stili Gothic e Plain definiti nel file design.json.
Si osserverà che la dimensione di carattere all'interno del componente viene adeguata per riflettere le modifiche quando si cambia la classe CSS applicata per ogni selezione.
Continuare con l'argomento Passaggio 15: Integrazione con il funzionamento di annullamento e ripetizione della pagina.