Шаг 13. Рендеринг компонента во встроенной рамке

Сходство между компонентами во встроенной и невстроенной рамках

Панель "Настройки"

Поскольку панель "Настройки" всегда помещается на страницу во встроенной рамке, код панели "Настройки" не зависит от того, использует компонент встроенную рамку или нет. Для обоих сценариев использования создается один и тот же код панели "Настройки".

API-интерфейс Sites SDK

API-интерфейс SDK один и тот же для обоих сценариев использования. Один и тот же код используется для создания триггеров, прослушивания действий, получения и задания значений свойств. Хотя некоторые свойства могут быть неприменимы в обоих случаях (например, невозможно задать свойство "height" для компонента, который не использует встроенную рамку), API-интерфейс остается таким же. Следовательно код можно копировать между компонентами обоих типов, а пример кода, рассматриваемый в данном учебном пособии работает в обоих случаях.

Разница между компонентами во встроенной и невстроенной рамках

Структура файлов и зависимости

<component name>
    assets
        css
            app-styles.css
        js
            jquery.mn.js
            knockout.mn.js
            sites.min.js
        render.html
        settings.html
    appinfo.json
    _folder_icon.jpg

Эти файлы создаются, чтобы можно было немедленно запустить компонент во встроенной рамке на странице. Основные различия между этой структурой и структурой стандартного локального компонента перечислены ниже.

• Зависимости JavaScript

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

  • Поскольку все содержимое каталога assets вашего компонента передается общедоступному сайт при публикации компонента, все содержимое каталога js будет доступно как в Site Builder, так и во время выполнения.

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

• render.html

  • В отличие от файла render.js для стандартных компонентов это полный HTML-документ, представляющий собой AMD-модуль.

Управление высотой компонента

Одна из проблем при использовании встроенной рамки — управление ее высотой. В случае ошибки на странице отображаются полосы прокрутки для компонента, которые могут быть вам и не нужны.

Для управления высотой встроенной рамки компонент должен сообщить странице нужную высоту встроенной рамки. В случае удаленных компонентов могут возникнуть междоменные проблемы, поэтому с помощью обмена сообщениями Sites SDK необходимо запросить страницу задать требуемую высоту встроенной рамки после рендеринга компонента на странице. Для этого используется API-интерфейс SitesSDK.setProperty('height', {value}). (См. Комплекты SDK Oracle Content and Experience.)

Например, создайте функцию setHeight и пользовательский обработчик привязки, чтобы вызывать его после рендеринга компонента на странице.

• Функция обновления высоты

  // set the height of the iFrame for this App
  self.setHeight = function () {
  // use the default calculation or supply your own height value as a second parameter
  SitesSDK.setProperty('height');
  };

• Пользовательский обработчик привязки для вызова setHeight вызывается во время рендеринга компонент на странице или при любом изменении свойств:

  ko.bindingHandlers.sampleAppSetAppHeight = {
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
      // create dependencies on any observables so this handler is called whenever it changes
      var imageWidth = viewModel.imageWidth(),
          imageUrl = viewModel.imageUrl(),
          titleText = viewModel.titleText(),
          userText = viewModel.userText();
  
    // re-size the iFrame in the Sites page now the template has rendered
    // Note: If you still see scrollbars in the iframe after this, it is likely that CSS styling in your app is the issue
    viewModel.setHeight();
   }
  };

• Обновление шаблона для вызова обработчика привязки:

  <div data-bind="sampleAppSetAppHeight: true"></div>

Регистрация триггеров и действий

Хотя записи регистрации триггера/действия для компонентов не во встроенных рамках находятся в файле appinfo.json, в случае компонентов во встроенных рамках за предоставление этой информации отвечает сам компонент. Для этого используются два API-интерфейса:

SitesSDK.subscribe('GET_ACTIONS', self.getAppActions);
SitesSDK.subscribe('GET_TRIGGERS', self.getAppTriggers);

Вот пример использования этих API-интерфейсов.

    // Register TRIGGERS meta-data
    SampleAppViewModel.prototype.getAppTriggers = function (args) {
      var triggers = [{
        "triggerName": "imageClicked",
        "triggerDescription": "Image clicked",
        "triggerPayload": [{
          "name": "payloadData",
          "displayName": "Trigger Payload Data"
        }]
      }];

      return triggers;
    };

    // Register ACTIONS meta-data
    SampleAppViewModel.prototype.getAppActions = function (args) {
      var actions = [{
        "actionName": "setImageWidth",
        "actionDescription": "Update the image width",
        "actionPayload": [{
          "name": "imageWidth",
          "description": "Image Width in pixels",
          "type": {
            "ojComponent": {
            "component": "ojInputText"
            }
          },
          "value": ""
        }]
      }];

      return actions;
    };

Доступ к стилям темы

Поскольку рендеринг компонента осуществляется во встроенной рамке, у него нет доступа к стилям, доступным в теме. Sites SDK предоставляет API-интерфейс, чтобы извлекать эти стили для применения к элементам внутри встроенной рамки.

Эта тема более подробно рассматривается в разделе Шаг 14. Использование пользовательских стилей во время рендеринга компонента во встроенной рамке.

Смешанный протокол HTTPS и протокол HTTP

Поскольку платформа Oracle Content Management использует протокол HTTPS, все ресурсы, на которые ссылается страница, также должны использовать HTTPS. Ресурсы включают в себя базовый файл .html, который будет визуализироваться во встроенной рамке вместе со всеми файлами, на которые он ссылается.

Это требование к ресурсам относится в основном к удаленным компонентам, однако необходимо знать об этом ограничении. Ресурсы для локальных компонентов, использующих встроенные рамки, предоставляются сервером Oracle Content Management, поэтому эти компоненты уже используют соответствующий протокол.

Теперь выполните Шаг 14. Использование пользовательских стилей во время рендеринга компонента во встроенной рамке.