In einem Inlineframe gerenderte Komponenten haben keinen direkten Zugriff auf die Datei design.css. Stattdessen wird die URL für die Datei design.css in der Komponente in einem zusätzlichen Schritt abgerufen und der Seite hinzugefügt. Dann müssen Sie die Komponente aktualisieren, um den vom Benutzer ausgewählten Stil widerzuspiegeln.
design.css in die Komponente aufzunehmen und dort zu verwenden, müssen Sie Änderungen in der Datei render.html vornehmen:
Suchen Sie die URL zur Datei design.css, und nehmen Sie sie auf.
Rufen Sie den Wert der ausgewählten Stilklasse bei jeder Änderung ab.
Aktualisieren Sie die Vorlage, um die ausgewählte styleClass widerzuspiegeln.
Spiegeln Sie Änderungen an der ausgewählten Stilklasse in der Komponente wider.
Stellen Sie sicher, dass die Größe des Inlineframes bei Stiländerungen geändert wird.
Ausführliche Anweisungen zum Bearbeiten der Datei render.html:
Suchen Sie die URL zur Datei design.css, und nehmen Sie sie auf.
Fügen Sie die Datei design.css dynamisch zum <head>-Abschnitt der Seite hinzu. Nachdem der Inlineframe geladen wurde, legen Sie seine Höhe fest, da diese möglicherweise durch Anwenden der Stile geändert wurde.
Fügen Sie den folgenden Code im viewModel-Objekt hinzu:
// 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);
}
});Rufen Sie den Wert der ausgewählten Stilklasse bei jeder Änderung ab.
Erstellen Sie ein Observable, das Änderungen am Wert der styleClass-Eigenschaft verfolgt:
self.selectedStyleClass = ko.observable();
Beachten Sie, dass das Rendering erst nach Abruf der Stilklasse möglich ist. Ändern Sie diesen Code:
self.customSettingsDataInitialized = ko.observable(false);
self.initialized = ko.computed(function () {
return self.customSettingsDataInitialized();
}, self);
Verwenden Sie stattdessen diesen Code:
self.customSettingsDataInitialized = ko.observable(false);
self.styleClassInitialized = ko.observable(false);
self.initialized = ko.computed(function () {
return self.customSettingsDataInitialized() && self.styleClassInitialized();
}, self);
Rufen Sie den anfänglichen Wert für die ausgewählte Stilklasse ab, indem Sie Folgendes hinzufügen:
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);Aktualisieren Sie die Vorlage, um die styleClass widerzuspiegeln. Ändern Sie diesen Code:
<p data-bind="attr: {id: 'titleId'}, text: titleText"></p>
Verwenden Sie stattdessen diesen Code:
<p data-bind="attr: {id: 'titleId'}, text: titleText, css: selectedStyleClass"></p>Spiegeln Sie Änderungen an der ausgewählten Stilklasse in der Komponente wider. Ändern Sie diesen Code:
if (settings.property === 'customSettingsData') {
self.updateCustomSettingsData(settings.value);
}
Verwenden Sie stattdessen diesen Code:
if (settings.property === 'customSettingsData') {
self.updateCustomSettingsData(settings.value);
}
if (settings.property === 'styleClass') {
self.updateStyleClass(settings.value);
}Stellen Sie sicher, dass die Größe des Inlineframes bei Stiländerungen geändert wird. Ändern Sie diesen 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();
Verwenden Sie stattdessen diesen 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(); Speichern Sie die Dateien, und synchronisieren Sie sie mit dem Oracle Content Management-Instanzserver.
Ergebnisse für Schritt 14 prüfen
Aktualisieren Sie die Seite in der Site, damit Sitebuilder Änderungen an der Komponente abrufen kann.
Öffnen Sie die Seite im Bearbeitungsmodus.
Ziehen Sie die Komponente per Drag-and-Drop auf die Seite.
Öffnen Sie den Einstellungsbereich für die Komponente.
Gehen Sie zur Registerkarte "Stil".
Wechseln Sie zwischen den in der Datei design.json definierten Stilen Gothic und Plain.
Sie werden sehen, dass sich der Schriftgrad in der Komponente beim Wechsel der angewendeten CSS-Klasse für jede Auswahl ändert.
Weiter mit Schritt 15: Integration mit dem Undo- und Redo-Verhalten der Seite.