Krok 3: Seznámení se strukturou nastavení místní komponenty

V tomto kroku se seznámíme se strukturou nastavení zadaných pro místní komponentu.

Podobně jako soubor render.js se v adresáři /assets nachází také předem vytvořený soubor settings.html. Soubor settings.html generuje veškerá data vlastních nastavení pro vaši komponentu. Ve výchozí implementaci zahrnují data vlastních nastavení jedinou vlastnost, a to imageWidth.

Postup kontroly struktury místní komponenty:

1. Pomocí klientu pro synchronizaci stolního počítače se službou Oracle Content Management vyhledejte komponentu a synchronizujte ji se souborovým systémem.

   Pokud nemáte klient pro synchronizaci stolního počítače, můžete vybrat komponentu na kartě Komponenty služby Oracle Content Management a poté přechodem k podrobnostem zobrazit soubory.

2. V seznamu souborů pro komponentu budou uvedeny tyto soubory:

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

Otevřete soubor settings.html v adresáři /assets a zkontrolujte obsah. Na rozdíl od souboru render.js používá soubor settings.html vložený rámec na panelu Nastavení v nástroji Site Builder. Z tohoto důvodu potřebuje přístup k podpůrným souborům, aby se mohl správně generovat ve vloženém rámci. Nástroj Site Builder je vyžadován ke správě webu, takže veškeré chyby ve vašem javascriptovém kódu lze od nástroje Site Builder izolovat, a právě z tohoto důvodu soubor settings.html používá vložený rámec.

Mezi hlavní oblasti souboru settings.html patří:

• Šablona Knockout pro generování panelu Nastavení.

  <!-- 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 pro vlastní vazby určený k úpravě výšky vloženého rámce po generování panelu Nastavení.

  ko.bindingHandlers.scsCompComponentImpl

• Knockout ViewModel pro použití se šablonou Knockout.

  SettingsViewModel

Mezi hlavní prvky modelu SettingsViewModel patří:

• Subskripce pro celý životní cyklus komponenty.

• Inicializace komponenty:

  • Zajistěte, aby nedošlo ke generování komponenty dříve, než budou načtena všechna data. Splnění tohoto požadavku je zajištěno prostřednictvím objektů typu Observable knihovny Knockout.

    self.initialized = ko.observable(false);

  • Zajistěte, abychom se nepokusili aktualizovat data, dokud nebudeme připraveni.

    self.saveData = false;

  • Získejte počáteční hodnoty pro všechny požadované vlastnosti. K tomu se používají zpětná volání určená k načtení dat.

        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šechny změny vlastností do dat 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);

K přidání další vlastnosti, kterou chcete zachytit, je nutné provést několik kroků:

1. Aktualizujte uživatelské rozhraní, aby zobrazovalo novou hodnotu.

2. Inicializujte hodnotu na aktuální hodnotu uloženou pro komponentu.

3. Uložte všechny změny hodnoty zpět do komponenty.

Chcete-li do své vlastní komponenty přidat další vlastnost, proveďte v souboru settings.html tyto změny:

1. Přidejte další objekt typu Observable pro zpracování nové vlastnosti. Změňte tento kód:

   self.width = ko.observable();

   Místo něj použijte tento kód:

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

2. Získejte libovolnou aktuální hodnotu nové vlastnosti pro první zobrazení panelu nastavení. Změňte tento kód:

   self.width(data.width);

   Místo něj použijte tento kód:

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

3. Uložte veškeré změny této nové vlastnosti. Změňte tento kód:

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

   Místo něj použijte tento kód:

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

4. Přidejte uživatelské rozhraní pro zobrazení nového pole. Změň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">

   Místo něj použijte 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">
   
   <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 nebo odešlete soubor settings.html.

Pokud byste nyní tuto komponentu spustili, pole by se zobrazilo. Avšak velikost panelu Nastavení se nemění automaticky. Vzhledem k tomu, že jste panel zvětšili, musíte také aktualizovat položku registrace v souboru components.json na novou velikost.

1. Stáhněte soubor appinfo.json, který se nachází ve stejné úrovni jako adresář assets/ pro komponentu, a aktualizujte velikost panelu nastavení. Změňte tento kód:

   "settingsHeight": 90,

   Místo něj použijte tento kód:

   "settingsHeight": 160,

2. Synchronizujte nebo odešlete soubor appinfo.json.