建置基本 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)。