Krok 14: Použití vlastních stylů pro komponentu generovanou ve vloženém rámci

Komponenty generované ve vloženém rámci nemají přímý přístup k souboru design.css. Místo toho je k dispozici další krok, který umožňuje získat adresu URL pro soubor design.css ve vaší komponentě a přidat ji na stránku. Poté musíte komponentu aktualizovat, aby se uplatnil uživatelem vybraný styl.

K zahrnutí souboru design.css do vaší komponenty a k jeho použití je nutné provést změny v souboru render.html:

Vyhledat a zahrnout adresu URL souboru design.css
Získat hodnotu vybrané třídy stylu, kdykoli se změní
Aktualizovat šablonu tak, aby odpovídala vybrané třídě styleClass
Aplikovat změny na vybranou třídu stylu ve vaší komponentě
Zajistit, aby se při změně stylu změnila i velikost vloženého rámce

Zde jsou uvedeny podrobné pokyny pro úpravu souboru render.html:

Vyhledejte a zahrňte adresu URL souboru design.css.

Přidejte soubor design.css dynamicky do sekce <head> stránky. Po načtení nastavte výšku vloženého rámce, protože se mohla změnit v důsledku použití stylů.

Přidejte následující kód do objektu 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);
    }
});

Získejte hodnotu vybrané třídy stylu, kdykoli se změní.

Vytvořte objekt typu Observable, který vám umožní sledovat, kdy se změní hodnota vlastnosti styleClass:

self.selectedStyleClass = ko.observable();

Uvědomte si, že generovat můžeme až poté, co budeme mít k dispozici třídu stylu. Změňte tento kód:

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

Místo něj použijte tento kód:

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

Získejte počáteční hodnotu pro vybranou třídu stylu přidání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 šablonu tak, aby odpovídala třídě styleClass. Změňte tento kód:

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

Místo něj použijte tento kód:

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

Aplikujte změny na vybranou třídu stylu ve vaší komponentě. Změňte tento kód:

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

Místo něj použijte tento kód:

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

Zajistěte, aby se při změně stylu změnila i velikost vloženého rámce. Změň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();

Místo něj použijte 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(),
      selectedStyleClass = viewModel.selectedStyleClass();

Uložte soubory a synchronizujte je se serverem instance služby Oracle Content Management.

Kontrola výsledků pro krok 14

Aktualizujte svou stránku na webu, aby nástroj Site Builder mohl provést změny komponenty.
Uveďte stránku do režimu úprav.
Přetáhněte svou komponentu na stránku.
Vyvolejte panel Nastavení pro svou komponentu.
Přejděte na kartu Styl.
Přepněte mezi styly Gotický a Prostý definovanými v souboru design.json.

Zjistíte, že se velikost písma v komponentě přizpůsobí tak, aby odpovídala změnám při přepínání mezi použitými třídami CSS pro každý výběr.

Pokračujte částí Krok 15: Integrace s chováním funkcí Vrátit zpět a Znovu stránky.