Шаг 3. Проверка структура настроек локального компонента

В ходе выполнения этого шага мы рассмотрим структуру настроек, указанных для локального компонента.

Подобно файлу render.js, в каталоге /assets, в том же каталоге есть предварительно созданный файл settings.html. В файле settings.html содержатся все данные пользовательских настроек компонента. В реализации по умолчанию в данных пользовательских настроек имеется свойство imageWidth.

Чтобы просмотреть структуру локального компонента, выполните указанные ниже действия:

1. С помощью настольного клиента синхронизации Oracle Content Management найдите компонент и синхронизируйте его с файловой системой.

   Если настольного клиента синхронизации нет, компонент можно выбрать на вкладке Компоненты веб-интерфейса Oracle Content Management, а затем развернуть его, чтобы увидеть файлы.

2. Если перечислить файлы, относящиеся к компоненту, можно увидеть следующие файлы:

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

Откройте файл settings.html в каталоге /assets и просмотрите содержимое. В отличие от файла render.js файл settings.html использует встроенную рамку на панели "Настройки" в Site Builder. Поэтому ему также необходим доступ к вспомогательным файлам для правильного рендеринга в пределах встроенной рамки. Site Builder необходим для управления сайтом. Таким образом любые ошибки в коде JavaScript могут быть изолированы от Site Builder. Поэтому файл settings.html использует встроенную рамку.

Основные области файла settings.html:

• Шаблон Knockout для рендеринга панели "Настройки".

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

• Пользовательский обработчик привязки для регулировки высоты встроенной рамки после визуализации панели "Настройки".

  ko.bindingHandlers.scsCompComponentImpl

• Модель Knockout ViewModel для применения к шаблону Knockout.

  SettingsViewModel

Это основные элементы модели SettingsViewModel:

• Подписки на жизненный цикл компонентов.

• Инициализация компонента:

  • Убедитесь, что рендеринг компонента не выполняется, пока не извлечены все данные. Эта операция обрабатывается посредством наблюдаемых элементов Knockout.

    self.initialized = ko.observable(false);

  • Убедитесь, что данные обновляются только после завершения подготовки.

    self.saveData = false;

  • Получите начальные значения для всех требуемых свойств. Эта операция выполняется с использованием обратных вызовов для извлечения данных.

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

• Все изменения свойств сохраните в данных пользовательских настроек.

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

Чтобы добавить другое свойство, которое требуется захватить, необходимо выполнить несколько действий.

1. Обновите пользовательский интерфейс, чтобы отобразить новое значение.

2. Получите начальное значение как текущее значение, сохраненное для компонента.

3. Сохраните все изменения значения обратно в компонент.

Чтобы добавить в пользовательский компонент еще одно свойство, внесите в файл settings.html следующие изменения:

1. Добавьте еще один наблюдаемый элемент для обработки нового свойства. Измените этот код:

   self.width = ko.observable();

   Вместо него используйте этот код:

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

2. При первом отображении панели настроек необходимо получить любое текущее значение для нового свойства. Измените этот код:

   self.width(data.width);

   Вместо него используйте этот код:

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

3. Все изменения сохраняйте в этом новом свойстве. Измените этот код:

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

   Вместо него используйте этот код:

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

4. Добавьте пользовательский интерфейс для отображения нового поля. Измените этот код:

   <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="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. Выполните синхронизацию или загрузите файл settings.html.

Если бы эта операция была выполнена сейчас, поле бы отображалось. Однако размер панели "Настройки" не изменяется автоматически. Из-за увеличенного размера панели необходимо также обновить запись регистрации в components.json, указав новый размер.

1. Выгрузите файл appinfo.json, который находится на одном уровне с каталогом assets/ вашего компонента, и обновите размер панели настроек. Измените этот код:

   "settingsHeight": 90,

   Вместо него используйте этот код:

   "settingsHeight": 160,

2. Выполните синхронизацию или загрузите файл appinfo.json.