Krok 3: Kontrola štruktúry nastavení lokálneho komponentu

V tomto kroku skontrolujeme štruktúru nastavení zadaných pre lokálny komponent.

Podobne ako súbor render.js v adresári /assets je v rovnakom adresári aj vopred vytvorený súbor settings.html. Súbor settings.html vykreslí pre komponent všetky dáta vlastných nastavení. V predvolenej implementácii obsahujú dáta vlastných nastavení iba jednu vlastnosť imageWidth.

Ako skontrolovať štruktúru lokálneho komponentu:

1. Pomocou klienta služby Oracle Content Management pre synchronizáciu s počítačom vyhľadajte komponent a synchronizujte ho so systémom súborov.

   Ak nemáte klienta pre synchronizáciu s počítačom, komponent môžete vybrať na karte Komponenty vo webovom rozhraní služby Oracle Content Management a prejsť na nižšiu úroveň na zobrazenie súborov.

2. V zozname súborov pod komponentom uvidíte tieto súbory:

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

Otvorte súbor settings.html v adresári /assets a skontrolujte jeho obsah. Na rozdiel od súboru render.js používa súbor settings.html vložený rám na paneli Nastavenia v generátore lokalít. Z tohto dôvodu potrebuje aj prístup k podporným súborom, aby sa vo vloženom ráme správne vykreslil. Generátor lokalít je potrebný na spravovanie lokality, aby bolo možné izolovať z generátora lokalít všetky chyby kódu JavaScript. To je dôvod, prečo súborsettings.html používa vložený rám.

Toto sú hlavné oblasti súboru settings.html:

• Šablóna Knockout na vykreslenie panela Nastavenia.

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

• Obslužný program vlastného viazania na úpravu výšky vloženého rámu po vykreslení panela Nastavenia.

  ko.bindingHandlers.scsCompComponentImpl

• Funkcia Knockout ViewModel, ktorá sa použije v šablóne Knockout.

  SettingsViewModel

Toto sú hlavné prvky funkcie SettingsViewModel:

• Odbery životného cyklu komponentu.

• Inicializácia komponentu:

  • Zabezpečte, aby sa komponent nevykreslil, kým sa nevyvolajú všetky dáta. Toto je spracované použitím pozorovaných objektov Knockout observables.

    self.initialized = ko.observable(false);

  • Zabezpečte, aby nedošlo k pokusu o aktualizáciu dát, kým nie je všetko pripravené.

    self.saveData = false;

  • Získajte počiatočné hodnoty pre všetky požadované vlastnosti. Toto je spracované spätnými volaniami na vyvolanie dát.

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

• Uložte všetky zmeny vlastností vykonané v dátach vlastných nastavení.

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

Ak chcete pridať ďalšiu vlastnosť, ktorú chcete zaznamenať, je potrebné vykonať niekoľko krokov:

1. Aktualizujte používateľské rozhranie, aby zobrazovalo novú hodnotu.

2. Inicializujte zmenu aktuálnej hodnoty uloženej pre komponent.

3. Všetky zmeny hodnoty uložte späť do komponentu.

Ak chcete do vlastného komponentu pridať ďalšiu vlastnosť, vykonajte nasledujúce zmeny v súbore settings.html:

1. Pridajte ďalší pozorovaný objekt observable na spracovanie novej vlastnosti. Zmeňte tento kód:

   self.width = ko.observable();

   Namiesto toho použite kód:

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

2. Pri prvom zobrazení panela nastavení načítajte pre novú vlastnosť ľubovoľnú aktuálnu hodnotu. Zmeňte tento kód:

   self.width(data.width);

   Namiesto toho použite kód:

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

3. Uložte všetky zmeny vykonané v novej vlastnosti. Zmeňte tento kód:

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

   Namiesto toho použite kód:

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

4. Pridajte používateľské rozhranie na zobrazenie nového poľa. Zmeňte tento kód:

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

   Namiesto toho použite kód:

   <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. Synchronizujte alebo nahrajte súbor settings.html.

Keby ste ho spustili teraz, zobrazilo by sa pole. Veľkosť panela Nastavenia sa však nezmení automaticky. Keďže ste zväčšili veľkosť panela, novú veľkosť je potrebné nastaviť aj pre registračnú položku súboru components.json.

1. Stiahnite súbor appinfo.json, ktorý je na rovnakej úrovni ako adresár komponentu assets/, a aktualizujte veľkosť panela nastavení. Zmeňte tento kód:

   "settingsHeight": 90,

   Namiesto toho použite kód:

   "settingsHeight": 160,

2. Synchronizujte alebo nahrajte súbor appinfo.json.