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:

OBSERVAÇÃO

Cada parâmetro pode ter um nome longo e curto. Por exemplo, o nome longo do caminho raiz de pesquisa é rootPath, o nome abreviado é rp. Se o nome longo não estiver definido, o curto será lido da solicitação.

Parâmetro

(nome longo / nome abreviado)

Tipo
Descrição
rootPath / rp
Sequência de caracteres caminho raiz de pesquisa
queryParams / qp
Sequência de caracteres query de pesquisa
contentMode / cm
Booleano quando verdadeiro, o modo de conteúdo é ativado
colsValue / cv
Sequência de caracteres[] propriedades pesquisadas (valores marcados de colsSelection exibidos como caixas de seleção)
extraCols / ec
Sequência de caracteres[] propriedades pesquisadas extras (exibidas em um campo de texto separado por vírgulas)
initialSearch / is
Booleano quando verdadeiro, o query é executado no carregamento da página
colsSelection / cs
Sequência de caracteres[] seleção de propriedades pesquisadas (exibido como caixas de seleção)
showGridOnly / sgo
Booleano quando verdadeiro, mostra somente a grade e não o painel de pesquisa
searchPanelCollapsed / spc Booleano quando verdadeiro, o painel de pesquisa é recolhido ao carregar
hideRootPath / hrp Booleano quando verdadeiro, oculta o campo do caminho raiz
hideQueryParams / hqp Booleano quando verdadeiro, oculta o campo query
hideContentMode / hcm Booleano quando verdadeiro, oculta o campo do modo de conteúdo
hideColsSelection / hcs Booleano quando verdadeiro, oculta o campo de seleção de colunas
hideExtraCols / i Booleano quando verdadeiro, oculta o campo de colunas extras
hideSearchButton Booleano quando verdadeiro, oculta o botão de pesquisa
hideSaveButton / hsavep Booleano quando verdadeiro, oculta o botão salvar
hideExportButton / hexpb Booleano quando verdadeiro, oculta o botão exportar
hideImportButton / hib Booleano quando verdadeiro, oculta o botão importar
hideResultNumber / hrn Booleano quando verdadeiro, oculta o texto do número do resultado da pesquisa de grade
hideInsertButton / hinsertb Booleano quando verdadeiro, oculta o botão de inserção da grade
hideDeleteButton / hdelb Booleano quando verdadeiro, oculta o botão de exclusão de grade
hidePathCol / hpc Booleano quando true, oculta a coluna "caminho" da grade

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.

Nome da propriedade Definição
rootPath Caminho raiz da pesquisa
queryParams Pesquisar consulta
contentMode Verdadeiro para ativar o modo de conteúdo: as propriedades são lidas em jcr:nó de conteúdo e não no nó de resultado da pesquisa
colsValue Propriedades pesquisadas (valores marcados de colsSelection exibidos como caixas de seleção)
extraCols Propriedades pesquisadas extras (exibidas em um campo de texto separado por vírgulas)
initialSearch Verdadeiro para executar query no carregamento da página
colsSelection Seleção de propriedades pesquisadas (exibida como caixas de seleção)
showGridOnly True para mostrar somente a grade e não o painel de pesquisa (não se esqueça de definir initialSearch como true)
searchPanelCollapsed Verdadeiro para recolher o painel de pesquisa por padrão
hideRootPath Ocultar campo de caminho raiz
hideQueryParams Ocultar campo query
hideContentMode Ocultar campo de modo de conteúdo
hideColsSelection Ocultar campo de seleção de cores
hideExtraCols Ocultar campo de cores extras
hideSearchButton Ocultar botão de pesquisa
hideSaveButton Botão Ocultar salvar
hideExportButton Ocultar botão exportar
hideImportButton Botão Ocultar importação
hideResultNumber Ocultar texto do número de resultado da pesquisa em grade
hideInsertButton Ocultar botão de inserção da grade
hideDeleteButton Botão Ocultar exclusão de grade
hidePathCol Ocultar coluna "caminho" da grade
queryURL Caminho para o servlet de query
exportURL Caminho para exportar servlet
importURL Caminho para importar servlet
insertResourceType Tipo de recurso adicionado ao nó quando uma linha é inserida
saveButton Salvar configuração do widget de botão
searchButton Configuração do widget de botão de pesquisa
exportButton Configuração do widget de botão Exportar
importButton Importar configuração do widget de botão
searchPanel Configuração do widget do painel de pesquisa
grade Configuração do widget de grade
loja Configuração da loja
colModel Configuração do modelo de coluna de grade
rootPathInput configuração do widget rootPath
queryParamsInput configuração do widget queryParams
contentModeInput configuração do widget contentMode
colsSelectionInput configuração do widget colsSelection
extraColsInput configuração do widget extraCols
colsMetadata Configuração de metadados da coluna. As possíveis propriedades são (aplicadas a todas as células da coluna):
  • cellStyle: estilo html
  • cellCls: classe css
  • readOnly: true para não ser capaz de alterar o valor
  • caixa de seleção: true para definir todas as células da coluna como caixas de seleção (valores true/false)
  • forcedPosition: valor inteiro para especificar onde a coluna deve ser colocada na grade (entre 0 e número de colunas-1)


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.

Nesta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free