Pasul 3: Verificarea structurii setărilor de componente locale

La acest pas verificăm structura setărilor specificate pentru o componentă locală.

Similar cu fişierul render.js din directorul /assets, există un fişier settings.html creat anterior în acelaşi director. Fişierul settings.html randează orice date de setări personalizate pentru componenta dvs. În implementarea prestabilită, există o singură proprietate imageWidth în datele de setări personalizate.

Pentru a verifica structura componentei dvs. locale:

1. Utilizând clientul de sincronizare Oracle Content Management pentru desktop, localizaţi componenta şi sincronizaţi-o cu sistemul de fişiere.

   Dacă nu aveţi clientul de sincronizare pentru desktop, puteţi selecta componenta din fila Componente a interfeţei web Oracle Content Management şi detaliaţi pentru a vedea fişierele.

2. Dacă listaţi fişierele din cadrul componentei, veţi vedea aceste fişiere:

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

Deschideţi fişierul settings.html din directorul /assets şi verificaţi conţinutul. Spre deosebire de fişierul render.js, fişierul settings.html utilizează un cadru inline în panoul Setări din Generatorul de site-uri, motiv pentru care are nevoie de acces şi la fişierele auxiliare pentru a se randa corect în cadrul inline. Este necesar Generatorul de site-uri pentru a administra site-ul dvs., astfel ca orice erori în codul dvs. JavaScript să poată fi izolate de generatorul Site Builder, motiv pentru care fişierul settings.html utilizează un cadru inline.

Acestea sunt principalele zone ale fişierului settings.html:

• Şablonul Knockout, pentru randarea panoului Setări.

  <!-- 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 -->

• Rutina de legare personalizată, pentru a regla înălţimea cadrului inline după randarea panoului Setări.

  ko.bindingHandlers.scsCompComponentImpl

• O funcţie Knockout ViewModel care să se aplice la şablonul Knockout.

  SettingsViewModel

Acestea sunt elementele principale ale modelului SettingsViewModel:

• Abonamente la ciclul de viaţă al componentelor.

• Iniţializarea componentelor:

  • Asiguraţi-vă că nu se randează componenta până când nu au fost preluate toate datele. Acest lucru este tratat prin intermediul colecţiilor observable din Knockout.

    self.initialized = ko.observable(false);

  • Asiguraţi-vă că nu încercăm să actualizăm datele până când nu suntem pregătiţi.

    self.saveData = false;

  • Obţineţi valorile iniţiale pentru toate proprietăţile necesare. Acest lucru este gestionat de rutine callback, pentru a prelua datele respective.

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

• Salvaţi orice modificări ale proprietăţilor în datele setărilor personalizate.

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

Pentru a adăuga o altă proprietate pe care doriţi să o captaţi, sunt necesari mai mulţi paşi:

1. Actualizaţi interfaţa cu utilizatorul pentru a afişa noua valoare.

2. Iniţializaţi valoarea, la valoarea curentă stocată pentru componentă.

3. Salvaţi orice modificări aduse valorii, înapoi la componentă.

Pentru a adăuga o altă proprietate la componenta dvs. personalizată, efectuaţi aceste modificări în fişierul settings.html:

1. Adăugaţi un alt element observable pentru a administra noua proprietate. Modificaţi acest cod:

   self.width = ko.observable();

   Utilizaţi în schimb acest cod:

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

2. Obţineţi orice valoare curentă pentru noua proprietate, atunci când este afişat pentru prima dată panoul setărilor. Modificaţi acest cod:

   self.width(data.width);

   Utilizaţi în schimb acest cod:

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

3. Salvaţi orice modificare adusă acestei proprietăţi noi. Modificaţi acest cod:

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

   Utilizaţi în schimb acest cod:

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

4. Adăugaţi o interfaţă cu utilizatorul pentru a afişa noul câmp. Modificaţi acest cod:

   <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">

   Utilizaţi în schimb acest cod:

   <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. Sincronizaţi sau încărcaţi fişierul settings.html.

Dacă l-aţi rula acum, s-ar afişa câmpul. Totuşi, dimensiunea panoului Setări nu se schimbă în mod automat. Deoarece aţi mărit dimensiunea panoului, este necesar să actualizaţi la noua dimensiune şi intrarea de înregistrare components.json.

1. Descărcaţi fişierul appinfo.json, care se află la acelaşi nivel cu directorul assets/ pentru componenta dvs. şi actualizaţi dimensiunea panoului setărilor. Modificaţi acest cod:

   "settingsHeight": 90,

   Utilizaţi în schimb acest cod:

   "settingsHeight": 160,

2. Sincronizaţi sau încărcaţi fişierul appinfo.json.