在此步骤中,我们查看为本地组件创建的默认文件的结构。
对于简单的 Hello World
示例,四个 JavaScript 对象和代码行数可能看起来过多,但这为您提供了构建更复杂组件以及处理与 Oracle Sites Cloud Service 页生命周期交互的基础。
要查看本地组件的结构,请执行以下操作:
在 Oracle Content Management 主页上,单击开发人员。
此时将显示开发人员页。
单击查看所有组件。
从菜单中,选择创建本地组件。
为组件输入名称;例如 A_Local_Component。
输入可选说明。
单击创建。
完成此操作后,您将在组件列表中看到名为 A_Local_Component
的组件。
使用 Oracle Content Management 桌面同步客户端,找到组件并将其与文件系统同步。
如果您没有桌面客户端,您可以在 Oracle Content Management 界面的“组件”页中查看所有组件并选择组件,然后下钻以查看文件。
如果列出组件下的文件,将看到以下文件:
assets render.js settings.html appinfo.json _folder_icon.jpg
打开 /assets
目录下的 render.js
文件。
render.js
文件的要点为:
它结构化为 JavaScript AMD 模块,因此它可以“必需”进入到页中。
它还包括对已经作为 Oracle Content Management 页一部分加载的 KnockoutJS 和 JQuery 的引用。
考虑 render.js
文件的结构。
在 render.js
文件的内容中,存在两个实施所需 Oracle Content Management 组件 API 的 JavaScript 对象:sampleComponentFactory
和 SampleComponentImpl
。这些对象是用于创建任何基于 KnockoutJS 的组件实施的示例。这些对象的实施将根据所使用的技术而改变。
sampleComponentFactory
此对象由 render.js
AMD 模块返回。
这是非常简单的工厂对象,可实施单个 createComponent()
接口。
更复杂的实施可以使用传递的 args
值来根据 viewMode
参数返回组件的不同实施。您可以通过这种方式为运行时与站点构建器获得显著的更轻量级组件实施。
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));
注:
由于 Oracle Content Management 服务器始终设置 mime 类型.html
文件,您无法上载 .html
文件,而是使用所需的 "text!"
插件才能加载它。因此,对于模板,您需要使用不同的扩展来通过 "text!"
插件加载它,或者直接在 JavaScript 中以内嵌方式加载它,如植入数据中所示。检查步骤 2 的结果
现在,您应该大致了解了如何创建定制组件呈现器的结构。要验证它是否有效,请执行以下操作:
更新 render.js
文件中的 sampleComponentTemplate
对象以更改以下行。更改以下代码:
'<!-- ko if: initialized -->'+
改用以下代码:
'<!-- ko if: initialized -->'+ '<div data-bind="text:\'image width is: \' + imageWidth()"></div>' +
将组件同步或上载到 Oracle Content Management 实例服务器。
编辑站点中的页并将 A_Local_Component
定制组件放在页上。
此时,您应该看到组件中的 image width is: 260px
。
打开“设置”面板并单击定制设置按钮。
将图像宽度字段更改为 300px。
默认图像的大小将从 260px 扩展到 300px。
您添加的文本将更新为 image width is 300px
。
继续执行步骤 3:查看本地组件设置的结构。