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

Javascript コードとスタイルシートの両方を組み込むには：

<ui:includeClientLib categories="<category-name1>, <category-name2>, ..."/>

場所 <category-nameX> はクライアント側ライブラリの名前です。

Javascript コードのみを組み込むには：

<ui:includeClientLib js="<category-name>"/>

フルダイアログ（full ノード）：3 つのタブを持つウィンドウが表示されます。各タブには、2 つのテキストフィールドがあります。

単一パネルダイアログ（singlepanel ノード）：1 つのタブを持つウィンドウが表示されます。このタブには、2 つのテキストフィールドがあります。

複数パネルダイアログ（multipanel ノード）：表示内容はフルダイアログと同じですが、ダイアログの作成の仕方が異なります。

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

ノード（node type = cq:Dialog、xtype = dialog）によって定義されます。

タブ（node type = cq:Panel）を 3 つを表示します。

各タブには、2 つのテキストフィールド（node type = cq:Widget、xtype = textfield）があります。

ノードによって定義されます。

/apps/extjstraining/components/dialogbasics/full

次をリクエストすることにより、JSON 形式でレンダリングされます。

http://localhost:4502/apps/extjstraining/components/dialogbasics/full.-1.json

タブ（node type = cq:Dialog、xtype = panel）を 1 つ表示します

このタブには、2 つのテキストフィールド（node type = cq:Widget、xtype = textfield）があります

ノードによって定義されます。

/apps/extjstraining/components/dialogbasics/singlepanel

次をリクエストすることにより、JSON 形式でレンダリングされます。

http://localhost:4502/apps/extjstraining/components/dialogbasics/singlepanel.-1.json

より一つの利点 完全なダイアログ 必要な設定が少ないということです。

推奨される使用例：情報を表示する、または少数のフィールドのみを持つ単純なダイアログの場合。

ノード（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

フルダイアログ ​より有利な点は、構造が簡単なことです。

複数のタブを持つダイアログでの使用を推奨します。

ノード（node type = cq:Dialog、xtype = dialog）によって定義されます。

タブ（node type = cq:Panel）が 2 つ表示されます。

最初のタブには、textfield を含む dialogfieldset ウィジェットと 3 つのオプションを含む selection ウィジェットに加え、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

ノード（node type = cq:Dialog、xtype = dialog）によって定義されます。

タブが 2 つ表示されます（node type = cq:Panel）。1 つ目は選択タブです。2 つ目のタブは、1 つ目のタブで 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

ダイアログノードには、ダイアログを表示する前にすべてのオプションタブを非表示にする「beforeshow」リスナーがあります。

beforeshow="function(dialog){Ejst.x2.manageTabs(dialog.items.get(0));}"

dialog.items.get(0) は、選択パネルと 3 つのオプションパネルを含むタブパネルを取得します。

Ejst.x2 オブジェクトは、次の場所にある exercises.js ファイルで定義します。

/apps/extjstraining/clientlib/js/exercises.js

Ejst.x2.manageTabs() メソッドで index の値を -1 にすると、すべてのオプションタブが非表示になります（i は 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') はすべてのタブを含むタブパネルを取得します（field は selection ウィジェットを表します）

field.getValue() は選択の値を取得します。例：tab2

Ejst.x2.manageTabs() は選択したタブを表示します。

各オプションタブには、「render」イベントでタブを非表示にするリスナーがあります。

render="function(tab){Ejst.x2.hideTab(tab);}"

Ejst.x2.hideTab() メソッドで：

tabPanel はすべてのタブを含むタブパネルです

index はオプションタブのインデックスです

tabPanel.hideTabStripItem(index) はタブを非表示にします

ノードによって定義されます（node type = cq:Dialog、xtype = dialog）。

1 つの tabpanel ウィジェット（node type = cq:Widget、xtype = tabpanel）と 1 つのパネル（node type = cq:Panel）を表示

パネルには、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

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 をダイアログに表示

ノードによって定義されます（node type = cq:Dialog、xtype = dialog）。

1 つの tabpanel ウィジェット（node type = cq:Widget、xtype = tabpanel）と 1 つのパネル（node type = cq:Panel）を表示します。

このパネルには、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

選択タブにはリスナーが 2 つあります。1 つは、コンテンツのロード（「loadcontent」イベント）時に dialogfieldset を表示するリスナー、もう 1 つは、選択内容の変更（「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 は、選択オブジェクトです。
• panel は、選択ウィジェットと dialogfieldset ウィジェットを含むパネルです。
• fieldSet は、dialogfieldset オブジェクトです。
• show は選択範囲の値です（true または false）
• 「 」に基づく show' dialogfieldset が表示されているかどうか

複数フィールドダイアログ（multifield ノード）は、タブが 1 つあるウィンドウを表示します。このタブには、カスタマイズされた multifield ウィジェットがあり、2 つのオプションを選択できるドロップダウンメニューとテキストフィールドという 2 つのフィールドが含まれています。このタブは、デフォルトの multifield ウィジェット（テキストフィールドのみを持つ）に基づいているので、multifield ウィジェットの機能をすべて使用できます。

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

リッチテキストエディタープラグインベースのダイアログ（rteplugin ノード）。リッチテキストエディターにカスタムボタンを追加したもので、メインテキストにカスタムテキストを挿入できます。richtext ウィジェット（RTE）と、RTE プラグインメカニズムを通じて追加されたカスタム機能から構成されています。

ノードによって定義されます（node type = cq:Dialog、xtype = dialog）。

1 つの tabpanel ウィジェット（node type = cq:Widget、xtype = tabpanel）と 1 つのパネル（node type = cq:Widget、xtype = panel）を表示します。

このパネルには、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 オブジェクトの設定オプションです。

• 「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

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 オブジェクトです。

CQ.form.CompositeField のメソッド setValue、getValue、getRawValue を上書きして、次の形式の CustomWidget の値を設定および取得します。

<allowField value>/<otherField value>, e.g.: 'Bla1/hello'。

自分自身を「ejstcustom」 xtype として登録します。

CQ.Ext.reg('ejstcustom', Ejst.CustomWidget);

ノードによって定義されます（node type = cq:Dialog、xtype = dialog）。

パネルを 1 つ（node type = cq:Widget、xtype = panel）を含む、tabpanel ウィジェットを 1 つ（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

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

次の場所にある CustomBrowseField.js Javascript ファイルで定義されます。

/apps/extjstraining/clientlib/js/CustomBrowseField.js

拡張 CQ.Ext.form.TriggerField.

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

矢印がクリックされたときに参照ウィンドウを表示するように CQ.Ext.form.TriggerField を上書きします。

を定義します。 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);

次の場所にある rteplugin ノードによって定義されます。

/apps/extjstraining/components/customwidgets/rteplugin

次を要求することにより、JSON 形式でレンダリングされます。

http://localhost:4502/apps/extjstraining/components/customwidgets/rteplugin.-1.json

rtePlugins ノードには、プラグインにちなんで命名された子ノード inserttext（ノードタイプ = nt:unstructured）があります。このノードには、RTE で使用可能なプラグイン機能を定義する features という名前のプロパティがあります。

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」と「キャンセル」）から構成されます。

次で定義されます。

/apps/extjstraining/components/treeoverview

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

リポジトリから幅、高さ、ドッキングの各プロパティを取得します。

ツリー概要のデータ形式に関するテキストを表示します。

ウィンドウのロジックをコンポーネント jsp の Javascript タグの間に埋め込みます。

次で定義されます。

apps/extjstraining/components/treeoverview/content.jsp

ページからツリーウィンドウの取得を試みることにより、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）。

パネルには、サイズフィールドウィジェット（node type = cq:Widget、xtype = sizefield）と選択ウィジェット（node type = cq:Widget、xtype = selection、type = radio）があり、2 つのオプション（true または false）を持ちます。

次の場所にあるダイアログノードによって定義されます。

/apps/extjstraining/components/treeoverview/dialog

次のことを要求することにより、JSON 形式でレンダリングされます。

http://localhost:4502/apps/extjstraining/components/treeoverview/dialog.-1.json

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

次で定義されます。

/apps/extjstraining/components/gridoverview

このダイアログボックスでは、ウィンドウのサイズを設定したり、ウィンドウをドッキング/ドッキング解除したりできます。

リポジトリから幅、高さ、ドッキングの各プロパティを取得します。

グリッド概要のデータ形式の紹介としてテキストを表示します。

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

ページからウィンドウコンポーネントの取得を試みることにより、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();

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

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

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

store は、メモリにロードされます。

store.load();

gridPanel は、CQ.Ext.grid.GridPanel を使用するstore オブジェクトです。

• 列幅は常に再調整されます。

  forceFit: true

• 選択できる行は一度に 1 つのみです。

  singleSelect:true

reader は、JSON 形式のサーブレット応答を読み取る 3 列用の CQ.Ext.data.JsonReader オブジェクトです。

cm は、3 列用の CQ.Ext.grid.ColumnModel オブジェクトです。

「テスト」列のセルは、エディターで定義されているので編集することが可能です。

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 が失敗した場合は、値が拒否されます。