Desenvolvimento do editor de itens em massa developing-the-bulk-editor
Esta seção descreve como desenvolver a ferramenta Editor de itens em massa e como estender o componente Lista de produtos, que é baseado no Editor de itens em massa.
Parâmetros de consulta do editor em massa bulk-editor-query-parameters
Ao trabalhar com o Editor de itens em massa, há vários parâmetros de consulta que você pode adicionar ao URL para chamar o Editor de itens em massa com uma configuração específica. Se você quiser que o Editor de itens em massa seja sempre usado com uma determinada configuração, por exemplo, como no componente Lista de produtos, edite bulkeditor.jsp
(em /libs/wcm/core/components/bulkeditor) ou crie 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 navegador:
https://<servername><port_number>/etc/importers/bulkeditor.html?rootPath=/content/geometrixx/en&queryParams=geometrixx&initialSearch=true&hrp=true
O Editor de itens em massa é exibido sem a Caminho raiz field 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 consulta do Editor de itens em massa:
rootPath
, a curta é rp
. Se o nome longo não estiver definido, o nome curto será lido da solicitação.Desenvolvimento de um componente baseado no Editor de itens em massa: o componente de Lista de produtos developing-a-bulk-editor-based-component-the-product-list-component
Esta seção fornece uma visão geral de como usar o Editor de itens em massa e fornece uma descrição do componente Geometrixx existente com base no Editor de itens 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 de HTML padrão e qualquer edição é executada no Editar que contém um dispositivo BulkEditor. (Este Editor de itens em massa é o mesmo que o acessível em /etc/importers/bulkeditor.html ou através do menu Ferramentas). O componente Lista de produtos foi configurado para funcionalidade específica e limitada do Editor de itens em massa. Cada parte do Editor de itens em massa (ou componentes derivados do Editor de itens em massa) pode ser configurada.
Com o Editor de itens 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ó. Essa é 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 por várias partes, como todos os componentes do Adobe Experience Manager (AEM):
- Renderização de HTML: a renderização é feita em um arquivo JSP (https://experienceleague.adobe.com/apps/geometrixx/components/productlist/productlist.jsp?lang=pt-BR). 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 de edição, que é onde você define a configuração do Editor de itens em massa. Configure a caixa de diálogo para corresponder às necessidades do componente: colunas disponíveis e possíveis ações executadas na grade ou na pesquisa. Consulte Propriedades de configuração do Editor de itens em massa para obter informações sobre todas as propriedades de configuração.
Aqui está uma representação XML dos subnós do 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 de itens em massa bulk-editor-configuration-properties
Cada parte do Editor de itens em massa pode ser configurada. A tabela a seguir lista todas as propriedades de configuração do Editor de itens em massa.
Configuração de metadados de colunas columns-metadata-configuration
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 de itens em massa tem três configurações de coluna:
- Nome da classe CSS da célula (cellCls): um nome de classe CSS que é adicionado a cada célula da coluna configurada.
- Estilo da célula (cellStyle): um estilo de HTML que é adicionado a cada célula da coluna configurada.
- Somente leitura (readOnly): somente leitura é definido 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 (https://experienceleague.adobe.com/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 verdadeira, todas as células da coluna serão renderizadas como caixas de seleção. Uma caixa de seleção envia true ao servidor Salvar servlet, false caso contrário. 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 checkbox="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 <number of="" columns="">-1 é a última posição. Qualquer outro valor é ignorado.
No exemplo anterior, a coluna de seleção é a primeira coluna como forcedPosition="0".
Query Servlet query-servlet
Por padrão, o servlet Query 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 os envia de volta para o Editor de itens em massa como um fluxo JSON.
No caso do componente Lista de produtos, os dois parâmetros enviados para o servlet de consulta são os seguintes:
- query: "path:/content/geometrixx/en/customers/jcr:content/par/productlist Cube"
- cols: "Selection,ProductId,ProductName,Color,CatalogCode,SellingSku"
E o fluxo JSON é retornado da seguinte maneira:
{
"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 retornar nós 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 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 de gravação.
Salvar servlet save-servlet
Na configuração padrão do Editor de itens em massa, cada linha é um nó e o caminho desse nó é armazenado no registro de linhas. O Editor de itens 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. Essa é a base do conceito Sling e funciona bem se cada célula for uma propriedade do nó. Mas se o servlet Query estiver implementado para fazer o cálculo de herança, esse modelo não poderá funcionar como uma propriedade retornada pelo servlet Query que pode ser herdada de outro nó.
O conceito de servlet Salvar é que as modificações não são publicadas diretamente em cada nó, mas são publicadas em um servlet que realiza o trabalho de gravação. Isso dá a esse 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: <jcr path="">/<property name="">
Exemplo: /content/geometrixx/en/products/jcr:content/par/productlist/1258674859000/SellingSku
-
Valor: <value>
Exemplo: 12123
O servlet precisa saber onde a propriedade catalogCode está armazenada.
Uma implementação padrão para Salvar servlet está disponível em /libs/wcm/bulkeditor/save/POST.jsp e é usada no componente Lista de produtos. São necessários todos os parâmetros da solicitação (com um <jcr path="">/<property name=""> format) e grava as propriedades nos nós usando a API JCR. Também cria nó se eles não existirem (linhas inseridas na grade).
Não use o código padrão como está, pois ele reimplementa o que o servidor faz nativamente (um POST em <jcr path="">/<property name="">) e, portanto, é apenas um bom ponto de partida para criar um servlet Save que possa gerenciar um modelo de herança de propriedade.