建立元件

擴展元件的示例使用注釋系統，該系統實際上由兩個元件組成

• 注釋 — 包含注釋系統，即放在頁面上的元件
• 留言 — 擷取已張貼留言之例項的元件

這兩個元件都必須到位，尤其是當自訂已張貼留言的外觀時。

建立注釋元件

這些方向指定​組​值，而不是.hidden值，以便元件可從元件瀏覽器(sidekick)使用。

刪除自動建立的JSP檔案是因為將改用預設的HBS檔案。

1. 瀏覽至​CRXDE|Lite(http://localhost:4502/crx/de/index.jsp)

2. 為自訂應用程式建立位置：

   • 選擇/apps節點

     • 建立 自訂資 料夾

   • 選擇/apps/custom節點

     • 建立 資料夾 名稱元件

3. 選擇/apps/custom/components節點

   • 建立>元件……

     • 標籤: 評論
     • 標題: 替代注釋
     • 說明: 備選注釋樣式
     • 超類型: social/commons/components/hbs/comments
     • 群組: 自訂

   • 選擇​Next

   • 選擇​Next

   • 選擇​Next

   • 選擇​OK

4. 展開剛建立的節點：/apps/custom/components/comments

5. 選擇​保存全部

6. 按一下右鍵comments.jsp

7. 選擇​Delete

8. 選擇​保存全部

建立子注釋元件

這些指示將​Group​設定為.hidden，因為頁面中應僅包含父元件。

刪除自動建立的JSP檔案是因為將改用預設的HBS檔案。

1. 導覽至/apps/custom/components/comments節點

2. 以滑鼠右鍵按一下節點

   • 選擇​建立>元件……

     • 標籤: 註解
     • 標題: 替代注釋
     • 說明: 備選注釋樣式
     • 超類型: social/commons/components/hbs/comments/comments
     • 群組: *.hidden*

   • 選擇​Next

   • 選擇​Next

   • 選擇​Next

   • 選擇​OK

3. 展開剛建立的節點：/apps/custom/components/comments/comment

4. 選擇​保存全部

5. 按一下右鍵comment.jsp

6. 選擇​Delete

7. 選擇​保存全部

複製和修改預設HBS指令碼

使用CRXDE Lite:

• 複製 comments.hbs

  • 從/libs/social/commons/components/hbs/comments
  • 至/apps/custom/components/comments

• 將comments.hbs編輯為：

  • 更改data-scf-component屬性的值(~line 20):

    • 從 social/commons/components/hbs/comments
    • 至 /apps/custom/components/comments

  • 修改以包含自訂註解元件（~第75行）:

    • 取代 {{include this resourceType='social/commons/components/hbs/comments/comment'}}
    • 使用 {{include this resourceType='/apps/custom/components/comments/comment'}}

• 複製 comment.hbs

  • 從/libs/social/commons/components/hbs/comments/comments
  • 至/apps/custom/components/comments/comment

• 將comment.hbs編輯為：

  • 更改資料 — scf-component屬性的值（~行19）

    • 從 social/commons/components/hbs/comments/comment
    • 至 /apps/custom/components/comments/comment

• 選擇/apps/custom節點

• 選擇​保存全部

建立客戶端庫資料夾

為了避免明確包含此客戶端庫，可以使用預設注釋系統的clientlib的類別值(cq.social.author.hbs.comments)，但是，預設元件的所有實例也將包含此clientlib。

使用CRXDE Lite:

• 選擇/apps/custom/components/comments節點

• 選擇​建立節點

  • 名稱: clientlibs

  • 類型: cq:ClientLibraryFolder

  • 添加到​Properties​頁簽：

    • ​​categories ​​String NameTypeValue cq.social.author.hbs.comments Multi
    • ​​dependencies ​​String NameTypeValue cq.social.scf Multi

• 選擇​保存全部

• 選取/apps/custom/components/comments/clientlibs節點後，建立3個檔案：

  • 名稱: css.txt
  • 名稱: js.txt
  • 名稱:customcommentsystem.js

• 輸入「customcommentsystem.js」作為js.txt的內容

• 選擇​保存全部

註冊SCF模型和視圖

在擴展（覆蓋）SCF元件時， resourceType不同（覆蓋使用在/libs之前通過/apps搜索的相對搜索機制，使resourceType保持相同）。 這就是為什麼需要編寫JavaScript（在客戶端庫中）來註冊自訂resourceType的SCF JS模型和檢視。

輸入以下文本作為customcommentsystem.js的內容：

customcommentsystem.js

(function($CQ, _, Backbone, SCF) {
    "use strict";
 
    var CustomComment = SCF.Components["social/commons/components/hbs/comments/comment"].Model;
    var CustomCommentView = SCF.Components["social/commons/components/hbs/comments/comment"].View;

    var CustomCommentSystem = SCF.Components["social/commons/components/hbs/comments"].Model;
    var CustomCommentSystemView = SCF.Components["social/commons/components/hbs/comments"].View;
 
    SCF.registerComponent('/apps/custom/components/comments/comment', CustomComment, CustomCommentView);
    SCF.registerComponent('/apps/custom/components/comments', CustomCommentSystem, CustomCommentSystemView);

})($CQ, _, Backbone, SCF);

• 選擇​保存全部

發佈應用程式

若要在發佈環境中體驗擴充元件，必須復寫自訂元件。

一種方法是

• 從全局導航

  • 選擇​工具>部署>複製
  • 選取 Activate Tree
  • 設定Start Path:至/apps/custom
  • 取消選中Only Modified
  • 選擇Activate按鈕