Satır içi çerçevede görüntülenen bileşenlerin design.css dosyasına doğrudan erişimleri yoktur. Bunun yerine bileşeninizdeki design.css URL'sini almak ve sayfaya eklemek için ek bir adım vardır. Daha sonra bileşeninizi kullanıcının seçtiği stili yansıtacak şekilde güncellemeniz gerekir.
design.css dosyasını bileşeninize dahil edip kullanmak için render.html dosyasında değişiklikler yapılması gerekir:
design.css dosyasının URL'sini bulma ve dahil etme
Seçili stil sınıfı her değiştiğinde sınıfın değerini alma
Şablonu seçili styleClass'ı yansıtacak şekilde güncelleme
Bileşeninizdeki seçili stil sınıfında yapılan değişiklikleri yansıtma
Stil değiştiğinde satır içi çerçeve boyutunun değişmesini sağlama
render.html dosyasını düzenlemek için detaylı talimat aşağıdadır:
design.css dosyasının URL'sini bulun ve dahil edin.
design.cssdosyasını sayfanın <head> bölümüne dinamik olarak ekleyin. Yüklendikten sonra, stiller uygulanarak değiştirilmiş olabileceğinden satır içi çerçevenin yüksekliğini ayarlayın.
viewModel nesnesine şu kodu ekleyin:
// 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);
}
});Seçili stil sınıfı her değiştiğinde sınıfın değerini alın.
styleClass niteliğinin değeri değiştiğinde izlemek için gözlemlenebilir bir öğe oluşturun:
self.selectedStyleClass = ko.observable();
Stil sınıfınız olana kadar görüntüleyemeyeceğinizi unutmayın. Şu kodu değiştirin:
self.customSettingsDataInitialized = ko.observable(false);
self.initialized = ko.computed(function () {
return self.customSettingsDataInitialized();
}, self);
Onun yerine şu kodu kullanın:
self.customSettingsDataInitialized = ko.observable(false);
self.styleClassInitialized = ko.observable(false);
self.initialized = ko.computed(function () {
return self.customSettingsDataInitialized() && self.styleClassInitialized();
}, self);
Şunu ekleyerek seçili stil sınıfının başlangıç değerini alın:
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);Şablonu styleClass'ı yansıtacak şekilde güncelleyin. Şu kodu değiştirin:
<p data-bind="attr: {id: 'titleId'}, text: titleText"></p>
Onun yerine şu kodu kullanın:
<p data-bind="attr: {id: 'titleId'}, text: titleText, css: selectedStyleClass"></p>Bileşeninizdeki seçili stil sınıfında yapılan değişiklikleri yansıtın. Şu kodu değiştirin:
if (settings.property === 'customSettingsData') {
self.updateCustomSettingsData(settings.value);
}
Onun yerine şu kodu kullanın:
if (settings.property === 'customSettingsData') {
self.updateCustomSettingsData(settings.value);
}
if (settings.property === 'styleClass') {
self.updateStyleClass(settings.value);
}Stil değiştiğinde satır içi çerçeve boyutunun değiştiğine emin olun. Şu kodu değiştirin:
// 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();
Onun yerine şu kodu kullanın:
// 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(); Dosyalarınızı Oracle Content Management anı sunucusuna kaydedin ve eşzamanlı kılın.
Adım 14'ün Sonuçlarını Kontrol Edin
Site Builder'ın bileşendeki değişiklikleri alabilmesi için sitenizde sayfanızı yenileyin.
Sayfayı Düzenleme moduna alın.
Bileşeninizi sayfaya sürükleyin.
Ayarlar panelini bileşeninizin karşısına getirin.
Stil sekmesine gidin.
design.json dosyanızda tanımlı Gothic ve Plain stilleri arasında geçiş yapın.
Bileşeninizde yazı tipinin her seçim için uygulanan basamaklı biçim tablosu sınıfı arasında geçiş yaptıkça değişiklikleri yansıtmak üzere ayarlandığını fark edeceksiniz.
Adım 15: Sayfa Geri Alma ve Yineleme Davranışı ile Entegrasyon bölümüne devam edin.