ウィジェットの使用および拡張（クラシック UI） using-and-extending-widgets-classic-ui

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

JavaScript コードのみを組み込むには：
<ui:includeClientLib js="<category-name>"/>

ノードで定義されます（node type = cq:Dialog、xtype = [dialog](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#dialog)）。

パネル（node type = cq:Widget、xtype = [panel](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#panel)）を含んだ 1 つの tabpanel ウィジェット（node type = cq:Widget、xtype = [tabpanel](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#tabpanel)）を表示します。

このパネルには、multifield ウィジェット（node type = cq:Widget、xtype = [multifield](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#multifield)）があります。

multifield ウィジェットには、カスタム xtype 「ejstcustom」に基づく fieldconfig（node type = nt:unstructured、xtype = ejstcustom、optionsProvider = Ejst.x3.provideOptions）があります。

• 「fieldconfig」は、 [CQ.form.MultiField](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.form.MultiField) オブジェクトの設定オプションです。
• 「optionsProvider」は、ejstcustom ウィジェットの設定です。Ejst.x3.provideOptions メソッドで設定されます。このメソッドは、次の場所にある exercises.js で定義されます。
  /apps/extjstraining/clientlib/js/exercises.js
  2 つのオプションを返します。

次の場所にある multifield ノードによって定義されます。
/apps/extjstraining/components/customwidgets/multifield

次をリクエストすることにより、JSON 形式でレンダリングされます。
https://localhost:4502/apps/extjstraining/components/customwidgets/multifield.-1.json

Ejst.CustomWidget という名前の JavaScript オブジェクトです。

次の場所にある CustomWidget.js JavaScript ファイルで定義されます。
/apps/extjstraining/clientlib/js/CustomWidget.js

[CQ.form.CompositeField](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=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 オブジェクトです。

CQ.form.CompositeField のメソッド setValue、getValue、getRawValue を上書きして、次の形式の CustomWidget の値を設定および取得します。
<allowField value>/<otherField value>, for example: 'Bla1/hello'。

自分自身を「ejstcustom」 xtype として登録します。
CQ.Ext.reg('ejstcustom', Ejst.CustomWidget);

Ejst.CustomWidget という名前の JavaScript オブジェクトです

次の場所にある CustomBrowseField.js JavaScript ファイルに定義されています。
/apps/extjstraining/clientlib/js/CustomBrowseField.js

[CQ.Ext.form.TriggerField](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.form.TriggerField) を拡張します。

browseWindow という名前の参照ウィンドウを定義します。

矢印がクリックされたときに参照ウィンドウを表示するように [CQ.Ext.form.TriggerField](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.form.TriggerField)#onTriggerClick を上書きします。

CQ.Ext.tree.TreePanel オブジェクトを定義します。

• このオブジェクトのデータを取得するには、/bin/wcm/siteadmin/tree.json に登録されたサーブレットを呼び出します。
• このオブジェクトのルートは、「apps/extjstraining」です。

window オブジェクト（ [CQ.Ext.Window](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.Window)）を定義します。

• 事前定義済みのパネルに基づいています。
• 選択されたパスの値を設定し、パネルを非表示にする「OK」ボタンを組み込みます。

ウィンドウは、「パス」フィールドの下に固定されます。

選択されたパスは、show イベントが発生したときに、参照フィールドからウィンドウに渡されます。

それ自体を「ejstbrowse」xtype として登録します。
CQ.Ext.reg('ejstbrowse', Ejst.CustomBrowseField);

Ejst.InsertTextPlugin という名前の JavaScript オブジェクトです

次の場所にある InsertTextPlugin.js JavaScript ファイルに定義されています。
/apps/extjstraining/clientlib/js/InsertTextPlugin.js

[CQ.form.rte.plugins.Plugin](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.form.rte.plugins.Plugin) オブジェクトを拡張します。

次のメソッドは、 [CQ.form.rte.plugins.Plugin](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=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」と「キャンセル」）から構成されます。

次で定義されます。
/apps/extjstraining/components/treeoverview

このダイアログでは、ウィンドウのサイズを設定したり、ウィンドウをドッキングまたはドッキング解除したりできます（詳細は以下を参照）。

ページからツリーウィンドウの取得を試みることにより、tree オブジェクトを定義します。

ツリーを表示しているウィンドウが存在しない場合は、treePanel（CQ.Ext.tree.TreePanel）が作成されます。

• treePanel には、ウィンドウの作成に使用されるデータが含まれています。
• データは、次で登録されたサーブレットを呼び出すことにより、取得されます。
  /bin/wcm/siteadmin/tree.json

beforeload リスナーにより、選択されたノードがロードされます。

root オブジェクトは、パス apps/extjstraining をツリーのルートとして設定します。

tree（ [CQ.Ext.Window](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.Window)）は、事前定義済みの treePanel に基づいて設定され、次のように表示されます。
tree.show();

ウィンドウが存在する場合、ウィンドウは、リポジトリから取得した幅、高さ、ドッキングの各プロパティに基づいて表示されます。

myData は、静的データの配列で、5 列 x 4 行の表として書式設定されています。

store は、myData を使用する CQ.Ext.data.Store オブジェクトです。

store は、メモリにロードされます。
store.load();

gridPanel は、store を使用する [CQ.Ext.grid.GridPanel](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.grid.GridPanel) オブジェクトです。

• 列幅は常に再調整されます。
  forceFit: true
• 選択できる行は一度に 1 つのみです。
  singleSelect:true

reader は、JSON 形式のサーブレット応答を読み取る 3 列用の [CQ.Ext.data.JsonReader](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.data.JsonReader) オブジェクトです。

cm は、3 列用の [CQ.Ext.grid.ColumnModel](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.grid.ColumnModel) オブジェクトです。
「テスト」列のセルは、エディターで定義されているので編集することが可能です。
editor: new [CQ.Ext.form.TextField](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.form.TextField)({})

列は並べ替え可能です。
cm.defaultSortable = true;

store は [CQ.Ext.data.GroupingStore](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.data.GroupingStore) オブジェクトで、次のような特徴があります。

• クエリをフィルター処理するためのパラメーターをいくつか指定し、「/bin/querybuilder.json」に登録されているサーブレットを呼び出すことで、データを取得します
• 前に定義した reader に基づきます
• 表は、「jcr:path」列に従って、昇順で並べ替えられます。

gridPanel は編集可能な [CQ.Ext.grid.EditorGridPanel](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.grid.EditorGridPanel) オブジェクトで、次のような特徴があります。

• 事前定義済みの store と列モデル cm に基づいています。

• 選択できる行は一度に 1 つのみです。
  sm: new [CQ.Ext.grid.RowSelectionModel](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.grid.RowSelectionModel)({singleSelect:true})

• afteredit リスナーは、「テスト」列のセルが編集されたことを確認します。

  • 「jcr:path」列で定義されたパスにあるノードのプロパティ「test」は、セルの値とともにリポジトリに設定されます。
  • POST が成功した場合は、値が store オブジェクトに追加されます。POST が失敗した場合は、値が拒否されます。