AEM コンポーネントの開発(クラシック UI) developing-aem-components-classic-ui
クラシック UI では、ExtJS を使用して、コンポーネントのルックアンドフィールを提供するウィジェットを作成します。 これらのウィジェットの性質により、クラシック UI と タッチ操作対応 UI.
構造 structure
コンポーネントの基本構造については、タッチ操作対応 UI とクラシック UI の両方に適用される AEM コンポーネント - 基本ページで説明しています。新しいコンポーネントでタッチ操作対応 UI の設定を使用する必要がない場合でも、既存のコンポーネントから継承する際に、設定を認識するのに役立ちます。
JSP スクリプト jsp-scripts
JSP スクリプトまたはサーブレットを使用して、コンポーネントをレンダリングできます。 Sling のリクエスト処理ルールに従って、デフォルトスクリプトの名前は次のようになります。
<*componentname*>.jsp
global.jsp global-jsp
JSP スクリプトファイルの global.jsp
は、コンポーネントのレンダリングに使用される任意の JSP スクリプトの特定オブジェクト(コンテンツ)にすばやくアクセスするために使用されます。
したがって、global.jsp
で提供される 1 つ以上のオブジェクトを使用する場合は、JSP スクリプトをレンダリングするすべてのコンポーネントに global.jsp
を含める必要があります。
デフォルトの global.jsp
は次の場所にあります。
/libs/foundation/global.jsp
/libs/wcm/global.jsp
は、現在廃止されています。global.jsp、使用される API および Taglib の機能 function-of-global-jsp-used-apis-and-taglibs
デフォルトの global.jsp
から提供される最も重要なオブジェクトを次に示します。
概要:
-
<cq:defineObjects />
slingRequest
- ラップされたリクエストオブジェクト(SlingHttpServletRequest
)。slingResponse
- ラップされた応答オブジェクト(SlingHttpServletResponse
)。resource
- Sling リソースオブジェクト(slingRequest.getResource();
)。resourceResolver
- Sling リソースリゾルバーオブジェクト(slingRequest.getResoucreResolver();
)。currentNode
- リクエストに対して解決された JCR ノード。log
- デフォルトの logger ()。sling
- Sling スクリプトヘルパー。properties
- 指定されたリソースのプロパティ(resource.adaptTo(ValueMap.class);
)。pageProperties
- 指定されたリソースのページのプロパティ。pageManager
- AEM コンテンツページにアクセスするためのページマネージャー(resourceResolver.adaptTo(PageManager.class);
)。component
- 現在の AEM コンポーネントのコンポーネントオブジェクト。designer
- デザイン情報を取得するためのデザイナーオブジェクト(resourceResolver.adaptTo(Designer.class);
)。currentDesign
- 指定されたリソースのデザイン。currentStyle
- 指定されたリソースのスタイル。
コンテンツへのアクセス accessing-content
AEM WCM のコンテンツにアクセスするには、次の 3 つの方法があります。
-
global.jsp
に設定されているプロパティオブジェクト経由:プロパティオブジェクトは、ValueMap のインスタンス(Sling API を参照)で、現在のリソースのプロパティがすべて含まれています。
例:ページコンポーネントのレンダリングスクリプト内で使用される
String pageTitle = properties.get("jcr:title", "no title");
例:標準の段落コンポーネントのレンダリングスクリプト内で使用される
String paragraphTitle = properties.get("jcr:title", "no title");
-
global.jsp
に設定されているcurrentPage
オブジェクト経由:currentPage
オブジェクトは、ページのインスタンスです(AEM API を参照)。ページクラスには、コンテンツにアクセスするためのメソッドがいくつかあります。例:
String pageTitle = currentPage.getTitle();
-
global.jsp
に導入されているcurrentNode
オブジェクト経由:currentNode
オブジェクトは、ノードのインスタンスです(JCR API を参照)。ノードのプロパティには、getProperty()
メソッドによってアクセスできます。例:
String pageTitle = currentNode.getProperty("jcr:title");
JSP タグライブラリ jsp-tag-libraries
CQ および Sling タグライブラリを使用すると、テンプレートおよびコンポーネントの JSP スクリプトで使用する特定の関数にアクセスできます。
詳しくは、タグライブラリドキュメントを参照してください。
クライアント側HTMLライブラリの使用 using-client-side-html-libraries
最新の Web サイトは、複雑な JavaScript や CSS コードを利用したクライアント側の処理に大きく依存しています。 このコードの提供を編成および最適化することが厄介な問題となることがあります。
この問題への対処に役立つように、AEM では、クライアント側ライブラリフォルダー が提供されています。これにより、クライアント側コードをリポジトリに格納し、カテゴリ別に整理して、それぞれのカテゴリのコードをクライアントに提供するタイミングと方法を定義することができます。その後、クライアントサイドライブラリシステムにより、最終的な web ページで、正しいコードを読み込むための正しいリンクが作成されます。
詳しくは、クライアントサイド HTML ライブラリの使用ドキュメントを参照してください。
ダイアログ dialog
作成者がコンテンツを追加および設定するためのダイアログがコンポーネントに必要です。
詳しくは、AEM コンポーネント - 基本を参照してください。
編集動作の設定 configuring-the-edit-behavior
コンポーネントの編集動作を設定できます。 これには、コンポーネントで使用可能なアクションなどの属性、インプレースエディターの特性、コンポーネント上のイベントに関連するリスナーなどが含まれます。 この設定は、特定の違いはあるものの、タッチ操作対応 UI とクラシック UI の両方に共通です。
コンポーネントの編集動作は、タイプ cq:EditConfig
の cq:editConfig
ノードをコンポーネントノード(タイプ cq:Component
)の下に追加し、特定のプロパティと子ノードを追加して設定します。
ExtJS ウィジェットの使用と拡張 using-and-extending-extjs-widgets
詳しくは、ExtJS ウィジェットの使用と拡張を参照してください。
ExtJS ウィジェットに xtype を使用 using-xtypes-for-extjs-widgets
詳しくは、 xtype の使用 を参照してください。
新しいコンポーネントの開発 developing-new-components
この節では、独自のコンポーネントを作成して段落システムに追加する方法について説明します。
既存のコンポーネントをコピーし、必要な変更を加える方法を簡単に開始できます。
コンポーネントの開発方法の例について詳しくは、 テキストおよび画像コンポーネントの拡張 — 例。
新しいコンポーネントの開発(既存のコンポーネントの適応) develop-a-new-component-adapt-existing-component
既存のコンポーネントに基づいてAEM用の新しいコンポーネントを開発するには、コンポーネントをコピーし、新しいコンポーネントの JavaScript ファイルを作成して、AEMがアクセス可能な場所に保存します ( コンポーネントおよびその他の要素のカスタマイズ):
-
CRXDE Liteを使用して、次の場所に新しいコンポーネントフォルダーを作成します。
/
apps/<myProject>/components/<myComponent>
libs 内のノード構造を再作成し、テキストコンポーネントなどの既存のコンポーネントの定義をコピーします。 例えば、テキストコンポーネントをカスタマイズするには、次のようにコピーします。
- コピー元:
/libs/foundation/components/text
- コピー先:
/apps/myProject/components/text
- コピー元:
-
jcr:title
を変更して新しい名前を反映させます。 -
新しいコンポーネントフォルダーを開き、必要な変更を行います。 また、フォルダー内の不要な情報を削除します。
次のような変更を行うことができます。
-
ダイアログボックスでの新しいフィールドの追加
cq:dialog
- タッチ操作対応 UI 用ダイアログdialog
- クラシック UI 用ダイアログ
-
.jsp
ファイルの置換(新しいコンポーネントの作成後に名前を付けます) -
または、コンポーネント全体の作成し直し(必要な場合)
例えば、標準テキストコンポーネントのコピーを作成した場合は、ダイアログボックスにフィールドを追加して、
.jsp
を更新し、そこに追加された情報を処理します。note note NOTE 使用するコンポーネント: - タッチ操作対応 UI では Granite コンポーネントを使用します
- クラシック UI の使用 ExtJS ウィジェット
note note NOTE クラシック UI 用に定義されたダイアログは、タッチ操作対応 UI 内で動作します。 タッチ操作対応 UI 用に定義されたダイアログは、クラシック UI 内では動作しません。 インスタンスとオーサー環境によっては、コンポーネント用に両方のタイプのダイアログを定義する必要が生じる場合があります。 -
-
新しいコンポーネントを表示するには、次のいずれかのノードが存在し、適切に初期化されている必要があります。
cq:dialog
- タッチ操作対応 UI 用ダイアログdialog
- クラシック UI 用ダイアログcq:editConfig
- 編集環境でのコンポーネントの動作(ドラッグ&ドロップなど)design_dialog
- デザインモード用ダイアログ(クラシック UI のみ)
-
次のどちらかの方法で、段落システムで新しいコンポーネントを利用できるようにします。
- CRXDE Lite を使用して、ノード
/etc/designs/geometrixx/jcr:content/contentpage/par
の適切なコンポーネントに、値<path-to-component>
(/apps/geometrixx/components/myComponent
など)を追加します。 - 次の 段落システムへの新しいコンポーネントの追加
- CRXDE Lite を使用して、ノード
-
AEM WCM で、Web サイトのページを開き、作成したタイプの新しい段落を挿入して、コンポーネントが正しく動作していることを確認します。
?debugClientLibs=true
と共に使用します。段落システム(デザインモード)への新しいコンポーネントの追加 adding-a-new-component-to-the-paragraph-system-design-mode
コンポーネントを開発したら、段落システムに追加します。これにより、作成者は、ページの編集時にコンポーネントを選択して使用できます。
-
段落システムを使用するオーサリング環境でページにアクセスします(例:
<contentPath>/Test.html
)。 -
次のどちらかの方法でデザインモードに切り替えます。
-
以下の例のように、URL の最後に
?wcmmode=design
を追加し、再度アクセスします。<contextPath>/ Test.html?wcmmode=design
-
サイドキックでデザインをクリック
これでデザインモードになり、段落システムを編集できます。
-
-
「編集」をクリックします。
段落システムに属するコンポーネントのリストが表示されます。 新しいコンポーネントも表示されます。
ページの編集時に作成者に提供されるコンポーネントを決定するには、コンポーネントをアクティベート(またはアクティベートを解除)します。
-
コンポーネントをアクティベートして、通常の編集モードに戻り、使用可能であることを確認します。
テキストおよび画像コンポーネントの拡張 — 例 extending-the-text-and-image-component-an-example
この節では、設定可能な画像配置機能を使用して、広く使用されているテキストおよび画像標準コンポーネントを拡張する方法の例を示します。
テキストおよび画像コンポーネントの拡張機能を使用すると、エディターはコンポーネントの既存の機能をすべて使用でき、さらに次のいずれかの方法で画像の配置を指定する追加のオプションを持ちます。
- テキストの左側(現在の動作と新しいデフォルト)
- 右側の
このコンポーネントを拡張した後、コンポーネントのダイアログボックスを使用して画像の配置を設定できます。
この練習では、次の方法について説明します。
- 既存のコンポーネントノードをコピーし、そのメタデータを変更する
- 親ダイアログボックスからのウィジェットの継承を含む、コンポーネントのダイアログの変更
- 新しい機能を実装するためのコンポーネントのスクリプトの変更
既存の textimage コンポーネントの拡張 extending-the-existing-textimage-component
新しいコンポーネントを作成するには、標準の textimage コンポーネントをベースとして使用し、それに変更を加えます。ここでは、Geometrixx AEM WCM の例のアプリケーションに新しいコンポーネントを保存します。
-
標準の textimage コンポーネントを
/libs/foundation/components/textimage
から Geometrixx のコンポーネントフォルダー(/apps/geometrixx/components
)に、ターゲットノードの名前として textimage を使用してコピーします(コンポーネントに移動し、右クリックして「コピー」を選択し、ターゲットディレクトリをブラウジングすることでコンポーネントをコピーします)。 -
この例ではシンプルに保つために、コピーしたコンポーネントに移動し、新しい textimage ノードから、以下に示すサブノードを除く、すべてのサブノードを削除してください。
- ダイアログの定義:
textimage/dialog
- コンポーネントのスクリプト:
textimage/textimage.jsp
- 設定の編集ノード(アセットのドラッグ&ドロップの許可):
textimage/cq:editConfig
note note NOTE ダイアログの定義は、UI に依存します。 - タッチ操作対応 UI:
textimage/cq:dialog
- クラシック UI:
textimage/dialog
- ダイアログの定義:
-
コンポーネントのメタデータを編集します。
-
コンポーネント名
jcr:description
をText Image Component (Extended)
に設定jcr:title
をText Image (Extended)
に設定
-
サイドキック内でコンポーネントが一覧表示されるグループ(修正しない)
componentGroup
をGeneral
に設定したままにする
-
新しいコンポーネントの親コンポーネント(標準の textimage コンポーネント)
sling:resourceSuperType
をfoundation/components/textimage
に設定
この手順を終えると、コンポーネントのノードは以下のようになります。
-
-
画像の編集設定ノードの
sling:resourceType
プロパティ(プロパティ:textimage/cq:editConfig/cq:dropTargets/image/parameters/sling:resourceType
)をgeometrixx/components/textimage.
に変更するこれで、画像がページ上のコンポーネントにドロップされると、拡張された textimage コンポーネントの
sling:resourceType
プロパティがgeometrixx/components/textimage.
に設定されます。 -
コンポーネントのダイアログボックスを修正して、新しいオプションを含めます。 新しいコンポーネントは、元のコンポーネントと同じダイアログボックスの部分を継承します。 追加するのは、 詳細 タブ、追加 [ たぶ、ついか ] 画像の位置 ドロップダウンリストとオプション 左 および 右:
textimage/dialog
プロパティは変更しません。
textimage/dialog/items
に、textimage ダイアログボックスの 4 つのタブを表す 4 つのサブノード(tab1 から tab4)があることを確認します。-
最初の 2 つのタブ(tab1 と tab2):
- xtype を cqinclude に変更します(標準コンポーネントから継承します)。
/libs/foundation/components/textimage/dialog/items/tab1.infinity.json
値および/libs/foundation/components/textimage/dialog/items/tab2.infinity.json
値を持つパスプロパティをそれぞれ追加します。- その他のすべてのプロパティまたはサブノードを削除します。
-
tab3 の場合:
-
プロパティとサブノードは変更せずにそのままにします。
-
新しいフィールドの定義として、
cq:Widget
タイプのノードの場所をtab3/items
に追加します。 -
新しい
tab3/items/position
ノードに以下のプロパティ(String タイプ)を設定します。name
:./imagePosition
xtype
:selection
fieldLabel
:Image Position
type
:select
-
画像の配置の選択肢を 2 つ表すために、
cq:WidgetCollection
タイプのサブノードposition/options
を追加し、その下に、nt:unstructured
タイプの 2 つのノード(o1 および o2)を作成します。 -
position/options/o1
ノードの場合、text
プロパティをLeft
に設定して、value
プロパティをleft.
に設定します。 -
position/options/o2
ノードの場合 、プロパティtext
をRight
に設定し、プロパティvalue
をright
に設定します。
-
-
tab4 を削除します。
画像の位置は、
textimage
の段落を表すノードのimagePosition
プロパティとしてコンテンツ内で保持されます。これらの手順を終えると、コンポーネントのダイアログボックスは以下のようになります。 -
コンポーネントのスクリプト、
textimage.jsp
を拡張し、新しいパラメーターの処理を追加します。code language-xml Image image = new Image(resource, "image"); if (image.hasContent() || WCMMode.fromRequest(request) == WCMMode.EDIT) { image.loadStyleData(currentStyle);
強調表示したコードのフラグメント %><div class="image"><% は、このタグのカスタムスタイルを生成する新しいコードで置き換える予定です。
code language-xml // todo: add new CSS class for the 'right image' instead of using // the style attribute String style=""; if (properties.get("imagePosition", "left").equals("right")) { style = "style=\"float:right\""; } %><div <%= style %> class="image"><%
-
コンポーネントをリポジトリに保存します。コンポーネントをテストする準備ができました。
新しいコンポーネントの確認 checking-the-new-component
コンポーネントを開発した後、段落システムに追加できます。これにより、作成者は、ページの編集時にコンポーネントを選択して使用できます。 以下の手順で、コンポーネントをテストできます。
- 「英語/会社」などのGeometrixxでページを開きます。
- サイドキックの「デザイン」をクリックして、デザインモードに切り替えます。
- ページの中央にある段落システムの「編集」をクリックして、段落システムのデザインを編集します。 段落システムに配置できるコンポーネントのリストが表示されます。新しく開発したテキスト画像(拡張)が含まれている必要があります。 段落システムを選択し、「 OK 」をクリックしてアクティブにします。
- 編集モードに戻ります。
- 段落システムに「テキスト画像(拡張) 」段落を追加し、サンプルコンテンツを使用してテキストと画像を初期化します。 変更内容を保存します。
- テキストおよび画像段落のダイアログを開き、「詳細」タブの「画像の位置」を「右」に変更し、「 OK 」をクリックして変更を保存します。
- 段落は、右側に画像が表示された状態でレンダリングされます。
- コンポーネントを使用する準備ができました。
このコンポーネントは、その内容を会社ページ上の段落に保存します。
画像コンポーネントのアップロード機能を無効にする disable-upload-capability-of-the-image-component
アップロード機能を無効にするには、標準の画像コンポーネントをベースとして使用し、それに変更を加えます。Geometrixx の例のアプリケーションに新しいコンポーネントを保存します。
-
ターゲットノードの名前として画像を使用して、
/libs/foundation/components/image
から Geometrixx コンポーネントフォルダー(/apps/geometrixx/components
)に標準の画像コンポーネントをコピーします。 -
コンポーネントのメタデータを編集します。
- jcr:title を
Image (Extended)
に設定します。
- jcr:title を
-
/apps/geometrixx/components/image/dialog/items/image
に移動します。 -
新しいプロパティを追加します。
- 名前:
allowUpload
- 型:
String
- 値:
false
- 名前:
-
「すべて保存」をクリックします。コンポーネントをテストする準備ができました。
-
「英語/会社」などのGeometrixxでページを開きます。
-
デザインモードに切り替えて、画像(拡張)を有効にします。
-
編集モードに戻し、段落システムに追加します。 次の画像では、元の画像コンポーネントと先ほど作成した画像コンポーネントの違いを確認できます。
元の画像コンポーネント:
新しい画像コンポーネント:
-
コンポーネントを使用する準備ができました。