Show Menu
TÓPICOS×

Desenvolver o Editor em massa

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

Parâmetros de consulta do Editor em massa

Ao trabalhar com o editor em massa, há vários parâmetros de consulta 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 Lista de produtos, é 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 consulta 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 da raiz como hrp=true e oculta o campo. Com o parâmetro hrp=false, o campo é exibido (o valor padrão).
A seguir está uma lista dos parâmetros de consulta do editor em massa:
Cada parâmetro pode ter um nome longo e curto. Por exemplo, o nome longo do caminho raiz de pesquisa é rootPath , o nome curto é 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 consulta 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, a consulta é executada 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 de consulta
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 de produtos

Esta seção fornece uma visão geral de como usar o editor em massa e fornece uma descrição do componente Geometrixx existente com base no editor em massa: o componente Lista de produtos.
O componente Lista de produtos permite que os usuários exibam e editem uma tabela de dados. Por exemplo, você pode usar o componente Lista de produtos para representar produtos em um catálogo. As informações são apresentadas em uma tabela HTML padrão e qualquer edição é executada 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 de produtos 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 de produtos. 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 de consulta é retornar a lista dos nós a serem exibidos; o caminho de pesquisa é definido como uma instância da Lista de produtos.
O código-fonte do componente Lista de produtos está disponível no repositório em /apps/geometrixx/components/productlist e é composto de várias partes, como todos os componentes do AEM:
  • Renderização HTML: a renderização é feita em um arquivo JSP (/apps/geometrixx/components/productlist/productlist.jsp). O JSP lê os subnós do componente Lista de produtos 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 as 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 consulta 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 de consulta
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 consulta
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 poder 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 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):
            <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 consulta

Por padrão, o Servlet de consulta pode ser encontrado em /libs/wcm/core/components/bulkeditor/json.java . Você pode configurar outro caminho para recuperar os dados.
O servlet Query funciona da seguinte maneira: ele recebe uma consulta GQL e as colunas a serem retornadas, calcula os resultados e envia os resultados para o editor em massa como um fluxo JSON.
No caso do componente Lista de produtos, os dois parâmetros enviados para o servlet Consulta são os seguintes:
  • consulta: "path:/content/geometrixx/en/customers/jcr:content/par/productlist Cube"
  • 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 de Consulta para retornar um modelo de herança complexo ou nós de retorno armazenados em um local lógico específico. O servlet Query pode ser usado para fazer qualquer tipo de computação complexa. A grade pode então exibir linhas que são um agregado 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 , uma consulta POST é enviada 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 de Consulta for implementado para realizar a computação de herança, esse modelo não poderá funcionar como uma propriedade retornada pelo servlet de Consulta pode 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 ao 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 Salvar está disponível em /libs/wcm/bulkeditor/save/POST.jsp e é usada no componente Lista de produtos. 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 em <caminho 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.