Etap 3: Sprawdzanie struktury ustawień składnika lokalnego

Sprawdzimy tu strukturę ustawień, określonych dla składnika lokalnego.

W katalogu /assets, oprócz pliku render.js, istnieje wstępnie utworzony plik settings.html. Plik settings.html określa renderowanie danych dla ustawień niestandardowych składnika. W implementacji domyślnej, w danych ustawień niestandardowych występuje jedna właściwość imageWidth.

Aby sprawdzić strukturę składnika lokalnego, należy:

1. Używając klienta synchronizującego typu Desktop Oracle Content Management, zlokalizować składnik, po czym zsynchronizować go z systemem plików.

   Nie mając klienta synchronizującego typu Desktop, można na karcie Składniki internetowego interfejsu usługi Oracle Content Management wybrać składnik, a następnie — aby wyświetlić pliki — drążyć w dół.

2. Pod składnikiem można zobaczyć następujące pliki:

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

Z katalogu /assets wybrać plik settings.html, a następnie go otworzyć. W przeciwieństwie do pliku render.js, plik settings.html używa ramki wstawkowej w panelu "Ustawienia" w konstruktorze serwisów i dlatego — aby poprawnie renderować zawartość w ramce wstawkowej — musi mieć dostęp do plików wspomagających. Konstruktor serwisów jest wymagany do zarządzania serwisem, tak aby wszelkie błędy w kodzie JavaScript mogły być izolowane od konstruktora serwisów. Dlatego właśnie plik settings.html używa ramki wstawkowej.

W pliku settings.html istnieją następujące główne obszary:

• Szablon Knockout do renderowania panelu "Ustawienia".

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

• Niestandardowa procedura obsługi mająca na celu dostosowanie wysokości ramki wstawkowej po wyrenderowaniu panelu "Ustawienia".

  ko.bindingHandlers.scsCompComponentImpl

• Knockout ViewModel do zastosowania do szablonu Knockout.

  SettingsViewModel

Podstawowymi elementami SettingsViewModel są:

• Subskrypcje cyklu życia elementu.

• Inicjalizacja składnika:

  • Upewnienie się, że składnik nie będzie renderowany, dopóki nie zostaną pobrane wszystkie dane. Jest obsługiwane przez obiekty Knockout "observable".

    self.initialized = ko.observable(false);

  • Upewnienie się, że nie zostanie podjęta próba aktualizacji danych, dopóki nie będziemy gotowi.

    self.saveData = false;

  • Uzyskanie początkowych wartości wszelkich wymaganych właściwości. Jest obsługiwane przez wywołania zwrotne pobierania danych.

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

• Zapisanie wszelkich zmian właściwości (danych dla ustawień niestandardowych).

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

Aby dodać kolejną właściwość, która ma zostać zarejestrowana, należy:

1. Zaktualizować interfejs użytkownika, tak aby nowa wartość była wyświetlana.

2. Zainicjalizować wartość przy użyciu bieżącej wartości przechowywanej dla składnika.

3. Zapisać wszelkie zmiany wartości z powrotem do składnika.

Aby dodać kolejną właściwość do składnika niestandardowego, należy wprowadzić w pliku settings.html następujące zmiany:

1. Dodać kolejny obiekt "observable" obsługujący nową właściwość. Zmienić następujący kod:

   self.width = ko.observable();

   Zamiast tego użyć następującego kodu:

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

2. Uzyskać dowolną bieżącą wartość dla nowej właściwości, gdy panel "Ustawienia" zostanie po raz pierwszy wyświetlony. Zmienić następujący kod:

   self.width(data.width);

   Zamiast tego użyć następującego kodu:

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

3. Zapisać wszelkie zmiany wprowadzone do nowej właściwości. Zmienić następujący kod:

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

   Zamiast tego użyć następującego kodu:

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

4. Aby wyświetlić nowe pole, dodać interfejs użytkownika. Zmienić następujący kod:

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

   Zamiast tego użyć następującego kodu:

   <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. Zsynchronizować (lub wysłać) plik settings.html.

Gdybyśmy teraz uruchomili, pole zostałoby wyświetlone. Jednak rozmiar panelu "Ustawienia" nie zmienia się automatycznie. Ponieważ zwiększyliśmy rozmiar panelu, musimy także zaktualizować wpis rejestracyjny components.json o nowy rozmiar.

1. Pobrać plik appinfo.json (znajduje się na tym samym poziomie co katalog assets/ składnika), po czym zaktualizować rozmiar panelu "Ustawienia". Zmienić następujący kod:

   "settingsHeight": 90,

   Zamiast tego użyć następującego kodu:

   "settingsHeight": 160,

2. Zsynchronizować (lub wysłać) plik appinfo.json.