步驟 2：複查本機元件呈現的結構

我們將在此步驟中複查為本機元件建立之預設檔案的結構。

以簡單的 Hello World 例子來說，四個 JavaScript 物件和數行的程式碼看起來似乎太多，但這是為了要幫助您瞭解建置更為複雜元件的基礎，以及如何處理與 Oracle Cloud Sites 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));