3. lépés: A helyi összetevő beállítási struktúrájának áttekintése

Ebben a lépésben a helyi összetevőhöz megadott beállítások struktúráját tekintjük át.

Az /assets könyvtárban lévő render.js fájlhoz hasonlóan az előre létrehozott settings.html fájl is megtalálható ebben a könyvtárban. A settings.html fájl az egyéni beállítások adatait jeleníti meg összetevőjénél. Az alapértelmezés szerinti megvalósításban az egyetlen imageWidth tulajdonság szerepel a beállítások egyéni adatai között.

A helyi összetevő struktúrájának áttekintése:

1. Az Oracle Content Management asztali szinkronizáló ügyfélprogramjával keresse meg összetevőjét, és szinkronizálja azt a fájlrendszerrel.

   Ha nem rendelkezik az asztali szinkronizáló ügyfélprogrammal, az összetevőt kijelölheti az Oracle Content Management webes kezelőfelületének Összetevők lapján, majd részletezéssel megtekintheti a fájlokat.

2. Amikor listázza az összetevőhöz tartozó fájlokat, a következő fájlok jelennek meg:

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

Nyissa meg a settings.html fájlt az /assets könyvtárból, és tekintse át tartalmát. A render.js fájltól eltérően a settings.html fájl beágyazott keretet használ a Site Builder Beállítások paneljén, ezért a beágyazott keretben való megfelelő megjelenítéshez a támogató fájlok elérése is szükséges. A Site Builder szerkesztőnek kell kezelnie webhelyét, ezért a JavaScript kód esetleges hibáit el kell különíteni a Site Builder szerkesztőtől, és ez az oka, amiért a settings.html fájl beágyazott keretet használ.

A settings.html fájl főbb területei a következők:

• Knockout sablon a Beállítások panel megjelenítéséhez.

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

• Egyéni kötéskezelő a beágyazott keret magasságának beállításához a Beállítások panel megjelenítése után.

  ko.bindingHandlers.scsCompComponentImpl

• Knockout ViewModel a Knockout sablonra való alkalmazáshoz.

  SettingsViewModel

A SettingsViewModel alapvető elemei a következők:

• Előfizetések összetevő életciklusára.

• Összetevő inicializálása:

  • Biztosítani kell, hogy az összes adat behívásáig az összetevő ne indítson megjelenítést. Ennek kezelése Knockout observable (megfigyelhető) elemeken keresztül történik.

    self.initialized = ko.observable(false);

  • Biztos lehet benne, hogy nem kíséreljük meg az adatok módosítását, amíg nem állunk készen.

    self.saveData = false;

  • Minden szükséges tulajdonság kezdőértékének beolvasása. Ennek kezelése visszahívásokkal történik az adatok lekéréséhez.

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

• Mentse a beállítások egyéni adatain végrehajtott tulajdonságmódosításokat.

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

Rögzíteni kívánt újabb tulajdonság felvételéhez több lépés végrehajtása szükséges:

1. Az új érték megjelenítéséhez frissítse a felhasználói felületet.

2. Inicializálja az értéket az összetevőhöz tárolt aktuális értékre.

3. Mentse az érték módosításait az összetevőbe.

Egyéni összetevőjéhez újabb tulajdonság hozzáadásához hajtsa végre a settings.html fájl következő módosításait:

1. Vegyen fel egy újabb observable (megfigyelhető) elemet az új tulajdonság kezeléséhez. Módosítsa a következő kódot:

   self.width = ko.observable();

   Ezt a kódot használja helyette:

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

2. Olvassa be az új tulajdonság aktuális értékét a beállítási panel első megjelenítésekor. Módosítsa a következő kódot:

   self.width(data.width);

   Ezt a kódot használja helyette:

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

3. Mentse az új tulajdonság esetleges módosítását. Módosítsa a következő kódot:

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

   Ezt a kódot használja helyette:

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

4. Vegyen fel felhasználói felületetet új mező megjelenítéséhez. Módosítsa a következő kódot:

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

   Ezt a kódot használja helyette:

   <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. Szinkronizálja vagy töltse fel a settings.html fájlt.

Ha futtatná most, a mező megjelenne. A Beállítások panel mérete azonban nem módosul automatikusan. Mivel növelte a panel méretét, a components.json regisztrációs bejegyzését is az új méretre kell módosítania.

1. Töltse le az appinfo.json fájlt, amely az összetevőjéhez tartozó assets/ könyvtárral azonos szinten van, és módosítsa a beállítási panel méretét. Módosítsa a következő kódot:

   "settingsHeight": 90,

   Ezt a kódot használja helyette:

   "settingsHeight": 160,

2. Szinkronizálja vagy töltse fel az appinfo.json fájlt.