到目前为止,示例已经显示了在页中内嵌呈现的本地组件。您还可以选择在内嵌框架中呈现组件。
例如,如果您的组件对页进行次要更新,则您可以选择在内嵌框架中呈现组件,这要求您在属性更改时重新创建页。此外,远程组件始终在内嵌框架中呈现。
本节中的示例取自在创建本地组件时您选择创建在 iFrame 中呈现的组件选项的情况下为您创建的文件。但是,您可以获取这些文件集并将其托管在远程服务器上,以便它们可以平等地应用于远程组件。
内嵌框架和非内嵌框架组件之间的相似性
“设置”面板
由于“设置”面板总是放置在内嵌框架中的页中,因此无论组件是否使用内嵌框架,“设置”面板的代码都不会更改。您将为这两种用例创建相同的“设置”面板代码。
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 服务器提供,因此,这些组件已经使用匹配的协议。