Pregunta

Si un componente está incluido, por ejemplo, por la etiqueta <cq:include>, se añade automáticamente una etiqueta div alrededor del componente en el HTML generado.
¿Para qué sirve esta etiqueta div? ¿Es posible suprimir su creación automática?

Respuesta, Resolución

Esta etiqueta div se utiliza para el sistema de edición de CQ5 (dibujar las barras de edición, los marcos de implementación, etc.), para el sistema Designer de CQ5 (establecer el nombre de la clase CSS y el estilo CSS Designer) y también para identificar el componente en el DOM del cliente.

Es posible suprimir esta etiqueta div generada especificando una propiedad vacía cq:cellName en la definición del componente (ver Cómo se construyen los Id de la célula de diseño) o usando el comando IncludeOptions.forceSameContext(true).
Nota: En ambos casos, ya no podrá editar el componente (es decir, sin diálogos).

La etiqueta div generada siempre tiene al menos un atributo de nombre de clase CSS construido a partir del nombre de célula del componente (ver Cómo se construyen los Id de célula de diseño) utilizado para el estilo CSS del componente.
Este atributo de nombre de clase CSS no se puede suprimir.
Es posible añadir atributos adicionales para esta etiqueta div generada por el nodo cq:htmlTag en la definición del componente.
Cada propiedad de este nodo se añadirá como atributo de etiqueta.
También es posible "sobreescribir" el atributo de nombre de clase CSS de la etiqueta div añadiendo la clase de propiedad en el nodo cq:htmlTag.
En este caso, el nombre de la célula ya no se añade automáticamente. Por lo tanto, las propiedades de diseño relevantes css del cuadro de diálogo de diseño (añadidas al archivo css generado por el Diseñador) ya no tienen ningún efecto -> el nombre de la célula tiene que añadirse a la clase de propiedad en el nodo cq:htmlTag manualmente.

El archivo css de Designer generado automáticamente (/etc/designs/<designname>.css) incluye las propiedades de diseño relevantes de css del diálogo de diseño con el nombre de la clase css igual al componente div. Tiene que asegurarse de que los nombres de clase css de su archivo css estático (/etc/designs//static<designname>.css) no coincidan con estos nombres.

CQ5.3 y superiores

Comenzando con CQ5.3, se ha implementado una nueva API más dedicada que permite un mejor control de las etiquetas de decoración (creadas automáticamente):

  • opción para especificar el nombre de la etiqueta para un componente (propiedad cq:htmlTag/cq:tagName)
  • opción para controlar la etiqueta por inclusión: IncludeOptions#setDecorationTagName
  • opción para controlar el nombre predeterminado de la etiqueta: ComponentContext#setDefaultDecorationTagName

Todas las opciones anteriores permiten suprimir la etiqueta de decoración si se establece en una cadena vacía.

Se aplica a

CQ5.2
CQ5.3+

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea