步骤 3：查看本地组件设置的结构

在此步骤中，我们查看为本地组件指定的设置的结构。

与 /assets 目录中的 render.js 文件类似，同一目录中存在预先创建的 settings.html 文件。settings.html 文件呈现组件的任何定制设置数据。在默认实施中，定制设置数据中有单个属性 imageWidth。

要查看本地组件的结构，请执行以下操作：

1. 使用 Oracle Content Management 桌面同步客户端，找到组件并将其与文件系统同步。

   如果您没有桌面同步客户端，您可以在 Oracle Content Management Web 界面的组件选项卡上选择组件，然后下钻以查看文件。

2. 如果列出组件下的文件，将看到以下文件：

   assets
       render.js
       settings.html
   appinfo.json
   _folder_icon.jpg

打开 /assets 目录下的 settings.html 文件，并查看内容。与 render.js 文件不同，settings.html 文件使用站点构建器的“设置”面板中的内嵌框架，这就是为什么它还需要访问支持文件才能在内联框架内正确呈现。需要站点构建器来管理站点，以便 JavaScript 代码中的任何错误都可以与站点构建器隔离，这就是为什么 settings.html 文件使用内嵌框架。

以下是 settings.html 文件的主要区域：

• 用于呈现“设置”面板的 Knockout 模板。

  <!-- ko if: initialized() -->
  <div class="scs-component-settings">
    <div>
      <!-- Width -->
      <label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label>
      <input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box">
    </div>
  </div>
  <div data-bind="setSettingsHeight: true"></div>
  <!-- /ko -->

• 定制绑定处理程序，用于在呈现“设置”面板后调整内嵌框架的高度。

  ko.bindingHandlers.scsCompComponentImpl

• 应用于 Knockout 模板的 Knockout ViewModel。

  SettingsViewModel

以下是 SettingsViewModel 的主要元素：

• 组件生命周期的订阅。

• 组件初始化：

  • 确保在提取所有数据之后才呈现组件。这通过 Knockout 可观察项进行处理。

    self.initialized = ko.observable(false);

  • 确保在就绪之前不尝试更新数据。

    self.saveData = false;

  • 获取任何所需属性的初始值。这通过回调进行处理以检索数据。

        SitesSDK.getProperty('customSettingsData', function (data) {
          //update observable
          self.width(data.width);
    
          // note that viewModel is initialized and can start saving data
          self.initialized(true);
          self.saveData = true;
        });

• 将任何属性更改保存到定制设置数据中。

      self.save = ko.computed(function () {
        var saveconfig = {
          'width': isNaN(self.width()) ? self.width() : self.width() + 'px'
        };
  
        // save data in page
        if (self.saveData) {
          SitesSDK.setProperty('customSettingsData', saveconfig);
        }
      }, self);

要添加要捕获的另一个属性，需要执行几个步骤：

1. 更新用户界面以显示新值。

2. 将值初始化为针对组件存储的当前值。

3. 将对值的任何更改保存回组件。

要向定制组件添加另一个属性，请对 settings.html 文件进行以下更改：

1. 添加另一个可观察项以处理新属性。更改以下代码：

   self.width = ko.observable();

   改用以下代码：

   self.width = ko.observable();
   self.imageBannerText = ko.observable();

2. 首次显示设置面板时，获取新属性的任何当前值。更改以下代码：

   self.width(data.width);

   改用以下代码：

   self.width(data.width);
   self.imageBannerText(data.imageBannerText);

3. 保存对此新属性所做的任何更改。更改以下代码：

       'width': isNaN(self.width()) ? self.width() : self.width() + 'px'

   改用以下代码：

   'width': isNaN(self.width()) ? self.width() : self.width() + 'px',
   'imageBannerText': self.imageBannerText()

4. 添加用户界面以显示新字段。更改以下代码：

   <label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label>
   <input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box">

   改用以下代码：

   <label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label>
   <input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box">
   
   <label id="imageBannerTextLabel" for="imageBannerText" class="settings-heading" data-bind="text: 'Image Banner'"></label>
   <input id="imageBannerText" data-bind="value: imageBannerText" placeholder="Text to display above an image" class="settings-text-box">

5. 同步或上载 settings.html 文件。

如果要立即运行此项，则将显示该字段。但是，“设置”面板的大小不会自动更改。由于您增大了面板的大小，因此还必须将 components.json 注册条目更新为新大小。

1. 下载 appinfo.json 文件（它与组件的 assets/ 目录处于同一级别），然后更新设置面板的大小。更改以下代码：

   "settingsHeight": 90,

   改用以下代码：

   "settingsHeight": 160,

2. 同步或上载 appinfo.json 文件。