步骤 13：在内嵌框架中呈现组件

内嵌框架和非内嵌框架组件之间的相似性

“设置”面板

由于“设置”面板总是放置在内嵌框架中的页中，因此无论组件是否使用内嵌框架，“设置”面板的代码都不会更改。您将为这两种用例创建相同的“设置”面板代码。

Sites SDK API

SDK API 对于这两种用例是相同的。您将使用相同代码来引发触发器，监听操作以及获取和设置属性值。虽然某些属性可能不适用于这两种情况（例如，无法为不使用内嵌框架的组件设置 "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 目录中的所有内容在站点构建器和运行时均可用。

  • 注：创建这些文件是为了易于使用。您应该考虑在主题中或在其他公共位置合并这些文件，而不是为每个内嵌框架组件创建这些文件的单独版本。

• render.html：

  • 这是完整的 HTML 文档，与标准组件的 render.js 文件相反，该文件是 AMD 模块。

组件“高度”管理

使用内嵌框架的问题之一是内嵌框架自身的高度管理。如果此项出错，您将看到在页上为组件显示滚动条，您可能需要该滚动条，也可能不需要该滚动条。

为了管理内嵌框架的高度，组件必须告诉页它需要内嵌框架的高度是多少。使用远程组件，您可能要处理跨域问题，因此在页上呈现了组件后，您必须使用 Sites SDK 消息传送来要求页将内嵌框架设置为所需的高度。通过使用 SitesSDK.setProperty('height', {value}) API 完成此操作。（请参见 Oracle Content and Expeience SDK。）

例如，创建 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');
  };

• Knockout 定制绑定处理程序，只要在页上呈现组件或属性更改就调用 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：在内嵌框架中呈现组件时使用定制样式。