現在表示中:

新しいコンポーネントの開発にとりかかる際は、その構造と設定の基本を理解する必要があります。

これには、標準的なセオリーを学び、標準 AEM インスタンスでのコンポーネントの実装を幅広く知ることが含まれます。現在の AEM はタッチ操作向け UI とクラシック UI の両方のコンポーネントを提供しているので、後者のアプローチは話がやや複雑になっています。 

概要

この節では、独自コンポーネントの開発時に知っておくべき詳細の導入段階として、基本的な概念と注意点について説明します。

計画

実際にコンポーネントの設定やコーディングを開始する前に、次の点について理解する必要があります。

  • そもそも新しいコンポーネントで何をするか
    • 明確な仕様は、開発、テスト、引継ぎのあらゆる段階で役立ちます。
      詳細は時間と共に変化する可能性がありますが、仕様は更新可能です(ただし、変更箇所を記録しておく必要があります)。
  • コンポーネントを一から作成する必要があるか、基本部分を既存のコンポーネントから継承できるか
    • 一から作成する必要があるとは限りません。
    • AEM には、別のコンポーネント定義から詳細を継承し、拡張できる仕組みがいくつか用意されています(オーバーライド、オーバーレイ、Sling Resource Merger など)。
  • コンポーネントのコンテンツを選択または操作するためのロジックが必要か
    • ロジックは、ユーザーインターフェイス層から分離しておく必要があります。HTL はこれに対応した設計になっています。
  • コンポーネントを CSS で書式設定する必要があるか
    • CSS による書式設定は、コンポーネント定義から分離しておく必要があります。外部の CSS ファイルを通じて HTML 要素を変更できるように、HTML 要素の命名規約を定義してください。
  • 考慮すべきセキュリティ要素は何か

タッチ操作向け UI とクラシック UI

コンポーネントの開発について本格的な検討を始める前に、作成者がどちらの UI を使用するかを知っておく必要があります。

  • タッチ操作向け UI
    5.6.0 でプレビューとして導入され、6.0 と 6.1 の両方で拡張された、新しいユーザーインターフェイスです。Adobe Marketing Cloud 向けの統合エクスペリエンスに基づき、Coral UIGranite UI の基盤テクノロジーを使用しています。
  • クラシック UI
    2008 年の CQ 5.1 で導入された、ExtJS テクノロジーに基づくユーザーインターフェイスです。

詳しくは、UI インターフェイスに関するお客様向け推奨事項を参照してください。

タッチ操作向け UI、クラシック UI または両方をサポートするようにコンポーネントを実装できます。標準インスタンスには、クラシック UI、タッチ操作向け UI またはその両方に対応するようあらかじめデザインされた既製コンポーネントもあります。

このため、このページでは両 UI の基本と識別方法について説明します。

コンテンツのロジックとマークアップのレンダリング

マークアップおよびレンダリングをおこなうコードと、コンポーネントのコンテンツ選択に関するロジックを制御するコードは、分離しておくことをお勧めします。

この方法をサポートするテンプレート言語が HTL です。HTL では、基盤となるビジネスロジックを定義するときにのみプログラミング言語を使用します。この(オプションの)ロジックは、決まったコマンドで HTL から呼び出されます。この仕組みでは、特定のビュー用に呼び出されるコードに焦点を当てることができ、必要に応じて、同じコンポーネントのさまざまなビュー用の固有ロジックを定義できます。

HTL と JSP

HTL は、AEM 6.0 で導入された HTML テンプレート言語です。 

独自コンポーネントの開発時に HTL と JSP(Java Server Pages)のどちらを使用すべきかという質問への回答は明快です。現在では、HTL が AEM の推奨スクリプティング言語とされています。

HTL と JSP はどちらも、クラシック UI とタッチ操作向け UI の両方のコンポーネントの開発に使用できます。HTL はタッチ操作向け UI 専用で、JSP はクラシック UI 専用と見る向きもありますが、それは誤解であり、どちらを使用するかはタイミングの問題です。タッチ操作向け UI と HTL はほぼ同じ時期に AEM に導入されました。現在では HTL が推奨言語となっているので、新しいコンポーネントには HTL が使用され、これらの新しいコンポーネントがタッチ操作向け UI で使用される傾向にあるだけです。

注意:

例外は、ダイアログで使用される Granite UI 基盤のフォームフィールドです。このフィールドには、引き続き JSP を使用する必要があります。

独自コンポーネントの開発

UI の種類に応じた独自コンポーネントを作成するには、(このページを読んでから)以下を参照してください。

既存のコンポーネントをコピーし、必要な変更をおこなうことが、開発を始めるうえで最も簡単な方法です。独自のコンポーネントを作成し、それを段落システムに追加する方法については、以下を参照してください。

パブリッシュインスタンスへのコンポーネントの移動

コンテンツをレンダリングするコンポーネントは、コンテンツと同じ AEM インスタンスにデプロイする必要があります。したがって、オーサーインスタンス上でページをオーサリングおよびレンダリングするために使用するすべてのコンポーネントを、パブリッシュインスタンスにデプロイする必要があります。デプロイすると、コンポーネントを使用して、アクティブ化されたページをレンダリングできるようになります。

コンポーネントをパブリッシュインスタンスに移動するには、次のツールを使用します。

注意:

これらの仕組みを利用して、開発インスタンスからテストインスタンスなど、インスタンス間でコンポーネントを移行することもできます。

最初から認識するコンポーネント

  • ページ:
    • AEM にはページコンポーネント(cq:Page)があります。
    • このコンポーネントは、コンテンツ管理にとって重要なリソースです。
    • ページコンポーネントは、Web サイトのコンテンツを保持する Web ページに対応しています。
  • 段落システム:
    • 段落システムは、Web サイトの重要な構成要素であり、段落のリストを管理します。実際のコンテンツを格納する個々のコンポーネントを保持し、構造化するために使用されます。
    • 段落システム内で、段落を作成、移動、コピーおよび削除できます。
    • 特定の段落システム内で使用可能にするコンポーネントを選択することもできます。
    • 標準インスタンス内で使用できる段落システムにはさまざまなものがあります(parsysresponsivegrid など)。

構造

AEM コンポーネントの構造は強力で、柔軟性があります。主な考慮事項は以下のとおりです。

  • リソースタイプ
  • コンポーネント定義
  • コンポーネントのプロパティおよび子ノード
  • ダイアログ
  • デザインダイアログ
  • 使用可能なコンポーネント
  • コンポーネントおよびコンポーネントによって作成されるコンテンツ

リソースタイプ

構造の重要な構成要素となるのが、リソースタイプです。

  • コンテンツの構造は意図を宣言します。
  • リソースタイプはその意図を実装します。

このような抽象化をすることで、時間の経過と共にルックアンドフィールが変化しても、意図が変わることはありません。

コンポーネント定義

コンポーネントの定義は次のように分解できます。

  • AEM コンポーネントは、Sling に基づいています。
  • AEM コンポーネントは、(通常は)次の場所に配置されます。
    • HTL:/libs/wcm/foundation/components 
    • JSP:/libs/foundation/components
  • プロジェクトまたはサイトに固有のコンポーネントは、(通常は)次の場所に配置されます。
    • /apps/<myApp>/components
  • AEM の標準コンポーネントは、cq:Component として定義され、次の主要な構成要素を持ちます。
    • jrc プロパティ:
      jcr プロパティのリスト。jcr プロパティは可変で、オプションのものもありますが、コンポーネントノードの基本構造、プロパティおよびサブノードは cq:Component で定義されます。
    • リソース:
      コンポーネントが使用する静的要素を定義します。
    • スクリプト:
      コンポーネントの結果インスタンスの動作を実装するために使用されます。
  • ルートノード
    • <mycomponent> (cq:Component) - コンポーネントの階層ノード。
  • 重要なプロパティ
    • jcr:title - コンポーネントのタイトル。コンポーネントブラウザーまたはサイドキック内のコンポーネントリストに示すときのラベルとして使用されたりします。
    • jcr:description - コンポーネントの説明。コンポーネントブラウザーまたはサイドキック内でマウスを上に置くと表示されるヒントとして使用できます。
    • クラシック UI:
      • icon.png - このコンポーネントのアイコン。
      • thumbnail.png - このコンポーネントを段落システム内にリストする場合に表示される画像。
  • 重要な子ノード
    • cq:editConfig(cq:EditConfig) - コンポーネントの編集プロパティを定義し、コンポーネントをコンポーネントブラウザーまたはサイドキックに表示できるようにします。
      注意:コンポーネントにダイアログがある場合は、cq:editConfig が存在しなくても、コンポーネントは自動的にコンポーネントブラウザーまたはサイドキックに表示されます。
    • cq:childEditConfig(cq:EditConfig) - 独自の cq:editConfig を定義しない子コンポーネントに関するオーサリング UI の属性を制御します。
    • タッチ操作向け UI:
      • cq:dialognt:unstructured) - タッチ操作向け UI でのこのコンポーネント用のダイアログ。ユーザーがコンポーネントを設定したり、コンテンツを編集したりできるインターフェイスを定義します。
      • cq:design_dialognt:unstructured) - タッチ操作向け UI でのこのコンポーネント用のデザイン編集。
    • クラシック UI:
      • dialogcq:Dialog) - クラシック UI でのこのコンポーネント用のダイアログ。ユーザーがコンポーネントを設定したり、コンテンツを編集したりできるインターフェイスを定義します。
      • design_dialogcq:Dialog) - クラシック UI でのこのコンポーネント用のデザイン編集。

コンポーネントのプロパティおよび子ノード

コンポーネントの定義に必要なノードまたはプロパティの多くは、両方の UI に共通です。コンポーネントがどちらの環境でも機能できるよう、相違点の独立性は確保されています。

コンポーネントはタイプ cq:Component のノードで、以下のプロパティと子ノードがあります。

名前
タイプ
説明
.
cq:Component 現在のコンポーネント。ノードタイプ cq:Component のコンポーネント。
componentGroup String コンポーネントブラウザー(タッチ操作向け UI)またはサイドキック(クラシック UI)でコンポーネントを選択できるグループ。
実際の段落システムなど、UI から選択できないコンポーネントには、値 .hidden を使用します。
cq:isContainer String コンポーネントがコンテナコンポーネントかどうか、したがって段落システムなど他のコンポーネントを格納できるかどうかを示します。
     
cq:dialog nt:unstructured
タッチ操作向け UI 用の編集ダイアログの定義。
dialog cq:Dialog クラシック UI 用の編集ダイアログの定義。
cq:design_dialog nt:unstructured タッチ操作向け UI 用のデザインダイアログの定義。
design_dialog cq:Dialog  クラシック UI 用のデザインダイアログの定義。
dialogPath String コンポーネントにダイアログノードがない場合のダイアログへのパス。
     
cq:cellName String 設定した場合、このプロパティはセル ID として取得されます。詳しくは、ナレッジベースの記事「How are Design Cell IDs built」を参照してください。
cq:childEditConfig cq:EditConfig コンポーネントがコンテナの場合(例えば、段落システムの場合)は、これにより子ノードの設定を編集できます。
cq:editConfig cq:EditConfig コンポーネントの編集設定
cq:htmlTag nt:unstructured  対象を囲んでいる html タグに追加されたその他のタグ属性を返します。自動生成された div に属性を追加できます。
cq:noDecoration Boolean true の場合、コンポーネントは、自動生成された div クラスと css クラスでレンダリングされません。
cq:template nt:unstructured 見つかった場合、このノードは、コンポーネントブラウザーまたはサイドキックからコンポーネントを追加するときにコンテンツテンプレートとして使用されます。
cq:templatePath String コンポーネントブラウザーまたはサイドキックからコンポーネントを追加するときにコンテンツテンプレートとして使用されるノードのパス。これは、コンポーネントノードの相対パスではなく、絶対パスにする必要があります。
他の場所で既に使用可能なコンテンツを再利用しないのであれば不要であり、cq:template で十分です(下記参照)。
jcr:created 日付 コンポーネントの作成日。
jcr:description String コンポーネントの説明。
jcr:title String コンポーネントのタイトル。
sling:resourceSuperType String 設定した場合、コンポーネントの継承元がこのコンポーネントになります。
virtual sling:Folder 仮想コンポーネントを作成できます。例を確認するには、/libs/foundation/components/profile/form/contact の連絡先コンポーネントを参照してください。
     
<breadcrumb.jsp> nt:file
スクリプトファイル。
icon.png nt:file コンポーネントのアイコンがサイドキックのタイトルの隣に表示されます。
thumbnail.png nt:file サイドキックからコンポーネントをドラッグしている間に表示されるオプションのサムネール。

テキストコンポーネント(どちらかのバージョン)を見ると、次の要素が表示されます。

  • HTL(/libs/wcm/foundation/components/text

  • JSP(/libs/foundation/components/text

特に重要なプロパティを次に示します。

  • jcr:title - コンポーネントのタイトル。コンポーネントブラウザーまたはサイドキック内のコンポーネントリストに表示されたりするコンポーネントの識別に使用できます。
  • jcr:description - コンポーネントの説明。サイドキック内のコンポーネントリストでマウスオーバーヒントとして使用できます。
  • sling:resourceSuperType - (定義のオーバーライドによる)コンポーネントの拡張時に、継承パスを示します。

特に重要な子ノードを次に示します。

  • cq:editConfigcq:EditConfig) - 視覚的な側面を制御します。例えば、バーやウィジェットの外観を定義したり、カスタマイズしたコントロールを追加したりできます。
  • cq:childEditConfigcq:EditConfig) - 独自の定義を持たない子コンポーネントの視覚的な側面を制御します。
  • タッチ操作向け UI:
    • cq:dialognt:unstructured) - このコンポーネントのコンテンツをタッチ操作向け UI で編集するためのダイアログを定義します。
    • cq:design_dialognt:unstructured) - このコンポーネントのタッチ操作向け UI でのデザイン編集オプションを指定します。
  • クラシック UI:
    • dialogcq:Dialog) - このコンポーネントのコンテンツを編集するためのダイアログを定義します(クラシック UI に固有)。
    • design_dialogcq:Dialog) - このコンポーネントのクラシック UI でのデザイン編集オプションを指定します。
    • icon.png - サイドキック内のコンポーネントのアイコンとして使用されるグラフィックファイルです。
    • thumbnail.png - サイドキックからコンポーネントをドラッグしている間、そのサムネールとして使用されるグラフィックファイルです。

ダイアログ

ダイアログは、コンポーネントの主要な要素の一つです。作成者がコンポーネントを設定し、必要情報を提供するためのインターフェイスをダイアログが備えているからです。

コンポーネントの複雑さに応じて、ダイアログには 1 つ以上のタブが必要です。これは、ダイアログを簡潔にし、必要情報フィールドを分類するためです。

ダイアログの定義は UI に固有です。

注意:

  • 互換性を保つために、タッチ操作向け UI 用のダイアログが定義されていないときは、タッチ操作向け UI でクラシック UI ダイアログの定義を使用できます。
  • クラシック UI 用のダイアログのみが定義されているコンポーネントを拡張または変換するときのために、ダイアログ変換ツールも用意されています。

  • タッチ操作向け UI

    • cq:dialognt:unstructured)ノード:
      • このコンポーネントのコンテンツ編集に使用するダイアログを定義します。
      • タッチ操作向け UI に固有です。
      • Granite UI コンポーネントを使用して定義されます。
      • 標準の Sling コンテンツ構造として sling:resourceType プロパティを持ちます。
      • helpPath プロパティを指定できます。このプロパティでは、ヘルプアイコン(「?」アイコン)が選択されたときに表示される、コンテキストセンシティブなヘルプリソースを定義できます(絶対パスまたは相対パスで定義します)。既製コンポーネントでは、多くの場合、このヘルプリソースはドキュメント内のページを参照します。helpPath が指定されていない場合は、デフォルトの URL(ドキュメントの概要ページ)が表示されます。

    ダイアログ内で、個々のフィールドは次のように定義されます。

  • クラシック UI

    • dialogcq:Dialog)ノード:
      • このコンポーネントのコンテンツ編集に使用するダイアログを定義します。
      • クラシック UI に固有です。
      • ExtJS ウィジェットを使用して定義されます。
      • ExtJS を参照する xtype プロパティを持ちます。
      • helpPath プロパティを指定できます。このプロパティでは、「ヘルプ」ボタンが選択されたときに表示される、コンテキストセンシティブなヘルプリソースを定義できます(絶対パスまたは相対パスで定義します)。既製コンポーネントでは、多くの場合、このヘルプリソースはドキュメント内のページを参照します。helpPath が指定されていない場合、デフォルトの URL(ドキュメントの概要ページ)が表示されます。

    ダイアログ内で、個々のフィールドは次のように定義されます。

    クラシックダイアログ内では、次のことが可能です。

    • ダイアログを cq:Dialog として作成できます。これはテキストコンポーネント内のダイアログと同様に、タブを 1 つだけ含みます。複数のタブが必要な場合は、textimage コンポーネントと同様に、ダイアログを cq:TabPanel として定義できます。
    • cq:WidgetCollectionアイテム)を、必要情報フィールド(cq:Widget)や追加タブ(cq:Widget)のベースとして使用します。この階層は、拡張することが可能です。

デザインダイアログ

デザインダイアログは、コンテンツの編集や設定に使用されるダイアログによく似ていますが、そのコンポーネントのデザインの詳細を作成者が設定できるようにするインターフェイスを提供します。

デザインダイアログはデザインモードで使用可能ですが、必ずしもすべてのコンポーネントに必要なわけではありません。例えば、タイトルコンポーネントと画像コンポーネントにはどちらもデザインダイアログがありますが、テキストコンポーネントにはありません。

段落システム(parsys など)用のデザインダイアログは特殊なケースで、ユーザーはこのデザインダイアログを使用して、特定の他のコンポーネントをページ上で(コンポーネントブラウザーまたはサイドキックから)選択することができます。

コンポーネントを段落システムに追加

コンポーネントを定義した上で、使用可能にする必要があります。コンポーネントを段落システムで使用可能にするには、次のどちらかの方法を実行します。

  1. ページに対してデザインモードを開き、必要なコンポーネントを有効にします。

  2. 必要なコンポーネントを次の場所にあるテンプレート定義の components プロパティに追加します。

    /etc/designs/<yourProject>/jcr:content/<yourTemplate>/par

    例:

        /etc/designs/geometrixx/jcr:content/contentpage/par

コンポーネントおよびコンポーネントによって作成されるコンテンツ

ページ <content-path>/Prototype.html 上にタイトルコンポーネントのインスタンスを作成して設定する場合:

  • タッチ操作向け UI

  • クラシック UI

ここで、リポジトリ内に作成されたコンテンツの構造を確認できます。

特に、タイトルコンポーネントの実際のテキストに着目した場合:

  • (両方の UI の)定義にプロパティ name=./jcr:title があります。
    • /libs/foundation/components/title/cq:dialog/content/items/column/items/title
    • /libs/foundation/components/title/dialog/items/title
  • この定義によって、コンテンツ内に作成者のコンテンツを保持する jcr:title というプロパティが生成されます。

定義されるプロパティは、個々の定義によって異なります。上記と比べて複雑なプロパティの場合もありますが、なお同じ基本原則に従っています。

コンポーネントの階層および継承

AEM 内のコンポーネントは、次の 3 種類の階層で表現されます。

  • リソースタイプ階層
    プロパティ sling:resourceSuperType によるコンポーネントの拡張に使用されます。これにより、コンポーネントは継承が可能になります。例えば、テキストコンポーネントが標準コンポーネントから各種の属性を継承します。
    • スクリプト(Sling によって解決)
    • ダイアログ
    • 説明(サムネール画像、アイコンなどを含む)
  • コンテナ階層
    子コンポーネントに設定を適用するために使用されます。parsys シナリオで最もよく使用されています。
    例えば、編集バーのボタン、コントロールセットのレイアウト(編集バー、ロールオーバー)、ダイアログのレイアウト(インライン、浮動)の設定を親コンポーネントで定義して、子コンポーネントに適用できます。
    cq:editConfig および cq:childEditConfig の(編集機能に関する)設定が適用されます。
  • インクルード階層実行時にインクルードのシーケンスによって適用されます。

    この階層は、デザイナーによって使用され、レンダリングのさまざまなデザイン側面、特にレイアウト情報、CSS 情報、parsys で使用可能なコンポーネントの基礎として機能します。

編集動作

この節では、コンポーネントの編集動作の設定方法について説明します。コンポーネントに対して使用可能なアクションなどの属性、インプレースエディターの特性、コンポーネントに対するイベントに関連するリスナーについても説明します。

固有の相違点は多少ありますが、設定はタッチ操作向け UI とクラシック UI の両方に共通です。

コンポーネントの編集動作を設定するには、タイプ cq:EditConfigcq:editConfig ノードをコンポーネントノード(タイプ cq:Component)の下に追加し、特定のプロパティと子ノードを追加します。使用可能なプロパティと子ノードを次に示します。

  • cq:editConfig ノードプロパティ

    • cq:actionsString 配列):コンポーネントで実行できるアクションを定義します。
    • cq:layoutString):クラシック UI でのコンポーネントの編集方法を定義します。
    • cq:dialogModeString):クラシック UI でコンポーネントダイアログを開く方法を定義します。タッチ操作向け UI のダイアログは、デスクトップモードでは常に浮動し、モバイルでは自動的に全画面表示として開きます。
    • cq:emptyTextString):視覚的なコンテンツが存在しない場合に表示するテキストを定義します。
    • cq:inheritブール値):欠落している値をその継承元のコンポーネントから継承するかどうかを定義します。
  • cq:editConfig 子ノード

    • cq:dropTargets(ノードタイプ nt:unstructured):コンテンツファインダーのアセットからのドロップを受け入れることができるドロップターゲットのリストを定義します(複数のドロップターゲットはクラシック UI でのみ使用できます。タッチ操作向け UI では、単一のドロップターゲットが許可されています)。
    • cq:actionConfigs(ノードタイプ nt:unstructured):cq:actions リストに追加する新しいアクションのリストを定義します。
    • cq:formParameters(ノードタイプ nt:unstructured):ダイアログフォームに追加するその他のパラメーターを定義します。
    • cq:inplaceEditing(ノードタイプ cq:InplaceEditingConfig):コンポーネントのインプレース編集設定を定義します。
    • cq:listeners(ノードタイプ cq:EditListenersConfig):コンポーネントでアクションを実行する前後の処理を定義します。

注意:

このページでは、ノード(プロパティおよび子ノード)は、次の例に示すように XML として表現されます。

<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    cq:actions="[edit]"
    cq:dialogMode="floating"
    cq:layout="editbar"
    jcr:primaryType="cq:EditConfig">
    <cq:listeners
        jcr:primaryType="cq:EditListenersConfig"
        afteredit="REFRESH_PAGE"/>
</jcr:root>

リポジトリには、既存の設定が多数あります。ユーザーは、特定のプロパティや子ノードを簡単に検索できます。

  • cq:editConfig ノードプロパティ、例えば cq:actions を探すには、CRXDE Lite のクエリーツールで、次の XPath クエリー文字列を指定して、検索を実行します。
    //element(cq:editConfig, cq:EditConfig)[@cq:actions]
  • cq:editConfig の子ノード、例えばタイプ cq:DropTargetConfigcq:dropTargets を探すには、CRXDE Lite のクエリーツールで、次の XPath クエリー文字列を指定して、検索を実行します。
    //element(cq:dropTargets, cq:DropTargetConfig)

cq:EditConfig プロパティを使用した設定

cq:actions

cq:actions プロパティ(String 配列)では、コンポーネントで実行できるアクションを 1 個から数個定義します。設定に使用できる値を以下に示します。

プロパティの値 説明
text:<some text> 静的テキスト値 <some text> が表示されます。
クラシック UI でのみ表示可能です。タッチ操作向け UI では、アクションがコンテキストメニューに表示されることがないので、適用されません。
- スペーサーを追加します.
クラシック UI でのみ表示可能です。タッチ操作向け UI では、アクションがコンテキストメニューに表示されることがないので、適用されません。
edit コンポーネントを編集するボタンを追加します.
delete コンポーネントを削除するボタンを追加します
insert 現在のコンポーネントの前に新しいコンポーネントを挿入するボタンを追加します
copymove コンポーネントをコピーして切り取るボタンを追加します.

次の設定では、編集ボタン、スペーサー、削除ボタンおよび挿入ボタンがコンポーネントの編集バーに追加されます。

<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    cq:actions="[edit,-,delete,insert]"
    cq:layout="editbar"
    jcr:primaryType="cq:EditConfig"/>

次の設定では、「Inherited Configurations from Base Framework」というテキストがコンポーネントの編集バーに追加されます。

<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    cq:actions="[text:Inherited Configurations from Base Framework]"
    cq:layout="editbar"
    jcr:primaryType="cq:EditConfig"/>

cq:layout(クラシック UI のみ)

cq:layout プロパティ(String)では、クラシック UI でコンポーネントを編集可能にする方法を定義します。使用可能な値を次に示します。

プロパティの値 説明
rollover (デフォルト値)。コンポーネントを編集するには、「マウスポインターを重ねて」クリックするか、コンテキストメニューを使用します。
高度な使用法の場合、対応するクライアント側オブジェクトは CQ.wcm.EditRollover です。
editbar コンポーネントを編集するには、ツールバーを使用します。
高度な使用法の場合、対応するクライアント側オブジェクトは CQ.wcm.EditBar です。
auto クライアント側のコードによって方法が選択されます。

注意:

rollover と editbar の概念は、タッチ操作向け UI では適用されません。

次の設定では、編集ボタンがコンポーネントの編集バーに追加されます。

<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    cq:actions="[edit]"
    cq:layout="editbar"
    jcr:primaryType="cq:EditConfig">
</jcr:root>

cq:dialogMode(クラシック UI のみ)

コンポーネントを編集ダイアログにリンクできます。cq:dialogMode プロパティ(String)では、クラシック UI でコンポーネントダイアログを開く方法を定義します。使用可能な値を次に示します。

プロパティの値 説明
floating ダイアログが浮動になります。
inline (デフォルト値)。ダイアログがコンポーネント上に固定されます。
auto コンポーネントの幅がクライアント側の CQ.themes.wcm.EditBase.INLINE_MINIMUM_WIDTH 値よりも小さい場合、ダイアログは floating になります。それ以外の場合は、inline になります。

注意:

タッチ操作向け UI のダイアログは、デスクトップモードでは常に浮動し、モバイルでは自動的に全画面表示として開きます。

次の設定では、編集ボタンを含む編集バーと浮動ダイアログが定義されます。

<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    cq:actions="[edit]"
    cq:dialogMode="floating"
    cq:layout="editbar"
    jcr:primaryType="cq:EditConfig">
</jcr:root>

cq:emptyText

cq:emptyText プロパティ(String)では、視覚的なコンテンツが存在しない場合に表示するテキストを定義します。デフォルト値は、「コンポーネントまたはアセットをここにドラッグ」です。

cq:inherit

cq:inherit プロパティ(ブール値)では、欠落している値をその継承元のコンポーネントから継承するかどうかを定義します。デフォルト値は false です。

cq:EditConfig の子ノードを使用した設定

cq:dropTargets

cq:dropTargets ノード(ノードタイプ nt:unstructured)では、コンテンツファインダーからドラッグしたアセットからのドロップを受け入れ可能なドロップターゲットのリストを定義します。これは、タイプ cq:DropTargetConfig のノードのコレクションとして機能します。

注意:

複数のドロップターゲットはクラシック UI でのみ使用できます。

タッチ操作向け UI では、最初のターゲットのみが使用されます。

タイプ cq:DropTargetConfig のそれぞれの子ノードでは、コンポーネントのドロップターゲットを定義します。ノード名は重要です。ノード名は、JSP で次のように使用して、有効なドロップターゲットである DOM 要素に割り当てられる CSS クラス名を生成する必要があるからです。

<ドロップターゲット CSS クラス> = <ドラッグ&ドロッププレフィックス> + <編集設定のドロップターゲットのノード名>

<ドラッグ&ドロッププレフィックス> は、Java プロパティ

com.day.cq.wcm.api.components.DropTarget.CSS_CLASS_PREFIX によって定義されます。

例えば、JSP では、ダウンロードコンポーネント(/libs/foundation/components/download/download.jsp)のクラス名は次のように定義されます。file は、ダウンロードコンポーネントの編集設定内のドロップターゲットのノード名です。

String ddClassName = DropTarget.CSS_CLASS_PREFIX + "file";

タイプ cq:DropTargetConfig のノードには、次のプロパティが必要です。

プロパティ名 プロパティの値
accept ドロップを許可するかどうかを検証するためにアセット MIME タイプに適用される regex。
groups ドロップターゲットグループの配列。各グループは、コンテンツファインダーの拡張子に定義されていて、アセットに付加されているグループタイプに一致する必要があります。
propertyName 有効なドロップの後に更新されるプロパティの名前。

次の設定は、ダウンロードコンポーネントから取得したものです。この設定では、media グループの任意のアセット(MIME タイプが任意の文字列でよい)をコンテンツファインダーからコンポーネントにドロップすることが可能です。ドロップをおこなうと、コンポーネントのプロパティ fileReference が更新されます。

    <cq:dropTargets jcr:primaryType="nt:unstructured">
        <file
            jcr:primaryType="cq:DropTargetConfig"
            accept="[.*]"
            groups="[media]"
            propertyName="./fileReference"/>
    </cq:dropTargets>

cq:actionConfigs

cq:actionConfigs ノード(ノードタイプ nt:unstructured)では、cq:actions プロパティで定義されたリストに追加する新しいアクションのリストを定義します。cq:actionConfigs のそれぞれの子ノードでは、ウィジェットを定義することにより新しいアクションを定義します。

以下の設定例では、(クラシック UI 用の区切り文字を持つ)新しいボタンを定義しています。

  • xtype tbseparator で定義される区切り文字。
    • クラシック UI でのみ使用されます。
    • タッチ操作向け UI では xtype が無視されるので、この定義は無視されます(また、タッチ操作向け UI ではアクションツールバーの構造が異なるので、区切り文字は不要です)。
  • ハンドラー関数 CQ_collab_forum_openCollabAdmin() を実行する「Manage comments」という名前のボタン。
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    cq:actions="[EDIT,COPYMOVE,DELETE,INSERT]"
    jcr:primaryType="cq:EditConfig">
    <cq:actionConfigs jcr:primaryType="nt:unstructured">
        <separator0
            jcr:primaryType="nt:unstructured"
            xtype="tbseparator"/>
        <manage
            jcr:primaryType="nt:unstructured"
            handler="function(){CQ_collab_forum_openCollabAdmin();}"
            text="Manage comments"/>
    </cq:actionConfigs>
</jcr:root>

注意:

タッチ操作向け UI の例は、新しいアクションをコンポーネントツールバーに追加を参照してください。

cq:formParameters

cq:formParameters ノード(ノードタイプ nt:unstructured)では、ダイアログフォームに追加するその他のパラメーターを定義します。各プロパティは、form パラメーターにマップされます。

次の設定では、値 photos/primary が設定された name という名前のパラメーターがダイアログフォームに追加されます。

    <cq:formParameters
        jcr:primaryType="nt:unstructured"
        name="photos/primary"/>

cq:inplaceEditing

cq:inplaceEditing ノード(ノードタイプ cq:InplaceEditingConfig)では、コンポーネントのインプレース編集設定を定義します。このノードは、次のプロパティを持つことができます。

プロパティ名 プロパティの値
active ブール値)true に設定した場合、コンポーネントのインプレース編集が可能になります。
configPath String)エディター設定のパス。設定は、設定ノードで指定できます。
editorType

String)エディターのタイプ。指定できるタイプを次に示します。

  • plaintext:コンテンツが HTML 以外の場合に使用します。
  • title:編集を開始する前にグラフィカルなタイトルをプレーンテキストに変換する拡張プレーンテキストエディター。Geometrixx タイトルコンポーネントで使用されます。
  • text:コンテンツが HTML の場合に使用します(リッチテキストエディターを使用)。

次の設定では、コンポーネントのインプレース編集が可能になり、テキストエディターとして plaintext が定義されます。

    <cq:inplaceEditing
        jcr:primaryType="cq:InplaceEditingConfig"
        active="{Boolean}true"
        editorType="plaintext"/>

cq:listeners

cq:listeners ノード(ノードタイプ cq:EditListenersConfig)では、コンポーネントでアクションを実行する前後の処理を定義します。このノードは、次のプロパティを持つことができます。

プロパティ名 プロパティの値
デフォルト値
beforedelete コンポーネントを削除する前にハンドラーが呼び出されます。
 
beforeedit コンポーネントを編集する前にハンドラーが呼び出されます。  
beforecopy コンポーネントをコピーする前にハンドラーが呼び出されます。  
beforemove コンポーネントを移動する前にハンドラーが呼び出されます。  
beforeinsert コンポーネントを挿入する前にハンドラーが呼び出されます。
注意:タッチ操作向け UI でのみ動作します。
 
beforechildinsert コンポーネントを別のコンポーネント(コンテナのみ)の内部に挿入する前にハンドラーが呼び出されます。  
afterdelete コンポーネントを削除した後にハンドラーが呼び出されます。 REFRESH_SELF
afteredit コンポーネントを編集した後にハンドラーが呼び出されます。 REFRESH_SELF
aftercopy コンポーネントをコピーした後にハンドラーが呼び出されます。 REFRESH_SELF
afterinsert コンポーネントを挿入した後にハンドラーが呼び出されます。 REFRESH_INSERTED
aftermove コンポーネントを移動した後にハンドラーが呼び出されます。 REFRESH_SELFMOVED
afterchildinsert コンポーネントを別のコンポーネント(コンテナのみ)の内部に挿入した後にハンドラーが呼び出されます。  

注意:

コンポーネントがネストされている場合は、cq:listeners ノードでプロパティとして定義されるアクションに一定の制限があります。

  • コンポーネントがネストされている場合、次のプロパティの値を REFRESH_PAGE にする必要があります。
    • aftermove
    • aftercopy 

イベントハンドラーを実装するときは、カスタム実装を組み込むことができます。次に例を示します(project.customerAction は静的メソッドです)。

afteredit = "project.customerAction"

次の例は、REFRESH_INSERTED 設定と同等です。

afterinsert="function(path, definition) { this.refreshCreated(path, definition); }"

注意:

クラシック UI の場合、ハンドラーで使用できるパラメーターについては、CQ.wcm.EditBar および CQ.wcm.EditRollover ウィジェットのドキュメントに記載されている before<action> イベントおよび after<action> イベントの説明を参照してください。

次の設定では、コンポーネントを削除、編集、挿入または移動した後にページが更新されます。

    <cq:listeners
        jcr:primaryType="cq:EditListenersConfig"
        afterdelete="REFRESH_PAGE"
        afteredit="REFRESH_PAGE"
        afterinsert="REFRESH_PAGE"
        afterMove="REFRESH_PAGE"/>

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー