Шаг 2. Проверка структуры рендеринга локального компонента

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

Может показаться, что для простого примера Hello World четыре объекта JavaScript и несколько строк кода — это слишком много, но это позволяет предоставить основу для создания более сложных компонентов, а также для взаимодействия с жизненным циклом страниц Oracle Cloud Sites Service.

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

1. На домашней странице Oracle Content Management щелкните Разработчик.

   Отображается страница Разработчик.

2. Нажмите Смотреть все компоненты.

3. В меню выберите Создать локальный компонент.

4. Введите имя компонента, например A_Local_Component.

5. Введите дополнительное описание.

6. Нажмите Создать.

   После этого в списке компонентов появится компонент с именем A_Local_Component.

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

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

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

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

3. Откройте файл render.js в каталоге /assets.

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

   • он структурирован как AMD-модуль JavaScript, поэтому он может быть "обязательным" элементом страницы;

   • Он также содержит ссылки на KnockoutJS и JQuery, которые уже загружены на странице Oracle Content Management.

Рассмотрите структуру файла render.js.

В содержимом файла render.js есть два объекта JavaScript, которые реализуют требуемые API-интерфейсы компонентов Oracle Content Management: sampleComponentFactory и SampleComponentImpl. Эти объекты служат примером реализации для создания любых компонентов на основе KnockoutJS. Реализация этих объектов зависит от используемой технологии.

• sampleComponentFactory

  • Этот объект возвращается AMD-модулем render.js.

  • Это очень простой объект Factory, который реализует единый интерфейс createComponent().

  • В более сложных реализациях может использоваться значение args, передаваемое для возврата различных реализаций компонента на основе параметра viewModel. По сравнению с Site Builder это позволяет значительно облегчить реализацию компонента для среды выполнения.

• SampleComponentImpl

  • Основная функция этого объекта — функция render, которая используется для рендеринга компонента на странице.

    Для рендеринга компонента Knockout на странице, функция render динамически добавляет шаблон на страницу, а затем применяет к шаблону привязки viewModel.

  • Остальная часть реализации имеет дело с инициализацией параметра viewModel и шаблона, а также с обработкой обмена сообщений между страницей и компонентом.

Последние два объекта в файле render.js, sampleComponentTemplate и SampleComponentViewModel, обеспечивают пользовательскую реализацию компонента. Реализация на основе этих объектов зависит от ваших требований.

• sampleComponentTemplate

  • Этот объект обеспечивает создание шаблона KnockoutJS. Он ожидает инициализации всех данных компонента, прежде чем пытаться что-то отобразить.

• SampleComponentViewModel

  • viewModel извлекает информацию, хранящуюся в Oracle Content Management от имени компонента, а затем на основе этих данных выбирает способ правильного расположения компонента.

  • Общие наблюдаемые элементы Knockout, которые используются шаблоном для обработки доступа к метаданным, сохраненными от имени компонента:

    self.imageWidth = ko.observable('200px');
    self.alignImage = ko.observable();
    self.layout = ko.observable();
    self.showTopLayout = ko.observable();
    self.showStoryLayout = ko.observable();

  • Интеграция триггеров и действий:

    Триггер. Функция инициирования триггера Oracle Content Management из компонента, который может быть связан с действиями других компонентов на странице.

        self.imageClicked = function (data, event) {
          self.raiseTrigger("imageClicked"); // matches appinfo.json
        };

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

        self.executeActionsListener = function (args) {
          // get action and payload
          var payload = args.payload,
          action = args.action;
    
          // handle 'setImageWidth' actions
          if (action && action.actionName === 'setImageWidth') {
            $.each(payload, function(index, data) {
              if (data.name === 'imageWidth') {
                self.imageWidth(data.value);
              }
            });
          }
        };

    Обратный вызов для выполнения любых зарегистрированных действий по требованию.

    SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.EXECUTE_ACTION, 
    $.proxy(self.executeActionsListener, self));

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

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

      self.componentLayoutInitialized = ko.observable(false);
      self.customSettingsDataInitialized = ko.observable(false);

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

      SitesSDK.getProperty('componentLayout', self.updateComponentLayout);
      SitesSDK.getProperty('customSettingsData', self.updateCustomSettingsData);

    • Обновление метаданных: обратный вызов выполняется всякий раз, когда изменяются метаданные компонента, сохраненные от имени компонента; например, когда пользователь вызывает панель "Настройки" и обновляет данные.

      SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.SETTINGS_UPDATED, 
      $.proxy(self.updateSettings, self));