バルクエディターベースのコンポーネントの作成:製品リストコンポーネント
ここでは、バルクエディターの使用方法の概要について説明します。また、バルクエディターに基づく既存の Geometrixx コンポーネントである製品リストコンポーネントについても説明します。
製品リストコンポーネントを使用すると、ユーザーがデータのテーブルを表示および編集できます。例えば、製品リストコンポーネントを使用して、カタログの製品を表すことができます。情報は標準的な HTML テーブルで表示され、編集はバルクエディターウィジェットを含む 編集 ダイアログで実行されます。(このバルクエディターは、/etc/importers/bulkeditor.html またはツールメニューからアクセスできるものと同じです)。製品リストコンポーネントは、特定の制限されたバルクエディター機能に対して設定されています。バルクエディターのすべての部分(またはバルクエディターから派生したコンポーネント)を設定できます。
バルクエディターを使用すると、行の追加、変更、削除、フィルターおよび書き出し、変更内容の保存および複数行の読み込みを実行できます。各行は、製品リストコンポーネントインスタンス下の 1 つのノードとして格納されます。すべてのセルは、各ノードのプロパティです。これはデザインの選択として簡単に変更できます。例えば、リポジトリの他の場所にノードを格納できます。クエリサーブレットの役割は、表示するノードのリストを返すことです。検索パスは製品リストインスタンスとして定義されます。
製品リストコンポーネントのソースコードは、/apps/geometrixx/components/productlist にあるリポジトリで入手でき、すべての Adobe Experience Manager(AEM)コンポーネントと同様に、複数のパーツで構成されています。
- HTML レンダリングでのレンダリングは JSP ファイル(/apps/geometrixx/components/productlist/productlist.jsp)で実行されます。JSP は現在の製品リストコンポーネントのサブノードを読み取り、HTML テーブルの行として各サブノードを表示します。
- 編集ダイアログは、バルクエディター設定を定義する場所です。コンポーネントのニーズに合わせてダイアログを設定します。使用可能な列およびグリッドまたは検索で実行できるアクション。すべての設定プロパティについて詳しくは、バルクエディターの設定プロパティを参照してください。
ダイアログのサブノードの XML 表現を次に示します。
<editor
jcr:primaryType="cq:Widget"
colsSelection="[ProductId,ProductName,Color,CatalogCode,SellingSku]"
colsValue="[ProductId,ProductName,Color,CatalogCode,SellingSku]"
contentMode="false"
exportURL="/etc/importers/bulkeditor/export.tsv"
extraCols="Selection"
hideColsSelection="false"
hideContentMode="true"
hideDeleteButton="false"
hideExportButton="false"
hideExtraCols="true"
hideImportButton="false"
hideInsertButton="false"
hideMoveButtons="false"
hidePathCol="true"
hideRootPath="true"
hideSaveButton="false"
hideSearchButton="false"
importURL="/etc/importers/bulkeditor/import"
initialSearch="true"
insertedResourceType="geometrixx/components/productlist/sku"
queryParams=""
queryURL="/etc/importers/bulkeditor/query.json"
saveURL="/etc/importers/bulkeditor/save"
xtype="bulkeditor">
<saveButton
jcr:primaryType="nt:unstructured"
text="Save modifications"/>
<searchButton
jcr:primaryType="nt:unstructured"
text="Apply filter"/>
<queryParamsInput
jcr:primaryType="nt:unstructured"
fieldDescription="Enter here your filters"
fieldLabel="Filters"/>
<searchPanel
jcr:primaryType="nt:unstructured"
height="200">
<defaults
jcr:primaryType="nt:unstructured"
labelWidth="150"/>
</searchPanel>
<grid
jcr:primaryType="nt:unstructured"
height="275"/>
<store jcr:primaryType="nt:unstructured">
<sortInfo
jcr:primaryType="nt:unstructured"
direction="ASC"
field="CatalogCode"/>
</store>
<colModel
jcr:primaryType="nt:unstructured"
width="150"/>
<colsMetadata jcr:primaryType="nt:unstructured">
<Selection
jcr:primaryType="nt:unstructured"
checkbox="true"
forcedPosition="0"
headerText=""/>
<ProductId
jcr:primaryType="nt:unstructured"
cellCls="productlist-cell-productid"
headerText="Product Id"/>
<ProductName
jcr:primaryType="nt:unstructured"
cellStyle="background-color: #FFCC99;"
headerText="Product Name"/>
<CatalogCode
jcr:primaryType="nt:unstructured"
cellStyle="background-color: #EDEDED;"
headerText="Catalog Code"/>
<Color jcr:primaryType="nt:unstructured">
<editor
jcr:primaryType="nt:unstructured"
store="[Blue,Red,Yellow]"
triggerAction="all"
typeAhead="true"
xtype="combo"/>
</Color>
<SellingSku
jcr:primaryType="nt:unstructured"
headerText="Sku Id"/>
</colsMetadata>
</editor>
バルクエディターの設定プロパティ
バルクエディターのすべての部分が設定可能です。次の表に、バルクエディターのすべての設定プロパティを示します。