Vaihe 3: paikallisten komponenttiasetusten rakenteen tarkistus

Tässä vaiheessa tarkistetaan paikalliselle komponentille määritettyjen asetusten rakenne.

Samaan tapaan kuin /assets-hakemistossa on render.js-tiedosto, samassa hakemistossa on myös settings.html-tiedosto. settings.html-tiedosto muodostaa kaikki komponenttisi mukautetut asetustiedot. Oletustoteutuksessa mukautetuissa asetustiedoissa on yksittäinen ominaisuus imageWidth.

Paikallisen komponentin rakenteen tarkistus:

1. Etsi komponenttisi Oracle Content Management -palvelun työpöydän synkronointisovelluksessa ja synkronoi komponentti tiedostojärjestelmän kanssa.

   Jos sinulla ei ole työaseman synkronointisovellusta, voit valita komponentin Oracle Content Management -palvelun web-käyttöliittymän Komponentit-välilehdessä ja porautua katsomaan tiedostoja.

2. Kun avaat komponenttiin kuuluvien tiedostojen listan, näet seuraavat tiedostot :

   assets
       render.js
       settings.html
   appinfo.json
   _folder_icon.jpg

Avaa settings.html-tiedosto /assets-hakemistossa ja tarkista sisältö. Toisin kuin render.js-tiedosto, settings.html-tiedosto käyttää sisäistä kehystä sivustonluontiohjelman Asetukset-paneelissa. Sen vuoksi sen on myös päästävä tukitiedostoihin, jotta sivusto voidaan muodostaa oikein sisäisen kehyksen sisällä. Sivustonluontiohjelmaa tarvitaan hallitsemaan sivua siten, että kaikki JacaScript-koodin virheet voidaan erottaa sivustonluontiohjelmasta. Tämän vuoksi settings.html-tiedostossa käytetään sisäistä kehystä.

settings.html-tiedoston pääalueet:

• Knockout-mallipohja Asetukset-paneelin muodostusta varten

  <!-- ko if: initialized() -->
  <div class="scs-component-settings">
    <div>
      <!-- Width -->
      <label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label>
      <input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box">
    </div>
  </div>
  <div data-bind="setSettingsHeight: true"></div>
  <!-- /ko -->

• Mukautettu sidosten käsittelyohjelma, jolla säädetään sisäisen kehyksen korkeutta, kun Asetukset-paneeli on muodostettu

  ko.bindingHandlers.scsCompComponentImpl

• Knockout-mallipohjassa käytettävä Knockout ViewModel.

  SettingsViewModel

SettingsViewModel-kohteen pääalueet:

• Komponentin elinkaaren tilaukset

• Komponentin alustus:

  • Varmista, ettei komponentti muodosta sisältöä, ennen kuin kaikki tiedot on haettu. Tämä hoidetaan havaittavilla Knockout-parametreilla.

    self.initialized = ko.observable(false);

  • Varmista, ettei tietoja yritetä päivittää, ennen kuin kaikki on valmista.

    self.saveData = false;

  • Hae kaikkien pakollisten ominaisuuksien alkuarvot. Se tehdään vastakutsuilla, joilla haetaan tiedot.

        SitesSDK.getProperty('customSettingsData', function (data) {
          //update observable
          self.width(data.width);
    
          // note that viewModel is initialized and can start saving data
          self.initialized(true);
          self.saveData = true;
        });

• Tallenna kaikki mukautettujen asetustietojen ominaisuuksien muutokset.

      self.save = ko.computed(function () {
        var saveconfig = {
          'width': isNaN(self.width()) ? self.width() : self.width() + 'px'
        };
  
        // save data in page
        if (self.saveData) {
          SitesSDK.setProperty('customSettingsData', saveconfig);
        }
      }, self);

Jos haluat lisätä toisen tallennettavan ominaisuuden, tarvitaan useita vaiheita:

1. Päivitä käyttöliittymä siten, että siinä näytetään uusi arvo.

2. Alusta arvo nykyiseen arvoon, joka on tallennettu komponentissa.

3. Tallenna kaikki arvoon tekemäsi muutokset komponenttiin.

Jos haluat lisätä toisen ominaisuuden mukautettuun komponenttiin, tee nämä muutokset settings.html-tiedostoon:

1. Lisää toinen havaittava parametri uuden ominaisuuden käsittelyä varten. Vaihda tämä koodi:

   self.width = ko.observable();

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

   self.width = ko.observable();
   self.imageBannerText = ko.observable();

2. Hae uuden ominaisuuden nykyiset arvot, kun Asetukset-paneeli näytetään ensimmäisen kerran. Vaihda tämä koodi:

   self.width(data.width);

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

   self.width(data.width);
   self.imageBannerText(data.imageBannerText);

3. Tallenna kaikki tähän uuteen ominaisuuteen tehdyt muutokset. Vaihda tämä koodi:

       'width': isNaN(self.width()) ? self.width() : self.width() + 'px'

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

   'width': isNaN(self.width()) ? self.width() : self.width() + 'px',
   'imageBannerText': self.imageBannerText()

4. Lisää käyttöliittymä uuden kentän näyttämistä varten. Vaihda tämä koodi:

   <label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label>
   <input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box">

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

   <label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label>
   <input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box">
   
   <label id="imageBannerTextLabel" for="imageBannerText" class="settings-heading" data-bind="text: 'Image Banner'"></label>
   <input id="imageBannerText" data-bind="value: imageBannerText" placeholder="Text to display above an image" class="settings-text-box">

5. Synkronoi tai lataa settings.html-tiedosto.

Jos ajaisit tämän nyt, kenttä tulisi näkyviin. Asetukset-paneelin koko ei kuitenkaan muutu automaattisesti. Koska olet suurentanut paneelin kokoa, sinun on myös päivitettävä components.json-rekisteröintimerkintä uuteen kokoon.

1. Nouda appinfo.json-tiedosto, joka on samalla tasolla kuin komponenttisi assets/-hakemisto, ja päivitä Asetukset-paneelin koko. Vaihda tämä koodi:

   "settingsHeight": 90,

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

   "settingsHeight": 160,

2. Synkronoi tai päivitä appinfo.json-tiedosto.