Trinn 14: Bruke egendefinerte stiler når komponenten gjengis i en linjebundet ramme

Komponenter som er gjengitt i en linjebundet ramme, har ikke direkte tilgang til filen design.css. I stedet finnes det et tilleggstrinn som henter URL-adressen for design.css i komponenten og legger den til på siden. Deretter må du oppdatere komponenten slik at den gjenspeiler den brukervalgte stilen.

Hvis du vil inkludere og bruke filen design.css i komponenten, må det gjøres endringer i filen render.html:
  1. Finn URL-adressen, og inkluder den i filen design.css

  2. Hent verdien for den valgte stilklassen hver gang den endres

  3. Oppdater malen slik at den gjenspeiler styleClass som er valgt

  4. Gjenspeil endringer i den valgte stilklassen i komponenten din

  5. Pass på at størrelsen på den linjebundne rammen blir endret når stilen endres

Her er detaljerte instruksjoner for redigering av filen render.html:

  1. Finn URL-adressen, og inkluder den i filen design.css.

    Legg til filen design.css dynamisk i delen <head> på siden. Når den er lastet, angir du høyden på den linjebundne rammen fordi den kan ha blitt endret da stilene ble tatt i bruk.

    Legg til følgende kode 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);
        }
    });
  2. Hent verdien for den valgte stilklassen hver gang den endres.

    Opprett et observerbart objekt som kan spores når verdien for egenskapen styleClass endres:

    self.selectedStyleClass = ko.observable();

    Vær oppmerksom på at det ikke er mulig å gjengi noe før stilklassen er på plass. Slik endrer du denne koden:

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

    Bruk denne koden i stedet:

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

    Hent den opprinnelige verdien for den valgte stilklassen ved å legge til:

    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. Oppdater malen slik at den gjenspeiler styleClass. Slik endrer du denne koden:

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

    Bruk denne koden i stedet:

    <p data-bind="attr: {id: 'titleId'}, text: titleText, css: selectedStyleClass"></p>
  4. Gjenspeil endringer i den valgte stilklassen i komponenten din. Slik endrer du denne koden:

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

    Bruk denne koden i stedet:

    if (settings.property === 'customSettingsData') {
        self.updateCustomSettingsData(settings.value);
    }
    if (settings.property === 'styleClass') {
        self.updateStyleClass(settings.value);
    }
  5. Pass på at størrelsen på den linjebundne rammen blir endret hver gang stilen endres. Slik endrer du denne 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();

    Bruk denne koden i stedet:

    // 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. Lagre og synkroniser filene på tjeneren for Oracle Content Management-forekomsten.

Kontrollere resultatene for trinn 14

  1. Oppfrisk siden på området ditt slik at områdebyggeren kan plukke opp endringer av komponenten.

  2. Sett siden i redigeringsmodus.

  3. Dra og slipp komponenten din på siden.

  4. Åpne ruten Innstillinger for komponenten.

  5. Gå til fanen Stil.

  6. Bytt mellom stilene Gotisk og Vanlig, som er definert i filen design.json.

    Legg merke til at skriftstørrelsen i komponenten blir justert slik at endringene gjenspeiles, når den veksler mellom den brukte CSS-klassen for hvert utvalg.

Gå videre til Trinn 15: Integrering med Angre- og Gjør om-atferden for sider.