Entwickeln des Bulk Editors

In diesem Abschnitt wird beschrieben, wie Sie das Bulk Editor-Tool entwickeln und die Produktlisten-Komponente erweitern, die auf dem Bulk Editor basiert.

Bulk Editor-Abfrageparameter

Beim Arbeiten mit dem Bulk Editor können Sie mehrere Abfrageparameter zur URL hinzufügen, um den Bulk Editor mit einer bestimmten Konfiguration aufzurufen. Wenn Sie möchten, dass der Bulk Editor immer mit einer bestimmten Konfiguration verwendet wird, z. B. wie in der Produktlisten-Komponente, müssen Sie die Datei bulkeditor.jsp (in /libs/wcm/core/components/bulkeditor) ändern oder eine Komponente mit der spezifischen Konfiguration erstellen. Änderungen, die mithilfe von Abfrageparametern vorgenommen werden, sind nicht dauerhaft.

Wenn Sie beispielsweise Folgendes in die URL Ihres Browsers eingeben:

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

Der Bulk Editor wird ohne angezeigt. Stammverzeichnis als hrp=true das Feld ausblendet. Mit dem Parameter hrp=false wird das Feld angezeigt (der Standardwert).

Im Folgenden finden Sie eine Liste der Abfrageparameter des Bulk Editors:

Entwickeln einer auf dem Bulk Editor basierenden Komponente: die Produktlisten-Komponente

In diesem Abschnitt erhalten Sie einen Überblick darüber, wie der Bulk Editor verwendet werden kann, und eine Beschreibung der vorhandenen Geometrixx-Komponente, die auf dem Bulk Editor basiert: die Produktlisten-Komponente.

Mit der Komponente Produktliste können Benutzer eine Datentabelle anzeigen und bearbeiten. Beispielsweise können Sie die Produktlisten-Komponente verwenden, um Produkte in einem Katalog darzustellen. Die Informationen werden in einer standardmäßigen HTML-Tabelle dargestellt und alle Bearbeitungen werden in der Bearbeiten Dialogfeld, das ein BulkEditor-Widget enthält. (Dieser Bulk Editor ist mit dem Bulk Editor identisch, auf den Sie über /etc/importers/bulkeditor.html oder das Menü Tools zugreifen können.) Die Produktlisten-Komponente wurde für bestimmte, begrenzte Funktionen des Masseneditors konfiguriert. Jeder Teil des Bulk Editors (oder die vom Bulk Editor abgeleiteten Komponenten) kann konfiguriert werden.

Mit dem Bulk Editor können Sie die Zeilen hinzufügen, ändern, löschen, filtern und exportieren, Änderungen speichern und eine Reihe von Zeilen importieren. Jede Zeile wird als Knoten unter der Produktlisten-Komponenteninstanz selbst gespeichert. Jede Zelle ist eine Eigenschaft jedes Knotens. Dies ist eine Entwurfsentscheidung und kann einfach geändert werden, z. B. können Sie Knoten an einer anderen Stelle im Repository speichern. Die Rolle des Abfrage-Servlets besteht darin, die Liste der anzuzeigenden Knoten zurückzugeben. Der Suchpfad wird als Produktlisten-Instanz definiert.

Der Quell-Code der Produktlisten-Komponente ist im Repository unter /apps/geometrixx/components/productlist zu finden und setzt sich aus mehreren Teilen zusammen, beispielsweise allen AEM-Komponenten:

• HTML-Rendering: Das Rendern erfolgt in einer JSP-Datei (/apps/geometrixx/components/productlist/productlist.jsp?lang=de). Die JSP liest die Unterknoten der aktuellen Produktlisten-Komponente und zeigt jede davon als Zeile einer HTML-Tabelle an.
• Dialogfeld "Bearbeiten", in dem Sie die Konfiguration des Bulk Editors definieren. Konfigurieren Sie das Dialogfeld entsprechend den Anforderungen der Komponente: verfügbare Spalten und mögliche Aktionen, die auf das Raster oder die Suche durchgeführt werden. Siehe Konfigurationseigenschaften des Bulk Editors für Informationen zu allen Konfigurationseigenschaften.

Im Folgenden finden Sie eine XML-Darstellung der Unterknoten des Dialogfelds:

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

Konfigurationseigenschaften des Bulk Editors

Jeder Teil des Bulk Editors kann konfiguriert werden. In der folgenden Tabelle sind alle Konfigurationseigenschaften für den Bulk Editor aufgeführt.

Konfiguration der Spalten-Metadaten

Sie können für jede Spalte konfigurieren:

• Anzeige-Eigenschaften: HTML-Stil, CSS-Klasse und Schreibschutz

• ein Kontrollkästchen

• eine erzwungene Position

CSS- und schreibgeschützte Spalten

Der Bulk Editor verfügt über drei Spaltenkonfigurationen:

• Cell CSS class name (cellCls): einen CSS-Klassennamen, der zu jeder Zelle der konfigurierten Spalte hinzugefügt wird.
• Zellstil (cellStyle): einen HTML-Stil, der zu jeder Zelle der konfigurierten Spalte hinzugefügt wird.
• Schreibgeschützt (readOnly): schreibgeschützt ist für jede Zelle der konfigurierten Spalte festgelegt.

Die Konfiguration muss wie folgt definiert sein:

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

Das folgende Beispiel finden Sie in der Produktlisten-Komponente (/apps/geometrixx/components/productlist/dialog/items/editor/colsMetadata?lang=de):

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

Kontrollkästchen

Wenn die Konfigurationseigenschaft des Kontrollkästchens auf "true"festgelegt ist, werden alle Zellen der Spalte als Kontrollkästchen gerendert. Ein aktiviertes Kontrollkästchen sendet true zum Servlet "Speichern", false andernfalls. Im Kopfzeilenmenü können Sie auch Alle auswählen oder Keine auswählen. Diese Optionen sind aktiviert, wenn die ausgewählte Kopfzeile die Kopfzeile einer Kontrollkästchenspalte ist.

Im ersten Beispiel enthält die Auswahlspalte nur Kontrollkästchen mit dem Namen checkbox="true".

Erzwungene Position

Mit forcedPosition, den Metadaten für die erzwungene Position, können Sie festlegen, an welcher Stelle im Raster die Spalte platziert werden soll: 0 ist die erste Position und <number of columns> – 1 ist die letzte Position. Alle anderen Werte werden ignoriert.

Im ersten Beispiel ist die Auswahlspalte die erste Spalte mit forcedPosition="0".

Query Servlet

Standardmäßig findet sich das Abfrage-Servlet unter /libs/wcm/core/components/bulkeditor/json.java. Sie können einen anderen Pfad konfigurieren, um die Daten abzurufen.

Das Abfrage-Servlet funktioniert wie folgt: empfängt es eine GQL-Abfrage und die zurückzugebenden Spalten, berechnet die Ergebnisse und sendet die Ergebnisse als JSON-Stream an den Bulk Editor.

Im Komponentenfall Produktliste werden die beiden Parameter an das Abfrage-Servlet wie folgt gesendet:

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

und der zurückgegebene JSON-Stream lautet wie folgt:

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

Jeder Treffer entspricht einem Knoten und seinen Eigenschaften und wird als Zeile im Raster angezeigt.

Sie können das Abfrage-Servlet erweitern, um ein komplexes Vererbungsmodell zurückzugeben oder Knoten zurückzugeben, die an einem bestimmten logischen Ort gespeichert sind. Das Abfrage-Servlet kann für jede Art von komplexer Berechnung verwendet werden. Das Raster kann dann Zeilen anzeigen, die ein Aggregat mehrerer Knoten im Repository sind. Die Änderung und das Speichern dieser Zeilen müssen in diesem Fall vom Save Servlet verwaltet werden.

Servlet speichern

In der Standardkonfiguration des Bulk Editors ist jede Zeile ein Knoten und der Pfad dieses Knotens wird im Zeileneintrag gespeichert. Der Bulk Editor behält die Verknüpfung zwischen der Zeile und dem Knoten über den jcr-Pfad bei. Wenn ein Benutzer das Raster bearbeitet, wird eine Liste aller Änderungen erstellt. Wenn ein Benutzer auf Speichern, wird eine POST-Abfrage an jeden Pfad mit den aktualisierten Eigenschaftswerten gesendet. Dies ist die Grundlage des Sling-Konzepts und funktioniert gut, wenn jede Zelle eine Eigenschaft des Knotens ist. Wenn jedoch das Abfrage-Servlet für die Vererbungsberechnung implementiert ist, kann dieses Modell nicht funktionieren, da eine vom Abfrage-Servlet zurückgegebene Eigenschaft von einem anderen Knoten übernommen werden kann.

Das Konzept des Servlets "Speichern"besteht darin, dass die Änderungen nicht direkt an jeden Knoten gesendet werden, sondern in einem Servlet veröffentlicht werden, das den Speicherauftrag ausführt. Dadurch kann dieses Servlet die Änderungen analysieren und die Eigenschaften auf dem richtigen Knoten speichern.

Jede aktualisierte Eigenschaft wird im folgenden Format an das Servlet gesendet:

• Parametername: <jcr path>/<property name>

  Beispiel: /content/geometrixx/en/products/jcr:content/par/productlist/1258674859000/SellingSku

• Wert: <value>

  Beispiel: 12123

Das Servlet muss wissen, wo die Eigenschaft catalogCode gespeichert ist.

Eine standardmäßige Implementierung des Speichern-Servlets findet sich unter /libs/wcm/bulkeditor/save/POST.jsp und wird in der Produktlisten-Komponente genutzt. Es übernimmt alle Parameter der Anfrage (mit dem Format <jcr path>/<property name>) und schreibt mithilfe der JCR-API Eigenschaften auf Knoten. Außerdem erstellt das Servlet Knoten, wenn sie nicht vorhanden sind (in das Raster eingefügte Zeilen).

Der Standard-Code sollte nicht unverändert verwendet werden, da er erneut implementiert, was der Server nativ macht (eine POST-Abfrage auf <jcr-Pfad>/<Eigenschaftenname>), und stellt somit nur einen guten Ausgangspunkt für die Entwicklung eines Speichern-Servlets dar, das ein Modell zur Vererbung von Eigenschaften verwaltet.