新しいコンポーネントの開発にとりかかる際は、その構造と設定の基本を理解する必要があります。
これには、標準的なセオリーを学び、標準 AEM インスタンスでのコンポーネントの実装を幅広く知ることが含まれます。AEM は新しい標準のタッチ操作対応 UI に変更されましたが、引き続きクラシック UI をサポートしているので、この後者のアプローチは少し複雑です。
この節では、独自コンポーネントの開発時に知っておくべき詳細の導入段階として、基本的な概念と注意点について説明します。
実際にコンポーネントの設定やコーディングを開始する前に、次の点について理解する必要があります。
そもそも新しいコンポーネントで何をするか
明確な仕様は、開発、テスト、引継ぎのあらゆる段階で役立ちます。
詳細は時間と共に変化する可能性がありますが、仕様は更新可能です(ただし、変更箇所を記録しておく必要があります)。
コンポーネントを一から作成する必要があるか、基本部分を既存のコンポーネントから継承できるか
コンポーネントのコンテンツを選択または操作するためのロジックが必要か
コンポーネントを CSS で書式設定する必要があるか
考慮すべきセキュリティ要素は何か
コンポーネントの開発について本格的な検討を始める前に、作成者がどちらの UI を使用するかを知っておく必要があります。
タッチ操作対応 UI
標準のユーザーインターフェイス AEM 5.6.0 でプレビューとして導入され、6.x で拡張されたものです。Adobe Marketing Cloudの基盤となるテクノロジーを使用して、統合されたユーザーエクスペリエンスに基づいています。 Coral UI および Granite UI.
クラシック UI CQ 5.1 で導入された、ExtJS テクノロジーに基づくユーザーインターフェイスです。
詳しくは、UI インターフェイスに関するお客様向け推奨事項を参照してください。
タッチ操作対応 UI、クラシック UI または両方をサポートするようにコンポーネントを実装できます。標準インスタンスを見ると、最初はクラシック UI、タッチ操作対応 UI、またはその両方用に設計された、標準搭載のコンポーネントも表示されます。
このため、このページでは両 UI の基本と識別方法について説明します。
Adobeでは、最新のテクノロジーを活用するために、タッチ操作対応 UI を活用することをお勧めします。 AEM Modernization Tools を使用すると、移行が容易になります。
マークアップおよびレンダリングを行うコードと、コンポーネントのコンテンツ選択に関するロジックを制御するコードは、分離しておくことをお勧めします。
この方法をサポートするテンプレート言語が HTL です。HTL では、基盤となるビジネスロジックを定義するときにのみプログラミング言語を使用します。この(オプションの)ロジックは、特定のコマンドで HTL から呼び出されます。この仕組みでは、特定のビュー用に呼び出されるコードに焦点を当てることができるので、必要に応じて、同じコンポーネントの様々なビュー用のロジックを定義できます。
HTL は、AEM 6.0 で導入されたHTMLテンプレート言語です。
独自コンポーネントの開発時に HTL と JSP(Java Server Pages)のどちらを使用すべきかという質問への回答は明快です。現在では、HTL が AEM の推奨スクリプティング言語とされています。
HTL と JSP はどちらも、クラシック UI とタッチ操作対応 UI の両方のコンポーネントの開発に使用できます。HTL はタッチ操作対応 UI 専用で JSP はクラシック UI 用だと想定する傾向があるかもしれませんが、これは時期に起因する誤解です。タッチ操作対応 UI と HTL は、ほぼ同時期に AEM に組み込まれました。HTL は現在推奨される言語なので、新しいコンポーネントに使用されており、このため、タッチ操作対応 UI に使用される傾向があります。
例外は、ダイアログで使用される Granite UI 基盤のフォームフィールドです。このフィールドには、引き続き JSP を使用する必要があります。
UI の種類に応じた独自コンポーネントを作成するには、(このページを読んでから)以下を参照してください。
既存のコンポーネントをコピーし、必要な変更をおこなうことが、開発を始めるうえで最も簡単な方法です。独自のコンポーネントを作成し、それを段落システムに追加する方法については、以下を参照してください。
コンテンツをレンダリングするコンポーネントは、コンテンツと同じ AEM インスタンスにデプロイする必要があります。したがって、オーサーインスタンス上でページをオーサリングおよびレンダリングするために使用するすべてのコンポーネントを、パブリッシュインスタンスにデプロイする必要があります。デプロイすると、コンポーネントを使用して、アクティブ化されたページをレンダリングできるようになります。
コンポーネントをパブリッシュインスタンスに移動するには、次のツールを使用します。
これらの仕組みを利用して、開発インスタンスからテストインスタンスなど、インスタンス間でコンポーネントを移行することもできます。
ページ:
cq:Page
) をクリックします。段落システム:
parsys
, [responsivegrid](/docs/experience-manager-64/sites-authoring/responsive-layout.md)
) をクリックします。AEM コンポーネントの構造は強力で、柔軟性があります。主な考慮事項は次のとおりです。
構造の重要な構成要素となるのが、リソースタイプです。
このような抽象化をすることで、時間の経過と共にルックアンドフィールが変化しても、意図が変わることはありません。
コンポーネントの定義は次のように分解できます。
AEM コンポーネントは、Sling に基づいています。
AEM コンポーネントは、(通常は)次の場所に配置されます。
/libs/wcm/foundation/components
/libs/foundation/components
プロジェクトまたはサイトに固有のコンポーネントは、(通常は)次の場所に配置されます。
/apps/<myApp>/components
AEM の標準コンポーネントは、cq:Component
として定義され、次の主要な構成要素を持ちます。
jcr プロパティ:
jcr プロパティのリスト。これらは変数で、一部はオプションです。ただし、コンポーネントノードの基本構造、プロパティおよびサブノードは cq:Component
定義
リソース:
これらは、コンポーネントで使用される静的要素を定義します。
スクリプト:
コンポーネントの結果インスタンスの動作を実装するために使用されます。
ルートノード:
<mycomponent> (cq:Component)
- コンポーネントの階層ノード重要なプロパティ:
jcr:title
- コンポーネントのタイトル。コンポーネントブラウザーまたはサイドキック内のコンポーネントリストに示すときのラベルとして使用されたりします。
jcr:description
- コンポーネントの説明。コンポーネントブラウザーまたはサイドキック内でマウスを上に置くと表示されるヒントとして使用できます。
クラシック UI:
icon.png
— このコンポーネントのアイコン。thumbnail.png
- このコンポーネントを段落システム内にリストする場合に表示される画像。タッチ UI
重要な子ノード:
cq:editConfig (cq:EditConfig)
— コンポーネントの編集プロパティを定義し、コンポーネントブラウザーまたはサイドキックにコンポーネントを表示できるようにします。
注意:コンポーネントにダイアログがある場合は、cq:editConfig が存在しなくても、コンポーネントは自動的にコンポーネントブラウザーまたはサイドキックに表示されます。
cq:childEditConfig (cq:EditConfig)
- 独自の cq:editConfig
を定義しない子コンポーネントの作成者 UI 要素を制御します。
タッチ操作対応 UI:
cq:dialog
( nt:unstructured
) — このコンポーネントのダイアログ。 ユーザーがコンポーネントを設定したり、コンテンツを編集したりできるインターフェイスを定義します。cq:design_dialog
( nt:unstructured
) - このコンポーネントのデザイン編集クラシック UI:
dialog
( cq:Dialog
) — このコンポーネントのダイアログ。 ユーザーがコンポーネントを設定したり、コンテンツを編集したりできるインターフェイスを定義します。design_dialog
( cq:Dialog
) - このコンポーネントのデザイン編集.コンポーネントのアイコンまたは省略形は、デベロッパーがコンポーネントを作成する際にコンポーネントの JCR プロパティで定義します。これらのプロパティは、次の順番で評価され、最初に見つかった有効なプロパティが使用されます。
cq:icon
- コンポーネントブラウザーで表示するための Coral UI ライブラリの標準的なアイコンを指定する String プロパティ
abbreviation
- コンポーネントブラウザーでのコンポーネント名の省略形をカスタマイズするための String プロパティ
省略形は最大 2 文字までにする必要があります。
空の文字列が指定されると、jcr:title
プロパティの最初の 2 文字を使用して省略形が作成されます。
省略形は、コンポーネントに abbreviation_commentI18n
プロパティがある場合にのみ翻訳されます。これは、翻訳ヒントとして使用されます。
cq:icon.png
または cq:icon.svg
— このコンポーネントのアイコン(コンポーネントブラウザーに表示されます)
20 x 20 pixel は、標準的なコンポーネントのアイコンのサイズです。
お勧めの色は、RGB(112、112、112)、つまり #707070 です。
標準的なコンポーネントアイコンの背景は、透明です。
.png
および .svg
ファイルのみがサポートされます。
Eclipse プラグインを使用してファイルシステムから読み込む場合、例えば _cq_icon.png
や _cq_icon.svg
のように、ファイル名をエスケープする必要があります。
.png
~に先んじる .svg
両方が存在する場合
コンポーネントで上述のプロパティ(cq:icon
、abbreviation
、cq:icon.png
または cq:icon.svg
)が見つからない場合:
sling:resourceSuperType
プロパティに続くスーパーコンポーネント上の同じプロパティを検索します。jcr:title
プロパティの最初の文字から省略形を作成します。スーパーコンポーネントからアイコンの継承をキャンセルするために、コンポーネントで空の abbreviation
プロパティを設定すると、デフォルトの動作に戻ります。
コンポーネントコンソールには、特定のコンポーネントのアイコンの定義方法が表示されます。
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "https://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px"
width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<ellipse cx="5" cy="5" rx="3" ry="3" fill="#707070"/>
<ellipse cx="15" cy="5" rx="4" ry="4" fill="#707070"/>
<ellipse cx="5" cy="15" rx="5" ry="5" fill="#707070"/>
<ellipse cx="15" cy="15" rx="4" ry="4" fill="#707070"/>
</svg>
コンポーネントの定義に必要なノードまたはプロパティの多くは、両方の UI に共通です。コンポーネントがどちらの環境でも機能できるよう、相違点の独立性は確保されています。
コンポーネントはタイプ cq:Component
のノードで、次のプロパティと子ノードがあります。
名前 |
種類 |
説明 |
. |
cq:Component |
現在のコンポーネント。ノードタイプ cq:Component のコンポーネント。 |
componentGroup |
String |
コンポーネントブラウザー(タッチ操作対応 UI)またはサイドキック(クラシック UI)でコンポーネントを選択できるグループ。 値: .hidden は、実際の段落システムなど、UI から選択できないコンポーネントに使用されます。 |
cq:isContainer |
Boolean |
コンポーネントがコンテナコンポーネントかどうか、したがって段落システムなど他のコンポーネントを格納できるかどうかを示します。 |
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 |
Date |
コンポーネントの作成日。 |
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:editConfig
( cq:EditConfig
) — 視覚的な側面を制御します。例えば、バーやウィジェットの外観を定義したり、カスタマイズしたコントロールを追加したりできます。
cq:childEditConfig
( cq:EditConfig
) — 独自の定義を持たない子コンポーネントの視覚的要素を制御します。
タッチ操作対応 UI:
cq:dialog
( nt:unstructured
) — このコンポーネントのコンテンツを編集するためのダイアログを定義します。cq:design_dialog
( nt:unstructured
) — このコンポーネントのデザイン編集オプションを指定します。クラシック UI:
dialog
( cq:Dialog
) — このコンポーネント(クラシック UI に固有)のコンテンツを編集するためのダイアログを定義しますdesign_dialog
( cq:Dialog
) — このコンポーネントのデザイン編集オプションを指定します。icon.png
- サイドキック内のコンポーネントのアイコンとして使用されるグラフィックファイルthumbnail.png
- サイドキックからコンポーネントをドラッグしている間、そのサムネールとして使用されるグラフィックファイルダイアログは、コンポーネントの主要な要素の一つです。作成者がコンポーネントを設定し、必要情報を提供するためのインターフェイスをダイアログが備えているからです。
コンポーネントの複雑さに応じて、ダイアログには 1 つ以上のタブが必要です。これは、ダイアログを簡潔にし、必要情報フィールドを分類するためです。
ダイアログの定義は UI に固有です。
タッチ操作対応 UI
cq:dialog
( nt:unstructured
) nodes:
このコンポーネントのコンテンツ編集に使用するダイアログを定義します。
タッチ操作対応 UI 専用です。
Granite UI コンポーネントを使用して定義されます。
プロパティを持つ sling:resourceType
、標準の Sling コンテンツ構造として
helpPath
プロパティを指定できます。このプロパティでは、ヘルプアイコン(「?」アイコン ) が選択されている。
helpPath
が指定されていない場合、デフォルトのURL(ドキュメントの概要ページ)が表示されます。ダイアログ内で、個々のフィールドは次のように定義されます。
クラシック UI
dialog
( cq:Dialog
) nodes
このコンポーネントのコンテンツ編集に使用するダイアログを定義します。
クラシック UI 専用です。
ExtJS ウィジェットを使用して定義されます。
ExtJS を参照する xtype
プロパティを持ちます。
helpPath
プロパティを指定できます。このプロパティでは、ヘルプボタンが選択された場合に表示される状況依存型ヘルプリソースを定義します(絶対パスまたは相対パス)。
helpPath
が指定されていない場合、デフォルトのURL(ドキュメントの概要ページ)が表示されます。ダイアログ内で、個々のフィールドは次のように定義されます。
クラシックダイアログボックス内:
cq:Dialog
として作成できます。これはテキストコンポーネント内のダイアログと同様に、タブを 1 つだけ含みます。複数のタブが必要な場合は、textimage コンポーネントと同様に、ダイアログを cq:TabPanel
として定義できます。cq:WidgetCollection
( items
) は、入力フィールド ( cq:Widget
) または追加のタブ ( cq:Widget
) をクリックします。 この階層は、拡張することが可能です。デザインダイアログは、コンテンツの編集や設定に使用されるダイアログによく似ていますが、そのコンポーネントのデザインの詳細を作成者が設定できるようにするインターフェイスを提供します。
デザインダイアログはデザインモードで使用可能ですが、必ずしもすべてのコンポーネントに必要なわけではありません。例えば、タイトルコンポーネントと画像コンポーネントにはどちらもデザインダイアログがありますが、テキストコンポーネントにはありません。
段落システム(parsys など)用のデザインダイアログは特殊なケースで、ユーザーはこのデザインダイアログを使用して、特定の他のコンポーネントをページ上で(コンポーネントブラウザーまたはサイドキックから)選択することができます。
コンポーネントを定義した上で、使用可能にする必要があります。コンポーネントを段落システムで使用可能にするには、次のどちらかの方法を実行します。
ページに対してデザインモードを開き、必要なコンポーネントを有効にします。
必要なコンポーネントを次の場所にあるテンプレート定義の 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
これにより、コンポーネントの継承ができるようになります。例えば、テキストコンポーネントは標準コンポーネントから様々な属性を継承します。
コンテナ階層
子コンポーネントに設定を適用するために使用されます。parsys シナリオで最もよく使用されています。
例えば、編集バーのボタン、コントロールセットのレイアウト(編集バー、ロールオーバー)、ダイアログのレイアウト(インライン、浮動)の設定を親コンポーネントで定義して、子コンポーネントに適用できます。
の設定(編集機能に関連) cq:editConfig
および cq:childEditConfig
が伝播されます。
階層を含める
これは、インクルードのシーケンスによって実行時に課されます。
この階層は、デザイナーによって使用され、レンダリングの様々なデザイン側面、特にレイアウト情報、CSS 情報、parsys で使用可能なコンポーネントの基礎として機能します。
この節では、コンポーネントの編集動作の設定方法について説明します。コンポーネントに対して使用可能なアクションなどの属性、インプレースエディターの特性、コンポーネントに対するイベントに関連するリスナーについても説明します。
固有の相違点は多少ありますが、設定はタッチ操作対応 UI とクラシック UI の両方に共通です。
コンポーネントの編集動作を設定するには、タイプ cq:editConfig
の cq:EditConfig
ノードをコンポーネントノード(タイプ cq:Component
)の下に追加し、特定のプロパティと子ノードを追加します。使用可能なプロパティと子ノードを次に示します。
cq:actions
( String array
):は、コンポーネントで実行できるアクションを定義します。
cq:layout
( String
)::は、クラシック UI でのコンポーネントの編集方法を定義します。
cq:dialogMode
( String
):クラシック UI でのコンポーネントダイアログの開き方を定義します。
cq:emptyText
( String
):視覚的なコンテンツが存在しない場合に表示するテキストを定義します。
cq:inherit
( Boolean
):欠落した値が継承元のコンポーネントから継承されるかどうかを定義します。
dialogLayout
(String):ダイアログの開き方を定義します。
cq:dropTargets
( ノードタイプ nt:unstructured
):コンテンツファインダーのアセットからのドロップを受け入れることができるドロップターゲットのリストを定義します
cq:actionConfigs
( ノードタイプ nt:unstructured
):cq:actions リストに追加される新しいアクションのリストを定義します。
cq:formParameters
( ノードタイプ nt:unstructured
):ダイアログフォームに追加される追加のパラメーターを定義します。
cq:inplaceEditing
( ノードタイプ cq:InplaceEditingConfig
):コンポーネントのインプレース編集設定を定義します。
cq:listeners
( ノードタイプ cq:EditListenersConfig
):コンポーネントでアクションが発生する前または後の動作を定義します。
このページでは、ノード(プロパティおよび子ノード)は、次の例に示すように XML として表現されます。
<jcr:root xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://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:dropTargets
(タイプ) cq:DropTargetConfig
;「CRXDE Lite」のクエリツールを使用して、次の XPath クエリ文字列で検索できます。
//element(cq:dropTargets, cq:DropTargetConfig)
コンポーネントは、コンテンツがない場合でも必ず、作成者に表示される一部の HTML をレンダリングする必要があります。そうしないと、エディターのインターフェイスから視覚的に消えてしまい、技術的には存在しても、ページやエディターには表示されなくなります。この場合、作成者は空のコンポーネントを選択して操作することができません。
このため、ページがページエディターでレンダリングされる(WCM モードが edit
または preview
の場合)際に、コンポーネントは、表示された出力をレンダリングしない限り、プレースホルダーをレンダリングする必要があります。
プレースホルダーの一般的な HTML マークアップは次のとおりです。
<div class="cq-placeholder" data-emptytext="Component Name"></div>
上記のプレースホルダー HTML をレンダリングする一般的な HTL スクリプトは次のとおりです。
<div class="cq-placeholder" data-emptytext="${component.properties.jcr:title}"
data-sly-test="${(wcmmode.edit || wcmmode.preview) && isEmpty}"></div>
前の例では、isEmpty
は、コンポーネントにコンテンツがなくて作成者には見えない場合にのみ true になる変数です。
繰り返しを避けるために、アドビは、これらのプレースホルダーに、コアコンポーネントが提供するような HTL テンプレートを使用することをコンポーネントの実装者に推奨します。
その後、前のリンクでのテンプレートの使用は、次の HTL 行で行います。
<sly data-sly-use.template="core/wcm/components/commons/v1/templates.html"
data-sly-call="${template.placeholder @ isEmpty=!model.text}"></sly>
前の例では、model.text
はコンテンツが含まれていて表示されている場合にのみ true になる変数です。
このテンプレートの使用例は、コアコンポーネント(タイトルコンポーネントなど)で確認できます。
この cq:actions
プロパティ ( String array
) は、コンポーネントで実行できる 1 つ以上のアクションを定義します。 設定に使用できる値を以下に示します。
プロパティの値 | 説明 |
text:<some text> |
静的テキスト値 <some text> が表示されます。 クラシック UI でのみ表示可能です。タッチ操作対応 UI は、アクションがコンテキストメニューに表示されないので、適用されません。 |
- | スペーサーを追加します. クラシック UI でのみ表示可能です。タッチ操作対応 UI は、アクションがコンテキストメニューに表示されないので、適用されません。 |
edit |
コンポーネントを編集するボタンを追加します. |
editannotate |
コンポーネントを編集するボタンを追加し、次の操作を許可します。 注釈. |
delete |
コンポーネントを削除するボタンを追加します |
insert |
現在のコンポーネントの前に新しいコンポーネントを挿入するボタンを追加します |
copymove |
コンポーネントをコピーして切り取るボタンを追加します. |
次の設定では、編集ボタン、スペーサー、削除ボタンおよび挿入ボタンがコンポーネントの編集バーに追加されます。
<jcr:root xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://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="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0"
cq:actions="[text:Inherited Configurations from Base Framework]"
cq:layout="editbar"
jcr:primaryType="cq:EditConfig"/>
この cq:layout
プロパティ ( String
) では、クラシック UI でのコンポーネントの編集方法を定義します。 使用可能な値を次に示します。
プロパティの値 | 説明 |
rollover |
デフォルト値. コンポーネントを編集するには、「マウスポインターを重ねて」クリックするか、コンテキストメニューを使用します。 高度な使用の場合、対応するクライアント側オブジェクトは次のようになります。 CQ.wcm.EditRollover . |
editbar |
コンポーネントを編集するには、ツールバーを使用します。 高度な使用の場合、対応するクライアント側オブジェクトは次のようになります。 CQ.wcm.EditBar . |
auto |
クライアント側のコードによって方法が選択されます。 |
rollover と editbar の概念は、タッチ操作対応 UI では適用されません。
次の設定では、編集ボタンがコンポーネントの編集バーに追加されます。
<jcr:root xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0"
cq:actions="[edit]"
cq:layout="editbar"
jcr:primaryType="cq:EditConfig">
</jcr:root>
コンポーネントを編集ダイアログにリンクできます。この cq:dialogMode
プロパティ ( String
) では、クラシック UI でコンポーネントダイアログを開く方法を定義します。 使用可能な値を次に示します。
プロパティの値 | 説明 |
floating |
ダイアログが浮動になります。 |
inline |
(デフォルト値)。ダイアログがコンポーネント上に固定されます。 |
auto |
コンポーネントの幅がクライアント側の CQ.themes.wcm.EditBase.INLINE_MINIMUM_WIDTH 値よりも小さい場合、ダイアログは floating になります。それ以外の場合は、inline になります。 |
タッチ操作対応 UI のダイアログは、デスクトップモードでは常に浮動し、モバイルでは自動的に全画面表示として開きます。
次の設定では、編集ボタンを含む編集バーと浮動ダイアログが定義されます。
<jcr:root xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0"
cq:actions="[edit]"
cq:dialogMode="floating"
cq:layout="editbar"
jcr:primaryType="cq:EditConfig">
</jcr:root>
この cq:emptyText
プロパティ ( String
) は、視覚的なコンテンツが存在しない場合に表示するテキストを定義します。 デフォルト値は次のとおりです。 Drag components or assets here
.
この cq:inherit
プロパティ ( boolean
) では、見つからない値を継承元のコンポーネントから継承するかどうかを定義します。 デフォルトはです。 false
.
dialogLayout
プロパティは、デフォルトのダイアログの開き方を定義します。
fullscreen
ダイアログが全画面表示で開きます。この cq:dropTargets
ノード(ノードタイプ) nt:unstructured
) では、コンテンツファインダーからドラッグしたアセットからのドロップを受け入れることができるドロップターゲットのリストを定義します。 これは、タイプ cq:DropTargetConfig
のノードのコレクションとして機能します。
複数のドロップターゲットはクラシック UI でのみ使用できます。
タッチ操作対応 UI では、最初のターゲットのみが使用されます。
タイプの各子ノード cq:DropTargetConfig
コンポーネント内にドロップターゲットを定義します。 ノード名は重要です。ノード名は、JSP で次のように使用して、有効なドロップターゲットである DOM 要素に割り当てられる CSS クラス名を生成する必要があるからです。
<drop target css class> = <drag and drop prefix> +
<node name of the drop target in the edit configuration>
この <*drag and drop prefix*>
は、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
ノード(ノードタイプ) nt:unstructured
) は、 cq:actions
プロパティ。 cq:actionConfigs
のそれぞれの子ノードでは、ウィジェットを定義することにより新しいアクションを定義します。
次の設定例では、(クラシック UI 用の区切り文字を持つ)新しいボタンを定義しています。
xtype tbseparator
で定義される区切り文字。
ボタン コメントを管理 ハンドラ関数を実行する CQ_collab_forum_openCollabAdmin()
.
<jcr:root xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0" xmlns:nt="https://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
ノード(ノードタイプ) nt:unstructured
) は、ダイアログフォームに追加される追加のパラメーターを定義します。 各プロパティは、form パラメーターにマップされます。
次の設定では、値 name
が設定された photos/primary
という名前のパラメーターがダイアログフォームに追加されます。
<cq:formParameters
jcr:primaryType="nt:unstructured"
name="photos/primary"/>
この cq:inplaceEditing
ノード(ノードタイプ) cq:InplaceEditingConfig
) を使用して、コンポーネントのインプレース編集設定を定義します。 このノードは、次のプロパティを持つことができます。
プロパティ名 | プロパティの値 |
active |
(boolean ) True に設定して、コンポーネントのインプレース編集を有効にします。 |
configPath |
(String )エディター設定のパス。設定は、設定ノードで指定できます。 |
editorType |
(
|
次の設定では、コンポーネントのインプレース編集が可能になり、テキストエディターとして plaintext
が定義されます。
<cq:inplaceEditing
jcr:primaryType="cq:InplaceEditingConfig"
active="{Boolean}true"
editorType="plaintext"/>
cq:listeners
ノード(ノードタイプ cq:EditListenersConfig
)では、コンポーネントでアクションを実行する前後の処理を定義します。次の表では、使用する可能性のあるプロパティ値の定義を示します。
プロパティ名 | プロパティの値 |
デフォルト値 (クラシック UI のみ) |
beforedelete |
コンポーネントを削除する前にハンドラーがトリガーされます。 |
|
beforeedit |
コンポーネントを編集する前にハンドラーが呼び出されます。 | |
beforecopy |
コンポーネントをコピーする前にハンドラーが呼び出されます。 | |
beforemove |
コンポーネントを移動する前にハンドラーが呼び出されます。 | |
beforeinsert |
コンポーネントを挿入する前にハンドラーが呼び出されます。 タッチ操作対応 UI でのみ動作します。 |
|
beforechildinsert |
コンポーネントを別のコンポーネント(コンテナのみ)の内部に挿入する前にハンドラーが呼び出されます。 | |
afterdelete |
コンポーネントを削除した後にハンドラーが呼び出されます。 | REFRESH_SELF |
afteredit |
コンポーネントを編集した後にハンドラーが呼び出されます。 | REFRESH_SELF |
aftercopy |
コンポーネントをコピーした後にハンドラーが呼び出されます。 | REFRESH_SELF |
afterinsert |
コンポーネントを挿入した後にハンドラーが呼び出されます。 | REFRESH_INSERTED |
aftermove |
コンポーネントを移動した後にハンドラーが呼び出されます。 | REFRESH_SELFMOVED |
afterchildinsert |
コンポーネントを別のコンポーネント(コンテナのみ)の内部に挿入した後にハンドラーが呼び出されます。 |
この REFRESH_INSERTED
および REFRESH_SELFMOVED
ハンドラーは、クラシック UI でのみ使用できます。
リスナーのデフォルト値は、クラシック UI にのみ設定されています。
コンポーネントがネストされている場合は、cq:listeners
ノードでプロパティとして定義されるアクションに一定の制限があります。
コンポーネントがネストされている場合、次のプロパティの値を にする必要があります REFRESH_PAGE
。
aftermove
aftercopy
イベントハンドラーを実装するときは、カスタム実装を組み込むことができます。次に例を示します(project.customerAction
は静的メソッドです)。
afteredit = "project.customerAction"
次の例は、REFRESH_INSERTED
設定と同等です。
afterinsert="function(path, definition) { this.refreshCreated(path, definition); }"
クラシック UI では、ハンドラーで使用できるパラメーターを確認するには、 before<action>
および after<action>
イベントセクション CQ.wcm.EditBar
および CQ.wcm.EditRollover
ウィジェットのドキュメント。
次の設定では、コンポーネントを削除、編集、挿入または移動した後にページが更新されます。
<cq:listeners
jcr:primaryType="cq:EditListenersConfig"
afterdelete="REFRESH_PAGE"
afteredit="REFRESH_PAGE"
afterinsert="REFRESH_PAGE"
afterMove="REFRESH_PAGE"/>