ウィジェットの使用および拡張（クラシック UI）

Adobe Experience Manager の Web ベースインターフェイスでは、AJAX やその他の最新のブラウザー技術が使用されています。これらの技術により、作成者は、Web ページ上でコンテンツの WYSIWYG 編集や書式設定をおこなうことができます。

Adobe Experience Manager（AEM）では、ExtJS ウィジェットライブラリが使用されています。このライブラリのユーザーインターフェイス要素は、主要なすべてのブラウザーで動作するだけではなく、デスクトップクラスの UI の操作性も実現でき、非常に洗練されたものとなっています。

これらのウィジェットは AEM に組み込まれており、AEM 自体でも使用されていますが、AEM で作成したすべての Web サイトでも使用できます。

AEM で使用可能なすべてのウィジェットについて詳しくは、ウィジェット API ドキュメントまたは既存の xtype のリストを参照してください。また、ExtJS フレームワークを所有している Sencha のサイトには、ExtJS フレームワークの使用方法を示す例が多数掲載されています。

このページをご覧になると、ウィジェットを使用したり、拡張したりする方法についてのヒントが得られます。このページでは、最初に、クライアント側コードをページに組み込む方法が説明されています。次に、基本的な使用と拡張の方法を説明するために作成されたサンプルコンポーネントが示されています。これらのコンポーネントは、パッケージ共有の Using ExtJS Widgets パッケージで提供されています。

このパッケージには、次の例が含まれています。

• すぐに使用できるウィジェットで作成した基本ダイアログ。
• すぐに使用できるウィジェットとカスタマイズ済みの Javascript ロジックで作成した動的ダイアログ。
• カスタムウィジェットに基づくダイアログ。
• 特定のパスの下に JCR ツリーを表示するツリーパネル。
• 表形式でデータを表示するグリッドパネル。

クライアント側の Javascript とスタイルシートのコードをクライアントライブラリに配置します。

クライアントライブラリを作成するには：

1. /apps/<project> の下にノードを作成し、次のプロパティを設定します。
   • name="clientlib"
   • jcr:mixinTypes="[mix:lockable]"
   • jcr:primaryType="cq:ClientLibraryFolder"
     
   • sling:resourceType="widgets/clientlib"
     
   • categories="[<category-name>]"
     
   • dependencies="[cq.widgets]"
     
   注意：<category-name> は、カスタムライブラリの名前（「cq.extjstraining」など）で、ページにライブラリを組み込むために使用されます。
2. clientlib の下に css フォルダーと js フォルダー（nt:folder）を作成します。
   
3. clientlib の下に css.txt ファイルと js.txt ファイル（nt:file）を作成します。これらの .txt ファイルには、ライブラリに組み込むファイルを記述します。
   
4. js.txt を編集します。このファイルは、先頭に「#base=js」を指定し、その下に CQ クライアントライブラリサービスによって集約されるファイルのリストを指定する必要があります。次に例を示します。
   #base=js
   components.js
   exercises.js
   CustomWidget.js
   CustomBrowseField.js
   InsertTextPlugin.js
5. css.txt を編集します。このファイルは、先頭に「#base=css」を指定し、その下に CQ クライアントライブラリサービスによって集約されるファイルのリストを指定する必要があります。次に例を示します。
   #base=css
   components.css
6. js フォルダーの下に、ライブラリに属する Javascript ファイルを配置します。
   
7. css フォルダーの下に、.css ファイルとその .css ファイルによって使用されるリソース（my_icon.png など）を配置します。

ページコンポーネント jsp にクライアントライブラリを組み込むには：

• Javascript コードとスタイルシートの両方を組み込むには：
  <ui:includeClientLib categories="<category-name1>, <category-name2>, ..."/>
  ここで <category-nameX> は、クライアント側ライブラリの名前です。
• Javascript コードのみを組み込むには：
  <ui:includeClientLib js="<category-name>"/>

詳しくは、<ui:includeClientLib> タグの説明を参照してください。

クライアントライブラリは、オーサーモードでのみ使用可能にして、パブリッシュモードでは除外することが必要な場合があります。これをおこなうには、次のように設定します。

このページのチュートリアルに従うには、Using ExtJS Widgets という名前のパッケージをローカル AEM インスタンスにインストールして、コンポーネントを組み込むサンプルページを作成します。そのためには、以下の手順を実行します。

1. AEM インスタンスで、パッケージ共有から Using ExtJS Widgets (v01) という名前のパッケージをダウンロードしてインストールします。リポジトリの /apps の下に extjstraining という名前のプロジェクトが作成されます。
2. スクリプト（js）とスタイルシート（css）を含むクライアントライブラリを geometrixx ページ jsp の head タグに指定します。これは、Geometrixx ブランチの新しいページにサンプルコンポーネントを組み込むからです。
   CRXDE Lite で、ファイル /apps/geometrixx/components/page/headlibs.jsp を開き、次のように cq.extjstraining カテゴリを既存の <ui:includeClientLib> タグに追加します。
   %><ui:includeClientLib categories="apps.geometrixx-main, cq.extjstraining"/><%
3. /content/geometrixx/en/products の下にある Geometrixx ブランチに新しいページを作成し、Using ExtJS Widgets という名前を設定します。
   
4. デザインモードに切り替え、Using ExtJS Widgets という名前のグループのすべてのコンポーネントを Geometrixx のデザインに追加します。
5. 編集モードに戻ります。サイドキックで Using ExtJS Widgets グループのコンポーネントが使用可能になります。
   

通常、ダイアログは、コンテンツを編集するために使用されますが、情報の表示のみをおこなうこともできます。ダイアログを完全に表示する簡単な方法は、その JSON 形式の表現にアクセスすることです。これをおこなうには、ブラウザーで次のように指定します。

http://localhost:4502/<path-to-dialog>.-1.json

サイドキックにある Using ExtJS Widgets グループの最初のコンポーネントは、1.Dialog Basics という名前で、4 つの基本ダイアログが入っています。これらのダイアログは、すぐに使用できるウィジェットで作成されており、カスタマイズした Javascript ロジックは含まれていません。これらのダイアログは、/apps/extjstraining/components/dialogbasics の下に保存されています。基本ダイアログを次に示します。

• Full ダイアログ（full ノード）：3 つのタブを持つウィンドウが表示されます。各タブには、2 つのテキストフィールドがあります。
  
• Single Panel ダイアログ（singlepanel ノード）：1 つのタブを持つウィンドウが表示されます。このタブには、2 つのテキストフィールドがあります。
• Multi Panel ダイアログ（multipanel ノード）：表示内容は Full ダイアログと同じですが、ダイアログの作成の仕方が異なります。
• Design ダイアログ（design ノード）：2 つのタブを持つウィンドウが表示されます。最初のタブには、テキストフィールド、ドロップダウンメニューおよび折り畳み可能なテキスト領域があります。2 番目のタブには、4 つのテキストフィールドを含むフィールドセットと、2 つのテキストフィールドを含む折り畳み可能なフィールドセットがあります。

次の手順に従って、1.Dialog Basics コンポーネントをサンプルページに組み込みます。

1. 1.Dialog Basics コンポーネントをサンプルページに追加します（サイドキックにある「Using ExtJS Widgets」タブから）。
2. このコンポーネントには、タイトル、テキストおよびプロパティリンクが表示されます。リンクをクリックすると、リポジトリに保存されている段落のプロパティが表示されます。リンクをもう一度クリックすると、プロパティが非表示になります。

このコンポーネントは、次のように表示されます。

Full ダイアログには、3 つのタブを持つウィンドウが表示されます。各タブには、2 つのテキストフィールドがあります。これは、Dialog Basics コンポーネントのデフォルトダイアログです。特性は次のとおりです。

• ノードによって定義されます：node type = cq:Dialog、xtype = dialog。
• 3 つのタブが表示されます（node type = cq:Panel）。
• 各タブには、2 つのテキストフィールドがあります（node type = cq:Widget、xtype = textfield）。
  
• ノードによって定義されます。
  /apps/extjstraining/components/dialogbasics/full
• 次を要求することにより、JSON 形式でレンダリングされます。
  http://localhost:4502/apps/extjstraining/components/dialogbasics/full.-1.json

このダイアログは、次のように表示されます。

Single Panel ダイアログには、1 つのタブを持つウィンドウが表示されます。このタブには、2 つのテキストフィールドがあります。特性は次のとおりです。

• 1 つのタブ（node type = cq:Dialog、xtype = panel）を表示します。
• このタブには 2 つのテキストフィールド（node type = cq:Widget、xtype = textfield）があります。
  
• ノードによって定義されます。
  /apps/extjstraining/components/dialogbasics/singlepanel
• 次を要求することにより、JSON 形式でレンダリングされます。
  http://localhost:4502/apps/extjstraining/components/dialogbasics/singlepanel.-1.json
• Full ダイアログの利点の 1 つは、必要な設定が少ないことです。
• 推奨される用途：情報を表示するだけの、またはフィールドが数個しかない単純なダイアログ。

Single Panel ダイアログを使用するには：

1. Dialog Basics コンポーネントのダイアログを Single Panel ダイアログに置き換えます。
   1. CRXDE Lite で、次のノードを削除します。 /apps/extjstraining/components/dialogbasics/dialog
   2. 「すべて保存」をクリックして変更を保存します。
   3. 次のノードをコピーします。/apps/extjstraining/components/dialogbasics/singlepanel
   4. コピーしたノードを次に貼り付けます。/apps/extjstraining/components/dialogbasics
   5. 次のノードを選択します。/apps/extjstraining/components/dialogbasics/Copy of singlepanel。このノードの名前を dialog に変更します。
2. コンポーネントを編集します。次のようなダイアログが表示されます。

Multi Panel ダイアログは、Full ダイアログと同じ表示内容ですが、ダイアログの作成の仕方が異なります。特性は次のとおりです。

• ノードによって定義されます（node type = cq:Dialog、xtype = tabpanel）。
• 3 つのタブが表示されます（node type = cq:Panel）。
• 各タブには、2 つのテキストフィールドがあります（node type = cq:Widget、xtype = textfield）。
• ノードによって定義されます。
  /apps/extjstraining/components/dialogbasics/multipanel
• 次を要求することにより、JSON 形式でレンダリングされます。
  http://localhost:4502/apps/extjstraining/components/dialogbasics/multipanel.-1.json
• Full ダイアログの利点の 1 つは、構造が簡単であることです。
  
• 推奨される用途：複数のタブを持つダイアログ。
  

Multi Panel ダイアログを使用するには：

1. Dialog Basics コンポーネントのダイアログを Multi Panel ダイアログに置き換えます。
   例 2：Single Panel ダイアログで説明されている手順に従います。
   
2. コンポーネントを編集します。次のようなダイアログが表示されます。

Rich ダイアログには、2 つのタブを持つウィンドウが表示されます。最初のタブには、テキストフィールド、ドロップダウンメニューおよび折り畳み可能なテキスト領域があります。2 番目のタブには、4 つのテキストフィールドを含むフィールドセットと、2 つのテキストフィールドを含む折り畳み可能なフィールドセットがあります。特性は次のとおりです。

• ノード（node type = cq:Dialog、xtype = dialog）によって定義されます。
  
• 2 つのタブが表示されます（node type = cq:Panel）。
• 最初のタブには、textfield ウィジェットと 3 つのオプションを含む selection ウィジェットを含む dialogfieldset ウィジェットに加え、textarea ウィジェットを含む折り畳み可能な dialogfieldset ウィジェットがあります。
• 2 番目のタブには、4 つの textfield ウィジェットを含む dialogfieldset ウィジェットと、2 つの textfield ウィジェットを含む折り畳み可能な dialogfieldset ウィジェットがあります。
• ノードによって定義されます。
  /apps/extjstraining/components/dialogbasics/rich
• 次を要求することにより、JSON 形式でレンダリングされます。
  http://localhost:4502/apps/extjstraining/components/dialogbasics/rich.-1.json

Rich ダイアログを使用するには：

1. Dialog Basics コンポーネントのダイアログを Rich ダイアログに置き換えます。
   例 2：Single Panel ダイアログで説明されている手順に従います。
2. コンポーネントを編集します。次のようなダイアログが表示されます。

サイドキックにある Using ExtJS Widgets グループの 2 番目のコンポーネントは、2.Dynamic Dialogs という名前で、3 つの動的ダイアログが含まれています。これらのダイアログは、すぐに使用できるウィジェットと、カスタマイズされた Javascript ロジックから作成されています。これらのダイアログは、/apps/extjstraining/components/dynamicdialogs の下に保存されています。動的ダイアログを次に示します。

• Switch Tabs ダイアログ（switchtabs ノード）：2 つのタブを持つウィンドウが表示されます。最初のタブでは、ラジオボタンにより、3 つのオプションのいずれかを選択できます。オプションを選択すると、選択したオプションに関連付けられているタブが表示されます。2 番目のタブには、2 つのテキストフィールドがあります。
• Arbitrary ダイアログ（arbitrary ノード）：1 つのタブを持つウィンドウが表示されます。このタブには、2 つのフィールドがあります。一つは、アセットをドロップまたはアップロードするためのフィールド、もう一つは、コンポーネントを含むページに関する情報とアセットに関する情報（アセットが参照されている場合）を表示するフィールドです。
• Toggle Fields ダイアログ（togglefield ノード）：1 つのタブを持つウィンドウが表示されます。このタブには、1 つのチェックボックスがあります。このチェックボックスを選択すると、2 つのテキストフィールドを含むフィールドセットが表示されます。

2.Dynamic Dialogs コンポーネントをサンプルページに組み込むには：

1. 2.Dynamic Dialogs コンポーネントをサンプルページに追加します（サイドキックにある「Using ExtJS Widgets」タブから）。
2. このコンポーネントには、タイトル、テキストおよびプロパティリンクが表示されます。リンクをクリックすると、リポジトリに保存されている段落のプロパティが表示されます。リンクをもう一度クリックすると、プロパティが非表示になります。
   

このコンポーネントは、次のように表示されます。

Switch Tabs ダイアログには、2 つのタブを持つウィンドウが表示されます。最初のタブでは、ラジオボタンにより、3 つのオプションのいずれかを選択できます。オプションを選択すると、選択したオプションに関連付けられているタブが表示されます。2 番目のタブには、2 つのテキストフィールドがあります。

このダイアログの主な特徴を次に示します。

• ノード（node type = cq:Dialog、xtype = dialog）によって定義されます。
  
• 2 つのタブ（node type = cq:Panel）を表示します。最初のタブは選択タブです。2 番目のタブは、最初のタブでの選択内容（3 つのオプション）によって異なります。
• 3 つのオプションタブがあります（node type = cq:Panel）。各オプションタブには、2 つのテキストフィールドがあります（node type = cq:Widget、xtype = textfield）。一度に表示されるオプションタブは 1 つだけです。
  
• 次の場所にある switchtabs ノードによって定義されます。
  /apps/extjstraining/components/dynamicdialogs/switchtabs
• 次を要求することにより、JSON 形式でレンダリングされます。
  http://localhost:4502/apps/extjstraining/components/dynamicdialogs/switchtabs.-1.json

ロジックは、次のようにイベントリスナーと Javascript コードによって実装されています。

• このダイアログノードには、ダイアログを表示する前にすべてのオプションタブを非表示にする「beforeshow」リスナーがあります。
  beforeshow="function(dialog){Ejst.x2.manageTabs(dialog.items.get(0));}"
   dialog.items.get(0) は、選択パネルと 3 つのオプションパネルを含む tabpanel を取得します。
  
• Ejst.x2 オブジェクトは、次の場所にある exercises.js ファイルで定義されます。
  /apps/extjstraining/clientlib/js/exercises.js
  
• Ejst.x2.manageTabs() メソッドでは、index の値を -1 にすると、すべてのオプションタブが非表示になります（インデックスは 1 から 3 です）。
• 選択範囲タブには、2 つのリスナーがあります。一つは、ダイアログのロード（「loadcontent」イベント）時に選択済みのタブを表示するリスナー、もう一つは、選択内容の変更（「selectionchanged」イベント）時に選択済みのタブを表示するリスナーです。
  loadcontent="function(field,rec,path){Ejst.x2.showTab(field);}"
   selectionchanged="function(field,value){Ejst.x2.showTab(field);}"
  
• Ejst.x2.showTab() メソッドで、
  field.findParentByType('tabpanel') は、すべてのタブを含む tabpanel を取得します（field は、selection ウィジェットを表します）。
  field.getValue() は、選択の値（tab2 など）を取得します。
  Ejst.x2.manageTabs() は、選択済みのタブを表示します。
• 各オプションタブには、「render」イベントでタブを非表示にするリスナーがあります。
  render="function(tab){Ejst.x2.hideTab(tab);}"
  
• Ejst.x2.hideTab() メソッドで、
  tabPanel は、すべてのタブを含む tabpanel です。
  index は、オプションタブのインデックスです。
  tabPanel.hideTabStripItem(index) は、タブを非表示にします。

次のように表示されます。

ほとんどの場合、ダイアログには、基になるコンポーネントからのコンテンツが表示されます。ここで説明する Arbitrary ダイアログは、別のコンポーネントからコンテンツを取り込みます。

Arbitrary ダイアログには、1 つのタブを持つウィンドウが表示されます。このタブには、2 つのフィールドがあります。一つは、アセットをドロップまたはアップロードするためのフィールド、もう一つは、コンポーネントを含むページに関する情報とアセットに関する情報（アセットが参照されている場合）を表示するフィールドです。

このダイアログの主な特徴を次に示します。

• ノード（node type = cq:Dialog、xtype = dialog）によって定義されます。
  
• 1 つのパネル（node type = cq:Panel）を含む 1 つの tabpanel ウィジェット（node type = cq:Widget、xtype = tabpanel）を表示します。
• このパネルには、smartfile ウィジェット（node type = cq:Widget、xtype = smartfile）と ownerdraw ウィジェット（node type = cq:Widget、xtype = ownerdraw）があります。
• 次の場所にある arbitrary ノードによって定義されます。
  /apps/extjstraining/components/dynamicdialogs/arbitrary
• 次を要求することにより、JSON 形式でレンダリングされます。
  http://localhost:4502/apps/extjstraining/components/dynamicdialogs/arbitrary.-1.json

ロジックは、次のようにイベントリスナーと Javascript コードによって実装されています。

• ownerdraw ウィジェットには、「loadcontent」リスナーがあります。このリスナーは、コンポーネントを含むページに関する情報と、コンテンツのロード時に smartfile ウィジェットにより参照されるアセットに関する情報を表示します。
  loadcontent="function(field,rec,path){Ejst.x2.showInfo(field,rec,path);}"
   field には、ownerdraw オブジェクトを設定します。
  path には、コンポーネントのコンテンツパスを設定します（例：/content/geometrixx/en/products/triangle/ui-tutorial/jcr:content/par/dynamicdialogs）。
• Ejst.x2 オブジェクトは、次の場所にある exercises.js ファイルで定義されます。
  /apps/extjstraining/clientlib/js/exercises.js
• Ejst.x2.showInfo() メソッドで、
  pagePath は、コンポーネントを含むページのパスです。
  pageInfo は、JSON 形式のページプロパティを表します。
  reference は、参照されるアセットのパスです。
  metadata は、JSON 形式のアセットのメタデータを表します。
  ownerdraw.getEl().update(html); は、作成された html をダイアログに表示します。
  

Arbitrary ダイアログを使用するには：

1. Dynamic Dialog コンポーネントのダイアログを Arbitrary ダイアログに置き換えます。
   例 2：Single Panel ダイアログで説明されている手順に従います。
2. コンポーネントを編集します。次のようなダイアログが表示されます。

Toggle Fields ダイアログには、1 つのタブを持つウィンドウが表示されます。このタブには、1 つのチェックボックスがあります。このチェックボックスを選択すると、2 つのテキストフィールドを含むフィールドセットが表示されます。

このダイアログの主な特徴を次に示します。

• ノード（node type = cq:Dialog、xtype = dialog）によって定義されます。
  
• 1 つのパネル（node type = cq:Panel）を含む 1 つの tabpanel ウィジェット（node type = cq:Widget、xtype = tabpanel）を表示します。
• このパネルには、selection/checkbox ウィジェット（node type = cq:Widget、xtype = selection、type = checkbox）、折り畳み可能な dialogfieldset ウィジェット（node type = cq:Widget、xtype = dialogfieldset。デフォルトでは非表示）、2 つの textfield ウィジェット（node type = cq:Widget、xtype = textfield）があります。
• 次の場所にある togglefields ノードによって定義されます。
  /apps/extjstraining/components/dynamicdialogs/togglefields
• 次を要求することにより、JSON 形式でレンダリングされます。
  http://localhost:4502/apps/extjstraining/components/dynamicdialogs/togglefields.-1.json

ロジックは、次のようにイベントリスナーと Javascript コードによって実装されています。

• 選択範囲タブには、2 つのリスナーがあります。一つは、コンテンツのロード（「loadcontent」イベント）時に dialogfieldset を表示するリスナー、もう一つは、選択内容の変更（「selectionchanged」イベント）時に dialogfieldset を表示するリスナーです。
  loadcontent="function(field,rec,path){Ejst.x2.toggleFieldSet(field);}"
   selectionchanged="function(field,value){Ejst.x2.toggleFieldSet(field);}"
• Ejst.x2 オブジェクトは、次の場所にある exercises.js ファイルで定義されます。
  /apps/extjstraining/clientlib/js/exercises.js
  
• Ejst.x2.toggleFieldSet() メソッドで、
  box は、selection オブジェクトです。
  panel は、selection ウィジェットと dialogfieldset ウィジェットを含むパネルです。
  fieldSet は、dialogfieldset オブジェクトです。
  show は、selection の値（true または false）です。
  「show」に基づいて、dialogfieldset が表示されるかどうかが決定されます。

Toggle Fields ダイアログを使用するには：

1. Dynamic Dialog コンポーネントのダイアログを Toggle Fields ダイアログに置き換えます。
   例 2：Single Panel ダイアログで説明されている手順に従います。
2. コンポーネントを編集します。次のようなダイアログが表示されます。

AEM に付属しているすぐに使用できるウィジェットは、ほとんどのケースに対応できます。ただし、プロジェクト固有の要件に対応するために、カスタムウィジェットの作成が必要になることもあります。カスタムウィジェットは、既存のウィジェットを拡張して作成できます。こうしたカスタマイズをおこなう際の手助けとなるように、Using ExtJS Widgets パッケージには、3 つの異なるカスタムウィジェットを使用する 3 つのダイアログが含まれています。

• Multi Field ダイアログ（multifield ノード）。1 つのタブを持つウィンドウが表示されます。このタブには、カスタマイズされた multifield ウィジェットがあり、2 つのオプションを選択できるドロップダウンメニューとテキストフィールドという 2 つのフィールドが含まれています。このタブは、すぐに使用できる multifield ウィジェット（テキストフィールドのみを持つ）に基づいているので、multifield ウィジェットの機能をすべて使用できます。
• Tree Browse ダイアログ（treebrowse ノード）。このダイアログに表示されるウィンドウには、パス参照ウィジェットを含む 1 つのタブがあります。このウィジェットで矢印をクリックすると、ウィンドウが開き、階層を参照しながら項目を選択できます。項目を選択すると、そのパスがパスフィールドに追加され、ダイアログを閉じても保持され続けます。
• リッチテキストエディタープラグインベースのダイアログ（rteplugin ノード）。リッチテキストエディターにカスタムボタンを追加したもので、メインテキストにカスタムテキストを挿入できます。richtext ウィジェット（RTE）と、RTE プラグインメカニズムを通じて追加されたカスタム機能から構成されています。

カスタムウィジェットとプラグインは、3.Custom Widgets（Using ExtJS Widgets パッケージに属する）という名前のコンポーネントに含まれています。このコンポーネントをサンプルページに組み込むには：

1. 3.Custom Widgets コンポーネントをサンプルページに追加します（サイドキックにある「Using ExtJS Widgets」タブから）。
2. このコンポーネントには、タイトルとテキストが表示されます。また、プロパティリンクをクリックすると、リポジトリに保存されている段落のプロパティも表示されます。リンクをもう一度クリックすると、プロパティが非表示になります。
   このコンポーネントは、次のように表示されます。

Custom Multifield ウィジェットベースのダイアログには、1 つのタブを持つウィンドウが表示されます。このタブには、カスタマイズされた multifield ウィジェットがあります。標準の multifield ウィジェットには 1 つのフィールドがありますが、このウィジェットには、2 つのオプションを選択できるドロップダウンメニューとテキストフィールドという 2 つのフィールドがあります。

Custom Multifield ウィジェットベースのダイアログ：

• ノード（node type = cq:Dialog、xtype = dialog）によって定義されます。
  
• 1 つのパネル（node type = cq:Widget、xtype = panel）を含む 1 つの tabpanel ウィジェット（node type = cq:Widget、xtype = tabpanel）を表示します。
  
• このパネルには、multifield ウィジェット（node type = cq:Widget、xtype = multifield）があります。
• multifield ウィジェットには、カスタム xtype「ejstcustom」に基づく fieldconfig（node type = nt:unstructured、xtype = ejstcustom、optionsProvider = Ejst.x3.provideOptions）があります。
  
  • 「fieldconfig」は、CQ.form.MultiField オブジェクトの設定オプションの 1 つです。
    
  • 「optionsProvider」は、ejstcustom ウィジェットの設定の一つです。Ejst.x3.provideOptions メソッドが設定されます。このメソッドは、次の場所にある exercises.js で定義されています。
    /apps/extjstraining/clientlib/js/exercises.js
    また、このメソッドは 2 つのオプションを返します。
    
• 次の場所にある multifield ノードによって定義されます。
  /apps/extjstraining/components/customwidgets/multifield
• 次を要求することにより、JSON 形式でレンダリングされます。
  http://localhost:4502/apps/extjstraining/components/customwidgets/multifield.-1.json

Custom Multifield ウィジェット（xtype = ejstcustom）：

• Ejst.CustomWidget という名前の Javascript オブジェクトです。
  
• 次の場所にある CustomWidget.js Javascript ファイルで定義されます。
  /apps/extjstraining/clientlib/js/CustomWidget.js
• CQ.form.CompositeField ウィジェットを拡張します。
  
• hiddenField（テキストフィールド）、allowField（コンボボックス）および otherField（テキストフィールド）という 3 つのフィールドがあります。
• CQ.Ext.Component#initComponent を上書きして 3 つのフィールドを追加します。
  
  • allowField は、タイプ「select」の CQ.form.Selection オブジェクトです。optionsProvider は、ダイアログで定義された CustomWidget の optionsProvider 設定を使用してインスタンス化された Selection オブジェクトの設定です。
  • otherField は、CQ.Ext.form.TextField オブジェクトです。
• 次の形式で CustomWidget の値を設定および取得するために、CQ.form.CompositeField のメソッド setValue、getValue および getRawValue を上書きします。
  <allowField value>/<otherField value>（例：「Bla1/hello」）。
• 自分自身を「ejstcustom」 xtype として登録します。
  CQ.Ext.reg('ejstcustom', Ejst.CustomWidget);

Custom Multifield ウィジェットベースのダイアログは、次のように表示されます。

カスタム Treebrowse ウィジェットベースのダイアログには、1 つのタブを持つウィンドウが表示されます。このタブには、カスタムパス参照ウィジェットが含まれています。このウィジェットで矢印をクリックすると、ウィンドウが開き、階層を参照しながら項目を選択できます。項目を選択すると、そのパスがパスフィールドに追加され、ダイアログを閉じても保持され続けます。

カスタム treebrowse ダイアログ：

• ノード（node type = cq:Dialog、xtype = dialog）によって定義されます。
  
• 1 つのパネル（node type = cq:Widget、xtype = panel）を含む 1 つの tabpanel ウィジェット（node type = cq:Widget、xtype = tabpanel）を表示します。
  
• このパネルには、カスタムウィジェット（node type = cq:Widget、xtype = ejstbrowse）があります。
• 次の場所にある treebrowse ノードによって定義されます。
  /apps/extjstraining/components/customwidgets/treebrowse
• 次を要求することにより、JSON 形式でレンダリングされます。
  http://localhost:4502/apps/extjstraining/components/customwidgets/treebrowse.-1.json

カスタム treebrowse ウィジェット（xtype = ejstbrowse）：

• Ejst.CustomWidget という名前の Javascript オブジェクトです。
• 次の場所にある CustomBrowseField.js Javascript ファイルで定義されます。
  /apps/extjstraining/clientlib/js/CustomBrowseField.js
  
• CQ.Ext.form.TriggerField を拡張します。
• browseWindow という名前の参照ウィンドウを定義します。
  
• 矢印がクリックされたときに参照ウィンドウを表示するように CQ.Ext.form.TriggerField#onTriggerClick を上書きします。
• CQ.Ext.tree.TreePanel オブジェクトを定義します。
  
  • このオブジェクトのデータを取得するには、 /bin/wcm/siteadmin/tree.json で登録されたサーブレットを呼び出します。
  • このオブジェクトのルートは、「apps/extjstraining」です。
• window オブジェクト（CQ.Ext.Window）を定義します。
  • 事前定義済みのパネルに基づいています。
  • 選択されたパスの値を設定し、パネルを非表示にする「OK」ボタンを組み込みます。
    
• ウィンドウは、「パス」フィールドの下に固定されます。
• 選択されたパスは、show イベントが発生したときに、参照フィールドからウィンドウに渡されます。
  
• 自分自身を「ejstbrowse」 xtype として登録します。
  CQ.Ext.reg('ejstbrowse', Ejst.CustomBrowseField);
  

カスタム Treebrowse ウィジェットベースのダイアログを使用するには：

1. Custom Widgets コンポーネントのダイアログをカスタム Treebrowse ダイアログに置き換えます。
   例 2：Single Panel ダイアログで説明されている手順に従います。
2. コンポーネントを編集します。次のようなダイアログが表示されます。

リッチテキストエディター（RTE）プラグインベースのダイアログは、大括弧内にカスタムテキストを挿入するためのカスタムボタンがあるリッチテキストエディターベースのダイアログです。カスタムテキストをサーバー側ロジックで解析し、例えば、特定のパスで定義されたテキストを追加することができます（この例では、サーバー側ロジックは実装されていません）。

RTE プラグインベースのダイアログ：

• 次の場所にある rteplugin ノードによって定義されます。
  /apps/extjstraining/components/customwidgets/rteplugin
  
• 次を要求することにより、JSON 形式でレンダリングされます。
  http://localhost:4502/apps/extjstraining/components/customwidgets/rteplugin.-1.json
• rtePlugins ノードには、プラグインにちなんで命名された子ノード inserttext（node type = nt:unstructured）があります。このノードには、RTE で使用可能なプラグイン機能を定義する features という名前のプロパティがあります。

RTE プラグイン：

• Ejst.InsertTextPlugin という名前の Javascript オブジェクトです。
  
• 次の場所にある InsertTextPlugin.js Javascript ファイルで定義されます。
  /apps/extjstraining/clientlib/js/InsertTextPlugin.js
  
• CQ.form.rte.plugins.Plugin オブジェクトを拡張します。
• 次のメソッドは、CQ.form.rte.plugins.Plugin オブジェクトを定義するもので、プラグインの実装時に上書きされます。
  • getFeatures() は、プラグインによって使用可能になるすべての機能の配列を返します。
  • initializeUI() は、RTE ツールバーに新しいボタンを追加します。
  • notifyPluginConfig() は、ボタンにマウスポインターが置かれたときにタイトルとテキストを表示します。
  • execute() は、ボタンのクリック時に呼び出されるもので、含めるテキストを定義するためのウィンドウを表示するというプラグインのアクションを実行します。
    
• insertText() は、対応するダイアログオブジェクト Ejst.InsertTextPlugin.Dialog（後述）を使用してテキストを挿入します。
  
• executeInsertText() は、ダイアログの apply() メソッドで呼び出されます。これは「OK」ボタンをクリックしたときにトリガーされます。
  
• 自分自身を「inserttext」プラグインとして登録します。
  CQ.form.rte.plugins.PluginRegistry.register("inserttext", Ejst.InsertTextPlugin);
• Ejst.InsertTextPlugin.Dialog オブジェクトは、プラグインのボタンがクリックされたときに開くダイアログを定義します。このダイアログは、1 つのパネル、1 つのフォーム、1 つのテキストフィールドおよび 2 つのボタン（「OK」と「キャンセル」）から構成されます。
  

リッチテキストエディター（RTE）プラグインベースのダイアログを使用するには：

1. Custom Widgets コンポーネントのダイアログをリッチテキストエディター（RTE）プラグインベースのダイアログに置き換えます。
   例 2：Single Panel ダイアログで説明されている手順に従います。
2. コンポーネントを編集します。
3. 右側の最後のアイコン（4 つの矢印が付いているアイコン）をクリックします。パスを入力して「OK」をクリックします。
   パスが大括弧（[ ]）内に表示されます。
4. 「OK」をクリックしてリッチテキストエディターを閉じます。

リッチテキストエディター（RTE）プラグインベースのダイアログは、次のように表示されます。

すぐに使用できる CQ.Ext.tree.TreePanel オブジェクトは、ツリー構造のデータをツリー構造 UI として表示できます。Using ExtJS Widgets パッケージに含まれている Tree Overview コンポーネントを見ると、TreePanel オブジェクトを使用して特定のパスの下に JCR ツリーを表示する方法がわかります。このウィンドウ自体は、ドッキングすることも、ドッキング解除することもできます。この例の場合、ウィンドウのロジックは、コンポーネント jsp の <script> タグと </script> タグの間に埋め込まれています。

Tree Overview コンポーネントをサンプルページに組み込むには：

1. 4. Tree Overview コンポーネントをサンプルページに追加します（サイドキックにある「Using ExtJS Widgets」タブから）。
2. このコンポーネントには、次のものが表示されます。
   • タイトルとテキスト
   • プロパティリンク。クリックすると、リポジトリに保存されている段落のプロパティが表示されます。リンクをもう一度クリックすると、プロパティが非表示になります。
   • リポジトリをツリーで表現した浮動ウィンドウ。このツリーは展開可能です。

このコンポーネントは、次のように表示されます。

Tree Overview コンポーネントの特性は次のとおりです。

• 次の場所で定義されます。
  /apps/extjstraining/components/treeoverview
• このコンポーネントのダイアログでは、ウィンドウサイズの設定やウィンドウのドッキング、ドッキング解除が可能です（以下を参照）。

コンポーネント jsp：

• リポジトリから幅、高さ、ドッキングの各プロパティを取得します。
• ツリー概要のデータ形式に関するテキストを表示します。
• コンポーネントの jsp の JavaScript タグ間にウィンドウロジックを埋め込みます。
• 次の場所で定義されます。
  apps/extjstraining/components/treeoverview/content.jsp

コンポーネント jsp に埋め込まれた Javascript コード：

• ページからツリーウィンドウの取得を試みることにより、tree オブジェクトを定義します。
  
• ツリーを表示しているウィンドウが存在しない場合は、treePanel（CQ.Ext.tree.TreePanel）が作成されます。
  • treePanel には、ウィンドウの作成に使用されるデータが含まれています。
    
  • データは、次で登録されたサーブレットを呼び出すことにより、取得されます。
    /bin/wcm/siteadmin/tree.json
    
• beforeload リスナーにより、クリックされたノードがロードされます。
• root オブジェクトは、パス apps/extjstraining をツリーのルートとして設定します。
• tree（CQ.Ext.Window）は、あらかじめ定義されている treePanel を基に設定され、次のメソッドを使用して表示されます。
  tree.show();
• ウィンドウが既に存在する場合、ウィンドウは、リポジトリから取得した幅、高さ、ドッキングの各プロパティに基づいて表示されます。

コンポーネントダイアログ：

• ツリー概要ウィンドウのサイズ（幅と高さ）を設定する 2 つのフィールドと、ウィンドウをドッキングまたはドッキング解除する 1 つのフィールドを持つ 1 つのタブを表示します。
• ノード（node type = cq:Dialog、xtype = panel）によって定義されます。
  
• パネルには、sizefield ウィジェット（node type = cq:Widget、xtype = sizefield）と、2 つのオプション（true または false）を選択できる selection ウィジェット（node type = cq:Widget、xtype = selection、type = radio）があります。
  
• 次の場所にある dialog ノードによって定義されます。
  /apps/extjstraining/components/treeoverview/dialog
  
• 次を要求することにより、JSON 形式でレンダリングされます。
  http://localhost:4502/apps/extjstraining/components/treeoverview/dialog.-1.json
• 次のように表示されます。
  

グリッドパネルには、データが行と列の表形式で表示されます。このパネルは、次の内容から構成されています。

• ストア：データレコード（行）を保持しているモデル。
  
• 列モデル：列の構成。
  
• ビュー：ユーザーインターフェイスが含まれます。
  
• 選択モデル：選択の動作。

Using ExtJS Widgets パッケージに含まれている Grid Overview コンポーネントを見ると、データを表形式で表示する方法がわかります。

• 例 1 では、静的データを使用しています。
  
• 例 2 では、リポジトリから取得したデータを使用しています。

Grid Overview コンポーネントをサンプルページに組み込むには：

1. 5. Grid Overview コンポーネントをサンプルページに追加します（サイドキックにある「Using ExtJS Widgets」タブから）。
2. このコンポーネントには、次のものが表示されます。
   •  タイトルとテキスト
     
   • プロパティリンク。クリックすると、リポジトリに保存されている段落のプロパティが表示されます。リンクをもう一度クリックすると、プロパティが非表示になります。
   • 表形式のデータを含む浮動ウィンドウ。

このコンポーネントは、次のように表示されます。

すぐに使用できるバージョンの場合、Grid Overview コンポーネントには、静的データが表形式で含まれているウィンドウが表示されます。この例の場合、ロジックは、コンポーネント jsp に 次の 2 つの方法で埋め込まれます。

• 一般的なロジックは、<script> タグと </script> タグの間に定義されます。
• 特定のロジックは、個別の .js ファイルで用意され、jsp にリンクされます。このような設定であるので、<script> タグを必要に応じてコメント化すれば、2 つのロジック（静的／動的）を簡単に切り替えることができます。
  

Grid Overview コンポーネントの特性は次のとおりです。

• 次の場所で定義されます。
  /apps/extjstraining/components/gridoverview
• このコンポーネントのダイアログでは、ウィンドウサイズの設定やウィンドウのドッキング、ドッキング解除が可能です。

コンポーネント jsp：

• リポジトリから幅、高さ、ドッキングの各プロパティを取得します。
• グリッド概要のデータ形式の紹介としてテキストを表示します。
• GridPanel オブジェクトを定義する Javascript コードを参照します。
  <script type="text/javascript" src="/apps/extjstraining/components/gridoverview/defaultgrid.js"></script>
   defaultgrid.js により、一部の静的データが GridPanel オブジェクトの基礎として定義されます。
  
• GridPanel オブジェクトを使用する Window オブジェクトを Javascript コードで定義して、Javascript タグの間に埋め込みます。
  
• 次の場所で定義されます。
  apps/extjstraining/components/gridoverview/content.jsp

コンポーネント jsp に埋め込まれた Javascript コード：

• ページからウィンドウコンポーネントの取得を試みることにより、grid オブジェクトを定義します。
  var grid = CQ.Ext.getCmp("<%= node.getName() %>-grid");
• grid が存在しない場合、CQ.Ext.grid.GridPanel オブジェクト（gridPanel）は、getGridPanel() メソッド（後述）を呼び出すことにより定義されます。このメソッドは、defaultgrid.js で定義されます。
• grid は、事前定義済みの GridPanel に基づく CQ.Ext.Window オブジェクトであり、次を使用して表示されます。grid.show();
• grid が既に存在する場合、grid は、リポジトリから取得した幅、高さ、ドッキングの各プロパティに基づいて表示されます。

コンポーネント jsp で参照される Javascript ファイル（defaultgrid.js）には、getGridPanel() メソッドが定義されています。このメソッドは、JSP に埋め込まれたスクリプトによって呼び出され、静的データに基づいて CQ.Ext.grid.GridPanel オブジェクトを返します。ロジックを次に示します。

• myData は、静的データの配列で、5 列 x 4 行の表として書式設定されています。
• store は、myData を使用する CQ.Ext.data.Store オブジェクトです。
• store は、メモリにロードされます。
  store.load();
• gridPanel は、store を使用する CQ.Ext.grid.GridPanel オブジェクトです。
  •  列幅は常に再調整されます。
    forceFit: true
  • 選択できる行は一度に 1 つだけです。
    singleSelect:true
    

パッケージをインストールすると、Grid Overview コンポーネントの content.jsp により、静的データに基づくグリッドが表示されます。次の特徴を持つグリッドを表示するようにコンポーネントを変更することが可能です。

• 3 つの列を持つ。
• サーブレットを呼び出すことにより、リポジトリから取得したデータを基礎にする。
• 最後の列のセルを編集できる。この値は、先頭の列に表示されたパスで定義されたノードの下にある test プロパティに保持されます。

前の節で説明したように、window オブジェクトは、/apps/extjstraining/components/gridoverview/defaultgrid.js にある defaultgrid.js ファイルに定義された getGridPanel() メソッドを呼び出して、その CQ.Ext.grid.GridPanel オブジェクトを取得します。Grid Overview コンポーネントでは、getGridPanel() メソッドの実装が異なっており、このメソッドが /apps/extjstraining/components/gridoverview/referencesearch.js にある referencesearch.js ファイルに定義されています。コンポーネント jsp で参照される .js ファイルを切り替えることにより、グリッドは、リポジトリから取得したデータに基づくようになります。

コンポーネント jsp で参照される .js ファイルを切り替えます。

1. CRXDE Lite で、コンポーネントの content.jsp ファイル内にある defaultgrid.js ファイルを含む行をコメント化します。次のようになります。
   <! -- script type="text/javascript" src="/apps/extjstraining/components/gridoverview/defaultgrid.js"></script-->
2. referencesearch.js ファイルを含む行からコメントを削除します。次のようになります。
   <script type="text/javascript" src="/apps/extjstraining/components/gridoverview/referencesearch.js"></script>
3. 変更内容を保存します。
4. サンプルページを更新します。

このコンポーネントは、次のように表示されます。

コンポーネント jsp で参照されている Javascript コード（referencesearch.js）は、コンポーネント jsp から呼び出される getGridPanel() メソッドを定義しており、リポジトリから動的に取得されるデータに基づいて CQ.Ext.grid.GridPanel オブジェクトを返します。referencesearch.js のロジックでは、一部の動的データが GridPanel の基礎として定義されています。

• reader は、JSON 形式のサーブレット応答を読み取る 3 列用の CQ.Ext.data.JsonReader オブジェクトです。
• cm は、3 列用の CQ.Ext.grid.ColumnModel オブジェクトです。
  「テスト」列のセルは、editor で定義されているので、編集することが可能です。
  editor: new CQ.Ext.form.TextField({})
  
• 列は並べ替え可能です。
  cm.defaultSortable = true;
• store は、CQ.Ext.data.GroupingStore オブジェクトです。
  • データを取得するには、クエリをフィルター処理するために使用するパラメーターをいくつか指定して、「/bin/querybuilder.json」で登録されているサーブレットを呼び出します。
  • 前に定義した reader に基づきます。
  • 表は、「jcr:path」列に従って、昇順で並べ替えられます。
• gridPanel は、編集可能な CQ.Ext.grid.EditorGridPanel オブジェクトです。
  • 事前定義済みの store と列モデル cm に基づいています。
    
  • 選択できる行は一度に 1 つだけです。
    sm: new CQ.Ext.grid.RowSelectionModel({singleSelect:true})
    
  • afteredit リスナーは、「テスト」列のセルが編集されたことを確認します。
    • 「jcr:path」列で定義されたパスにあるノードのプロパティ「test」は、セルの値と共にリポジトリに設定されます。
    • POST が成功した場合は、値が store オブジェクトに追加されます。POST が失敗した場合は、値が拒否されます。