Show Menu
トピック×

コンポーネントの作成

コンポーネントを拡張する例では、実際には次の 2 つのコンポーネントで構成されるコメントシステムを使用します。
  • コメント — ページ上に配置されるコンポーネントである包括的なコメントシステム
  • コメント — 投稿されたコメントのインスタンスをキャプチャするコンポーネント。
投稿されたコメントの外観をカスタマイズする場合は特に、両方のコンポーネントを配置する必要があります。
1 つのサイトページで使用できるコメントシステムは 1 つのみです。
多くのコミュニティ機能には、拡張されたコメントシステムを参照するように resourceType を変更できるコメントシステムが既に含まれています。

コメントコンポーネントの作成

These directions specify a Group value other than .hidden so the component may be made available from the component browser (sidekick).
デフォルトの HBS ファイルを代わりに使用するので、自動的に作成された JSP ファイルは削除します。
  1. CRXDE Lite http://localhost:4502/crx/de/index.jsp )を表示します。
  2. カスタムアプリケーションの場所の作成:
    • Select the /apps node
      • フォルダーを作成 」を選択し、 custom という名前のフォルダーを作成します。
    • Select the /apps/custom node
      • フォルダーを作成 」を選択し、 components という名前のフォルダーを作成します。
  3. Select the /apps/custom/components node
    • 作成/コンポーネント... を選択します。
      • ラベル :コメン
      • タイトル :Alt Comments **
      • 説明 :Alternative comments style **
      • スーパータイプ :social/commons/components/hbs/comments **
      • グループ :Custom **
    • 次へ 」を選択します。
    • 次へ 」を選択します。
    • 次へ 」を選択します。
    • OK 」を選択します。
  4. Expand the node just created: /apps/custom/components/comments
  5. すべて保存 」を選択します。
  6. Right-click comments.jsp
  7. Select Delete
  8. すべて保存 」を選択します。

子コメントコンポーネントの作成

These directions set Group to .hidden as only the parent component should be included within a page.
デフォルトの HBS ファイルを代わりに使用するので、自動的に作成された JSP ファイルは削除します。
  1. ノードに移動しま /apps/custom/components/comments
  2. ノードを右クリックします
    • 作成/コンポーネント... を選択します。
      • ラベル :comment **
      • タイトル :Alt Comment **
      • 説明 :Alternative comment style **
      • スーパータイプ :social/commons/components/hbs/comments/comment **
      • グループ : *.hidden*
    • 次へ 」を選択します。
    • 次へ 」を選択します。
    • 次へ 」を選択します。
    • OK 」を選択します。
  3. Expand the node just created: /apps/custom/components/comments/comment
  4. すべて保存 」を選択します。
  5. Right-click comment.jsp
  6. Select Delete
  7. すべて保存 」を選択します。

デフォルトの HBS スクリプトのコピーと変更

CRXDE Lite を使用して、次の手順を実行します。
  • コピー comments.hbs
  • 編集 comments.hbs 先:
    • Change the value of the data-scf-component attribute (~line 20):
      • 送信元 social/commons/components/hbs/comments
      • To /apps/custom/components/comments
    • カスタムコメントコンポーネント(~行75)を含めるように変更します。
      • 置換 {{include this resourceType='social/commons/components/hbs/comments/comment'}}
      • を次のタグに置換します。 {{include this resourceType='/apps/custom/components/comments/comment'}}
  • コピー comment.hbs
  • 編集 comment.hbs 先:
    • data-scf-component属性の値の変更(~行19)
      • 送信元 social/commons/components/hbs/comments/comment
      • To /apps/custom/components/comments/comment
  • ノードを /apps/custom 選択
  • すべて保存 」を選択します。

クライアントライブラリフォルダーの作成

このクライアントライブラリを明示的に含めなくても済むように、デフォルトのコメントシステムの clientlib の categories 値( cq.social.author.hbs.comments )を使用できますが、これを使用すると、デフォルトのコンポーネントのすべてのインスタンスについても、この clientlib が含まれるようになります。
CRXDE Lite を使用して、次の手順を実行します。
  • ノードを /apps/custom/components/comments 選択
  • Select Create Node
    • 名前 : clientlibs
    • タイプ : cq:ClientLibraryFolder
    • Add to Properties tab:
      • Name Type categories value ​Seartu String cq.social.author.hbs.comments s Multi
      • Name Type dependencies value ​Seartu String cq.social.scf s Multi
  • すべて保存 」を選択します。
  • sノー /apps/custom/components/comments/clientlib ドを選択し、3つのファイルを作成します。
    • 名前 : css.txt
    • 名前 : js.txt
    • 名前 :customcommentsystem.js
  • Enter 'customcommentsystem.js' as the content of js.txt
  • すべて保存 」を選択します。

SCF モデルおよびビューの登録

When extending (overriding) an SCF component, the resourceType is different (overlaying makes use of the relative search mechanism that searches through /apps before /libs so that the resourceType remains the same). このため、カスタムresourceTypeのSCF JSモデルとビューを登録するには、JavaScript(クライアントライブラリ内)を作成する必要があります。
Enter the following text as the content of 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);

  • すべて保存 」を選択します。

アプリの公開

拡張されたコンポーネントをパブリッシュ環境で確認するには、カスタムコンポーネントをレプリケートする必要があります。
その一つの方法は
  • グローバルナビゲーションから
    • Select Tools > Deployment > Replication
    • Activate Tree
    • 設定 Start Path :to /apps/custom
    • Uncheck Only Modified
    • 選択ボ Activate タン