このページでは、AEM 6.4 で廃止されたクラシック UI でのウィジェットの使用方法について説明します。
Adobeでは、最新の タッチ操作対応 UI 基準 Coral UI および Granite UI.
Adobe Experience Manager(AEM) の Web ベースのインターフェイスでは、AJAXやその他の最新のブラウザーテクノロジーを使用して、作成者が Web ページ上で直接コンテンツの WYSIWYG 編集や書式設定をおこなうことができます。
AEMは ExtJS ウィジェットライブラリ。最も重要なブラウザーすべてで機能し、デスクトップグレードの UI エクスペリエンスを作成できる、高度に磨かれたユーザーインターフェイス要素を提供します。
これらのウィジェットはAEM内に含まれ、AEM自体で使用される以外に、AEMを使用して作成された任意の Web サイトで使用できます。
AEMで使用可能なすべてのウィジェットの完全なリファレンスについては、 widget API ドキュメント または 既存の xtype のリスト. また、ExtJS フレームワークを所有している Sencha のサイトには、ExtJS フレームワークの使用方法の例が多数掲載されています。
このページでは、ウィジェットの使用と拡張の方法に関するインサイトを提供します。 まず、 ページにクライアント側コードを含める. 次に、基本的な使用方法や拡張機能を説明するために作成されたサンプルコンポーネントについて説明します。 これらのコンポーネントは、 ExtJS ウィジェットの使用 パッケージ パッケージ共有.
このパッケージには、次の例が含まれます。
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> タグを使用します。
Sometimes a client library should only be available in author mode and should be excluded in publish mode. これは、次のように実行できます。
if (WCMMode.fromRequest(request) != WCMMode.DISABLED) {
%><ui:includeClientLib categories="cq.collab.blog"/><%
}
このページのチュートリアルに従うには、パッケージをインストールします ExtJS ウィジェットの使用 ローカル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
そして、 ExtJS ウィジェットの使用.このページの例は、Geometrixx サンプルコンテンツに基づいています。これは現在、AEM には付属しておらず、We.Retail に置き換えられています。詳しくは、 We.Retail 参照実装 を参照してください。
ダイアログは通常、コンテンツの編集に使用されますが、情報の表示も可能です。 完全なダイアログを簡単に表示するには、JSON 形式で表現にアクセスします。 これをおこなうには、ブラウザーで次の設定をおこないます。
https://localhost:4502/<path-to-dialog>.-1.json
の最初のコンポーネント ExtJS ウィジェットの使用 サイドキックのグループは、 1. ダイアログの基本 には、標準ウィジェットで作成され、カスタマイズされた JavaScript ロジックを持たない、4 つの基本的なダイアログが含まれています。 ダイアログは、/apps/extjstraining/components/dialogbasics
の下に保存されています。基本的なダイアログを次に示します。
full
ノード ):3 つのタブを持つウィンドウが表示され、各タブには 2 つのテキストフィールドがあります。singlepanel
ノード ):2 つのテキストフィールドを持つ 1 つのタブを持つウィンドウが表示されます。multipanel
ノード):表示内容はフルダイアログと同じですが、ダイアログの作成の仕方が異なります。design
ノード ):2 つのタブを持つウィンドウが表示されます。 最初のタブには、テキストフィールド、ドロップダウンメニューおよび折りたたみ可能なテキスト領域があります。 2 番目のタブには、4 つのテキストフィールドを含むフィールドセットと、2 つのテキストフィールドを含む折りたたみ可能なフィールドセットがあります。次を含める: 1. ダイアログの基本 コンポーネントを次のサンプルページに示します。
このコンポーネントは、次のように表示されます。
この 完全 ダイアログには、3 つのタブを持つウィンドウが表示され、各タブには 2 つのテキストフィールドがあります。 これは、 ダイアログの基本 コンポーネント。 特性は次のとおりです。
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
ダイアログが次のように表示されます。
この 単一パネル ダイアログには、2 つのテキストフィールドを持つ 1 つのタブを持つウィンドウが表示されます。 特性は次のとおりです。
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
[ シングルパネル ] ダイアログを使用するには:
/apps/extjstraining/components/dialogbasics/dialog
/apps/extjstraining/components/dialogbasics/singlepanel
/apps/extjstraining/components/dialogbasics
/apps/extjstraining/components/dialogbasics/Copy of singlepanel
を選択して、名前を dialog
に変更します。この マルチパネル ダイアログは 完全 ダイアログは異なりますが、別の方法で構築されます。 特性は次のとおりです。
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
複数パネルダイアログを使用するには:
この リッチ 2 つのタブを持つウィンドウが表示されます。 最初のタブには、テキストフィールド、ドロップダウンメニューおよび折りたたみ可能なテキスト領域があります。 2 番目のタブには、4 つのテキストフィールドを含むフィールドセットと、2 つのテキストフィールドを含む折りたたみ可能なフィールドセットがあります。 特性は次のとおりです。
cq:Dialog
、xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
)によって定義されます。cq:Panel
) をクリックします。 [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)
および [selection](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#selection)
3 つのオプションを持つウィジェットと折りたたみ可能 [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)
4 つのウィジェット [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
ウィジェットと折りたたみ可能 dialogfieldset
2 人で [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
ウィジェット。/apps/extjstraining/components/dialogbasics/rich
https://localhost:4502/apps/extjstraining/components/dialogbasics/rich.-1.json
リッチダイアログを使用するには:
の 2 番目の要素 ExtJS ウィジェットの使用 サイドキックのグループは、 2. 動的ダイアログ には、標準のウィジェットで作成された 3 つの動的ダイアログと カスタマイズされた JavaScript ロジックを使用. ダイアログは、/apps/extjstraining/components/dynamicdialogs
の下に保存されます。動的ダイアログは次のようになります。
switchtabs
ノード):2 つのタブを持つウィンドウが表示されます。最初のタブには、次の 3 つのオプションを含むラジオが選択されます。オプションを選択すると、そのオプションに関連するタブが表示されます。 2 番目のタブには、2 つのテキストフィールドがあります。arbitrary
ノード)。タブが 1 つあるウィンドウが表示されます。このタブには、フィールドが 2 つあります。一つは、アセットをドロップまたはアップロードするためのフィールド、もう一つは、コンポーネントを含むページに関する情報とアセットに関する情報(アセットが参照されている場合)を表示するフィールドです。togglefield
ノード):タブが 1 つあるウィンドウが表示されます。このタブには、チェックボックスが 1 つあります。このチェックボックスを選択すると、テキストフィールドを 2 つ含むフィールドセットが表示されます。2.動的ダイアログコンポーネントをサンプルページに組み込むには:
このコンポーネントは、次のように表示されます。
この タブを切り替え 2 つのタブを持つウィンドウが表示されます。 最初のタブには、次の 3 つのオプションを含むラジオが選択されます。オプションを選択すると、そのオプションに関連するタブが表示されます。 2 番目のタブには、2 つのテキストフィールドがあります。
このダイアログの主な特徴を次に示します。
cq:Dialog
、xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
)によって定義されます。cq:Panel
):1 つの「選択」タブ、2 つ目のタブは、最初のタブでの選択(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)
は tabpanel
このパネルには、選択パネルと 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')
は tabpanel
すべてのタブ ( field
(選択ウィジェットを表します)
field.getValue()
選択の値を取得します(例: tab2)。
Ejst.x2.manageTabs()
は選択したタブを表示します。
各オプションタブには、「render
」イベントでタブを非表示にするリスナーがあります。
render="function(tab){Ejst.x2.hideTab(tab);}"
の Ejst.x2.hideTab()
メソッド
tabPanel
が tabpanel
すべてのタブを含む
index
はオプションタブのインデックスです
tabPanel.hideTabStripItem(index)
はタブを非表示にします
次のように表示されます。
多くの場合、ダイアログには基になるコンポーネントのコンテンツが表示されます。 ここで説明する任意ダイアログは、別のコンポーネントからコンテンツを取り込みます。
この 任意 ダイアログには、1 つのタブを持つウィンドウが表示されます。 「 」タブには、次の 2 つのフィールドがあります。1 つはアセットをドロップまたはアップロードするためのもので、含まれるページとアセット(参照されている場合)に関する情報を表示するものです。
このダイアログの主な特徴を次に示します。
cq:Dialog
、xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
)によって定義されます。tabpanel
widget ( ノードタイプ= 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 をダイアログに表示
任意 ダイアログを使用するには:
このタブには、チェックボックスが 1 つあります。このチェックボックスを選択すると、テキストフィールドを 2 つ含むフィールドセットが表示されます。
このダイアログの主な特徴を次に示します。
cq:Dialog
、xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
)によって定義されます。cq:Panel
)で 1 つの tabpanel
ウィジェット(ノードタイプ= cq:Widget
、xtype = [tabpanel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textpanel)
)を表示します。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 ウィジェット ( ノードタイプ= cq:Widget
, xtype = [dialogfieldset](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialogfieldset)
) がデフォルトで非表示になり、2 つの textfield ウィジェット ( ノードタイプ= 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 つのリスナーがあります。コンテンツの読み込み時に dialogfieldset を表示するもの (" loadcontent
"イベント ) と、選択が変更されたときに dialogfieldset を表示するもの (" selectionchanged
"イベント ):
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. カスタムウィジェット の ExtJS ウィジェットの使用 パッケージ。 このコンポーネントをサンプルページに含めるには:
この カスタムマルチフィールド ウィジェットベースのダイアログには、1 つのタブを持つウィンドウが表示されます。 このタブにはカスタマイズされた multifield ウィジェットがあり、1 つのフィールドを持つ標準ウィジェットとは異なり、次の 2 つのフィールドを持ちます。2 つのオプションと 1 つのテキストフィールドを含むドロップダウンメニュー。
この カスタムマルチフィールド ウィジェットベースのダイアログ:
cq:Dialog
、xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
)。tabpanel
widget ( ノードタイプ= 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
ウィジェット(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
widget (xtype = ejstcustom
):
Ejst.CustomWidget
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
(ComboBox) および otherField
(テキストフィールド)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);
Treebrowse
ウィジェットカスタム Treebrowse
ウィジェットベースのダイアログには、カスタムパスの参照ウィジェットを含む 1 つのタブを持つウィンドウが表示されます。When you select the arrow, a window opens up in which you can browse a hierarchy and select an item. 項目を選択すると、そのパスがパスフィールドに追加され、ダイアログを閉じても保持され続けます。
カスタム treebrowse
ダイアログ:
cq:Dialog
、xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
)。tabpanel
widget ( ノードタイプ= 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
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);
次の手順で Custom Treebrowse ウィジェットベースのダイアログ:
リッチテキストエディター (RTE) プラグイン ベースのダイアログは、リッチテキストエディターベースのダイアログで、角括弧内にカスタムテキストを挿入するためのカスタムボタンがあります。カスタムテキストをサーバー側ロジックで解析し、例えば、特定のパスで定義されたテキストを追加することができます(この例では、サーバー側ロジックは実装されていません)。
RTE プラグインベースのダイアログ:
/apps/extjstraining/components/customwidgets/rteplugin
https://localhost:4502/apps/extjstraining/components/customwidgets/rteplugin.-1.json
rtePlugins
ノードには、プラグインにちなんで命名された子ノード inserttext
(ノードタイプ = nt:unstructured
)があります。これには、という名前のプロパティがあります。 features
は、RTE で使用可能なプラグイン機能を定義します。RTE プラグイン:
Ejst.InsertTextPlugin
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)
) と選択ウィジェット (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 コンポーネントをサンプルページに組み込むには:
このコンポーネントは、次のように表示されます。
標準バージョンの場合、グリッドの概要 コンポーネントには、静的データが表形式で含まれるウィンドウが表示されます。この例では、ロジックは次の 2 つの方法でコンポーネント jsp に埋め込まれます。
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://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.Window)
オブジェクトであり、次のように表示されます:grid.show();
grid
が存在する場合は、リポジトリから取得した幅、高さ、ドッキングの各プロパティに基づいて表示されます。JavaScript ファイル ( defaultgrid.js
) をコンポーネント jsp で参照する場合は、 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 列 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 ( referencesearch.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)
オブジェクトに格納されます。 referencesearch.js
のロジックでは、一部の動的データが GridPanel の基礎として定義されています。
reader
は [CQ.Ext.data.JsonReader](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.data.JsonReader)
3 つの列の json 形式でサーブレット応答を読み取るオブジェクト。cm
は [CQ.Ext.grid.ColumnModel](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.grid.ColumnModel)
オブジェクトを 3 列に設定します。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 が失敗した場合は、値が拒否されます。