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.
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:
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 |
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:
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>
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):
|
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:
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".
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:
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.
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.