現在表示中:

ここでは、Bulk Editor ツールを開発する方法と、Bulk Editor に基づく製品リストコンポーネントを拡張する方法について説明します。

Bulk Editor のクエリパラメーター

Bulk Editor を操作するときに、特定の設定で Bulk Editor を呼び出すために URL に追加できるクエリパラメーターがいくつかあります。製品リストコンポーネントなどで、Bulk Editor を常に特定の設定で使用するには、(/libs/wcm/core/components/bulkeditor にある)bulkeditor.jsp を変更するか、特定の設定でコンポーネントを作成する必要があります。クエリパラメーターを使用した変更は、永続的ではありません。

例えば、ブラウザーの URL で以下のように入力した場合:

http://<servername>:<port_number>/etc/importers/bulkeditor.html?rootPath=/content/geometrixx/en&queryParams=geometrixx&initialSearch=true&hrp=true

「hrp=true」によってフィールドが非表示になるので、Bulk Editor は「ルートパス」フィールドなしで表示されます。パラメーター「hrp=false」を使用すると、フィールドが表示されます(デフォルト値)。

以下に Bulk Editor のクエリパラメーターリストを示します。

注意:

各パラメーターには長い名前と短縮名があります。例えば、検索ルートパスの長い名前は rootPath で、短縮名は rp です。長い名前が定義されていない場合、要求から短縮名が読み取られます。

     

 パラメーター

(正式名称/短縮名)

 タイプ
 説明
 rootPath/rp
 String   検索ルートパス
 queryParams/qp
 String  検索クエリ
 contentMode/cm
 Boolean  true の場合は、コンテンツモードが有効
 colsValue/cv
 String[]  検索対象プロパティ(チェックボックスとして表示される colsSelection で選択した値)
 extraCols/ec
 String[]  任意選択の検索対象プロパティ(コンマ区切りでテキストフィールドに表示)
 initialSearch/is
 Boolean  true の場合は、ページの読み込み時にクエリを実行
 colsSelection/cs
 String[]  検索対象プロパティの選択(チェックボックスとして表示)
 showGridOnly/sgo
 Boolean  true の場合は、グリッドのみを表示(検索パネルは非表示)
 searchPanelCollapsed/spc  Boolean  true の場合は、読み込み時に検索パネルを折りたたみ
 hideRootPath/hrp  Boolean  true の場合は、ルートパスフィールドが非表示
 hideQueryParams/hqp  Boolean  true の場合は、クエリフィールドが非表示
 hideContentMode/hcm  Boolean  true の場合は、コンテンツモードフィールドが非表示
 hideColsSelection/hcs  Boolean  true の場合は、列選択フィールドが非表示
 hideExtraCols/hec  Boolean  true の場合は、任意選択の列フィールドが非表示
 hideSearchButton  Boolean  true の場合は、検索ボタンが非表示
 hideSaveButton/hsavep  Boolean  true の場合は、保存ボタンが非表示
 hideExportButton/hexpb  Boolean  true の場合は、書き出しボタンが非表示
 hideImportButton/hib  Boolean  true の場合は、読み込みボタンが非表示
 hideResultNumber/hrn  Boolean  true の場合は、グリッドの検索結果番号テキストが非表示
 hideInsertButton/hinsertb  Boolean  true の場合は、グリッドの挿入ボタンが非表示
 hideDeleteButton/hdelb  Boolean  true の場合は、グリッドの削除ボタンが非表示
 hidePathCol/hpc  Boolean  true の場合は、グリッドの「パス」列が非表示

Bulk Editor ベースのコンポーネントの作成:製品リストコンポーネント

ここでは、Bulk Editor の使用方法の概要について説明します。また、Bulk Editor に基づく既存の Geometrixx コンポーネントである製品リストコンポーネントについても説明します。

製品リストコンポーネントを使用すると、ユーザーがデータのテーブルを表示および編集できます。例えば、製品リストコンポーネントを使用して、カタログの商品を表現できます。情報は標準の HTML テーブルに表示され、BulkEditor ウィジェットを含む編集ダイアログで任意の編集操作を実行します(この Bulk Editor は、/etc/importers/bulkeditor.html またはツールメニューからアクセスできるものとまったく同じです)。製品リストコンポーネントは、特定の制限された Bulk Editor 機能を使用するように設定されています。Bulk Editor(または Bulk Editor から派生するコンポーネント)の個々の部分を設定できます。

Bulk Editor を使用すると、行の追加、変更、削除、フィルターおよび書き出し、変更内容の保存および複数行の読み込みをおこなうことができます。各行は、製品リストコンポーネントインスタンス以下の 1 つのノードとして格納されます。個々のセルは各ノードのプロパティです。これはデザインの選択として簡単に変更できます。例えば、リポジトリの他の場所にノードを格納することもできます。クエリサーブレットの役割は、表示するノードリストを返すことです。検索パスは製品リストインスタンスとして定義されます。

製品リストコンポーネントのソースコードは、/apps/geometrixx/components/productlist にあるリポジトリで入手でき、すべての CQ5 コンポーネントと同様に、複数の要素で構成されています。

  • HTML レンダリング。このレンダリングは JSP ファイル(/apps/geometrixx/components/productlist/productlist.jsp)で実行されます。JSP は現在の製品リストコンポーネントのサブノードを読み取り、HTML テーブルの行として各サブノードを表示します。

  • 編集ダイアログ。Bulk Editor 設定を定義する場所です。使用できる列、グリッドまたは検索で実行できるアクションなど、コンポーネントのニーズに合わせてダイアログを設定します。すべての設定プロパティについて詳しくは、Bulk Editor の設定プロパティを参照してください。

以下はダイアログのサブノードの 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>

Bulk Editor の設定プロパティ

Bulk Editor の個々の部分を設定できます。以下の表は、Bulk Editor のすべての設定プロパティ一覧です。

プロパティ名 定義
rootPath 検索ルートパス
queryParams 検索クエリ
contentMode true の場合は、コンテンツモードが有効(プロパティを検索結果ノードではなく jcr:content ノードで読み取り)
colsValue 検索対象プロパティ(チェックボックスとして表示される colsSelection で選択した値)
extraCols 追加の検索対象プロパティ(コンマ区切りでテキストフィールドに表示)
initialSearch true の場合は、ページの読み込み時にクエリを実行
colsSelection 検索対象プロパティの選択(チェックボックスとして表示)
showGridOnly true の場合は、グリッドのみを表示し、検索パネルは非表示(必ず initialSearch を true に設定)
searchPanelCollapsed true の場合は、デフォルトで検索パネルを折りたたみ
hideRootPath ルートパスフィールドを非表示
hideQueryParams クエリフィールドを非表示
hideContentMode コンテンツモードフィールドを非表示
hideColsSelection 列選択フィールドを非表示
hideExtraCols 任意選択の列フィールドを非表示
hideSearchButton 検索ボタンを非表示
hideSaveButton 保存ボタンを非表示
hideExportButton 書き出しボタンを非表示
hideImportButton 読み込みボタンを非表示
hideResultNumber グリッドの検索結果番号テキストを非表示
hideInsertButton グリッドの挿入ボタンを非表示
hideDeleteButton グリッドの削除ボタンを非表示
hidePathCol グリッドの「パス」列を非表示
queryURL クエリサーブレットへのパス
exportURL 書き出しサーブレットへのパス
importURL 読み込みサーブレットへのパス
insertedResourceType 行が挿入されるとノードに追加されるリソースタイプ
saveButton 保存ボタンウィジェット設定
searchButton 検索ボタンウィジェット設定
exportButton 書き出しボタンウィジェット設定
importButton 読み込みボタンウィジェット設定
searchPanel 検索パネルウィジェット設定
grid グリッドウィジェット設定
store ストアの設定
colModel グリッドの列モデル設定
rootPathInput rootPath ウィジェット設定
queryParamsInput queryParams ウィジェット設定
contentModeInput contentMode ウィジェット設定
colsSelectionInput colsSelection ウィジェット設定
extraColsInput extraCols ウィジェット設定
colsMetadata 列のメタデータ設定。以下のプロパティを設定できます(列のすべてのセルに適用されます)。
  • cellStyle:HTML スタイル
  • cellCls:CSS クラス
  • readOnly:true の場合は、値を変更できません。
  • checkbox:true の場合は、列のすべてのセルをチェックボックス(true/false 値)として定義します。
  • forcedPosition:グリッド内での列の位置を指定する整数値(「0」~「列の数 - 1」)


列メタデータ設定

列ごとに以下を設定できます。

  • 表示プロパティ:html スタイル、CSS クラスおよび読み取り専用

  • チェックボックス

  • 強制位置

CSS および読み取り専用の列

Bulk Editor には以下の 3 つの列の設定があります。

  • セル CSS クラス名(cellCls):設定する列の各セルに追加される CSS クラス名。

  • セルスタイル(cellStyle):設定する列の各セルに追加される HTML スタイル。

  • 読み取り専用(readOnly):設定する列の各セルに読み取り専用が設定されます。

設定は以下のように定義する必要があります。

"colsMetadata": {
"Column name": {
     "cellStyle": "html style",
     "cellCls": "CSS class",
     "readOnly": true/false
}
}

次の例は、productlist コンポーネント(/apps/geometrixx/components/productlist/dialog/items/editor/colsMetadata)にあります。

            <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>

チェックボックス

checkbox 設定プロパティを true に設定すると、その列のすべてのセルがチェックボックスとしてレンダリングされます。ボックスがオンの場合は true がサーバーの Save サーブレットに送信され、オフの場合は false が送信されます。ヘッダーメニューでは、すべて選択するか、何も選択しないこともできます。選択したヘッダーがチェックボックス列のヘッダーの場合、これらのオプションが有効になります。

前の例で、selection 列には、checkbox="true" のチェックボックスのみが含まれます。

強制された位置

強制された位置メタデータ forcedPosition を使用すると、グリッド内での列の位置を指定できます。0 が先頭位置で、<列の数>-1 が最終位置です。その他の値は無視されます。

前の例で、selection 列は forcedPosition="0" の最初の列です。

クエリサーブレット

デフォルトで、Query サーブレットは /libs/wcm/core/components/bulkeditor/json.java にあります。データの取得には別のパスを設定できます。

Query サーブレットには、GQL クエリおよび返す列を受信し、結果を計算し、結果を JSON ストリームとして Bulk Editor に送信するという機能があります。

製品リストコンポーネントの場合、Query サーブレットに送信される 2 つのパラメーターは以下のとおりです。

  • query: "path:/content/geometrixx/en/customers/jcr:content/par/productlist Cube"
  • cols: "Selection,ProductId,ProductName,Color,CatalogCode,SellingSku"

また、返される JSON ストリームは以下のとおりです。

{
  "hits": [{
      "jcr:path": "/content/geometrixx/en/products/jcr:content/par/productlist/1258674828905",
      "ProductId": "21",
      "ProductName": "Cube",
      "Color": "Blue",
      "CatalogCode": "43244",
      "SellingSku": "32131"
    }
  ],
  "results": 1
}

個々のヒットは 1 つのノードとそのプロパティに対応し、グリッドの行として表示されます。

Query サーブレットを拡張して、複雑な継承モデルを返したり、特定の論理位置に格納されるノードを返したりできます。Query サーブレットを使用して、任意の複雑な計算を実行できます。グリッドには、リポジトリ内の複数のノードの集合である行が表示されます。この場合、これらの行の変更および保存は Save サーブレットで管理する必要があります。

保存サーブレット

Bulk Editor のデフォルト設定では、個々の行はノードであり、このノードのパスは行レコードに格納されます。Bulk Editor は、jcr パスを介して行とノード間のリンクを維持します。ユーザーがグリッドを編集すると、すべての変更リストが構築されます。ユーザーが「保存」をクリックすると、更新されたプロパティ値と共に POST クエリが各パスに送信されます。これは Sling の概念の基礎であり、個々のセルがノードのプロパティである場合に適切に機能します。ただし、継承の計算を実行するように Query サーブレットを実装する場合、このモデルは機能しません。Query サーブレットから返されるプロパティが、別のノードから継承される可能性があるからです。

Save サーブレットの概念は、変更は各ノードに直接投稿されるのではなく、保存ジョブを実行する 1 つのサーブレットに投稿されるということです。これによって、このサーブレットが変更を分析し、適切なノードにプロパティを保存できるようになります。

個々の更新されたプロパティは、以下の形式でサーブレットに送信されます。

  • パラメーター名:<jcr path>/<property name>
    例:/content/geometrixx/en/products/jcr:content/par/productlist/1258674859000/SellingSku
  • 値:<value>
    例:12123

 

サーブレットは、catalogCode プロパティが格納されている場所を認識している必要があります。

デフォルトの保存サーブレット実装は、/libs/wcm/bulkeditor/save/POST.jsp で入手でき、製品リストコンポーネントで使用されます。(<jcr path>/<property name> 形式の)要求からすべてのパラメーターを取得し、JCR API を使用してノードにプロパティを書き込みます。また、存在しない場合は、ノードも作成されます(グリッドが挿入された行)。

デフォルトのコードをそのまま使用しないでください。サーバーがネイティブに実行する機能(<jcr path>/<property name> での POST)を再実装したコードなので、プロパティの継承モデルを管理する保存サーブレットを作成する際の出発点として使用するのに適しています。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー