Os componentes apresentados numa moldura inline não têm acesso direto ao ficheiro design.css. Em vez de disso, existe um passo adicional para obter o URL para o design.css no seu componente, o que deverá ser acrescentado à página. Em seguida, deve atualizar o seu componente para refletir o estilo selecionado pelo utilizador.
design.css no seu componente, são necessárias alterações no ficheiro render.html:
Localizar e incluir o URL no ficheiro design.css
Obter o valor da classe de estilo selecionado quando alterar
Atualizar o modelo para refletir a styleClass selecionada
Reflita as alterações da classe de estilo selecionado no seu componente.
Certifique-se de que a moldura inline é redimensionada quando o estilo for alterado.
Seguem-se instruções detalhadas para a edição do ficheiro render.html:
Localize e inclua o URL no ficheiro design.css.
Acrescente de forma dinâmica o ficheiro design.css à secção <head> da página. Depois de ser carregado, defina a altura da moldura inline porque poderá ter sido alterada ao aplicar os estilos.
Acrescente o seguinte código no objeto 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);
}
});Obtenha o valor da classe de estilo selecionado quando alterar.
Crie um elemento observável para controlar quando o valor da propriedade styleClass é alterado.
self.selectedStyleClass = ko.observable();
Note que só podemos apresentar quando tivermos classe de estilo. Altere este código:
self.customSettingsDataInitialized = ko.observable(false);
self.initialized = ko.computed(function () {
return self.customSettingsDataInitialized();
}, self);
Utilize este código como alternativa:
self.customSettingsDataInitialized = ko.observable(false);
self.styleClassInitialized = ko.observable(false);
self.initialized = ko.computed(function () {
return self.customSettingsDataInitialized() && self.styleClassInitialized();
}, self);
Obtenha o valor inicial para a classe de estilo selecionada acrescentando:
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);Atualize o modelo para refletir a styleClass. Altere este código:
<p data-bind="attr: {id: 'titleId'}, text: titleText"></p>
Utilize este código como alternativa:
<p data-bind="attr: {id: 'titleId'}, text: titleText, css: selectedStyleClass"></p>Reflita as alterações da classe de estilo selecionado no seu componente. Altere este código:
if (settings.property === 'customSettingsData') {
self.updateCustomSettingsData(settings.value);
}
Utilize este código como alternativa:
if (settings.property === 'customSettingsData') {
self.updateCustomSettingsData(settings.value);
}
if (settings.property === 'styleClass') {
self.updateStyleClass(settings.value);
}Certifique-se de que a moldura inline é redimensionada quando o estilo for alterado. Altere este código:
// 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();
Utilize este código como alternativa:
// 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(); Grave e sincronize os seus ficheiros com o servidor da instância do Oracle Content Management.
Verificar os Resultados para o Passo 14
Renove a sua página no site para que o Criador de Sites possa escolher alterações para o componente.
Apresente a página no modo de edição.
Arraste e largue o seu componente na página.
Abra o painel Definições com o seu componente.
Aceda ao separador Estilo.
Alterne entre os estilos Gothic e Plain definidos no seu ficheiro design.json.
Irá reparar que o tamanho do tipo de letra no seu componente ajusta-se para refletir as alterações quando alterna entre a classe CSS aplicada para cada seleção.
Avance para Passo 15: Integração com o Comportamento Desfazer e Refazer Página.