このページでは、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: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.Dialog Basics という名前で、4 つの基本ダイアログが入っています。これらのダイアログは、すぐに使用できるウィジェットで作成されており、カスタマイズした Javascript ロジックは含まれていません。ダイアログは、/apps/extjstraining/components/dialogbasics
の下に保存されています。基本的なダイアログを次に示します。
full
ノード):3 つのタブを持つウィンドウが表示されます。各タブには、2 つのテキストフィールドがあります。singlepanel
ノード):1 つのタブを持つウィンドウが表示されます。このタブには、2 つのテキストフィールドがあります。multipanel
ノード):表示内容はフルダイアログと同じですが、ダイアログの作成の仕方が異なります。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
)を 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
ダイアログが次のように表示されます。
Single Panel ダイアログには、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
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
)が 2 つ表示されます。 [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)
は、選択パネルと 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)
はタブを非表示にします
次のように表示されます。
ほとんどの場合、ダイアログには、基になるコンポーネントからのコンテンツが表示されます。ここで説明する任意ダイアログは、別のコンポーネントからコンテンツを取り込みます。
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 つのパネル(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)
)。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)
)、デフォルトでは非表示の折り畳み可能な dialogfieldset ウィジェット(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 つあります。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 が表示されているかどうかが決まる
フィールドを切り替えダイアログを使用するには:
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 つのフィールドがあります。
カスタムマルチフィールドウィジェットベースのダイアログ:
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 つのパネル(node type = cq:Widget
、xtype = [panel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#panel)
)を表示します。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://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.form.MultiField)
オブジェクトの設定オプションです。optionsProvider
」は、ejstcustom
ウィジェットの設定です。Ejst.x3.provideOptions
メソッドで設定されます。このメソッドは、次の場所にある exercises.js
で定義されます。/apps/extjstraining/clientlib/js/exercises.js
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://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/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>, 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 = [panel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#panel)
)を含む、tabpanel ウィジェットを 1 つ(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://helpx.adobe.com/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/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/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);
カスタム 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://helpx.adobe.com/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/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()
は、ダイアログの 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://helpx.adobe.com/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/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)
)と選択ウィジェット(node type = cq:Widget
、xtype = [selection](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#selection)
、type = radio
)があり、2 つのオプション(true または false)を持ちます。/apps/extjstraining/components/treeoverview/dialog
https://localhost:4502/apps/extjstraining/components/treeoverview/dialog.-1.json
グリッドパネルには、データが行と列の表形式で表示されます。このパネルは、次の内容から構成されています。
Using ExtJS Widgets パッケージに含まれている Grid Overview コンポーネントを見ると、データを表形式で表示する方法がわかります。
Grid Overview コンポーネントをサンプルページに組み込むには:
このコンポーネントは、次のように表示されます。
すぐに使用できるバージョンの場合、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/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.Window)
オブジェクトであり、次のように表示されます:grid.show();
grid
が既に存在する場合、リポジトリから取得した幅、高さ、ドッキングされたプロパティに基づいて表示されます。コンポーネント jsp で参照される Javascript ファイル(defaultgrid.js
)には、getGridPanel()
メソッドが定義されています。このメソッドは、JSP に埋め込まれたスクリプトによって呼び出され、静的データに基づいて [CQ.Ext.grid.GridPanel](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/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://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.grid.GridPanel)
オブジェクトです。
forceFit: true
singleSelect:true
パッケージをインストールすると、Grid Overview コンポーネントの content.jsp
により、静的データに基づくグリッドが表示されます。次の特徴を持つグリッドを表示するようにコンポーネントを変更することが可能です。
test
プロパティに保持されます。前の節で説明したように、ウインドウオブジェクトは、/apps/extjstraining/components/gridoverview/defaultgrid.js
の defaultgrid.js
ファイルで定義された getGridPanel()
メソッドを呼び出して、その [CQ.Ext.grid.GridPanel](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/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://helpx.adobe.com/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/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/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.grid.ColumnModel)
オブジェクトです。editor: new [CQ.Ext.form.TextField](https://helpx.adobe.com/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/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/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.grid.EditorGridPanel)
オブジェクトで、次のような特徴があります。
store
と列モデル cm
に基づいています。sm: new [CQ.Ext.grid.RowSelectionModel](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.grid.RowSelectionModel)({singleSelect:true})
afteredit
リスナーは、「テスト」列のセルが編集されたことを確認します。
test
」は、セルの値とともにリポジトリに設定されます。store
オブジェクトに追加されます。POST が失敗した場合は、値が拒否されます。