构建基本 H1 组件

您可以删除植入文件中的大部分内容来创建 H1 组件。它显示您在创建 viewModel 时植入的标题文本。以后可以为该组件提供设置和样式。

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

使用 Oracle Content Management 桌面同步应用程序，找到组件并将其与文件系统同步。
- 在最新版本的桌面同步应用程序中，选择开始同步或选择要同步的文件夹选项。
- 如果您没有桌面同步应用程序，您可以在 Oracle Content Management 的组件选项卡上选择组件，然后下钻以查看文件。
如果列出组件下的文件，则可以看到以下文件：
- assets 文件夹中的组件文件：
  - render.js
  - settings.html
- appinfo.json：包含组件说明的 JSON 文件。
  
  请参见关于开发组件。
- folder_icon.jpg：显示在组件目录中的图标。

要构建 H1 组件，请执行以下操作：

打开 appinfo.json 文件，并将其内容替换为以下行：

{
   "id": "h1-component-id",

   "settingsData": {
             "settingsHeight": 90,
             "settingsWidth": 300,
             "settingsRenderOption": "inline",
             "componentLayouts": [ ],
             "triggers": [ ],
             "actions": [ ]
   },
   "initialData": {
             "componentId": "h1-component-id",
             "customSettingsData": {
                     "headingText": "Heading 1"
             },
             "nestedComponents": [ ]
   }
}

在您常用的文本编辑器中打开 assets 文件夹中的 render.js 文件。

将 render.js 的内容更改为以下行：

/* globals define */
define(['knockout', 'jquery', 'text!./render.html'], function(ko, $, template) {
  'use strict';
  // ----------------------------------------------
  // Define a Knockout ViewModel for your template
  // ----------------------------------------------
  var SampleComponentViewModel = function(args) {
    var SitesSDK = args.SitesSDK;
    // create the observables -- this allows updated settings to automatically update the HTML on the page
    this.headingText = ko.observable();

    //
    // Handle property changes from the Settings panel
    //
    this.updateCustomSettingsData = $.proxy(function(customData) {
      this.headingText(customData && customData.headingText);
    }, this);
    this.updateSettings = function(settings) {
      if (settings.property === 'customSettingsData') {
        this.updateCustomSettingsData(settings.value);
      } 
    };
    // Register your updateSettings listener to recieve SETTINGS_UPDATED events
    SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.SETTINGS_UPDATED, $.proxy(this.updateSettings, this)); 

    //
    // Get the initial settings data for the component and apply it
    //
    SitesSDK.getProperty('customSettingsData', this.updateCustomSettingsData);
  };


  // ----------------------------------------------
  // Create a knockout based component implemention
  // ----------------------------------------------
  var SampleComponentImpl = function(args) {
    // Initialze the custom component
    this.init(args);
  };
  // initialize all the values within the component from the given argument values
  SampleComponentImpl.prototype.init = function(args) {
    this.createViewModel(args);
    this.createTemplate(args);
    this.setupCallbacks();
  };
  // create the viewModel from the initial values
  SampleComponentImpl.prototype.createViewModel = function(args) {
    // create the viewModel
    this.viewModel = new SampleComponentViewModel(args);
  };
  // create the template based on the initial values
  SampleComponentImpl.prototype.createTemplate = function(args) {
    // create a unique ID for the div to add, this will be passed to the callback
    this.contentId = args.id + '_content_' + args.viewMode;
    // create a hidden custom component template that can be added to the DOM
    this.template = '<div id="' + this.contentId + '">' + 
      template + 
      '</div>';      
  };
  //
  // SDK Callbacks
  // setup the callbacks expected by the SDK API
  //
  SampleComponentImpl.prototype.setupCallbacks = function() {
    //
    // callback - render: add the component into the page
    //
    this.render = $.proxy(function(container) {
      var $container = $(container);
      // add the custom component template to the DOM
      $container.append(this.template);
      // apply the bindings
      ko.applyBindings(this.viewModel, $('#' + this.contentId)[0]);
    }, this);
    //
    // callback - dispose: cleanup after component when it is removed from the page
    //
    this.dispose = $.proxy(function() {
      // nothing required for this sample since knockout disposal will automatically clean up the node
    }, this);
  };
  // ----------------------------------------------
  // Create the factory object for your component
  // ----------------------------------------------
  var sampleComponentFactory = {
    createComponent: function(args, callback) {
      // return a new instance of the component
      return callback(new SampleComponentImpl(args));
    }
  };
  return sampleComponentFactory;
});

在 assets 文件夹中，创建新文件 render.html 以作为组件的简单 HTML 模板。
在 render.html 文件中使用以下内容：
```
<h1 data-bind="text: headingText()">  
</h1> 
```
组件 assets 文件夹现在包含三个文件。
- render.html
- render.js
- settings.html

将新的 H1 组件添加到页中（检查点 2）。