创建组件

扩展组件的示例使用注释系统，该系统实际上由两个组件组成

• 注释——包含的注释系统，它是放置在页面上的组件
• 评论——用于捕获已发布评论的实例的组件

这两个组件都需要到位，尤其是自定义已发布注释的外观时。

创建注释组件

这些方向指定了除.hidden之外的​Group​值，因此可以从组件浏览器(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
     • 组: 自定义

   • 选择​下一步

   • 选择​下一步

   • 选择​下一步

   • 选择​确定

4. 展开刚刚创建的节点：/apps/custom/components/comments

5. 选择​保存全部

6. 右键单击comments.jsp

7. 选择​删除

8. 选择​保存全部

创建子注释组件

这些方向将​Group​设置为.hidden，因为页面中应仅包含父组件。

删除自动创建的JSP文件是因为将改用默认的HBS文件。

1. 导航到/apps/custom/components/comments节点

2. 右键单击节点

   • 选择​创建>组件……

     • 标签: 评论
     • 标题: 替换注释
     • 描述: 备用注释样式
     • 超级类型: social/commons/components/hbs/comments/comments/comments
     • 组: *.hidden*

   • 选择​下一步

   • 选择​下一步

   • 选择​下一步

   • 选择​确定

3. 展开刚刚创建的节点：/apps/custom/components/comments/comment

4. 选择​保存全部

5. 右键单击comment.jsp

6. 选择​删除

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编辑为：

  • 更改data-scf-component属性的值(~ line 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

  • 添加到​属性​选项卡：

    • NameTypeValue categories ​​String ​​cq.social.author.hbs.comments Multi
    • NameTypeValue dependencies ​​String ​​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按钮