このページでは、AEM 6.4 で廃止されたクラシック UI でのウィジェットの使用方法について説明します。
アドビでは、Coral UI と Granite UI をベースとした、最新のタッチ操作対応 UI の使用を推奨しています。
Adobe Experience Manager(AEM)の web ベースインターフェイスでは、AJAX やその他の最新のブラウザー技術を使用しています。これらの技術により、作成者は、web ページ上でコンテンツの WYSIWYG 編集や書式設定を行うことができます。
AEM は ExtJS ウィジェットライブラリを使用しています。このライブラリは、高度に洗練されたユーザーインターフェイス要素を提供するものであり、すべての重要なブラウザーで機能し、デスクトップグレードの UI エクスペリエンスを作成できます。
これらのウィジェットは AEM に組み込まれており、AEM 自体でも使用されていますが、AEM で作成した任意の web サイトでも使用できます。
AEM で使用可能なすべてのウィジェットについて詳しくは、ウィジェット API ドキュメントまたは既存の xtype のリストを参照してください。また、ExtJS フレームワークを所有している Sencha のサイトには、ExtJS フレームワークの使用方法の例が多数掲載されています。
このページでは、ウィジェットの使用方法と拡張方法に関するインサイトを提供します。まず、ページにクライアントサイドコードを含める方法を説明します。次に、いくつかのコンポーネントの例を使用して、基本的な使用と拡張について説明します。これらのコンポーネントは、Package Share の Using ExtJS Widgets というパッケージにあります。
このパッケージには、次の例が含まれています。
Adobe Experience Manager のクラシック UI は、ExtJS 3.4.0 をベースに構築されています。
クライアントサイドの JavaScript とスタイルシートのコードをクライアントライブラリに配置します。
クライアントライブラリを作成するには:
/apps/<project>
の下にノードを作成し、次のプロパティを設定します。
Note: <category-name> is the name of the custom library (for example, "cq.extjstraining") and is used to include the library on the page.
clientlib
の下に css
フォルダーと js
フォルダー(nt:folder)を作成します。
clientlib
の下に css.txt
ファイルと js.txt
ファイル(nt:file)を作成します。これらの .txt ファイルには、ライブラリに組み込むファイルを記述します。
js.txt
を編集します。このファイルは、先頭に「#base=js
」を指定し、その後に CQ クライアントライブラリサービスによって集約されるファイルのリストを指定する必要があります。以下に例を示します。
#base=js
components.js
exercises.js
CustomWidget.js
CustomBrowseField.js
InsertTextPlugin.js
css.txt
を編集します。このファイルは、先頭に「#base=css
」を指定し、その後に CQ クライアントライブラリサービスによって集約されるファイルのリストを指定する必要があります。以下に例を示します。
#base=css
components.css
js
フォルダーの下に、ライブラリに属する JavaScript ファイルを配置します。
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> タグを使用します。
クライアントライブラリは、オーサーモードでしか使用できず、パブリッシュモードでは除外する必要が生じる場合があります。これを行うには、次のように設定します。
if (WCMMode.fromRequest(request) != WCMMode.DISABLED) {
%><ui:includeClientLib categories="cq.collab.blog"/><%
}
このページのチュートリアルに従うには、Using ExtJS Widgets というパッケージをローカル AEM インスタンスにインストールして、コンポーネントを組み込むサンプルページを作成します。これを行うには、次の手順を実行します。
/apps
の下に extjstraining
という名前のプロジェクトが作成されます。/apps/geometrixx/components/page/headlibs.jsp
ファイルを開き、cq.extjstraining
カテゴリを既存の <ui:includeClientLib>
タグに次のように追加します。%><ui:includeClientLib categories="apps.geometrixx-main, cq.extjstraining"/><%
/content/geometrixx/en/products
の下にある Geometrixx ブランチに新しいページを作成し、Using ExtJS Widgets という名前を付けます。このページの例は、Geometrixx サンプルコンテンツに基づいています。これは現在、AEM には付属しておらず、We.Retail に置き換えられています。Geometrixx のダウンロード方法とインストール方法については、We.Retail 参照の実装を参照してください。
通常、ダイアログはコンテンツの編集に使用されますが、情報の表示も可能です。完全なダイアログを簡単に表示するには、JSON 形式の表現にアクセスします。これを行うには、ブラウザーで次のように指定します。
https://localhost:4502/<path-to-dialog>.-1.json
サイドキックにある Using ExtJS Widgets グループの最初のコンポーネントは、1. ダイアログの基本という名前で、4 つの基本ダイアログが入っています。これらのダイアログは、すぐに使用できるウィジェットで作成されており、カスタマイズした Javascript ロジックは含まれていません。ダイアログは、/apps/extjstraining/components/dialogbasics
の下に保存されています。基本的なダイアログを次に示します。
full
ノード):3 つのタブを持つウィンドウが表示されます。各タブには、2 つのテキストフィールドがあります。singlepanel
ノード):1 つのタブを持つウィンドウが表示されます。このタブには、2 つのテキストフィールドがあります。multipanel
ノード):表示内容はフルダイアログと同じですが、ダイアログの作成の仕方が異なります。design
ノード):2 つのタブを持つウィンドウが表示されます。最初のタブには、テキストフィールド、ドロップダウンメニューおよび折りたたみ可能なテキスト領域があります。2 番目のタブには、4 つのテキストフィールドを含むフィールドセットと、2 つのテキストフィールドを含む折りたたみ可能なフィールドセットがあります。次の手順に従って、1. ダイアログの基本コンポーネントをサンプルページに組み込みます。
このコンポーネントは、次のように表示されます。
Full ダイアログには、3 つのタブを持つウィンドウが表示されます。各タブには、2 つのテキストフィールドがあります。これは、ダイアログの基本コンポーネントのデフォルトダイアログです。特性は次のとおりです。
cq:Dialog
、xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
)によって定義されます。cq:Panel
)を 3 つを表示します。cq:Widget
、xtype = [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
)。/apps/extjstraining/components/dialogbasics/full
https://localhost:4502/apps/extjstraining/components/dialogbasics/full.-1.json
ダイアログが次のように表示されます。
単一パネルダイアログには、1 つのタブを持つウィンドウが表示されます。このタブには、2 つのテキストフィールドがあります。特性は次のとおりです。
cq:Dialog
、xtype = [panel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#panel)
)を 1 つ表示します。cq:Widget
、xtype = [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
)があります。/apps/extjstraining/components/dialogbasics/singlepanel
https://localhost:4502/apps/extjstraining/components/dialogbasics/singlepanel.-1.json
単一パネルダイアログを使用するには:
/apps/extjstraining/components/dialogbasics/dialog
/apps/extjstraining/components/dialogbasics/singlepanel
/apps/extjstraining/components/dialogbasics
/apps/extjstraining/components/dialogbasics/Copy of singlepanel
を選択して、名前を dialog
に変更します。複数パネルl ダイアログは、フルダイアログと同じ表示内容ですが、ダイアログの作成の仕方が異なります。特性は次のとおりです。
cq:Dialog
、xtype = [tabpanel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#tabpanel)
)によって定義されます。cq:Panel
)を 3 つを表示します。cq:Widget
、xtype = [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
)。/apps/extjstraining/components/dialogbasics/multipanel
https://localhost:4502/apps/extjstraining/components/dialogbasics/multipanel.-1.json
複数パネルダイアログを使用するには:
リッチダイアログには、2 つのタブを持つウィンドウが表示されます。最初のタブには、テキストフィールド、ドロップダウンメニューおよび折りたたみ可能なテキスト領域があります。2 番目のタブには、4 つのテキストフィールドを含むフィールドセットと、2 つのテキストフィールドを含む折りたたみ可能なフィールドセットがあります。特性は次のとおりです。
cq:Dialog
、xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
)によって定義されます。cq:Panel
)が表示されます。 [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
を含む [dialogfieldset](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialogfieldset)
ウィジェットと 3 つのオプションを含む [selection](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#selection)
ウィジェットに加え、 [textarea](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textarea)
ウィジェットを含む折りたたみ可能な [dialogfieldset](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialogfieldset)
があります。 [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
ウィジェットを含む [dialogfieldset](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialogfieldset)
ウィジェットと、2 つの [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
ウィジェットを含む折りたたみ可能な dialogfieldset
があります。/apps/extjstraining/components/dialogbasics/rich
https://localhost:4502/apps/extjstraining/components/dialogbasics/rich.-1.json
リッチダイアログを使用するには:
サイドキックにある Using ExtJS Widgets グループの 2 番目のコンポーネントは、2. Dynamic Dialogs という名前で、3 つの動的ダイアログが含まれています。これらのダイアログは、すぐに使用できるウィジェットと、カスタマイズされた Javascript ロジックから作成されています。ダイアログは、/apps/extjstraining/components/dynamicdialogs
の下に保存されます。動的ダイアログは次のようになります。
switchtabs
ノード):2 つのタブを持つウィンドウが表示されます。最初のタブでは、ラジオボタンにより、3 つのオプションのいずれかを選択できます。オプションを選択すると、選択したオプションに関連付けられているタブが表示されます。2 番目のタブには、2 つのテキストフィールドがあります。arbitrary
ノード)。タブが 1 つあるウィンドウが表示されます。このタブには、フィールドが 2 つあります。一つは、アセットをドロップまたはアップロードするためのフィールド、もう一つは、コンポーネントを含むページに関する情報とアセットに関する情報(アセットが参照されている場合)を表示するフィールドです。togglefield
ノード):タブが 1 つあるウィンドウが表示されます。このタブには、チェックボックスが 1 つあります。このチェックボックスを選択すると、テキストフィールドを 2 つ含むフィールドセットが表示されます。2. 動的ダイアログコンポーネントをサンプルページに組み込むには:
このコンポーネントは、次のように表示されます。
Switch Tabs ダイアログには、2 つのタブを持つウィンドウが表示されます。最初のタブでは、ラジオボタンにより、3 つのオプションのいずれかを選択できます。オプションを選択すると、選択したオプションに関連付けられているタブが表示されます。2 番目のタブには、2 つのテキストフィールドがあります。
このダイアログの主な特徴を次に示します。
cq:Dialog
、xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
)によって定義されます。cq:Panel
)。1 つ目は選択タブです。2 つ目のタブは、1 つ目のタブで 3 つのオプションのどれを選択したかによって変わります。cq:Panel
)。それぞれのオプションタブには、2 つのテキストフィールドがあります(node type = cq:Widget
、xtype = [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
)。オプションタブは、同時に 1 つしか表示されません。switchtabs
ノードによって定義されます。/apps/extjstraining/components/dynamicdialogs/switchtabs
https://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)
は、selection パネルと 3 つのオプションパネルを含んだ tabpanel
を取得します。Ejst.x2
オブジェクトは、次の場所にある exercises.js
ファイルで定義します。/apps/extjstraining/clientlib/js/exercises.js
Ejst.x2.manageTabs()
メソッドで index
の値を -1 にすると、すべてのオプションタブが非表示になります(i は 1 から 3 です)。loadcontent
」イベント)時に選択済みのタブを表示するリスナーと、selection の変更(「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()
は、selection の値(例:tab2)を取得します。Ejst.x2.manageTabs()
は選択したタブを表示します。render
」イベントでタブを非表示にするリスナーがあります。render="function(tab){Ejst.x2.hideTab(tab);}"
Ejst.x2.hideTab()
メソッドの場合、tabPanel
は、すべてのタブを含んだ tabpanel
です。index
はオプションタブのインデックスですtabPanel.hideTabStripItem(index)
はタブを非表示にします次のように表示されます。
ほとんどの場合、ダイアログには、基になるコンポーネントからのコンテンツが表示されます。ここで説明する任意ダイアログは、別のコンポーネントからコンテンツを取り込みます。
Arbitrary ダイアログには、1 つのタブを持つウィンドウが表示されます。このタブには、2 つのフィールドがあります。アセットをドロップまたはアップロードするためのフィールドと、コンポーネントを含んだページに関する情報とアセットに関する情報(アセットが参照されている場合)を表示するフィールドです。
このダイアログの主な特徴を次に示します。
cq:Dialog
、xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
)によって定義されます。tabpanel
ウィジェット(node type = cq:Widget
、xtype = [tabpanel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#tabpanel)
)と 1 つのパネル(node type = cq:Panel
)を表示します。cq:Widget
、xtype = [smartfile](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#smartfile)
)と ownerdraw ウィジェット(node type = cq:Widget
、xtype = [ownerdraw](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#ownerdraw)
)があります。arbitrary
ノードによって定義されます。/apps/extjstraining/components/dynamicdialogs/arbitrary
https://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 をダイアログに表示任意 ダイアログを使用するには:
Toggle Fields ダイアログには、1 つのタブを持つウィンドウが表示されます。このタブには、チェックボックスが 1 つあります。このチェックボックスを選択すると、テキストフィールドを 2 つ含むフィールドセットが表示されます。
このダイアログの主な特徴を次に示します。
cq:Dialog
、xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
)によって定義されます。tabpanel
ウィジェット(node type = cq:Widget
、xtype = [tabpanel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textpanel)
)と 1 つのパネル(node type = cq:Panel
)を表示します。cq:Widget
、xtype = [selection](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#selection)
、type = [checkbox](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#checkbox)
)と、2 つの textfield ウィジェット(node type = cq:Widget
、xtype = [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
)を持つ折り畳み可能な dialogfieldset ウィジェット(node type = cq:Widget
、xtype = [dialogfieldset](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialogfieldset)
)があります。後者はデフォルトで非表示になっています。togglefields
ノードによって定義されます。/apps/extjstraining/components/dynamicdialogs/togglefields
https://localhost:4502/apps/extjstraining/components/dynamicdialogs/togglefields.-1.json
ロジックは、次のようにイベントリスナーと JavaScript コードによって実装されています。
loadcontent
」イベント)時に dialogfieldset を表示するリスナーと、selection の変更(「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 ダイアログを使用するには、次の手順を実行します。
AEM 付属のすぐに使用できるウィジェットは、ほとんどのユースケースに対応しています。ただし、プロジェクト固有の要件に対応するために、カスタムウィジェットの作成が必要になることもあります。カスタムウィジェットは、既存のウィジェットを拡張して作成できます。こうしたカスタマイズを行う際の手助けとなるように、Using ExtJS Widgets
パッケージには、3 つの異なるカスタムウィジェットを使用する 3 つのダイアログが含まれています。
multifield
ノード)は、タブが 1 つあるウィンドウを表示します。このタブには、カスタマイズされた multifield ウィジェットがあり、2 つのオプションを選択できるドロップダウンメニューとテキストフィールドという 2 つのフィールドが含まれています。このタブは、デフォルトの multifield
ウィジェット(テキストフィールドのみを持つ)に基づいているので、multifield
ウィジェットの機能をすべて使用できます。treebrowse
ノード)。このダイアログに表示されるウィンドウには、パス参照ウィジェットを含む 1 つのタブがあります。矢印をクリックすると、ウィンドウが開き、階層を参照しながら項目を選択できます。項目を選択すると、そのパスがパスフィールドに追加され、ダイアログを閉じても保持され続けます。rteplugin
ノード)。リッチテキストエディターにカスタムボタンを追加したもので、メインテキストにカスタムテキストを挿入できます。richtext
ウィジェット(RTE)と、RTE プラグインメカニズムを通じて追加されたカスタム機能から構成されています。カスタムウィジェットとプラグインは、3. Custom Widgets(Using ExtJS Widgets パッケージに属する)という名前のコンポーネントに含まれています。このコンポーネントをサンプルページに組み込むには:
Custom Multifield ウィジェットベースのダイアログには、1 つのタブを持つウィンドウが表示されます。このタブには、カスタマイズされた multifield ウィジェットがあります。標準の multifield ウィジェットには 1 つのフィールドがありますが、このウィジェットには、2 つのオプションを選択できるドロップダウンメニューとテキストフィールドという 2 つのフィールドがあります。
Custom Multifield ウィジェットベースのダイアログ:
cq:Dialog
、xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
)。cq:Widget
、xtype = [panel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#panel)
)を含んだ 1 つの tabpanel
ウィジェット(node type = cq:Widget
、xtype = [tabpanel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#tabpanel)
)を表示します。multifield
ウィジェット(node type = cq:Widget
、xtype = [multifield](/docs/experience-manager-65/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
https://localhost:4502/apps/extjstraining/components/customwidgets/multifield.-1.json
カスタム multifield
ウィジェット(xtype = ejstcustom
):
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 オブジェクトです。setValue
、getValue
、getRawValue
を上書きして、次の形式の CustomWidget の値を設定および取得します。<allowField value>/<otherField value>, for example: 'Bla1/hello'
。ejstcustom
」 xtype として登録します。CQ.Ext.reg('ejstcustom', Ejst.CustomWidget);
Custom Multifield ウィジェットベースのダイアログは、次のように表示されます。
Treebrowse
ウィジェットカスタム Treebrowse
ウィジェットベースのダイアログには、カスタムパスの参照ウィジェットを含む 1 つのタブを持つウィンドウが表示されます。矢印を選択すると、ウィンドウが開き、階層を参照して項目を選択できます。項目を選択すると、そのパスがパスフィールドに追加され、ダイアログを閉じても保持され続けます。
カスタム treebrowse
ダイアログ:
cq:Dialog
、xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
)。cq:Widget
、xtype = [panel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#panel)
)を含む 1 つの tabpanel
ウィジェット(node type = cq:Widget
、xtype = [tabpanel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#tabpanel)
)を表示します。cq:Widget
、xtype = ejstbrowse
)があります。treebrowse
ノードによって定義されます。/apps/extjstraining/components/customwidgets/treebrowse
https://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](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
を上書きします。/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)
)を定義します。
show
イベントが発生したときに、参照フィールドからウィンドウに渡されます。ejstbrowse
」xtype として登録します。CQ.Ext.reg('ejstbrowse', Ejst.CustomBrowseField);
カスタム Treebrowse ウィジェットベースのダイアログを使用するには:
リッチテキストエディター(RTE)プラグインベースのダイアログは、リッチテキストエディターベースのダイアログで、カスタムテキストを角括弧内に挿入するカスタムボタンが備わっています。カスタムテキストは、特定のパスで定義されたテキストを追加する場合など、サーバー側のロジック(この例では実装されていません)で解析できます。
RTE プラグインベースのダイアログ:
/apps/extjstraining/components/customwidgets/rteplugin
https://localhost:4502/apps/extjstraining/components/customwidgets/rteplugin.-1.json
rtePlugins
ノードには、プラグインにちなんで命名された子ノード inserttext
(ノードタイプ = nt:unstructured
)があります。このノードには、RTE で使用可能なプラグイン機能を定義する features
という名前のプロパティがあります。RTE プラグイン:
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」と「キャンセル」)から構成されます。リッチテキストエディター(RTE)プラグインベースのダイアログを使用するには:
リッチテキストエディター(RTE)プラグインベースのダイアログは次のように表示されます。
この例は、クライアント側のロジックの実装方法のみを示しています。プレースホルダー([text])は、サーバーサイド(コンポーネント JSP など)でも明示的に解析する必要があります。
すぐに使用できる [CQ.Ext.tree.TreePanel](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.tree.TreePanel)
オブジェクトは、ツリー構造のデータをツリー構造 UI として表示できます。Using ExtJS Widgets パッケージに含まれている Tree Overview コンポーネントを見ると、TreePanel
オブジェクトを使用して特定のパスの下に JCR ツリーを表示する方法がわかります。このウィンドウ自体は、ドッキングすることも、ドッキング解除することもできます。この例の場合、ウィンドウのロジックは、コンポーネント jsp の <script> タグと </script> タグの間に埋め込まれています。
Tree Overview コンポーネントをサンプルページに組み込むには:
このコンポーネントは、次のように表示されます。
Tree Overview コンポーネント:
次で定義されます。
/apps/extjstraining/components/treeoverview
このダイアログでは、ウィンドウのサイズを設定したり、ウィンドウをドッキングまたはドッキング解除したりできます(詳細は以下を参照)。
コンポーネント jsp:
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](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.Window)
)は、事前定義済みの treePanel
に基づいて設定され、次のように表示されます。tree.show();
コンポーネントダイアログ:
cq:Dialog
、xtype = [panel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#panel)
)。cq:Widget
、xtype = [sizefield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#sizefield)
)と、2 つのオプション(true または false)がある選択ウィジェット(node type = cq:Widget
、xtype = [selection](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#selection)
、type = radio
)があります。/apps/extjstraining/components/treeoverview/dialog
https://localhost:4502/apps/extjstraining/components/treeoverview/dialog.-1.json
グリッドパネルは、データを行と列の表形式で表します。これは、次の内容で構成されます。
Using ExtJS Widgets パッケージに含まれている Grid Overview コンポーネントを見ると、データを表形式で表示する方法がわかります。
Grid Overview コンポーネントをサンプルページに組み込むには:
このコンポーネントは、次のように表示されます。
標準バージョンでは、Grid Overview コンポーネントは、静的データが含まれるウィンドウを表形式で表示します。この例では、ロジックは次の 2 つの方法でコンポーネント jsp に埋め込まれます。
Grid Overview コンポーネント:
/apps/extjstraining/components/gridoverview
コンポーネント jsp:
<script type="text/javascript" src="/apps/extjstraining/components/gridoverview/defaultgrid.js"></script>
defaultgrid.js
では、一部の静的データを GridPanel オブジェクトのベースとして定義します。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](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.Window)
オブジェクトであり、次のように表示されます:grid.show();
grid
が存在する場合、リポジトリから取得した幅、高さ、ドッキングされたプロパティに基づいて表示されます。コンポーネント jsp で参照される JavaScript ファイル(defaultgrid.js
)には、getGridPanel()
メソッドが定義されています。このメソッドは、JSP に埋め込まれたスクリプトによって呼び出され、静的データに基づいて [CQ.Ext.grid.GridPanel](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.grid.GridPanel)
オブジェクトを返します。ロジックを次に示します。
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
パッケージをインストールすると、Grid Overview コンポーネントの content.jsp
により、静的データに基づくグリッドが表示されます。次の特徴を持つグリッドを表示するようにコンポーネントを変更できます。
test
プロパティに保持されます。前の節で説明したように、ウインドウオブジェクトは、/apps/extjstraining/components/gridoverview/defaultgrid.js
の defaultgrid.js
ファイルで定義された getGridPanel()
メソッドを呼び出して、その [CQ.Ext.grid.GridPanel](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.grid.GridPanel)
オブジェクトを取得します。Grid Overview コンポーネントでは、getGridPanel()
メソッドを別の方法で実装することができます。これは、/apps/extjstraining/components/gridoverview/referencesearch.js
にある referencesearch.js
ファイルで定義されます。コンポーネント jsp で参照される .js ファイルを切り替えることにより、グリッドは、リポジトリから取得したデータに基づいています。
コンポーネント jsp で参照される .js ファイルを切り替えるには、次の手順を行います。
content.jsp
ファイル内にある defaultgrid.js
ファイルを含む行を、次のようにコメント化します。<!-- script type="text/javascript" src="/apps/extjstraining/components/gridoverview/defaultgrid.js"></script-->
referencesearch.js
ファイルを含む行のコメント化を、次のように解除します。<script type="text/javascript" src="/apps/extjstraining/components/gridoverview/referencesearch.js"></script>
このコンポーネントは、次のように表示されます。
コンポーネント jsp で参照されている JavaScript コード(referencesearch.js
)は、コンポーネント jsp から呼び出される getGridPanel()
メソッドを定義しており、リポジトリから動的に取得されるデータに基づいて [CQ.Ext.grid.GridPanel](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.grid.GridPanel)
オブジェクトを返します。referencesearch.js
のロジックでは、一部の動的データが GridPanel の基礎として定義されています。
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
に基づきます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
リスナーは、「テスト」列のセルが編集されたことを確認します。
test
」は、セルの値とともにリポジトリに設定されます。store
オブジェクトに追加されます。POST が失敗した場合は、値が拒否されます。