Het bestand design.css is niet rechtstreeks toegankelijk voor componenten in een inline-frame. Daarom moet u een extra stap uitvoeren om de URL van het bestand design.css op te halen in uw component en het bestand toe te voegen aan de pagina. Vervolgens moet u de component bijwerken, zodat hierin wordt verwezen naar de door u geselecteerde stijl.
design.css wilt opnemen en gebruiken in uw component, moet u het bestand render.html wijzigen:
De URL van het bestand design.css opzoeken en deze opnemen
De waarde van de geselecteerde stijlklasse ophalen wanneer deze wordt gewijzigd
De sjabloon bijwerken met de geselecteerde styleClass-eigenschap
Wijzigingen in de geselecteerde styleClass-eigenschap toepassen op uw component
Het formaat van het inline-frame laten meeschalen met de stijl
De gedetailleerde instructies voor het bewerken van het bestand render.html zijn als volgt:
Zoek de URL van het bestand design.css op en neem deze op.
Voeg het bestand design.css dynamisch toe aan de sectie <head> op de pagina. Wanneer het inline-frame is geladen, stelt u de hoogte ervan in omdat deze kan zijn gewijzigd doordat de stijlen zijn toegepast.
Voeg de volgende code toe aan het object 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);
}
});Haal de waarde van de geselecteerde stijlklasse op wanneer deze wordt gewijzigd.
Maak een variabele waarmee wordt bijgehouden wanneer de waarde van de eigenschap styleClass wordt gewijzigd:
self.selectedStyleClass = ko.observable();
De component kan pas worden gerenderd als de stijlklasse is gedefinieerd. Wijzig deze code:
self.customSettingsDataInitialized = ko.observable(false);
self.initialized = ko.computed(function () {
return self.customSettingsDataInitialized();
}, self);
Gebruik in plaats daarvan deze code:
self.customSettingsDataInitialized = ko.observable(false);
self.styleClassInitialized = ko.observable(false);
self.initialized = ko.computed(function () {
return self.customSettingsDataInitialized() && self.styleClassInitialized();
}, self);
Haal de beginwaarde voor de geselecteerde stijlklasse op door het volgende toe te voegen:
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);Werk de sjabloon bij met de geselecteerde styleClass-eigenschap. Wijzig deze code:
<p data-bind="attr: {id: 'titleId'}, text: titleText"></p>
Gebruik in plaats daarvan deze code:
<p data-bind="attr: {id: 'titleId'}, text: titleText, css: selectedStyleClass"></p>Pas wijzigingen in de geselecteerde styleClass-eigenschap toe op uw component. Wijzig deze code:
if (settings.property === 'customSettingsData') {
self.updateCustomSettingsData(settings.value);
}
Gebruik in plaats daarvan deze code:
if (settings.property === 'customSettingsData') {
self.updateCustomSettingsData(settings.value);
}
if (settings.property === 'styleClass') {
self.updateStyleClass(settings.value);
}Laat het formaat van het inline-frame meeschalen met de stijl. Wijzig deze code:
// 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();
Gebruik in plaats daarvan deze code:
// 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(); Sla uw bestanden op de server van uw Oracle Content Management instance op en synchroniseer ze.
Controleer de resultaten voor stap 14.
Vernieuw uw pagina op uw site, zodat wijzigingen in de component kunnen worden opgehaald met de sitebuilder.
Open de pagina in de bewerkmodus.
Sleep de component naar de pagina.
Open het paneel 'Instellingen' voor uw component.
Ga naar het tabblad 'Stijl'.
Schakel tussen de stijlen Gotisch en Normaal die in uw bestand design.json zijn gedefinieerd.
U ziet dat de tekengrootte in uw component wordt gewijzigd op basis van de CSS-klasse die voor elke selectie is toegepast.
Doorgaan naar Stap 15: Integratie met het gedrag van de opdrachten Ongedaan maken en Opnieuw van de pagina.