Desenvolver o Editor de itens em massa

Esta seção descreve como desenvolver a ferramenta de editor em massa e como estender o componente de Lista do Produto, que é baseado no editor em massa.

Parâmetros de Query do Editor em Massa

Ao trabalhar com o editor em massa, há vários parâmetros de query que podem ser adicionados ao URL para chamar o editor em massa com uma configuração específica. Se você quiser que o editor em massa seja sempre usado com uma determinada configuração, por exemplo, como no componente de Lista do produto, é necessário modificar bulkeditor.jsp (localizado em /libs/wcm/core/components/bulkeditor) ou criar um componente com a configuração específica. As alterações feitas usando parâmetros de query não são permanentes.

Por exemplo, se você digitar o seguinte no URL do seu navegador:

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

o editor em massa é exibido sem o campo Caminho raiz como hrp=true oculta o campo. Com o parâmetro hrp=false, o campo é exibido (o valor padrão).

Veja a seguir uma lista dos parâmetros de query do editor em massa:

Desenvolvimento de um componente baseado no Editor em massa: o componente de Lista do produto

Esta seção fornece uma visão geral de como usar o editor em massa e fornece uma descrição do componente de Geometrixx existente com base no editor em massa: o componente Lista do produto.

O componente Lista do produto permite que os usuários exibam e editem uma tabela de dados. Por exemplo, você pode usar o componente Lista do produto para representar produtos em um catálogo. As informações são apresentadas em uma tabela HTML padrão e qualquer edição é realizada na caixa de diálogo Editar, que contém um widget do BulkEditor. (Esse Editor em massa é exatamente o mesmo que aquele que pode ser acessado em /etc/importers/bulkeditor.html ou pelo menu Ferramentas). O componente Lista do produto foi configurado para a funcionalidade específica e limitada do editor em massa. Todas as partes do editor em massa (ou componentes derivados do editor em massa) podem ser configuradas.

Com o editor em massa, você pode adicionar, modificar, excluir, filtrar e exportar as linhas, salvar modificações e importar um conjunto de linhas. Cada linha é armazenada como um nó na própria instância do componente Lista do Produto. Cada célula é uma propriedade de cada nó. Esta é uma opção de design e pode ser facilmente alterada, por exemplo, você pode armazenar nós em outro lugar no repositório. A função do servlet do query é retornar a lista dos nós para exibição; o caminho de pesquisa é definido como uma instância de Lista do Produto.

O código-fonte do componente Lista do produto está disponível no repositório em /apps/geometrixx/components/productlist e é composto de várias partes, como todos os componentes AEM:

• Renderização HTML: a renderização é feita em um arquivo JSP (/apps/geometrixx/components/productlist/productlist.jsp?lang=pt-BR). O JSP lê os subnós do componente Lista do produto atual e exibe cada um deles como uma linha de uma tabela HTML.
• Caixa de diálogo Editar, que é onde você define a configuração do Editor em massa. Configure a caixa de diálogo para corresponder às necessidades do componente: colunas disponíveis e ações possíveis executadas na grade ou na pesquisa. Consulte propriedades de configuração do editor em massa para obter informações sobre todas as propriedades de configuração.

Esta é uma representação XML dos subnós da caixa de diálogo:

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

Propriedades de Configuração do Editor em Massa

Todas as partes do editor em massa podem ser configuradas. A tabela a seguir lista todas as propriedades de configuração do editor em massa.

Configuração de metadados de colunas

Você pode configurar para cada coluna:

• propriedades de exibição: estilo html, classe CSS e somente leitura

• uma caixa de seleção

• uma posição forçada

Colunas CSS e somente leitura

O editor em massa tem três configurações de coluna:

• Nome da classe Cell CSS (cellCls): um nome de classe CSS que é adicionado a cada célula da coluna configurada.
• Estilo da célula (cellStyle): um estilo HTML que é adicionado a cada célula da coluna configurada.
• Somente leitura (somente leitura): somente leitura está definida para cada célula da coluna configurada.

A configuração deve ser definida como a seguinte:

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

O exemplo a seguir pode ser encontrado no componente da lista de produtos (/apps/geometrixx/components/productlist/dialog/items/editor/colsMetadata?lang=pt-BR):

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

Caixa de seleção

Se a propriedade de configuração da caixa de seleção estiver definida como true, todas as células da coluna serão renderizadas como caixas de seleção. Uma caixa marcada envia true para o servidor Salvar servlet, caso contrário, false. No menu de cabeçalho, você também pode selecionar tudo ou selecionar nenhum. Essas opções serão ativadas se o cabeçalho selecionado for o cabeçalho de uma coluna de caixa de seleção.

No exemplo anterior, a coluna de seleção contém apenas caixas de seleção como caixa de seleção="true".

Posição forçada

Os metadados de posição forçada forcedPosition permitem especificar onde a coluna é colocada na grade: 0 é o primeiro lugar e <número de colunas>-1 é a última posição. Qualquer outro valor é ignorado.

No exemplo anterior, a coluna de seleção é a primeira coluna como forcedPosition="0".

Servlet de query

Por padrão, o servlet de Query pode ser encontrado em /libs/wcm/core/components/bulkeditor/json.java. Você pode configurar outro caminho para recuperar os dados.

O servlet do Query funciona da seguinte maneira: ele recebe um query GQL e as colunas a serem retornadas, calcula os resultados e envia os resultados de volta ao editor em massa como um fluxo JSON.

No caso do componente Lista do produto, os dois parâmetros enviados para o servlet do Query são os seguintes:

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

e o fluxo JSON retornado é o seguinte:

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

Cada ocorrência corresponde a um nó e suas propriedades e é exibida como uma linha na grade.

Você pode estender o servlet Query para retornar um modelo de herança complexo ou nós de retorno armazenados em um local lógico específico. O servlet do Query pode ser usado para fazer qualquer tipo de computação complexa. A grade pode então exibir linhas que são uma agregação de vários nós no repositório. A modificação e o salvamento dessas linhas devem, nesse caso, ser gerenciados pelo Servlet Salvar.

Salvar Servlet

Na configuração padrão do editor em massa, cada linha é um nó e o caminho desse nó é armazenado no registro de linha. O editor em massa mantém o link entre a linha e o nó pelo caminho jcr. Quando um usuário edita a grade, uma lista de todas as modificações é criada. Quando um usuário clica em Salvar, um query POST é enviado para cada caminho com os valores de propriedades atualizados. Esta é a base do conceito Sling e funciona bem se cada célula for uma propriedade do nó. Mas se o servlet do Query for implementado para fazer a computação de herança, esse modelo não poderá funcionar como uma propriedade retornada pelo servlet do Query poderá ser herdada de outro nó.

O conceito Salvar servlet é que as modificações não são publicadas diretamente em cada nó, mas são publicadas em um servlet que faz a tarefa de salvar. Isso dá a este servlet a possibilidade de analisar as modificações e salvar as propriedades no nó direito.

Cada propriedade atualizada é enviada para o servlet no seguinte formato:

• Nome do parâmetro: <caminho jcr>/<nome da propriedade>

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

• Valor: <valor>

  Exemplo: 12123

O servlet precisa saber onde a propriedade CatalogCode é armazenada.

Uma implementação padrão do servlet Save está disponível em /libs/wcm/bulkeditor/save/POST.jsp e é usada no componente Lista do produto. Ele pega todos os parâmetros da solicitação (com um formato <jcr path>/<property name>) e grava propriedades em nós usando a API JCR. Ele também cria nó se eles não existirem (linhas inseridas na grade).

O código padrão não deve ser usado como está, pois reimplementa o que o servidor faz nativamente (um POST no <caminho do jcr>/<nome da propriedade>) e, portanto, é apenas um bom ponto de partida para a criação de um servlet Save que gerenciará um modelo de herança de propriedade.