Vaihe 14: mukautettujen tyylien käyttö, kun komponentti muodostetaan sisäisessä kehyksessä

Sisäisessä kehyksessä muodostetut komponentit eivät voi käyttää design.css-tiedostoa suoraan. Sen sijaan on olemassa lisävaihe, jolla voit hakea design.css-tiedoston URL-osoitteen komponenttiisi ja lisätä sen sivulle. Sen jälkeen sinun on päivitettävä komponentti vastaamaan käyttäjän valitsemaa tyyliä.

Jos haluat lisätä design.css-tiedoston komponenttiisi ja käyttää sitä, render.html-tiedostoon on tehtävä muutoksia:
  1. Etsi ja lisää design.css-tiedoston URL-osoite

  2. Hae valitun tyyliluokan arvo aina, kun sitä muutetaan

  3. Päivitä mallipohja vastaamaan valittua styleClass-ominaisuutta

  4. Toteuta muutokset komponenttisi valitussa tyyliluokassa

  5. Varmista, että sisäisen kehyksen koko muuttuu, kun tyyliä muutetaan

Tässä on yksityiskohtaiset ohjeet render.html-tiedoston muokkaamiseen:

  1. Etsi ja lisää design.css-tiedoston URL-osoite.

    Lisää design.css-tiedosto dynaamisesti sivun <head>-osaan. Määritä sisäisen kehyksen korkeus uudelleen latauksen jälkeen, koska se on saattanut muuttua tyylien käyttämisen myötä.

    Lisää seuraava koodi viewModel-objektiin:

    // 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);
        }
    });
  2. Hae valitun tyyliluokan arvo aina, kun sitä muutetaan.

    Luo havaittava parametri, jolla seurataan, milloin styleClass-ominaisuuden arvo muuttuu:

    self.selectedStyleClass = ko.observable();

    Huomaa, että muodostus ei onnistu ilman tyyliluokkaa. Vaihda tämä koodi:

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

    Käytä sen sijaan tätä koodia:

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

    Hae valitun tyyliluokan alkuarvo lisäämällä seuraava:

    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);
  3. Päivitä mallipohja vastaamaan styleClass-ominaisuutta. Vaihda tämä koodi:

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

    Käytä sen sijaan tätä koodia:

    <p data-bind="attr: {id: 'titleId'}, text: titleText, css: selectedStyleClass"></p>
  4. Toteuta muutokset komponenttisi valitussa tyyliluokassa. Vaihda tämä koodi:

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

    Käytä sen sijaan tätä koodia:

    if (settings.property === 'customSettingsData') {
        self.updateCustomSettingsData(settings.value);
    }
    if (settings.property === 'styleClass') {
        self.updateStyleClass(settings.value);
    }
  5. Varmista, että sisäisen kehyksen koko muuttuu, kun tyyliä muutetaan. Vaihda tämä koodi:

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

    Käytä sen sijaan tätä koodia:

    // 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();  
  6. Tallenna ja synkronoi tiedosto Oracle Content Management -instanssin palvelimeen.

Tarkista vaiheen 14 tulokset

  1. Päivitä sivustossasi oleva sivu, jotta sivustonluontiohjelma voi poimia komponenttiin tehdyt muutokset.

  2. Aseta sivu muokkaustilaan.

  3. Vedä ja pudota komponentti sivulle.

  4. Avaa komponentin Asetukset-paneeli.

  5. Siirry Tyyli-välilehteen.

  6. Vaihda design.json-tiedostossa määritettyjen Gothic- ja Plain-tyylien välillä.

    Huomaat, että komponentin fonttikoko muuttuu, kun käytettyä CSS-luokkaa vaihdetaan.

Jatka kohtaan Vaihe 15: kumoamisen ja uudelleentekemisen integrointi.