カスタムコンポーネントの作成 custom-component
AEM SPA エディターで使用するカスタムコンポーネントを作成する方法を説明します。オーサーダイアログと Sling モデルを開発して JSON モデルを拡張し、カスタムコンポーネントを設定する方法について説明します。
目的
- AEM に用意されている JSON モデル API を操作する際の Sling モデルの役割を理解します。
- AEM コンポーネントダイアログの作成方法を理解します。
- SPA エディターフレームワークに適合する カスタム AEM コンポーネントの作成方法を説明します。
作成する内容
前の章では、SPA コンポーネントの開発と、それらを 既存 の AEM コアコンポーネントにマッピングする方法を重点的に説明しました。 この章では、新規 の AEM コンポーネントを作成および拡張する方法と、AEM から提供される JSON モデルを操作する方法に重点を置いて説明します。
まったく新しい AEM コンポーネントを作成する際に必要な手順をシンプルな Custom Component で示しています。
前提条件
ローカル開発環境の設定に必要なツールと手順を確認します。
コードの取得
-
このチュートリアルの出発点となるものを Git からダウンロードします。
code language-shell $ git clone git@github.com:adobe/aem-guides-wknd-spa.git $ cd aem-guides-wknd-spa $ git checkout Angular/custom-component-start -
Maven を使用してコードベースをローカルの AEM インスタンスにデプロイします。
code language-shell $ mvn clean install -PautoInstallSinglePackageAEM 6.x を使用する場合は、以下の
classicプロファイルを追加します。code language-shell $ mvn clean install -PautoInstallSinglePackage -Pclassic -
従来の WKND リファレンスサイトの完成したパッケージをインストールします。WKND リファレンスサイトから提供された画像は、WKND SPA で再利用されます。パッケージは、AEM のパッケージマネージャーを使用してインストールできます。
いつでも、完成したコードを GitHub で確認したり、ブランチ Angular/custom-component-solution に切り替えてローカルにチェックアウトしたりできます。
AEM コンポーネントの定義
AEM コンポーネントは、ノードおよびプロパティとして定義されます。 プロジェクトでは、これらのノードおよびプロパティは、ui.apps モジュールの XML ファイルとして表されます。 次に、ui.apps モジュールに AEM コンポーネントを作成します。
-
ui.appsフォルダーを任意の IDE で開きます。 -
ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/componentsに移動し、custom-componentという名前のフォルダーを作成します。 -
custom-componentフォルダーの下に.content.xmlという名前のファイルを作成します。custom-component/.content.xmlに以下を入力します。code language-xml <?xml version="1.0" encoding="UTF-8"?> <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" jcr:primaryType="cq:Component" jcr:title="Custom Component" componentGroup="WKND SPA Angular - Content"/>
jcr:primaryType="cq:Component"- このノードが AEM コンポーネントであることを示します。jcr:titleは、コンテンツ作成者に表示される値で、componentGroupはオーサリング UI でのコンポーネントのグループ化を決定します。 -
custom-componentフォルダーの下に、_cq_dialogという名前の新しいフォルダーを作成します。 -
_cq_dialogフォルダーの下に.content.xmlという名前のファイルを作成し、次の内容を入力します。code language-xml <?xml version="1.0" encoding="UTF-8"?> <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" 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" jcr:primaryType="nt:unstructured" jcr:title="Custom Component" sling:resourceType="cq/gui/components/authoring/dialog"> <content jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container"> <items jcr:primaryType="nt:unstructured"> <tabs jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/tabs" maximized="{Boolean}true"> <items jcr:primaryType="nt:unstructured"> <properties jcr:primaryType="nt:unstructured" jcr:title="Properties" sling:resourceType="granite/ui/components/coral/foundation/container" margin="{Boolean}true"> <items jcr:primaryType="nt:unstructured"> <columns jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns" margin="{Boolean}true"> <items jcr:primaryType="nt:unstructured"> <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container"> <items jcr:primaryType="nt:unstructured"> <message jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/textfield" fieldDescription="The text to display on the component." fieldLabel="Message" name="./message"/> </items> </column> </items> </columns> </items> </properties> </items> </tabs> </items> </content> </jcr:root>
上記の XML ファイルの場合は、
Custom Componentの簡単なダイアログが生成されます。ファイルの重要な部分は、内側の<message>ノードです。このダイアログには、Messageという名前の単純なtextfieldが含まれています。このテキストフィールドの値をmessageという名前のプロパティに保持します。次に Sling モデルを作成し、JSON モデルを介して
messageプロパティの値を公開します。note note NOTE コア コンポーネントの定義を確認することで、ダイアログのより多くの例を確認できます。CRXDE-Liteの /libs/granite/ui/components/coral/foundation/formの下にあるselect、textarea、pathfieldなどの追加のフォームフィールドを表示することもできます。従来の AEM コンポーネントでは、通常 HTL スクリプトが必要です。SPA がコンポーネントをレンダリングするので、HTL スクリプトは必要ありません。
Sling モデルの作成
Sling モデルは、JCR から Java™ 変数へのデータのマッピングを容易にする注釈主導の Java™「POJO」（Plain Old Java™ Objects）です。Sling モデルは通常、AEM コンポーネントの複雑なサーバーサイドビジネスロジックをカプセル化する機能を果たします。
SPA エディターのコンテキストでは、Sling モデルは Sling Model Exporter を使用した機能により、JSON モデルを通じてコンポーネントのコンテンツを公開します。
-
任意に選択した IDE で
coreモジュールを開きます。CustomComponent.javaとCustomComponentImpl.javaは既に作成されており、この章の初期コードの一部としてスタブ化されています。note note NOTE Visual Studio Code IDE を使用している場合は、Java™ の拡張機能をインストールすると役立つ可能性があります。 -
core/src/main/java/com/adobe/aem/guides/wknd/spa/angular/core/models/CustomComponent.javaで Java™ インターフェイスCustomComponent.javaを開きます。
これは、Sling モデルで実装されている Java™ インターフェイスです。
-
ComponentExporterインターフェイスを拡張するようにCustomComponent.javaを更新します。code language-java package com.adobe.aem.guides.wknd.spa.angular.core.models; import com.adobe.cq.export.json.ComponentExporter; public interface CustomComponent extends ComponentExporter { public String getMessage(); }ComponentExporterインターフェイスの実装は、JSON モデル API で Sling モデルが自動的に取得されるための要件です。CustomComponentインターフェイスには、単一のゲッターメソッドgetMessage()が含まれています。これは、JSON モデルを通じてオーサーダイアログの値を公開するメソッドです。空のパラメータ()を持つゲッターメソッドのみが JSON モデルに書き出されます。 -
core/src/main/java/com/adobe/aem/guides/wknd/spa/angular/core/models/impl/CustomComponentImpl.javaでCustomComponentImpl.javaを開きます。これは
CustomComponentインターフェイスの実装です。@Model注釈は、Java™ クラスを Sling モデルとして識別します。@Exporter注釈により、Sling Model Exporter を通じて Java™ クラスをシリアル化して書き出すことができます。 -
静的変数
RESOURCE_TYPEを更新して、前の演習で作成した AEM コンポーネントwknd-spa-angular/components/custom-componentを指すようにします。code language-java static final String RESOURCE_TYPE = "wknd-spa-angular/components/custom-component";コンポーネントのリソースタイプは、Sling モデルを AEM コンポーネントにバインドし、最終的に Angular コンポーネントにマッピングするものです。
-
コンポーネントのリソースタイプを返す
getExportedType()メソッドをCustomComponentImplクラスに追加します。code language-java @Override public String getExportedType() { return CustomComponentImpl.RESOURCE_TYPE; }このメソッドは
ComponentExporterインターフェースを実装する際に必要で、Angular コンポーネントへのマッピングを可能にするリソースタイプを公開します。 -
オーサーダイアログが保持する
messageプロパティの値を返すように、getMessage()メソッドを更新します。@ValueMap注釈を使用すると、JCR 値messageを Java™ 変数にマッピングできます。code language-java import org.apache.commons.lang3.StringUtils; ... @ValueMapValue private String message; @Override public String getMessage() { return StringUtils.isNotBlank(message) ? message.toUpperCase() : null; }メッセージの値を大文字で返すための「ビジネスロジック」がいくつか追加されています。 これにより、オーサーダイアログに保存されている生の値と、Sling モデルで公開される値の違いを確認できます。
note note NOTE 完成した CustomComponentImpl.java は、こちらで確認できます。
Angular コンポーネントの更新
カスタムコンポーネントの Angular コードは既に作成されています。次に、Angular コンポーネントを AEM コンポーネントにマッピングするために、いくつかの更新を行います。
-
ui.frontendモジュールで、ファイルui.frontend/src/app/components/custom/custom.component.tsを開きます。 -
@Input() message: string;行を確認します。変換された大文字の値がこの変数にマッピングされるはずです。 -
MapToオブジェクトを AEM SPA エディター JavaScript SDK から読み込み、それを使用して AEM コンポーネントにマッピングします。code language-diff + import {MapTo} from '@adobe/cq-angular-editable-components'; ... export class CustomComponent implements OnInit { ... } + MapTo('wknd-spa-angular/components/custom-component')(CustomComponent, CustomEditConfig); -
cutom.component.htmlを開いて、{{message}}の値が<h2>タグ内に表示されていることを確認します。 -
custom.component.cssを開いて、次のルールを追加します。code language-css :host-context { display: block; }コンポーネントが空のときに AEM エディターのプレースホルダーを正しく表示するには、
:host-contextまたは別の<div>をdisplay: block;に設定する必要があります。 -
Maven のスキルを活用して、プロジェクトディレクトリのルートからローカル AEM 環境にアップデートをデプロイします。
code language-shell $ cd aem-guides-wknd-spa $ mvn clean install -PautoInstallSinglePackage
テンプレートポリシーの更新
次に、AEM に移動してアップデートを確認し、Custom Component を SPA に追加できるようにします。
-
http://localhost:4502/system/console/status-slingmodels に移動して、新しい Sling モデルの登録を確認します。
code language-plain com.adobe.aem.guides.wknd.spa.angular.core.models.impl.CustomComponentImpl - wknd-spa-angular/components/custom-component com.adobe.aem.guides.wknd.spa.angular.core.models.impl.CustomComponentImpl exports 'wknd-spa-angular/components/custom-component' with selector 'model' and extension '[Ljava.lang.String;@6fb4a693' with exporter 'jackson'CustomComponentImplがwknd-spa-angular/components/custom-componentコンポーネントに関連付けられていることと、それが Sling Model Exporter を介して登録されていることを示す上記の 2 行があります。 -
http://localhost:4502/editor.html/conf/wknd-spa-angular/settings/wcm/templates/spa-page-template/structure.html にある SPA ページテンプレートに移動します。
-
レイアウトコンテナのポリシーを更新して、新しい
Custom Componentを許可されたコンポーネントとして追加します。
ポリシーへの変更を保存し、許可されたコンポーネントとして
Custom Componentを確認します。
カスタムコンポーネントの作成
次に、AEM SPA エディターを使用して Custom Component を作成します。
-
http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html に移動します。
-
Editモードで、Custom ComponentをLayout Containerに追加します。
-
コンポーネントのダイアログを開き、小文字を含んだメッセージを入力します。
これは、この章で前述した XML ファイルに基づいて作成されたダイアログです。
-
変更を保存します。表示されるメッセージがすべて大文字であることを確認します。
-
http://localhost:4502/content/wknd-spa-angular/us/en.model.json に移動して、JSON モデルを表示します。
wknd-spa-angular/components/custom-componentを検索します。code language-json "custom_component_208183317": { "message": "HELLO WORLD", ":type": "wknd-spa-angular/components/custom-component" }Sling モデルに追加されたロジックに基づいて、JSON 値がすべて大文字に設定されます。
おめでとうございます。 congratulations
以上、カスタム AEM コンポーネントを作成する方法と、Sling モデルおよびダイアログが JSON モデルと連携する仕組みについて学びました。
いつでも、完成したコードを GitHub で確認したり、ブランチ Angular/custom-component-solution に切り替えてローカルにチェックアウトしたりできます。
次の手順 next-steps
コアコンポーネントの拡張 - 既存のコアコンポーネントを拡張して AEM SPA エディターで使用できるようにする方法を説明します。既存のコンポーネントにプロパティとコンテンツを追加する方法を理解すると、AEM SPA エディター実装の機能を拡張するための強力な手法になります。