Les composants affichés dans un cadre incorporé ne disposent pas d'un accès direct au fichier design.css. A la place, vous devez effectuer une étape supplémentaire pour obtenir l'URL du fichier design.css dans votre composant et l'ajouter à la page. Vous devez ensuite mettre à jour votre composant pour refléter le style sélectionné par l'utilisateur.
design.css dans votre composant, vous devez apporter des modifications au fichier render.html :
Recherchez et incluez l'URL du fichier design.css.
Obtenez la valeur de la classe de style sélectionnée chaque fois qu'elle change.
Mettez à jour le modèle pour refléter la valeur styleClass sélectionnée.
Reportez les modifications apportées à la classe de style sélectionnée dans votre composant.
Vérifiez que le cadre incorporé est redimensionné lorsque le style est modifié.
Voici des instructions détaillées pour modifier le fichier render.html :
Recherchez et incluez l'URL du fichier design.css.
Ajoutez de façon dynamique le fichier design.css à la section <head> de la page. Une fois le chargement terminé, définissez la hauteur du cadre incorporé car celle-ci peut être modifiée lors de l'application des styles.
Ajoutez le code suivant dans l'objet 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);
}
});Obtenez la valeur de la classe de style sélectionnée chaque fois qu'elle change.
Créez un élément observable pour suivre les modifications de la valeur de propriété styleClass :
self.selectedStyleClass = ko.observable();
L'affichage est impossible sans la classe de style. Remplacez ce code :
self.customSettingsDataInitialized = ko.observable(false);
self.initialized = ko.computed(function () {
return self.customSettingsDataInitialized();
}, self);
Par celui-ci :
self.customSettingsDataInitialized = ko.observable(false);
self.styleClassInitialized = ko.observable(false);
self.initialized = ko.computed(function () {
return self.customSettingsDataInitialized() && self.styleClassInitialized();
}, self);
Obtenez la valeur initiale de la classe de style sélectionnée en ajoutant ce qui suit :
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);Mettez à jour le modèle pour refléter la valeur styleClass sélectionnée. Remplacez ce code :
<p data-bind="attr: {id: 'titleId'}, text: titleText"></p>
Par celui-ci :
<p data-bind="attr: {id: 'titleId'}, text: titleText, css: selectedStyleClass"></p>Reportez les modifications apportées à la classe de style sélectionnée dans votre composant. Remplacez ce code :
if (settings.property === 'customSettingsData') {
self.updateCustomSettingsData(settings.value);
}
Par celui-ci :
if (settings.property === 'customSettingsData') {
self.updateCustomSettingsData(settings.value);
}
if (settings.property === 'styleClass') {
self.updateStyleClass(settings.value);
}Vérifiez que le cadre incorporé est redimensionné lorsque le style est modifié. Remplacez ce 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();
Par celui-ci :
// 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(); Enregistrez vos fichiers et synchronisez-les avec l'instance de serveur Oracle Content Management.
Vérification des résultats de l'étape 14
Actualisez la page de votre site pour que le générateur de site puisse récupérer les modifications apportées au composant.
Passez la page en mode de modification.
Faites glisser le composant vers la page.
Affichez le panneau des paramètres pour votre composant.
Accédez à l'onglet Style.
Basculez entre les styles Gothique et Simple définis dans votre fichier design.json.
Vous pouvez observer que la taille de la police dans votre composant est modifiée en réponse au basculement entre les classes CSS appliquées pour chaque sélection.
Passez à Etape 15 : intégration au comportement d'annulation et de rétablissement de la page.