Krok 14: Použitie vlastných štýlov, keď sa komponent vykresľuje vo vloženom ráme

Komponenty vykreslené vo vloženom ráme nemajú priamy prístup k súboru design.css. Namiesto toho je tu ďalší krok na získanie adresy URL pre súbor design.css vo vašom komponente a pridanie tohto súboru na stránku. Potom bude potrebné komponent aktualizovať, aby sa prejavil štýl vybraný používateľom.

Zahrnutie súboru design.css do komponentu a jeho použitie si vyžaduje zmeny v súbore render.html:

Vyhľadajte adresu URL a vložte ju do súboru design.css.
Vždy, keď sa zmení výber triedy štýlu, načítajte hodnotu triedy.
Aktualizujte šablónu, aby sa v nej prejavila vybraná trieda štýlu styleClass.
Zmeny vo vybranej triede štýlu implementujte do komponentu.
Zabezpečte, aby sa pri zmene štýlu zmenila aj veľkosť vloženého rámu.

Tu sú podrobné pokyny na úpravu súboru render.html:

Vyhľadajte adresu URL a vložte ju do súboru design.css.

Súbor design.css dynamicky pridajte do sekcie <head> na stránke. Po jeho načítaní nastavte výšku vloženého rámu, pretože po použití štýlov sa mohol zmeniť.

Do objektu viewModel pridajte nasledujúci kód:

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

Vždy, keď sa zmení výber triedy štýlu, načítajte hodnotu triedy.

Vyberte pozorovaný objekt observable, ktorý bude sledovať, keď sa zmení hodnota vlastnosti styleClass:

self.selectedStyleClass = ko.observable();

Upozorňujeme, že vykreslenie nie je možné bez nastavenia triedy štýlu. Zmeňte tento kód:

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

Namiesto toho použite kód:

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

Načítajte počiatočnú hodnotu pre vybranú triedu štýlu pridaním kódu:

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

Aktualizujte šablónu, aby sa v nej prejavila trieda štýlu styleClass. Zmeňte tento kód:

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

Namiesto toho použite kód:

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

Zmeny vo vybranej triede štýlu implementujte do komponentu. Zmeňte tento kód:

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

Namiesto toho použite kód:

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

Zabezpečte, aby sa pri zmene štýlu zmenila aj veľkosť vloženého rámu. Zmeňte tento kód:

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

Namiesto toho použite kód:

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

Súbory uložte a synchronizujte na serveri inštancie Oracle Content Management.

Kontrola výsledkov pre krok 14

Obnovte stránku na svojej lokalite, aby generátor lokalít mohol vybrať zmeny komponentu.
Otvorte stránku v režime úprav.
Myšou presuňte komponent na stránku.
Otvorte panel Nastavenia pre váš komponent.
Prejdite na kartu Štýl.
Prepnite medzi štýlmi Gothic a Plain, ktoré sú definované v súbore design.json.

Uvidíte, že veľkosť písma v rámci komponentu sa upraví tak, aby odrážala zmeny, ku ktorým dochádza pri prepínaní tried CSS pri každom výbere.

Pokračujte na Krok 15: Integrácia so správaním odvolania a opakovania na stránke.