クラシック UI では、ExtJS を使用して、ルックアンドフィールを提供するウィジェットを作成します。このウィジェットの性質により、クラシック UI とタッチ操作向け UI では、コンポーネントとのやり取りにいくつかの相違点があります。
しかし、コンポーネントの要素の多くは両方の UI に共通なので、このページに書かれているクラシック UI の解説を読む前に、まずコンポーネント - 基本を読んでください。
注意：
クラシック UI 用のコンポーネントの開発には HTML テンプレート言語（HTL）と JSP のどちらも使用できますが、このページでは JSP を使用した開発について説明します。これは単に、従来のクラシック UI では JSP が使用されてきたからです。
現在では、HTL が AEM の推奨スクリプティング言語とされています。手法を比較するには、HTL およびタッチ操作向け UI 用のコンポーネントを参照してください。
コンポーネントの基本構造については、AEM コンポーネント - 基本で説明しています。この節では、タッチ操作向け UI とクラシック UI の両方を扱います。新しいコンポーネントでタッチ操作向け UI 用の設定を使用する必要がない場合でも、既存コンポーネントから継承する際にその知識が役立つことがあります。
コンポーネントをレンダリングするには JSP スクリプトまたはサーブレットを使用します。Sling のリクエスト処理規則に従って、デフォルトスクリプトの名前は、
<componentname>.jsp とします。
JSP スクリプトファイルの global.jsp は、コンポーネントのレンダリングに使用される任意の JSP スクリプトの特定オブジェクト（コンテンツ）に素早くアクセスするために使用されます。
したがって、global.jsp で提供される 1 つ以上のオブジェクトを使用する場合は、JSP スクリプトをレンダリングするすべてのコンポーネントに global.jsp を含める必要があります。
デフォルトの global.jsp は次の場所にあります。
/libs/foundation/global.jsp
注意：
CQ 5.3 以前のバージョンで使用されたパス /libs/wcm/global.jsp は、現在廃止されています。
デフォルトの global.jsp から提供される最も重要なオブジェクトを次に示します。
概要：
- <cq:defineObjects />
- slingRequest - ラップされたリクエストオブジェクト（SlingHttpServletRequest）。
- slingResponse - ラップされた応答オブジェクト（SlingHttpServletResponse）。
- resource - Sling リソースオブジェクト（slingRequest.getResource();）。
- resourceResolver - Sling リソースリゾルバーオブジェクト（slingRequest.getResoucreResolver();）。
- currentNode - リクエストに対して解決された JCR ノード。
- log - デフォルトのロガー。
- sling - Sling スクリプトヘルパー。
- properties - 指定されたリソースのプロパティ（resource.adaptTo(ValueMap.class);）。
- pageProperties - 指定されたリソースのページのプロパティ。
- pageManager - AEM コンテンツページにアクセスするためのページマネージャー（resourceResolver.adaptTo(PageManager.class);）。
- component - 現在の AEM コンポーネントのコンポーネントオブジェクト。
- designer - デザイン情報を取得するためのデザイナーオブジェクト（resourceResolver.adaptTo(Designer.class);）。
- currentDesign - 指定されたリソースのデザイン。
- currentStyle - 指定されたリソースのスタイル。
AEM WCM のコンテンツにアクセスするには、3 つの方法があります。
- global.jsp に導入された properties オブジェクトを使用する：
properties オブジェクトは、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");
CQ と Sling のタグライブラリを使用すると、テンプレートやコンポーネントの JSP スクリプトで使用する特定の機能にアクセスできます。
詳しくは、タグライブラリを参照してください。
最近の Web サイトは、複雑な JavaScript や CSS コードを利用したクライアント側の処理に大きく依存しています。このコードの提供を編成および最適化することが厄介な問題となることがあります。
この問題への対処に役立つように、AEM では、クライアント側ライブラリフォルダーが提供されています。これにより、クライアント側コードをリポジトリに格納し、カテゴリ別に整理して、それぞれのカテゴリのコードをクライアントに提供するタイミングと方法を定義することができます。その後、クライアント側ライブラリシステムにより、最終的な Web ページで、正しいコードを読み込むための正しいリンクが作成されます。
詳しくは、クライアント側 HTML ライブラリの使用を参照してください。
コンポーネントのコンテンツを作成者が追加したり設定できるようにするには、ダイアログが必要です。
詳しくは、ダイアログを参照してください。
コンポーネントの編集動作を設定できます。編集動作には、コンポーネントに使用できるアクション、インプレースエディターの特性、コンポーネントに対するイベントに関連するリスナーなどの属性が含まれます。固有の相違点は多少ありますが、設定はタッチ操作向け UI とクラシック UI の両方に共通です。
コンポーネントの編集動作を設定するには、タイプ cq:EditConfig の cq:editConfig ノードをコンポーネントノード（タイプ cq:Component）の下に追加し、特定のプロパティと子ノードを追加します。
詳しくは、ExtJS ウィジェットの使用と拡張を参照してください。
詳しくは、xtype の使用を参照してください。
コンポーネントの開発方法の例について詳しくは、テキストコンポーネントと画像コンポーネントの拡張 - 例を参照してください。
既存のコンポーネントをベースに新しい AEM コンポーネントを開発するには、既存のコンポーネントをコピーし、新しいコンポーネント用の JavaScript ファイルを作成して、AEM からアクセスできる場所に保存します（「コンポーネントおよびその他の要素のカスタマイズ」も参照してください）。
-
新しいコンポーネントフォルダーを開き、必要な変更をおこないます。また、フォルダー内にある不要な情報を削除します。
例えば、次のような変更をおこなうことができます。
- ダイアログボックスへの新しいフィールドの追加
- cq:dialog - タッチ操作向け UI 用ダイアログ
- dialog - クラシック UI 用ダイアログ
- cq:dialog - タッチ操作向け UI 用ダイアログ
- .jsp ファイルの置換（新しいコンポーネントの作成後に名前を付けます）
- または、コンポーネント全体の作成し直し（必要な場合）
例えば、標準テキストコンポーネントのコピーを作成した場合は、ダイアログボックスに追加フィールドを加えて、.jsp を更新し、そこで 追加された必要情報を処理します。
注意：
クラシック UI 用に定義したダイアログは、タッチ操作向け UI で動作します。
タッチ操作向け UI 用に定義したダイアログは、クラシック UI では動作しません。
インスタンスとオーサー環境によっては、コンポーネント用に両方のタイプのダイアログを定義する必要が生じる場合があります。
- ダイアログボックスへの新しいフィールドの追加
-
次のどちらかの方法で、段落システムで新しいコンポーネントを利用できるようにします。
- CRXDE Lite を使用して、ノード /etc/designs/geometrixx/jcr:content/contentpage/par の適切なコンポーネントに、値 <path-to-component>（/apps/geometrixx/components/myComponent など）を追加します。
- 「段落システムへの新しいコンポーネントの追加」の手順を実行します。
- CRXDE Lite を使用して、ノード /etc/designs/geometrixx/jcr:content/contentpage/par の適切なコンポーネントに、値 <path-to-component>（/apps/geometrixx/components/myComponent など）を追加します。
注意：
ページ読み込みのタイミングの統計を確認するには、Ctrl+Shift+U を、URL で設定されている ?debugClientLibs=true と共に使用します。
テキストコンポーネントと画像コンポーネントの拡張により、エディターは、コンポーネントのすべての既存機能を使用できるだけでなく、次のどちらかの方法で画像の配置を指定できる追加のオプションも利用できます。
注意：
この例は、クラシック UI を対象としています。
新しいコンポーネントを作成するには、標準の textimage コンポーネントをベースとして使用し、それに変更を加えます。ここでは、Geometrixx AEM WCM の例のアプリケーションに新しいコンポーネントを保存します。
-
- コンポーネント名
- jcr:description を Text Image Component (Extended) に設定
- jcr:title を Text Image (Extended) に設定
- サイドキック内でコンポーネントが一覧表示されるグループ（修正しない）
- componentGroup の設定を General のまま保持
- 新しいコンポーネントの親コンポーネント（標準の textimage コンポーネント）
- sling:resourceSuperType を foundation/components/textimage に設定
この手順を終えると、コンポーネントのノードは以下のようになります。
- コンポーネント名
-
コンポーネントのダイアログボックスを変更して新しいオプションを含めます。新しいコンポーネントは元のコンポーネントと同じダイアログボックスのパーツを継承します。「詳細」タブを拡張するために、「左」と「右」のオプションのある「画像の位置」ドロップダウンリストだけを追加します。
- textimage/dialog プロパティは変更しません。
textimage/dialog/items に、textimage ダイアログボックスの 4 つのタブを表す 4 つのサブノード（tab1 から tab4）があることを確認します。
- 最初の 2 つのタブ（tab1 および tab2）：
- xtype を cqinclude に変更します（標準コンポーネントから継承するため）。
- path プロパティの値をそれぞれ、/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：画像の位置
- type：select
- 画像の配置の選択肢を 2 つ表すために、cq:WidgetCollection 型のサブノード position/options を追加し、その下に、nt:unstructured 型の 2 つのノード、o1 および o2 を作成します。
- ノード position/options/o1 では、プロパティ text を「左」に、プロパティ value を left に設定します。
- ノード position/options/o2 では、プロパティ text を「右」に、プロパティ value を right に設定します。
- tab4 を削除します。
画像の位置は、textimage の段落を表すノードの imagePosition プロパティとしてコンテンツ内で保持されます。これらの手順を終えると、コンポーネントのダイアログボックスは以下のようになります。
-
Image image = new Image(resource, "image"); if (image.hasContent() || WCMMode.fromRequest(request) == WCMMode.EDIT) { image.loadStyleData(currentStyle);// 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"><%
コンポーネントを開発したら、段落システムに追加します。この操作により、ページの編集時に、作成者がコンポーネントを選択して使用できるようになります。コンポーネントをテストするには、以下の手順を実行します。
Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。