Steg 14: Använd anpassade format när komponenten återges i en iframe

Komponenter som återges i en iframe har inte direktåtkomst till filen design.css. Istället finns det ett ytterligare steg för att hämta URL:en för design.css i komponenten och lägga till den på sidan. Du måste sedan uppdatera komponenten för att spegla det format som valts av användaren.

För att filen design.css ska kunna inkluderas och användas i komponenten krävs ändringar i filen render.html:

Leta reda på och inkludera URL:en till filen design.css
Hämta värdet för den valda formatklassen närhelst det ändras
Uppdatera mallen för att spegla vald styleClass
Spegla ändringar av den valda formatklassen i komponenten
Kontrollera att iframen ändrar storlek när formatet ändras

Här är de detaljerade instruktionerna för redigering av filen render.html:

Leta reda på och inkludera URL:en till filen design.css.

Lägg dynamiskt till filen design.css i sektionen <head> på sidan. När den har laddats anger du iframens höjd, eftersom den kan ha ändrats vid tillämpning av formaten.

Lägg till följande kod i objektet 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);
    }
});

Hämta värdet för den valda formatklassen närhelst det ändras.

Skapa ett observerbart element för att bevaka när värdet för egenskapen styleClass ändras:

self.selectedStyleClass = ko.observable();

Observera att vi inte kan återge förrän vi har formatklassen. Ändra den här koden:

self.customSettingsDataInitialized = ko.observable(false);
self.initialized = ko.computed(function () {
    return self.customSettingsDataInitialized();
}, self);

Använd den här koden istället:

self.customSettingsDataInitialized = ko.observable(false);
self.styleClassInitialized = ko.observable(false);
self.initialized = ko.computed(function () {
    return self.customSettingsDataInitialized() && self.styleClassInitialized();
}, self);

Hämta det ursprungliga värdet för den valda formatklassen genom att lägga till:

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);

Uppdatera mallen för att spegla styleClass. Ändra den här koden:

<p data-bind="attr: {id: 'titleId'}, text: titleText"></p>

Använd den här koden istället:

<p data-bind="attr: {id: 'titleId'}, text: titleText, css: selectedStyleClass"></p>

Spegla ändringar av den valda formatklassen i komponenten. Ändra den här koden:

if (settings.property === 'customSettingsData') {
    self.updateCustomSettingsData(settings.value);
}

Använd den här koden istället:

if (settings.property === 'customSettingsData') {
    self.updateCustomSettingsData(settings.value);
}
if (settings.property === 'styleClass') {
    self.updateStyleClass(settings.value);
}

Kontrollera att iframen ändrar storlek när formatet ändras. Ändra den här koden:

// 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();

Använd den här koden istället:

// 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();

Spara och synkronisera filerna till servern för instansen av Oracle Content Management.

Kontrollera resultaten för steg 14

Förnya sidan på webbplatsen så att webbplatsverktyget kan hämta ändringar av komponenten.
Ta sidan till redigeringsläge.
Dra och släpp komponenten på sidan.
Öppna panelen Inställningar mot komponenten.
Gå till fliken Format.
Växla mellan formaten Gotiska och Normal som definierats i filen design.json.

Lägg märke till att teckenstorleken i komponenten justeras för att spegla ändringarna när den växlar mellan den tillämpade CSS-klassen för varje urval.

Fortsätt till Steg 15: Integrering med sidans beteende för Ångra och Gör om.