步骤 2：查看本地组件呈现的结构

在此步骤中，我们查看为本地组件创建的默认文件的结构。

对于简单的 Hello World 示例，四个 JavaScript 对象和代码行数可能看起来过多，但这为您提供了构建更复杂组件以及处理与 Oracle Sites Cloud 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. 打开 /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));