AEM コンポーネントの開発（クラシック UI） developing-aem-components-classic-ui

CRXDE Liteを使用して、次の場所に新しいコンポーネントフォルダーを作成します。

/ apps/<myProject>/components/<myComponent>

libs 内のノード構造を再作成し、テキストコンポーネントなどの既存のコンポーネントの定義をコピーします。 例えば、テキストコンポーネントをカスタマイズするには、次のようにコピーします。

• コピー元：/libs/foundation/components/text
• コピー先：/apps/myProject/components/text

jcr:title を変更して新しい名前を反映させます。

新しいコンポーネントフォルダーを開き、必要な変更を行います。 また、フォルダー内の不要な情報を削除します。

次のような変更を行うことができます。

• ダイアログボックスでの新しいフィールドの追加

  • cq:dialog - タッチ操作対応 UI 用ダイアログ
  • dialog - クラシック UI 用ダイアログ

• .jsp ファイルの置換（新しいコンポーネントの作成後に名前を付けます）

• または、コンポーネント全体の作成し直し（必要な場合）

例えば、標準テキストコンポーネントのコピーを作成した場合は、ダイアログボックスにフィールドを追加して、.jsp を更新し、そこに追加された情報を処理します。

新しいコンポーネントを表示するには、次のいずれかのノードが存在し、適切に初期化されている必要があります。

• 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 など）を追加します。
• 次の 段落システムへの新しいコンポーネントの追加

AEM WCM で、Web サイトのページを開き、作成したタイプの新しい段落を挿入して、コンポーネントが正しく動作していることを確認します。

段落システムを使用するオーサリング環境でページにアクセスします（例：<contentPath>/Test.html）。

次のどちらかの方法でデザインモードに切り替えます。

• 以下の例のように、URL の最後に ?wcmmode=design を追加し、再度アクセスします。

  <contextPath>/ Test.html?wcmmode=design

• サイドキックでデザインをクリック

これでデザインモードになり、段落システムを編集できます。

「編集」をクリックします。

段落システムに属するコンポーネントのリストが表示されます。 新しいコンポーネントも表示されます。

ページの編集時に作成者に提供されるコンポーネントを決定するには、コンポーネントをアクティベート（またはアクティベートを解除）します。

コンポーネントをアクティベートして、通常の編集モードに戻り、使用可能であることを確認します。

標準の textimage コンポーネントを /libs/foundation/components/textimage から Geometrixx のコンポーネントフォルダー（/apps/geometrixx/components）に、ターゲットノードの名前として textimage を使用してコピーします（コンポーネントに移動し、右クリックして「コピー」を選択し、ターゲットディレクトリをブラウジングすることでコンポーネントをコピーします）。

この例ではシンプルに保つために、コピーしたコンポーネントに移動し、新しい textimage ノードから、以下に示すサブノードを除く、すべてのサブノードを削除してください。

• ダイアログの定義：textimage/dialog
• コンポーネントのスクリプト：textimage/textimage.jsp
• 設定の編集ノード（アセットのドラッグ＆ドロップの許可）：textimage/cq:editConfig

コンポーネントのメタデータを編集します。

• コンポーネント名

  • 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 を拡張し、新しいパラメーターの処理を追加します。

Image image = new Image(resource, "image");

if (image.hasContent() || WCMMode.fromRequest(request) == WCMMode.EDIT) {
     image.loadStyleData(currentStyle);

強調表示したコードのフラグメント %><div class="image"><% は、このタグのカスタムスタイルを生成する新しいコードで置き換える予定です。

// 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"><%

コンポーネントをリポジトリに保存します。コンポーネントをテストする準備ができました。

ターゲットノードの名前として画像を使用して、/libs/foundation/components/image から Geometrixx コンポーネントフォルダー（/apps/geometrixx/components）に標準の画像コンポーネントをコピーします。

コンポーネントのメタデータを編集します。

• jcr:title を Image (Extended) に設定します。

/apps/geometrixx/components/image/dialog/items/imageに移動します。

新しいプロパティを追加します。

• 名前：allowUpload
• 型：String
• 値：false

「すべて保存」をクリックします。コンポーネントをテストする準備ができました。

「英語/会社」などのGeometrixxでページを開きます。

デザインモードに切り替えて、画像（拡張）を有効にします。

編集モードに戻し、段落システムに追加します。 次の画像では、元の画像コンポーネントと先ほど作成した画像コンポーネントの違いを確認できます。

元の画像コンポーネント：

新しい画像コンポーネント：

コンポーネントを使用する準備ができました。