Creación de un widget CQ que admita la función de arrastrar y soltar imágenes

Buscar

Última actualización el 4 may. 2021

Resumen del artículo

Resumen	Acerca de cómo desarrollar un componente CQ que el sistema parsys utiliza. El componente admite un cuadro de diálogo con varias pestañas, admite una imagen y se engancha a la funcionalidad ofrecida por el Buscador de contenido.
Soluciones de marketing digital	Adobe Experience Manager (Adobe CQ)
Público	Desarrollador (intermedio)
Habilidades requeridas	JavaScript, JCR, Sling
Probado en	Adobe CQ5.5

Puede crear un componente AEM que gestione texto e imagen. Además, el componente que aprende a crear en este artículo tiene un cuadro de diálogo de CQ que permite al usuario seleccionar una imagen durante el tiempo de diseño.

Un widget AEM que permite a un autor seleccionar una imagen durante el tiempo de diseño

Cuando el usuario selecciona una imagen, esta se muestra en el widget.

Una imagen se muestra en el widget AEM

En este artículo, la imagen es editable por un autor de contenido y puede ser arrastrada desde el Buscador de contenido.

Para este artículo, la imagen:

Es un Widget de diálogo (xtype of smartimage).
Debe estar configurado en el cq:editConfig del componente para permitir el arrastre de imágenes desde el Buscador de Contenido, como se muestra en esta ilustración.

El componente soporta el arrastre desde el Buscador de Contenido CQ

El texto enriquecido:

1. Es un widget de diálogo (xtype of richtext).
2. Widget permite todas las funciones de la tabla de complementos de edición de texto enriquecido.
3. El widget tiene texto de forma predeterminada.

La ruta de una página:

1. Es un widget de diálogo de diseño, muy probablemente un tipo x de pathcompletion.
2. El widget debe tener la propiedad regex con una expresión regular que valide la entrada del usuario (por ejemplo, "/^\\/content\/training\/(.)*$/").
3. El widget debe tener la propiedad regexText con un mensaje de error si la expresión regular falla.

Creación de una estructura de carpetas de la aplicación de CQ

Cree una estructura de carpetas de la aplicación de Adobe CQ que contenga plantillas, componentes y páginas utilizando CRXDE Lite.

Una estructura de carpetas de la aplicación CQ

A continuación se describe cada carpeta de la aplicación:

nombre de la aplicación:contiene todos los recursos que utiliza una aplicación. Los recursos pueden ser plantillas, páginas, componentes, etc.
componentes: contiene los componentes que utiliza su aplicación.
página: contiene los componentes de la página. Un componente de página es un script como un archivo JSP.
global:contiene los componentes globales que utiliza su aplicación.
plantilla: contiene plantillas en las que se basan los componentes de la página.
src: contiene código fuente que contiene un componente OSGi (este artículo de desarrollo no crea un paquete OSGi usando esta carpeta).
instalar: contiene un contenedor de paquetes OSGi compilado.

Para crear una estructura de carpetas de la aplicación:

1. Para ver la página de bienvenida de CQ, introduzca la URL http://[nombre del host]:[puerto] en un navegador web. Por ejemplo, http://localhost:4502.

2. Seleccione CRXDE Lite.

3. Haga clic con el botón derecho en la carpeta de aplicaciones (o en la carpeta principal), seleccione Crear, Crear carpeta.

4. Introduzca el nombre de la carpeta en el cuadro de diálogo Crear carpeta. Introduzca el componente de la imagen.

5. Repita los pasos del 1 al 4 para cada carpeta especificada en la ilustración anterior.

6. Haga clic en el botón Guardar todo.

Nota:

Debe hacer clic en el botón Guardar todo cuando trabaje en CRXDELite para que se realicen los cambios.

Creación de una plantilla

Puede crear una plantilla usando CRXDE Lite. Una plantilla de CQ le permite definir un estilo constante para las páginas de su aplicación. Una plantilla se compone de nodos que especifican la estructura de la página. Para obtener más información sobre las plantillas, consulte http://dev.day.com/docs/en/cq/current/developing/templates.html.

Para crear una plantilla, realice estas tareas:
1. Para ver la página de bienvenida de CQ, introduzca la URL http://[nombre del host]:[puerto] en un navegador web. Por ejemplo, http://localhost:4502.
2. Seleccione CRXDE Lite.
3. Haga clic con el botón derecho en la carpeta de plantillas (dentro de su aplicación), seleccione Crear, Crear
plantilla.
4. Introduzca la siguiente información en la ventana de diálogo Crear plantilla:

Etiqueta: el nombre de la plantilla a crear. Introduzca templateImage.
Título: el título que se asigna a la plantilla.
Descripción: la descripción que se asigna a la plantilla.
Tipo de recurso: la ruta del componente que se asigna a la plantilla y se copia a las páginas de implementación. Introduzca el componente de la imagen/componentes/página/imagen de plantilla.
Ranking: el orden (ascendente) en el que esta plantilla aparecerá en relación a otras plantillas. Fijar este valor en 1 garantiza que la plantilla aparezca en primer lugar en la lista.

5. Añada una ruta a las rutas permitidas. Haga clic en el signo más e introduzca el siguiente valor: /content(/.*)?.
6. Haga clic en Siguiente para los Principales permitidos.
7. Seleccione Aceptar en Niños permitidos.

Crear el componente imagen

Los componentes son módulos reutilizables que implementan una lógica de aplicación específica para renderizar el contenido de su sitio web. Puede pensar en un componente como una colección de scripts (por ejemplo, JSP, servlets de Java, etc.) que realizan completamente una función específica. Para realizar esta funcionalidad, es su responsabilidad como desarrollador de CQ crear scripts que realicen funcionalidades específicas. Para obtener más información sobre los componentes, consulte http://dev.day.com/docs/en/cq/current/developing/components.html.

De forma predeterminada, un componente tiene al menos un script predeterminado, idéntico al nombre del componente. Para crear un componente de renderización, realice estas tareas:
1. Para ver la página de bienvenida de CQ, introduzca la URL http://[nombre del host]:[puerto] en un navegador web. Por ejemplo, http://localhost:4502.
2. Seleccione CRXDE Lite.
3. Haga clic con el botón derecho del ratón en /apps/imagecomponent/components/page y, a continuación, seleccione
Crear, Crear de componente.
4. Introduzca la siguiente información en la ventana de diálogo Crear componente:

Etiqueta: el nombre del componente que crear. Introduzca templateImage;
Título: el título que se asigna al componente.
Descripción: la descripción que se asigna a la plantilla.

5. Seleccione Siguiente para Configuración avanzada de componentes y Principales permitidos.
6. Seleccione Aceptar en Niños permitidos.
7. Abra el templateImage.jsp ubicado en: /apps/imagecomponent/components/page/templateImage/templateImage.jsp.

8. Introduzca el siguiente 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>

Nota:

Este es el componente de la página donde agregará el componente de imagen que ha sido creado en este artículo de desarrollo. La parte restante de este artículo habla sobre cómo crear el componente que le permite usar una imagen.

Desarrollar el componente que soporta la función de arrastrar y soltar imágenes

Ahora cree el componente complejo que soporta todas las necesidades que se listan al principio de este artículo. La siguiente ilustración muestra la estructura del componente que se crea en esta sección.

La estructura del componente complejo que se crea en esta sección

Realice estas tareas utilizando CRXDE:

1. Haga clic con el botón derecho en /apps/imagecomponent/components y seleccione Nuevo, Componente.

2. Introduzca la siguiente información en la ventana de diálogo Crear componente:

Etiqueta: el nombre del componente a crear. Entrar complejo.
Título: el título que se asigna al componente. Entrar Complejo de capacitación.
Descripción: la descripción que se asigna a la plantilla. Introducir Componente complejo.
Tipo de súper recurso: introducir cimentación/componentes/parbase.
Grupo: el grupo en la barra de tareas donde aparece el componente. Vaya a Formación.
principales permitidos: introducir */*parsys

3. Abra complex.jsp e introduzca el siguiente 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. Agregar un diálogo al componente complejo. Seleccione /apps/imagecomponent/components/complex, haga clic con el botón derecho del ratón y seleccione Nuevo, Diálogo.

5. Cree un nodo de elementos (nodeType cq:WidgetCollection) bajo el nodo tab1 del
diálogo de su componente.

6. Cree un nodo de texto (nodeType cq:Widget) en el nodo de elementos recién creado.

7. Asigne las siguientes propiedades al nodo de texto recién creado:

Nombre	Tipo	Valor	Descripción
nombre	Cadena	./texto	Define dónde se almacena el contenido.
xtype	Cadena	richtext	Define el tipo de utilidad
hideLabel	Carácter booleano	verdadero	Especifica que se debe ocultar la etiqueta de la utilidad
defaultValue	Cadena	Este es el texto predeterminado	Define el valor predeterminado del texto.

8. Cree un nodo rtePlugins (nodeType nt:unstructured) bajo el nodo de
texto recién creado.

9. Cree un nodo de tabla (nodeType nt:unstructured) bajo el nodo
rtePlugins recién creado.

10. Asigne la propiedad de funciones (Tipo = Cadena, Valor = *) al nodo de tabla recién creado.

11. Copiar los nodos tab2 y tab3 bajo el nodo /libs/foundation/components/textimage/dialog/items. Pegue en el cuadro de diálogo del componente complejo para que sea un par de pestaña1 (por ejemplo, /apps/imagecomponent/components/components/complex/dialog/items/items/items).

La pestaña2 es la pestaña de imagen inteligente y la pestaña3 muestra las propiedades avanzadas de la imagen. Suele ser más eficiente copiar y pegar los diálogos y utilidades existentes que satisfagan sus necesidades. Se recomienda que revise y entienda lo que acaba de copiar para entender mejor el funcionamiento interno de CQ.

Si lo examina con suficiente atención, verá que la utilidad está almacenando contenido relacionado con imágenes a un nivel más profundo que el recurso actual (por ejemplo, ./image/file, ./image/fileReference, etc.). Esto corresponde al código en complex.jsp (Imagen imagen = nueva imagen(recurso, "imagen");).

12. Cree un nodo de elementos (nodeType cq:WidgetCollection) en el nodo de pestaña1 del diálogo Diseño de su componente.

13. Cree un nodo de ruta (nodeType cq:Widget) bajo el nodo de elementos.

14. Asigne las siguientes propiedades al nodo de ruta:

Nombre	Tipo	Valor	Descripción
nombre	Cadena	./path	Define dónde se almacena el contenido
xtype	Cadena	pathfield	Define el tipo de utilidad
fieldLabel	Cadena	Introducir una ruta	Define la etiqueta aplicada a la utilidad
rootPath	Cadena	/content/trainingSite	Define la ruta raíz que mostrar
regex	Cadena	/^\/content\/trainingSite\/(.)*$/	Define la expresión regular utilizada para evaluar las entradas del usuario
regexText	Cadena	Inserte una página en /content/trainingSite	Defina el mensaje de error si la entrada de un usuario falla la expresión regular

15. Copie el nodo /libs/foundation/components/textimage/cq:editConfig. Pegue en el nodo raíz de su componente complejo (/apps/imagecomponent/components/complex).

Esta acción permite las capacidades de arrastrar y soltar desde el Buscador de Contenido.

Para poder arrastrar y soltar activos desde el Buscador de contenido a un componente en una página, debe haber un nodo de configuración de objetivos de caída llamado cq:dropTargets (de tipo nt:unstructured) debajo del nodo de configuración de edición (cq:editConfig) de un componente.

16. Utilizando CRXDE, vaya a esta ruta:

/apps/imagecomponente/componente/complejo/cq:editConfig/cq:dropTargets/image

Valide que el nodo de imagen tenga las siguientes propiedades:

aceptar (Type = String) - los tipos de medios que se van a aceptar (por ejemplo, image/.*, etc.)
grupos (Type = String) - los grupos de los activos del Buscador de Contenidos pueden ser
aceptados desde (por ejemplo, medios)
propertyName (Type = String) - la propiedad en la que debe almacenarse la referencia
(por ejemplo, ./image/fileReference)

17. Vaya al nodo de parámetros, que es un nodo secundario del nodo de imagen. Cambiar
el valor de la propiedad sling:resourceType para que tenga el valor: training/
components/complex. La propiedad
sling:resourceType debe hacer referencia a la ubicación para encontrar un script de renderizado.

Cree una página web de CQ que utilice el nuevo componente

La tarea final es crear un sitio que contenga una página basada en la imagen de plantilla (la plantilla creada anteriormente en este artículo de desarrollo). Esta página de CQ le permitirá seleccionar la utilidad compleja que acaba de crear a partir de la barra de tareas de CQ, como se muestra en la siguiente ilustración.

La barra de tareas de CQ muestra el componente complejo de capacitación que se crea en este artículo de desarrollo.

1. Vaya a la página de bienvenida de CQ en http://[nombre del host]:[puerto]; por ejemplo, http://localhost:4502.
Seleccione Sitios web.

2. En el panel izquierdo, seleccione Sitios web.

3. Seleccione Página nueva.

4. Especifique el título de la página en el campo Título.

5. Especifique el nombre de la página en el campo Nombre.

6. Seleccione templateImage en la lista de plantillas que aparece. Este valor representa el modelo que se crea en este artículo de desarrollo. Si no lo ve, entonces repita los pasos en este artículo de desarrollo. Por ejemplo, si cometió un error de escritura al introducir la información de la ruta, la plantilla no aparecerá en el cuadro de diálogo Nueva página.

6. Abra la nueva página que ha creado haciendo doble clic en ella en el panel derecho. La nueva página se abre en un navegador web.

7. Desde la barra de tareas, haga clic en el icono Diseño situado en la parte inferior.

8. Haga clic en el botón de edición que aparece.

El botón Editar que aparece en la página web de CQ

9. En el cuadro de diálogo Editar componente, seleccione el componente bajo capacitación como se muestra en esta ilustración.

El componente CQ que se crea en este artículo de desarrollo

10. Haga clic en Aceptar.

11. Ahora el nuevo componente aparece en la barra de tareas. Arrastre el componente a la página web. Ahora verá el componente como se muestra al principio de este artículo. Si no aparece, asegúrese de que ha creado todos los nodos y propiedades que se crean en este artículo.