Criar um widget CQ compatível com arrastar e soltar imagem

Pesquisar

Última atualização em 5 de mai de 2021

Resumo do artigo

Resumo	Discute como desenvolver um componente CQ usado pelo sistema parsys. O componente suporta uma caixa de diálogo com várias guias, oferece suporte a uma imagem e conecta-se à funcionalidade oferecida pelo Localizador de Conteúdo.
Soluções de marketing digital	Adobe Experience Manager (Adobe CQ)
Público	Desenvolvedor (intermediário)
Habilidades necessárias	JavaScript, JCR, Sling
Testado no	Adobe CQ 5.5

É possível criar um componente AEM que gerencia o texto e uma imagem. Além disso, o componente criado neste artigo tem uma caixa de diálogo CQ que permite ao usuário selecionar uma imagem durante o tempo de design.

Um widget AEM que permite que um criador selecione uma imagem durante o tempo de design

Quando o usuário seleciona uma imagem, ela é exibida no widget.

Uma imagem é exibida no widget AEM

Neste artigo, a imagem é editável por um criador de conteúdo e pode ser arrastada a partir do Localizador de Conteúdo.

Para este artigo, a imagem:

É um widget de diálogo (xtype de smartimage).
Precisa ser configurada no cq:editConfig do componente para permitir a captura de imagens do Localizador de conteúdo, conforme mostrado nesta ilustração.

O componente suporta arrastar do Localizador de conteúdo do CQ

O rich text:

1. É um widget de diálogo (xtype de richtext).
2. O widget ativa todos os recursos da tabela de plugins de edição de rich text.
3. O widget tem texto padrão.

O caminho de uma página:

1. É um Widget de Diálogo de Design, provavelmente um xtype de pathcompletion.
2. O widget precisa ter regex de propriedade com uma expressão regular que valide a entrada do usuário (por exemplo, "/^\/content\/training\/(.)*$/").
3. O widget precisa ter propriedade regexText com uma mensagem de erro, se a expressão regular falhar.

Criar uma estrutura de pastas do aplicativo CQ

Use o CRXDE Lite para criar uma estrutura de pastas de aplicativo do Adobe CQ que contenha modelos, componentes e páginas.

Uma estrutura de pastas do aplicativo CQ

Cada pasta de aplicativos está descrita a seguir:

nome do aplicativo: contém todos os recursos que um aplicativo usa. Os recursos podem ser modelos, páginas, componentes e assim por diante.
componentes: contém componentes que o aplicativo usa.
página: contém componentes de página. Um componente de página é um script, como um arquivo JSP.
global: contém componentes globais que o aplicativo usa.
modelo: contém modelos nos quais os componentes de página são baseados.
src: contém o código fonte que compreende um componente OSGi (este artigo de desenvolvimento não cria um pacote OSGi usando esta pasta).
instalar: contém um contêiner de pacotes OSGi compilado.

Para criar uma estrutura de pastas de aplicativos:

1. Para visualizar a página de boas-vindas do CQ, digite o URL http://[host name]:[porta] em um navegador da web. Por exemplo, http://localhost:4502.

2. Selecione o CRXDE Lite.

3. Clique com o botão direito do mouse na pasta apps (ou na pasta pai) e selecione Criar, Criar Pasta.

4. Digite o nome da pasta na caixa de diálogo Criar pasta. Digite imagecomponent.

5. Repita os passos 1-4 para cada pasta especificada na ilustração anterior.

6. Clique no botão Salvar tudo.

Observação:

É necessário clicar no botão Salvar tudo ao trabalhar no CRXDELite para que as alterações sejam feitas.

Criar um modelo

É possível criar um modelo com o CRXDE Lite. Um modelo CQ permite definir um estilo consistente para as páginas do aplicativo. Um modelo é composto por nós que especificam a estrutura da página. Para mais informações sobre modelos, consulte http://dev.day.com/docs/en/cq/current/developing/templates.html.

Para criar um modelo, execute estas tarefas:
1. Para visualizar a página de boas-vindas do CQ, insira a URL http://[host name]:[porta] em um navegador da web. Por exemplo, http://localhost:4502.
2. Selecione o CRXDE Lite.
3. Clique com o botão direito do mouse na pasta de modelos (dentro de seu aplicativo) e selecione Criar, Criar
Modelo.
4. Digite as seguintes informações na caixa de diálogo Criar modelo:

Rótulo: o nome do modelo a ser criado. Digite templateImage.
Título: o título atribuído ao modelo.
Descrição: a descrição atribuída ao modelo.
Tipo de recurso: o caminho do componente atribuído ao modelo e copiado para as páginas de implementação. Digite imagecomponent/components/page/templatelmage.
Classificação: a ordem (ascendente) na qual este modelo aparecerá em relação a outros. Definir esse valor como 1 garante que o modelo apareça primeiro na lista.

5. Adicione um caminho aos Caminhos permitidos. Clique no sinal de mais e digite o seguinte valor: /content(/.*)?.
6. Clique em Avançar para Pais permitidos.
7. Selecione OK em Filhos permitidos.

Crie o componente de imagem

Os componentes são módulos reutilizáveis que implementam lógica de aplicativo específica para renderizar o conteúdo do seu site. Pense em um componente como uma coleção de scripts (por exemplo, JSPs, servlets Java e assim por diante) que realizam completamente uma função específica. Para realizar essa funcionalidade, é sua responsabilidade, como desenvolvedor do CQ, criar scripts que executem funcionalidades específicas. Para mais informações sobre componentes, consulte http://dev.day.com/docs/en/cq/current/developing/components.html.

Por padrão, um componente tem pelo menos um script padrão, idêntico ao nome do componente. Para criar um componente de renderização, execute estas tarefas:
1. Para visualizar a página de boas-vindas do CQ, insira a URL http://[host name]:[porta] em um navegador da web. Por exemplo, http://localhost:4502.
2. Selecione o CRXDE Lite.
3. Clique com o botão direito do mouse em /apps/imagecomponent/components/page e selecione
Criar, Criar componente.
4. Digite as seguintes informações na caixa de diálogo Criar componente:

Rótulo: o nome do componente a ser criado. Digite templateImage;
Título: o título atribuído ao componente.
Descrição: a descrição atribuída ao modelo.

5. Selecione Avançar para Configurações avançadas de componentes e Pais permitidos.
6. Selecione OK em Filhos permitidos.
7. Abra o templateImage.jsp localizado em: /apps/imagecomponent/components/page/templateImage/templateImage.jsp.

8. Digite o seguinte código JSP.

<%@include file="/libs/foundation/global.jsp" %>
<cq:include script="/libs/wcm/core/components/init/init.jsp"/>


<body>
<h1>Here is where the Component will go</h1>
<cq:include path="par" resourceType="foundation/components/parsys" />
</body>
</html>

Observação:

Este é o componente da página em que será adicionado o componente de imagem criado neste artigo de desenvolvimento. A parte restante deste artigo fala sobre como criar o componente que permite usar uma imagem.

Desenvolver o componente que suporta o arrastar e soltar de imagens

Agora, crie o componente complexo que suporta todos os requisitos listados no início deste artigo. A ilustração a seguir mostra a estrutura do componente criado nesta seção.

A estrutura do componente complexo criado nesta seção

Execute estas tarefas usando o CRXDE:

1. Clique com o botão direito do mouse em /apps/imagecomponent/components e selecione Novo, Componente.

2. Digite as seguintes informações na caixa de diálogo Criar componente:

Rótulo: o nome do componente a ser criado. Digite complexo.
Título: o título atribuído ao componente. Digite Complexo de Treinamento.
Descrição: a descrição atribuída ao modelo. Digite Componente Complexo.
Tipo de Recurso Super: digite foundation/components/parbase.
Grupo: o grupo no sidekick onde o componente aparece. Digite Treinamento.
pais permitidos: digite */*parsys

3. Abra complex.jsp e insira o seguinte código JavaScript:

<%@include file="/libs/foundation/global.jsp"%>
<%@ page import="com.day.cq.wcm.foundation.Image" %>
<%
// getting the image from the Dialog/resouce
// notice the use of the second parameter "image" -- this signifies that the
// image will live on a resource (called image) below the requested resource
Image image = new Image(resource, "image");
// setting the selector so that the "parbase" can work its magic
image.setSelector(".img");
// getting the rich text from the Dialog
String text = properties.get("text", "TEXT NA");
// getting the path from the Design Dialog
String path = currentStyle.get("path", "PATH NA");
%>
<h2><%= path %></h2>
<%= text %><br />
<%
image.draw(out);
%>

4. Adicione uma caixa de diálogo ao componente complexo. Selecione /apps/imagecomponent/components/complex, clique com o botão direito e selecione Novo, Caixa de diálogo.

5. Crie um nó itens (nodeType cq:WidgetCollection) sob o nó tab1 da
caixa de diálogo do seu componente.

6. Crie um nó texto (nodeType cq:Widget) sob o nó recém-criado itens.

7. Atribua as seguintes propriedades ao nó recém-criado texto:

Nome	Tipo	Valor	Descrição
nome	Sequência	./texto	Define onde o conteúdo é armazenado.
xtype	Sequência	richtext	Define o tipo de widget
hideLabel	Booliano	true	Especifica ocultar o rótulo do widget
defaultValue	Sequência	Este é o texto padrão	Define o valor do texto padrão.

8. Crie um nó rtePlugins (nodeType nt:unstructured) sob o nó recém-criado
texto.

9. Crie um nó tabela (nodeType nt:unstructured) sob o nó recém-criado
rtePlugins.

10. Atribua a propriedade features (Type = String, Value = *) ao nó recém-criado table.

11. Copie os nós tab2 e tab3 sob o nó /libs/foundation/components/textimage/dialog/items. Cole na caixa de diálogo do componente complexo, de modo que eles sejam um par de tab1 (por exemplo, /apps/imagecomponent/components/complex/dialog/items/items).

A tab2 é a guia smartimage, e a tab3 é propriedades avançadas da imagem. Geralmente, é mais eficiente copiar e colar caixas de diálogo/widgets existentes que atendam às suas necessidades. É recomendável revisar e entender o que foi copiado para compreender melhor o funcionamento interno do CQ.

Com um exame minucioso, é possível notar que o widget está na verdade armazenando conteúdo relacionado à imagem em um nível mais profundo do que o recurso atual (por exemplo, ./image/file, ./image/fileReference, etc.). Isso corresponde ao código em complex.jsp (Image image = new Image (resource, "image");).

12. Crie um nó items (nodeType cq: WidgetCollection) sob o nó tab1 da caixa de diálogo Design do seu componente.

13. Crie um nó path (nodeType cq:Widget) abaixo do nó items.

14. Atribua as seguintes propriedades ao nó path:

Nome	Tipo	Valor	Descrição
nome	Sequência	./path	Define onde o conteúdo é armazenado
xtype	Sequência	pathfield	Define o tipo de widget
fieldLabel	Sequência	Digite um caminho	Define o rótulo aplicado ao widget
rootPath	Sequência	/content/trainingSite	Define o caminho raiz a ser exibido
regex	Sequência	/^\/content\/trainingSite\/(.)*$/	Define a expressão regular usada para avaliar a entrada do usuário.
regexText	Sequência	Insira uma página em /content/trainingSite	Defina a mensagem de erro se a entrada de um usuário causar falha na expressão regular

15. Copie o nó /libs/foundation/components/textimage/cq:editConfig. Cole no nó raiz do seu componente complexo (/apps/imagecomponent/components/complex).

Esta ação ativa os recursos de arrastar e soltar do Localizador de conteúdo.

Para poder arrastar e soltar ativos do Localizador de conteúdo em um componente de uma Página, deve haver um nó de configuração de destinos de soltar chamado cq:dropTargets (do tipo nt:unstructured) abaixo do nó de editar configuração (cq:editConfig) de um componente.

16. Acesse este caminho usando o CRXDE:

/apps/imagecomponent/components/complex/cq:editConfig/cq:dropTargets/image

Verifique se o nó da imagem tem as seguintes propriedades:

accept (Type = String) - os tipos de mídia a serem aceitos (por exemplo, image/.*, etc.)
grupos (Type = String) - os grupos nos ativos do Localizador de conteúdo podem ser
aceitos de (por exemplo, mídia)
propertyName(Type = String) - a propriedade em que a referência deve ser armazenada
(por exemplo ./image/fileReference)

17. Navegue até o nó de parâmetros que é filho do nó da imagem. Altere
o valor da propriedade sling:resourceType para ter o valor: training/
components/comple. A propriedade sling:resourceType
precisa referenciar o local onde se encontra um script de renderização.

Crie uma página da Web CQ que use o novo componente

A tarefa final é criar um site que contenha uma página baseada no templateImage (o modelo criado anteriormente neste artigo de desenvolvimento). Esta página do CQ permitirá a seleção do widget complexo recém-criado a partir do sidekick do CQ, conforme mostrado na ilustração a seguir.

O sidekick do CQ exibindo o componente Complexo de treinamento criado neste artigo de desenvolvimento

1. Vá para a página de boas-vindas do CQ em http://[host name]:[port]; por exemplo, http://localhost:4502.
Selecione Sites da web.

2. No painel esquerdo, selecione Sites da web.

3. Selecione Nova página.

4. Especifique o título da página no campo Título.

5. Especifique o nome da página no campo Nome.

6. Selecione templateImage na lista de modelos que aparece. Este valor representa o modelo criado neste artigo de desenvolvimento. Se ele não for exibido, repita as etapas neste artigo de desenvolvimento. Por exemplo, se um erro de digitação for cometido nas informações do caminho, o modelo não será exibido na caixa de diálogo Nova página.

6. Abra a página criada clicando duas vezes nela, no painel direito. A nova página se abrirá em um navegador da Web.

7. No sidekick, clique no ícone Design localizado na parte inferior.

8. Clique no botão de edição que aparece.

O botão Editar que aparece na página da web do CQ

9. Na caixa de diálogo Editar componente, selecione o componente em treinamento, conforme mostrado nesta ilustração.

O componente CQ criado neste artigo de desenvolvimento

10. Clique em OK.

11. Agora, o novo componente aparece no sidekick. Arraste o componente para a página da web. Agora, é possível ver o componente como mostrado no começo deste artigo. Se não aparecer, assegure-se de ter criado todos os nós e propriedades criados neste artigo.