このページでは、AEM 6.4で非推奨となった従来のUIでのウィジェットの使用について説明します。
アドビでは、Coral UI および Granite UI をベースとした最新のタッチ操作対応 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パッケージで提供されています。
このパッケージには、次の例が含まれています。
Adobe Experience Manager のクラシック UI は、ExtJS 3.4.0 をベースに構築されています。
クライアント側のJavaScriptとスタイルシートコードは、クライアントライブラリに配置する必要があります。
クライアントライブラリを作成するには:
/apps/<project>
の下に次のプロパティを持つノードを作成します。
Note: <category-name> is the name of the custom library (e.g. "cq.extjstraining") and is used to include the library on the page.
clientlib
の下に、css
フォルダーとjs
フォルダー(nt:folder)を作成します。
clientlib
の下に、css.txt
ファイルとjs.txt
ファイル(nt:files)を作成します。 これらの .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ブランチに新しいページを作成し、ExtJSウィジェットの使用を呼び出します。このページの例は、Geometrixx サンプルコンテンツに基づいています。これは現在、AEM には付属しておらず、We.Retail に置き換えられています。Geometrixxのダウンロードおよびインストール方法については、ドキュメントWeb.Retail Reference Implementationを参照してください。
通常、ダイアログは、コンテンツを編集するために使用されますが、情報の表示のみをおこなうこともできます。ダイアログを完全に表示する簡単な方法は、その JSON 形式の表現にアクセスすることです。これをおこなうには、ブラウザーで次のように指定します。
https://localhost:4502/<path-to-dialog>.-1.json
サイドキックにある Using ExtJS Widgets グループの最初のコンポーネントは、1.Dialog Basics という名前で、4 つの基本ダイアログが入っています。これらのダイアログは、すぐに使用できるウィジェットで作成されており、カスタマイズした Javascript ロジックは含まれていません。ダイアログは/apps/extjstraining/components/dialogbasics
の下に保存されます。 基本ダイアログを次に示します。
full
full ノード):3 つのタブを持つウィンドウが表示されます。各タブには、2 つのテキストフィールドがあります。singlepanel
ノード):1 つのタブを持つウィンドウが表示されます。このタブには、2 つのテキストフィールドがあります。multipanel
ノード):表示内容は Full ダイアログと同じですが、ダイアログの作成の仕方が異なります。design
design ノード):2 つのタブを持つウィンドウが表示されます。最初のタブには、テキストフィールド、ドロップダウンメニューおよび折り畳み可能なテキスト領域があります。2 番目のタブには、4 つのテキストフィールドを含むフィールドセットと、2 つのテキストフィールドを含む折り畳み可能なフィールドセットがあります。次の手順に従って、1.Dialog Basics コンポーネントをサンプルページに組み込みます。
このコンポーネントは、次のように表示されます。
Full ダイアログには、3 つのタブを持つウィンドウが表示されます。各タブには、2 つのテキストフィールドがあります。これは、Dialog Basics コンポーネントのデフォルトダイアログです。特性は次のとおりです。
cq:Dialog
, xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
.cq:Panel
)。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
このダイアログは、次のように表示されます。
Single Panel ダイアログには、1 つのタブを持つウィンドウが表示されます。このタブには、2 つのテキストフィールドがあります。特性は次のとおりです。
cq:Dialog
、xtype = [panel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#panel)
)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
Single Panel ダイアログを使用するには:
/apps/extjstraining/components/dialogbasics/dialog
/apps/extjstraining/components/dialogbasics/singlepanel
/apps/extjstraining/components/dialogbasics
/apps/extjstraining/components/dialogbasics/Copy of singlepanel
名前をdialog
に変更します。Multi Panel ダイアログは、Full ダイアログと同じ表示内容ですが、ダイアログの作成の仕方が異なります。特性は次のとおりです。
cq:Dialog
、xtype = [tabpanel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#tabpanel)
)。cq:Panel
)。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
マルチパネルダイアログを使用するには:
Rich ダイアログには、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)
と3つのオプションを持つ [selection](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#selection)
ウィジェットを持つ [dialogfieldset](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialogfieldset)
ウィジェットと、 [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
Rich ダイアログを使用するには:
サイドキックにある Using ExtJS Widgets グループの 2 番目のコンポーネントは、2.Dynamic Dialogs という名前で、3 つの動的ダイアログが含まれています。これらのダイアログは、すぐに使用できるウィジェットと、カスタマイズされた Javascript ロジックから作成されています。ダイアログは/apps/extjstraining/components/dynamicdialogs
の下に保存されます。 動的なダイアログボックスは次のとおりです。
switchtabs
ノード):2 つのタブを持つウィンドウが表示されます。最初のタブでは、ラジオボタンにより、3 つのオプションのいずれかを選択できます。オプションを選択すると、選択したオプションに関連付けられているタブが表示されます。2 番目のタブには、2 つのテキストフィールドがあります。arbitrary
arbitrary ノード):1 つのタブを持つウィンドウが表示されます。このタブには、2 つのフィールドがあります。一つは、アセットをドロップまたはアップロードするためのフィールド、もう一つは、コンポーネントを含むページに関する情報とアセットに関する情報(アセットが参照されている場合)を表示するフィールドです。togglefield
ノード):1つのタブを持つウィンドウが表示されます。 このタブには、1 つのチェックボックスがあります。このチェックボックスを選択すると、2 つのテキストフィールドを含むフィールドセットが表示されます。2. Dynamic Dialogs コンポーネントをサンプルページに組み込むには:
このコンポーネントは、次のように表示されます。
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つのテキストフィールド(ノードタイプ= 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)
選択パネルと3つのオプションパネルを含むタブパネルを取得します。
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')
すべてのタブを含むタブパネルを取得します(選択ウィジェット field
を表します)。
field.getValue()
選択範囲の値を取得します。例:tab2
Ejst.x2.manageTabs()
選択したタブを表示します。
各「オプション」タブには、「render
」イベントでタブを非表示にするリスナーがあります。
render="function(tab){Ejst.x2.hideTab(tab);}"
Ejst.x2.hideTab()
メソッドで次の操作を行います。
tabPanel
は、すべてのタブを含むタブパネルです
index
は、オプションのタブのインデックスです
tabPanel.hideTabStripItem(index)
タブを非表示
次のように表示されます。
ほとんどの場合、ダイアログには、基になるコンポーネントからのコンテンツが表示されます。ここで説明する Arbitrary ダイアログは、別のコンポーネントからコンテンツを取り込みます。
Arbitrary ダイアログには、1 つのタブを持つウィンドウが表示されます。このタブには、2 つのフィールドがあります。一つは、アセットをドロップまたはアップロードするためのフィールド、もう一つは、コンポーネントを含むページに関する情報とアセットに関する情報(アセットが参照されている場合)を表示するフィールドです。
このダイアログの主な特徴を次に示します。
cq:Dialog
、xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
)。cq:Widget
、xtype = [tabpanel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#tabpanel)
)を1つのパネル(ノードタイプ= cq:Panel
)と共に表示しますcq:Widget
、xtype = [smartfile](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#smartfile)
)と所有者描画ウィジェット(ノードタイプ= 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 コードによって実装されています。
所有者描画ウィジェットには「loadcontent
」リスナーがあり、コンテンツが読み込まれたときに、コンポーネントを含むページと、スマートファイルウィジェットが参照するアセットに関する情報を表示します。
loadcontent="function(field,rec,path){Ejst.x2.showInfo(field,rec,path);}"
field
はownerdrawオブジェクトで設定されます。
path
がコンポーネントのコンテンツパスで設定される場合(例:/content/geometrixx/jp/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 ダイアログを使用するには:
Toggle Fields ダイアログには、1 つのタブを持つウィンドウが表示されます。このタブには、1 つのチェックボックスがあります。このチェックボックスを選択すると、2 つのテキストフィールドを含むフィールドセットが表示されます。
このダイアログの主な特徴を次に示します。
cq:Dialog
、xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
)。cq:Widget
、xtype = [tabpanel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textpanel)
)を1つのパネル(ノードタイプ= 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)
)と、折りたたみ可能なダイアログフィールドセットウィジェット(node type = cq:Widget
、xtype = [dialogfieldset](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialogfieldset)
)があり、デフォルトでは2つのtextfieldウィジェット(node type = cq:Widget
、xtype = [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
)があります。togglefields
ノードは次の場所で定義します。/apps/extjstraining/components/dynamicdialogs/togglefields
https://localhost:4502/apps/extjstraining/components/dynamicdialogs/togglefields.-1.json
ロジックは、次のようにイベントリスナーと Javascript コードによって実装されています。
選択タブには2つのリスナーがあります。コンテンツの読み込み時にダイアログフィールドセットを表示する(「loadcontent
」イベント)と、選択範囲の変更時にダイアログフィールドセットを表示する(「selectionchanged
」イベント)の1つです。
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
は、選択範囲とダイアログフィールドセットウィジェットを含むパネルです
fieldSet
は、dialogfieldsetオブジェクトです。
show
には、ダイアログフィールドセットが表示されるかどうかを示す「 show
」に基づく選択範囲の値(trueまたはfalse)を指定します
フィールドの切り替えダイアログを使用するには:
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 = [tabpanel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#tabpanel)
)を表示します。この中にパネル(ノードタイプ= cq:Widget
、xtype = [panel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#panel)
)が含まれます。multifield
ウィジェット(ノードタイプ= 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://helpx.adobe.com/jp/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.form.MultiField)
オブジェクトのconfigオプションです。
' optionsProvider
'はejstcustom
ウィジェットの設定です。 exercises.js
で定義されるEjst.x3.provideOptions
メソッドを使用して設定します。
/apps/extjstraining/clientlib/js/exercises.js
2つのオプションを返します。
multifield
ノードは次の場所で定義します。/apps/extjstraining/components/customwidgets/multifield
https://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](https://helpx.adobe.com/jp/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.form.CompositeField)
ウィジェットを拡張します。hiddenField
(Textfield)、allowField
(ComboBox)、otherField
(Textfield)CQ.Ext.Component#initComponent
を上書きして3つのフィールドを追加:
allowField
は、 CQ.form. Selectionオブジェクトのタイプが「select」です。optionsProviderは、ダイアログで定義されたCustomWidgetのoptionsProvider設定でインスタンス化されたSelectionオブジェクトの設定ですotherField
は、CQ.Ext.form.TextField オブジェクトです。setValue
、getValue
、getRawValue
を上書きして、次の形式でCustomWidgetの値を設定および取得します。<allowField value>/<otherField value>, e.g.: 'Bla1/hello'
.ejstcustom
’ xtype:CQ.Ext.reg('ejstcustom', Ejst.CustomWidget);
Custom Multifield ウィジェットベースのダイアログは、次のように表示されます。
カスタム Treebrowse ウィジェットベースのダイアログには、1 つのタブを持つウィンドウが表示されます。このタブには、カスタムパス参照ウィジェットが含まれています。このウィジェットで矢印をクリックすると、ウィンドウが開き、階層を参照しながら項目を選択できます。項目を選択すると、そのパスがパスフィールドに追加され、ダイアログを閉じても保持され続けます。
カスタム treebrowse ダイアログ:
cq:Dialog
、xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
)。cq:Widget
、xtype = [tabpanel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#tabpanel)
)を表示します。この中にパネル(ノードタイプ= cq:Widget
、xtype = [panel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#panel)
)が含まれます。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://helpx.adobe.com/jp/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.form.TriggerField)
を拡張します。browseWindow
という名前の参照ウィンドウを定義します。 [CQ.Ext.form.TriggerField](https://helpx.adobe.com/jp/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.form.TriggerField)#onTriggerClick
を上書きして、矢印をクリックしたときに参照ウィンドウを表示します。/bin/wcm/siteadmin/tree.json
に登録されたサーブレットを呼び出して、データを取得します。apps/extjstraining
」です。window
オブジェクト( [CQ.Ext.Window](https://helpx.adobe.com/jp/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.Window)
)を定義します。
show
イベントが発生したときに、参照フィールドからウィンドウに渡されます。ejstbrowse
’ xtype:CQ.Ext.reg('ejstbrowse', Ejst.CustomBrowseField);
カスタムツリーブラウズウィジェットベースのダイアログを使用するには:
リッチテキストエディター(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://helpx.adobe.com/jp/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.form.rte.plugins.Plugin)
オブジェクトを拡張します。 [CQ.form.rte.plugins.Plugin](https://helpx.adobe.com/jp/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.form.rte.plugins.Plugin)
オブジェクトを定義するもので、プラグインの実装時に上書きされます。
getFeatures()
プラグインが提供するすべての機能の配列を返します。initializeUI()
[RTE]ツールバーに新しいボタンを追加します。notifyPluginConfig()
ボタンにカーソルを合わせたときに、タイトルとテキストを表示します。execute()
が呼び出され、プラグインのアクションが実行されます。含めるテキストの定義に使用するウィンドウが表示されます。insertText()
対応するダイアログオブジェクトを使用してテキストを挿入し Ejst.InsertTextPlugin.Dialog
ます(後で参照)。executeInsertText()
が呼び出されます。このメソッドは、OKbuttonがクリックされたときにトリガされ apply()
ます。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://helpx.adobe.com/jp/experience-manager/6-5/sites/developing/using/reference-materials/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://helpx.adobe.com/jp/experience-manager/6-5/sites/developing/using/reference-materials/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)
)と選択ウィジェット(ノードタイプ= 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
グリッドパネルには、データが行と列の表形式で表示されます。このパネルは、次の内容から構成されています。
ExtJSウィジェットの使用パッケージに含まれるグリッドの概要コンポーネントでは、データを表形式で表示する方法を示します。
グリッドの概要コンポーネントをサンプルページに含めるには:
このコンポーネントは、次のように表示されます。
すぐに使用できるバージョンの場合、Grid Overview コンポーネントには、静的データが表形式で含まれているウィンドウが表示されます。この例の場合、ロジックは、コンポーネント jsp に 次の 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](https://helpx.adobe.com/jp/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.Window)
オブジェクトで、次のように表示されます。 grid.show();
grid
が既に存在する場合、grid は、リポジトリから取得した幅、高さ、ドッキングの各プロパティに基づいて表示されます。コンポーネントjspで参照されるjavascriptファイル(defaultgrid.js
)は、JSPに埋め込まれたスクリプトによって呼び出され、静的データに基づいて [CQ.Ext.grid.GridPanel](https://helpx.adobe.com/jp/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.grid.GridPanel)
オブジェクトを返すgetGridPanel()
メソッドを定義します。 ロジックを次に示します。
myData
は、静的データの配列で、5 列 x 4 行の表として書式設定されています。store
は、使用する CQ.Ext.data.Store
オブジェクトで myData
す。store
はメモリに読み込まれます。store.load();
gridPanel
は、次の処理を行う [CQ.Ext.grid.GridPanel](https://helpx.adobe.com/jp/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.grid.GridPanel)
オブジェクトで store
す。
列幅は常に再調整されます。
forceFit: true
選択できる行は一度に 1 つのみです。
singleSelect:true
パッケージをインストールすると、グリッドの概要コンポーネントのcontent.jsp
に、静的データに基づくグリッドが表示されます。 次の特徴を持つグリッドを表示するようにコンポーネントを変更することが可能です。
test
プロパティに保持されます。前の節で説明したように、windowオブジェクトは、/apps/extjstraining/components/gridoverview/defaultgrid.js
にあるdefaultgrid.js
ファイルで定義されているgetGridPanel()
メソッドを呼び出して、 [CQ.Ext.grid.GridPanel](https://helpx.adobe.com/jp/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.grid.GridPanel)
オブジェクトを取得します。 「グリッドの概要」コンポーネントは、/apps/extjstraining/components/gridoverview/referencesearch.js
のreferencesearch.js
ファイルで定義されるgetGridPanel()
メソッドとは異なる実装を提供します。 コンポーネント 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(referencesearch.js
)で参照されているjavascriptコードは、コンポーネントjspから呼び出されるgetGridPanel()
メソッドを定義し、リポジトリから動的に取得されるデータに基づいて [CQ.Ext.grid.GridPanel](https://helpx.adobe.com/jp/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.grid.GridPanel)
オブジェクトを返します。 referencesearch.js
のロジックでは、一部の動的データが GridPanel の基礎として定義されています。
reader
は、JSON 形式のサーブレット応答を読み取る 3 列用の [CQ.Ext.data.JsonReader](https://helpx.adobe.com/jp/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.data.JsonReader)
オブジェクトです。cm
は3列の [CQ.Ext.grid.ColumnModel](https://helpx.adobe.com/jp/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.grid.ColumnModel)
オブジェクトです。「テスト」列のセルは、editor で定義されているので、編集することが可能です。editor: new [CQ.Ext.form.TextField](https://helpx.adobe.com/jp/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.form.TextField)({})
cm.defaultSortable = true;
store
は [CQ.Ext.data.GroupingStore](https://helpx.adobe.com/jp/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.data.GroupingStore)
オブジェクトです。
/bin/querybuilder.json
"に登録されたサーブレットを呼び出し、クエリのフィルタリングに使用するいくつかのパラメータを指定して、データを取得しますreader
に基づきます。gridPanel
は編集可能な [CQ.Ext.grid.EditorGridPanel](https://helpx.adobe.com/jp/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.grid.EditorGridPanel)
オブジェクトです。
事前定義済みの store
と列モデル cm
に基づいています。
選択できる行は一度に 1 つのみです。
sm: new [CQ.Ext.grid.RowSelectionModel](https://helpx.adobe.com/jp/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.grid.RowSelectionModel)({singleSelect:true})
afteredit
リスナーは、「テスト」列のセルが編集されたことを確認します。
test
'が、セルの値と共にリポジトリに設定されていますstore
オブジェクトに追加されます。POST が失敗した場合は、値が拒否されます。