Show Menu
TEMAS×

Componentes de AEM: conceptos básicos

Cuando inicio desarrollar nuevos componentes, debe comprender los conceptos básicos de su estructura y configuración.
Este proceso implica leer la teoría y observar la amplia gama de implementaciones de componentes en una instancia estándar de AEM. Este último enfoque se complica ligeramente por el hecho de que, aunque AEM ha cambiado a una nueva IU estándar, moderna y táctil, sigue admitiendo la IU clásica.

Información general

Esta sección trata conceptos y temas clave como una introducción a los detalles necesarios para desarrollar sus propios componentes.

Planificación

Antes de empezar a configurar o codificar realmente el componente, debe preguntar:
  • ¿Qué necesita exactamente que haga el nuevo componente?
    • Una especificación clara ayuda en todas las etapas de desarrollo, pruebas y traspaso.
      Los detalles pueden cambiar con el tiempo, pero la especificación se puede actualizar (aunque también se deben documentar los cambios).
  • ¿Necesita crear el componente desde cero o puede heredar lo básico de un componente existente?
    • No hay necesidad de reinventar la rueda.
    • AEM ha proporcionado varios mecanismos que le permiten heredar y ampliar detalles de otra definición de componente, como la anulación, superposición y la fusión de recursos Sling .
  • ¿Requerirá lógica el componente para seleccionar o manipular el contenido?
    • La lógica debe mantenerse separada de la capa de interfaz de usuario. HTL está diseñado para ayudar a garantizar que esto suceda.
  • ¿Necesitará el componente formato CSS?
    • El formato CSS debe mantenerse separado de las definiciones de componentes. Defina convenciones para asignar nombres a los elementos HTML de modo que pueda modificarlos mediante archivos CSS externos.
  • ¿Qué aspectos de seguridad debo tener en cuenta?

IU táctil frente a clásica

Antes de cualquier inicio de debate serio sobre el desarrollo de componentes, debe saber qué IU usarán los autores:
  • IU táctil La interfaz de usuario estándar que se introdujo en AEM 5.6.0 como previsualización y se amplió en 6.x. Se basa en la experiencia de usuario unificada de Adobe Marketing Cloud, que utiliza las tecnologías subyacentes de la interfaz de usuario de Coral y la interfaz de usuario de Granite .
  • Interfaz de usuario clásica basada en la tecnología ExtJS que se introdujo con CQ 5.1.
Consulte Recomendaciones de interfaz de usuario para clientes para obtener más información.
Los componentes se pueden implementar para admitir la IU táctil, la IU clásica o ambos. Al consultar una instancia estándar, también verá los componentes integrados que se diseñaron originalmente para la IU clásica, la IU táctil o ambos.
Por esta razón, en esta página trataremos los aspectos básicos de ambos, y cómo reconocerlos.
Adobe recomienda aprovechar la IU táctil para beneficiarse de la tecnología más reciente. [Herramientas de moderación de AEM& (moderniatzion-tools.md) puede facilitar la migración.

Lógica de contenido y marcado de procesamiento

Se recomienda mantener el código responsable del marcado y el procesamiento separado del código que controla la lógica utilizada para seleccionar el contenido del componente.
Esta filosofía está respaldada por HTL , un lenguaje de plantilla que se limita a propósito para garantizar que se utilice un lenguaje de programación real para definir la lógica comercial subyacente. Esta lógica (opcional) se invoca desde HTL con un comando específico. Este mecanismo resalta el código que se llama para una vista determinada y, si es necesario, permite una lógica específica para distintas vistas del mismo componente.

HTL vs JSP

HTL es un lenguaje de plantilla HTML introducido con AEM 6.0.
El análisis de si se debe utilizar HTL o JSP (Java Server Pages) al desarrollar sus propios componentes debería ser sencillo, ya que HTL es ahora el lenguaje de secuencias de comandos recomendado para AEM.
Tanto HTL como JSP se pueden utilizar para desarrollar componentes tanto para la IU clásica como para la táctil. Aunque puede haber una tendencia a suponer que HTL es solo para la IU táctil y JSP para la IU clásica, se trata de una idea errónea y más debido al tiempo. La IU táctil y HTL se incorporaron a AEM durante aproximadamente el mismo período. Dado que HTL es ahora el idioma recomendado, se utiliza para nuevos componentes, que suelen ser para la IU táctil.
Las excepciones son Campos de formulario de base de la interfaz de usuario de Granite (como se utiliza en los cuadros de diálogo). Estos aún requieren el uso de JSP.

Desarrollo de sus propios componentes

Para crear sus propios componentes para la IU adecuada, consulte (después de leer esta página):
Una forma rápida de empezar es copiar un componente existente y luego realizar los cambios que desee. Para obtener información sobre cómo crear sus propios componentes y agregarlos al sistema de párrafos, consulte:

Desplazamiento de componentes a la instancia de publicación

Los componentes que representan el contenido deben implementarse en la misma instancia de AEM que el contenido. Por lo tanto, todos los componentes que se utilizan para crear y procesar páginas en la instancia de creación deben implementarse en la instancia de publicación. Cuando se implementan, los componentes están disponibles para procesar páginas activadas.
Utilice las siguientes herramientas para mover los componentes a la instancia de publicación:
Estos mecanismos también se pueden utilizar para transferir el componente entre otras instancias, por ejemplo, del desarrollo a la instancia de prueba.

Componentes que se deben tener en cuenta en el Inicio

  • Página:
    • AEM tiene el componente de página ( cq:Page ).
    • Es un tipo específico de recurso que es importante para el gestor de contenido.
      • Una página corresponde a una página web que contiene contenido para el sitio web.
  • Sistemas de párrafos:
    • El sistema de párrafos es una parte fundamental de un sitio web, ya que gestiona una lista de párrafos. Se utiliza para retener y estructurar los componentes individuales que contienen el contenido real.
    • Puede crear, mover, copiar y eliminar párrafos en el sistema de párrafos.
    • También puede seleccionar los componentes que estarán disponibles para su uso en un sistema de párrafos específico.
    • Hay varios sistemas de párrafos disponibles en una instancia estándar (por ejemplo parsys , [responsivegrid](/help/sites-authoring/responsive-layout.md) ).

Estructura

La estructura de un componente de AEM es potente y flexible, y las consideraciones principales son:
  • Tipo de medio
  • Definición de componente
  • Propiedades y nodos secundarios de un componente
  • Cuadros de diálogo
  • Cuadros de diálogo de diseño
  • Disponibilidad de componentes
  • Componentes y el contenido que crean

Tipo de medio

Un elemento clave de la estructura es el tipo de recurso.
  • La estructura de contenido declara las intenciones.
  • El tipo de recurso los implementa.
Esta es una abstracción que ayuda a garantizar que, incluso cuando el aspecto cambia con el tiempo, la intención se mantiene.

Definición de componente

Conceptos básicos de componentes

La definición de un componente se puede desglosar de la siguiente manera:
  • Los componentes de AEM se basan en Sling .
  • Los componentes de AEM se encuentran (normalmente) en:
    • HTL: /libs/wcm/foundation/components
    • JSP: /libs/foundation/components
  • Los componentes específicos del proyecto/sitio se encuentran (generalmente) en:
    • /apps/<myApp>/components
  • Los componentes estándar de AEM se definen como cq:Component y tienen elementos clave:
    • propiedades de jcr:
      lista de las propiedades jcr; son variables y algunas pueden ser opcionales a través de la estructura básica de un nodo de componente, sus propiedades y subnodos están definidos por la cq:Component definición
    • Medios:
      Definen elementos estáticos utilizados por el componente.
    • Secuencias de comandos: Se utilizan para implementar el comportamiento de la instancia resultante del componente.
  • Nodo raíz :
    • <mycomponent> (cq:Component) - Nodo de jerarquía del componente.
  • Propiedades vitales:
    • jcr:title - Título del componente; por ejemplo, se utiliza como etiqueta cuando el componente aparece en la lista en el navegador de componentes o en la barra de tareas.
    • jcr:description - Descripción del componente; puede utilizarse como indicio de desplazamiento del ratón en el navegador de componentes o la barra de tareas.
    • IU clásica:
      • icon.png - Icono para este componente.
      • thumbnail.png - Imagen que se muestra si este componente aparece en la lista dentro del sistema de párrafos.
    • IU táctil
  • Nodos secundarios vitales:
    • cq:editConfig (cq:EditConfig) - Define las propiedades de edición del componente y permite que el componente aparezca en el navegador de componentes o en la barra de tareas.
      Nota: si el componente tiene un cuadro de diálogo, aparecerá automáticamente en el navegador de componentes o en la barra de tareas, aunque cq:editConfig no exista.
    • cq:childEditConfig (cq:EditConfig) - Controla los aspectos de la interfaz de usuario del autor para los componentes secundarios que no definen los suyos propios cq:editConfig .
    • IU táctil:
      • cq:dialog ( nt:unstructured ) - Cuadro de diálogo para este componente. Define la interfaz que permite al usuario configurar el componente y/o editar el contenido.
      • cq:design_dialog ( nt:unstructured ) - Edición de diseño para este componente
    • IU clásica:
      • dialog ( cq:Dialog ) - Cuadro de diálogo para este componente. Define la interfaz que permite al usuario configurar el componente y/o editar el contenido.
      • design_dialog ( cq:Dialog ) - Edición de diseño para este componente.

Icono de componente en la IU táctil

El icono o la abreviatura del componente se definen mediante las propiedades JCR del componente cuando el desarrollador lo crea. Estas propiedades se evalúan en el orden siguiente y se utiliza la primera propiedad válida encontrada.
  1. cq:icon - Propiedad de cadena que apunta a un icono estándar en la biblioteca Coral.Icon.html Coral UI para mostrarse en el navegador de componentes
    • Utilice el valor del atributo HTML del icono Coral.
  2. abbreviation - Propiedad String para personalizar la abreviatura del nombre del componente en el navegador de componentes
    • La abreviatura debe limitarse a dos caracteres.
    • Si se proporciona una cadena vacía, se generará la abreviatura a partir de los dos primeros caracteres de la jcr:title propiedad.
      • Por ejemplo "Im" para "Image"
      • El título localizado se utilizará para crear la abreviatura.
    • La abreviatura solo se traduce si el componente tiene una abbreviation_commentI18n propiedad, que luego se utiliza como sugerencia de traducción.
  3. cq:icon.png o cq:icon.svg : Icono para este componente, que se muestra en el navegador de componentes
    • 20 x 20 píxeles es el tamaño de los iconos de los componentes estándar.
      • Los iconos más grandes se reducirán de tamaño (lado del cliente).
    • El color recomendado es rgb(112, 112, 112) > #707070
    • El fondo de los iconos de componente estándar es transparente.
    • Only .png and .svg files are supported.
    • Si importa desde el sistema de archivos mediante el complemento Eclipse, los nombres de archivo deben separarse como _cq_icon.png o _cq_icon.svg por ejemplo.
    • .png toma precedente .svg si ambos están presentes
Si no se encuentra ninguna de las propiedades anteriores ( cq:icon , abbreviation , cq:icon.png o cq:icon.svg ) en el componente:
  • El sistema buscará las mismas propiedades en los supercomponentes que siguen a la sling:resourceSuperType propiedad.
  • Si no se encuentra nada o una abreviatura vacía en el nivel de supercomponente, el sistema generará la abreviatura a partir de las primeras letras de la jcr:title propiedad del componente actual.
Para cancelar la herencia de iconos de supercomponentes, si se establece una abbreviation propiedad vacía en el componente, se volverá al comportamiento predeterminado.
La consola Detalles de los componentes Componente muestra cómo se define el icono de un componente concreto.

Ejemplo de icono SVG

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "https://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px"
     width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
    <ellipse cx="5" cy="5" rx="3" ry="3" fill="#707070"/>
    <ellipse cx="15" cy="5" rx="4" ry="4" fill="#707070"/>
    <ellipse cx="5" cy="15" rx="5" ry="5" fill="#707070"/>
    <ellipse cx="15" cy="15" rx="4" ry="4" fill="#707070"/>
</svg>

Propiedades y nodos secundarios de un componente

Muchos de los nodos o propiedades necesarios para definir un componente son comunes a ambas IU, y las diferencias permanecen independientes para que el componente pueda funcionar en ambos entornos.
Un componente es un nodo de tipo cq:Component y tiene las siguientes propiedades y nodos secundarios:
Nombre Tipo Descripción
. cq:Component Componente actual. Un componente es del tipo de nodo cq:Component .
componentGroup String Grupo en el que se puede seleccionar el componente en el navegador de componentes (IU táctil) o en la barra de tareas (IU clásica). Un valor de .hidden se utiliza para los componentes que no están disponibles para su selección en la interfaz de usuario, como los sistemas de párrafos reales.
cq:isContainer Boolean Indica si el componente es un componente de contenedor y, por tanto, puede contener otros componentes, como un sistema de párrafos.
cq:dialog nt:unstructured Definición del cuadro de diálogo de edición para la IU táctil.
dialog cq:Dialog Definición del cuadro de diálogo de edición para la IU clásica.
cq:design_dialog nt:unstructured Definición del cuadro de diálogo de diseño para la IU táctil.
design_dialog cq:Dialog Definición del cuadro de diálogo de diseño para la IU clásica.
dialogPath String Ruta a un cuadro de diálogo para cubrir el caso cuando el componente no tiene un nodo de cuadro de diálogo.
cq:cellName String Si se establece, esta propiedad se toma como ID de celda. Para obtener más información, consulte el artículo de la Base de conocimiento Cómo se crean los ID de las celdas de diseño.
cq:childEditConfig cq:EditConfig Cuando el componente es un contenedor, como por ejemplo un sistema de párrafos, esto impulsa la configuración de edición de los nodos secundarios.
cq:editConfig cq:EditConfig Edite la configuración del componente .
cq:htmlTag nt:unstructured Devuelve atributos de etiqueta adicionales que se agregan a la etiqueta HTML que los rodea. Habilita la adición de atributos a los divs generados automáticamente.
cq:noDecoration Boolean Si es true, el componente no se procesa con clases div y css generadas automáticamente.
cq:template nt:unstructured Si se encuentra, este nodo se utilizará como plantilla de contenido cuando el componente se añada desde el navegador de componentes o la barra de tareas.
cq:templatePath String Ruta a un nodo para utilizarlo como plantilla de contenido cuando el componente se añada desde el navegador de componentes o la barra de tareas. Debe ser una ruta absoluta, no relativa al nodo del componente. A menos que desee reutilizar contenido ya disponible en otra parte, esto no es necesario y cq:template es suficiente (ver más abajo).
jcr:created Date Fecha de creación del componente.
jcr:description String Descripción del componente.
jcr:title String Título del componente.
sling:resourceSuperType String Cuando se configura, el componente hereda de este componente.
virtual sling:Folder Permite la creación de componentes virtuales. Para ver un ejemplo, consulte el componente de contacto en: /libs/foundation/components/profile/form/contact
<breadcrumb.jsp> nt:file Archivo de secuencia de comandos.
icon.png nt:file El icono del componente aparece junto al Título en la barra de tareas.
thumbnail.png nt:file Miniatura opcional que se muestra mientras se arrastra el componente a su lugar desde la barra de tareas.
Si vemos el componente Texto (cualquiera de las dos versiones), podemos ver estos elementos:
  • HTL ( /libs/wcm/foundation/components/text )
  • JSP ( /libs/foundation/components/text )
Entre las propiedades de particular interés se incluyen:
  • jcr:title - título del componente; esto se puede utilizar para identificar el componente; por ejemplo, aparece en la lista del componente en el navegador de componentes o en la barra de tareas
  • jcr:description - descripción del componente; se puede utilizar como indicio de desplazamiento del ratón en la lista del componente dentro de la barra de tareas
  • sling:resourceSuperType :: esto indica la ruta de herencia al ampliar un componente (anulando una definición)
Los nodos secundarios de interés particular incluyen:
  • cq:editConfig ( cq:EditConfig ) - controla los aspectos visuales; por ejemplo, puede definir el aspecto de una barra o un widget, o puede agregar controles personalizados
  • cq:childEditConfig ( cq:EditConfig ) - controla los aspectos visuales de los componentes secundarios que no tienen sus propias definiciones
  • IU táctil:
    • cq:dialog ( nt:unstructured ): define el cuadro de diálogo para editar el contenido de este componente
    • cq:design_dialog ( nt:unstructured ): especifica las opciones de edición de diseño para este componente
  • IU clásica:
    • dialog ( cq:Dialog ): define el cuadro de diálogo para editar el contenido de este componente (específico de la IU clásica)
    • design_dialog ( cq:Dialog ): especifica las opciones de edición de diseño para este componente
    • icon.png - archivo de gráficos que se utilizará como icono para el componente en la barra de tareas
    • thumbnail.png - archivo gráfico que se utilizará como miniatura del componente mientras se arrastra desde la barra de tareas

Cuadros de diálogo

Los cuadros de diálogo son un elemento clave del componente, ya que proporcionan una interfaz para que los autores puedan configurar y proporcionar entrada a dicho componente.
Según la complejidad del componente, el cuadro de diálogo puede necesitar una o varias fichas para mantener el cuadro de diálogo corto y ordenar los campos de entrada.
Las definiciones de cuadro de diálogo son específicas de la interfaz de usuario:
  • Por motivos de compatibilidad, la IU táctil puede utilizar la definición de un cuadro de diálogo de IU clásica cuando no se ha definido ningún cuadro de diálogo para la IU táctil.
  • La herramienta de conversión de cuadro de diálogo también se proporciona para ayudarle a ampliar o convertir componentes que solo tienen cuadros de diálogo definidos para la IU clásica.
  • IU táctil
    • cq:dialog ( nt:unstructured ) nodes:
      • definir el cuadro de diálogo para editar el contenido de este componente
      • específica para la IU táctil
      • se definen con los componentes de la interfaz de usuario de Granite
      • tener una propiedad sling:resourceType , como estructura de contenido Sling estándar
      • Puede tener una propiedad helpPath para definir el recurso de ayuda contextual (ruta absoluta o relativa) al que se accede cuando se utiliza el icono Ayuda (el ?) ).
        • Para los componentes listos para usar, esto a menudo hace referencia a una página de la documentación.
        • Si no helpPath se especifica ninguna, se muestra la dirección URL predeterminada (página de información general de la documentación).
    En el cuadro de diálogo, se definen campos individuales:
  • IU clásica
    • dialog ( cq:Dialog ) nodes
      • definir el cuadro de diálogo para editar el contenido de este componente
      • específica de la IU clásica
      • se definen con los widgets de ExtJS
      • tienen una propiedad xtype , que hace referencia a ExtJS
      • Puede tener una propiedad helpPath para definir el recurso de ayuda contextual (ruta absoluta o relativa) al que se accede cuando se selecciona el botón Ayuda .
        • Para los componentes listos para usar, esto a menudo hace referencia a una página de la documentación.
        • Si no helpPath se especifica ninguna, se muestra la dirección URL predeterminada (página de información general de la documentación).
    En el cuadro de diálogo, se definen campos individuales:
    En un cuadro de diálogo clásico:
    • puede crear el cuadro de diálogo como cq:Dialog , que proporcionará una sola ficha, como en el componente de texto, o si necesita varias fichas, como en el componente de textura, el cuadro de diálogo se puede definir como cq:TabPanel .
    • se utiliza un cq:WidgetCollection ( items ) para proporcionar una base para los campos de entrada ( cq:Widget ) o para otras fichas ( cq:Widget ). Esta jerarquía se puede ampliar.

Cuadros de diálogo de diseño

Los diálogos de diseño son muy similares a los que se utilizan para editar y configurar contenido, pero proporcionan la interfaz para que los autores puedan configurar y proporcionar detalles de diseño para ese componente.
Los cuadros de diálogo de diseño están disponibles en el modo de diseño, aunque no son necesarios para todos los componentes, por ejemplo, Título e Imagen , ambos tienen diálogos de diseño, mientras que Texto no.
El cuadro de diálogo de diseño para el sistema de párrafos (por ejemplo, parsys) es un caso especial ya que permite al usuario seleccionar otros componentes específicos para seleccionarlos (desde el navegador de componentes o la barra de tareas) en la página.

Añadir el componente al sistema de párrafos

Una vez definido un componente, debe estar disponible para su uso. Para hacer que un componente esté disponible para su uso en un sistema de párrafos, puede:
  1. Abra el modo de diseño de una página y habilite el componente requerido.
  2. Añada los componentes necesarios a la components propiedad de la definición de plantilla en:
    /etc/designs/<*yourProject*>/jcr:content/<*yourTemplate*>/par
    Por ejemplo, consulte:
    /etc/designs/geometrixx/jcr:content/contentpage/par

Componentes y el contenido que crean

Si creamos y configuramos una instancia del componente Título en la página: <content-path>/Prototype.html
  • IU táctil
  • IU clásica
Luego podemos ver la estructura del contenido creado en el repositorio:
En particular, si observa el texto real de un título :
  • la definición (para ambas IU) tiene la propiedad name = ./jcr:title
    • /libs/foundation/components/title/cq:dialog/content/items/column/items/title
    • /libs/foundation/components/title/dialog/items/title
  • dentro del contenido, se genera la propiedad jcr:title que contiene el contenido del autor.
Las propiedades definidas dependen de las definiciones individuales. Aunque pueden ser más complejas que antes, siguen los mismos principios básicos.

Jerarquía y herencia de componentes

Los componentes de AEM están sujetos a tres jerarquías diferentes:
  • Jerarquía de tipos de recursos
    Se utiliza para ampliar componentes mediante la propiedad sling:resourceSuperType . Esto permite que el componente herede. Por ejemplo, un componente de texto heredará varios atributos del componente estándar.
    • scripts (resueltos por Sling)
    • cuadros de diálogo
    • descripciones (incluidas imágenes en miniatura, iconos, etc.)
  • Jerarquía de Contenedor
    Se utiliza para rellenar los ajustes de configuración del componente secundario y se utiliza con mayor frecuencia en un escenario parsys.
    Por ejemplo, la configuración de los botones de la barra de edición, el diseño del conjunto de controles (barras de edición, rollover) y el diseño de cuadro de diálogo (en línea, flotante) se puede definir en el componente principal y propagar a los componentes secundarios.
    Los ajustes de configuración (relacionados con la funcionalidad de edición) en cq:editConfig y se cq:childEditConfig propagan.
  • Incluir jerarquía
    Esto se impone en tiempo de ejecución por la secuencia de inclusión.
    Esta jerarquía la utiliza el Diseñador, que a su vez actúa como base para varios aspectos de diseño del procesamiento; incluyendo información de diseño, información css, los componentes disponibles en un parsys, entre otros.

Editar comportamiento

En esta sección se explica cómo configurar el comportamiento de edición de un componente. Esto incluye atributos como acciones disponibles para el componente, características del editor in-situ y los oyentes relacionados con eventos en el componente.
La configuración es común a la IU táctil y a la clásica, aunque con ciertas diferencias específicas.
El comportamiento de edición de un componente se configura agregando un cq:editConfig nodo de tipo cq:EditConfig debajo del nodo del componente (de tipo cq:Component ) y agregando propiedades específicas y nodos secundarios. Están disponibles las siguientes propiedades y nodos secundarios:
    • cq:actions ( String array ): define las acciones que se pueden realizar en el componente.
    • cq:layout ( String ): :: define cómo se edita el componente en la IU clásica.
    • cq:dialogMode ( String ): define cómo se abre el cuadro de diálogo del componente en la IU clásica
      • En la IU táctil, los cuadros de diálogo siempre flotan en modo de escritorio y se abren automáticamente como pantalla completa en dispositivos móviles.
    • cq:emptyText ( String ): define el texto que se muestra cuando no hay contenido visual presente.
    • cq:inherit ( Boolean ): define si los valores que faltan se heredan del componente del que se hereda.
    • dialogLayout (Cadena): define cómo se debe abrir el cuadro de diálogo.
  • cq:editConfig secundarios:
    • cq:dropTargets (tipo de nodo nt:unstructured ): define una lista de destinatarios de colocación que pueden aceptar una colocación desde un recurso del buscador de contenido
      • Los destinatarios de colocación múltiples solo están disponibles en la IU clásica.
      • En la IU táctil se permite un solo destinatario de colocación.
    • cq:actionConfigs (tipo de nodo nt:unstructured ): define una lista de nuevas acciones que se anexan a la lista cq:actions.
    • cq:formParameters (tipo de nodo nt:unstructured ): define parámetros adicionales que se agregan al formulario de diálogo.
    • cq:inplaceEditing (tipo de nodo cq:InplaceEditingConfig ): define una configuración de edición in situ para el componente.
    • cq:listeners (tipo de nodo cq:EditListenersConfig ): define lo que sucede antes o después de que se produzca una acción en el componente.
En esta página, un nodo (propiedades y nodos secundarios) se representa como XML, como se muestra en el siguiente ejemplo.
<jcr:root xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0"
    cq:actions="[edit]"
    cq:dialogMode="floating"
    cq:layout="editbar"
    jcr:primaryType="cq:EditConfig">
    <cq:listeners
        jcr:primaryType="cq:EditListenersConfig"
        afteredit="REFRESH_PAGE"/>
</jcr:root>

Existen muchas configuraciones existentes en el repositorio. Puede buscar fácilmente propiedades específicas o nodos secundarios:
  • Para buscar una propiedad del cq:editConfig nodo, p. ej. cq:actions , puede utilizar la herramienta Consulta en CRXDE Lite y buscar con la siguiente cadena de consulta XPath:
    //element(cq:editConfig, cq:EditConfig)[@cq:actions]
  • Para buscar un nodo secundario de cq:editConfig , por ejemplo, puede buscar cq:dropTargets , que es de tipo cq:DropTargetConfig ; puede utilizar la herramienta Consulta en​ CRXDE Lite y buscar con la siguiente cadena de consulta XPath:
    //element(cq:dropTargets, cq:DropTargetConfig)

Configuración con propiedades cq:EditConfig

cq:acciones

La cq:actions propiedad ( String array ) define una o varias acciones que se pueden realizar en el componente. Los siguientes valores están disponibles para la configuración:
Valor de propiedad Descripción
text:<some text> Muestra el valor de texto estático <texto> Solo visible en la IU clásica. La IU táctil no muestra acciones en un menú contextual, por lo que esto no es aplicable.
- Añade un espaciador. Solo visible en la IU clásica. La IU táctil no muestra acciones en un menú contextual, por lo que esto no es aplicable.
edit Añade un botón para editar el componente.
editannotate Añade un botón para editar el componente y permitir anotaciones .
delete Añade un botón para eliminar el componente
insert Añade un botón para insertar un componente nuevo antes del actual
copymove Añade un botón para copiar y cortar el componente.
La siguiente configuración agrega un botón de edición, un espaciador, un botón de eliminación y un botón de inserción a la barra de edición de componentes:
<jcr:root xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0"
    cq:actions="[edit,-,delete,insert]"
    cq:layout="editbar"
    jcr:primaryType="cq:EditConfig"/>

La siguiente configuración agrega el texto "Configuraciones heredadas de Base Framework" a la barra de edición de componentes:
<jcr:root xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0"
    cq:actions="[text:Inherited Configurations from Base Framework]"
    cq:layout="editbar"
    jcr:primaryType="cq:EditConfig"/>

cq:layout (solo IU clásica)

La cq:layout propiedad ( String ) define cómo se puede editar el componente en la IU clásica. Están disponibles los siguientes valores:
Valor de propiedad Descripción
rollover Valor predeterminado. Se puede acceder a la edición de componentes "al pasar el ratón sobre" mediante clics o menús contextuales. Para uso avanzado, tenga en cuenta que el objeto de cliente correspondiente es: CQ.wcm.EditRollover .
editbar Se puede acceder a la edición de componentes a través de una barra de herramientas. Para uso avanzado, tenga en cuenta que el objeto de cliente correspondiente es: CQ.wcm.EditBar .
auto La opción se deja en el código del cliente.
Los conceptos de rollover y barra de edición no se aplican en la IU táctil.
La siguiente configuración agrega un botón de edición a la barra de edición de componentes:
<jcr:root xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0"
    cq:actions="[edit]"
    cq:layout="editbar"
    jcr:primaryType="cq:EditConfig">
</jcr:root>

cq:dialogMode (solo IU clásica)

El componente se puede vincular a un cuadro de diálogo de edición. La cq:dialogMode propiedad ( String ) define cómo se abrirá el cuadro de diálogo del componente en la IU clásica. Están disponibles los siguientes valores:
Valor de propiedad Descripción
floating El cuadro de diálogo está flotando.
inline (valor predeterminado). El cuadro de diálogo está anclado sobre el componente.
auto Si el ancho del componente es menor que el valor del lado del cliente, el cuadro de diálogo está flotando; de lo contrario, está en línea. CQ.themes.wcm.EditBase.INLINE_MINIMUM_WIDTH
En la IU táctil, los cuadros de diálogo siempre flotan en modo de escritorio y se abren automáticamente como pantalla completa en dispositivos móviles.
La siguiente configuración define una barra de edición con un botón de edición y un cuadro de diálogo flotante:
<jcr:root xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0"
    cq:actions="[edit]"
    cq:dialogMode="floating"
    cq:layout="editbar"
    jcr:primaryType="cq:EditConfig">
</jcr:root>

cq:emptyText

La cq:emptyText propiedad ( String ) define el texto que se muestra cuando no hay contenido visual presente. El valor predeterminado es: Drag components or assets here .

cq:inherit

La cq:inherit propiedad ( boolean ) define si los valores que faltan se heredan del componente del que se hereda. El valor predeterminado es false .

dialogLayout

La dialogLayout propiedad define cómo se debe abrir un cuadro de diálogo de forma predeterminada.
  • Un valor de fullscreen abre el cuadro de diálogo en pantalla completa.
  • Un valor vacío o ausencia de la propiedad tiene el valor predeterminado de abrir el cuadro de diálogo normalmente.
  • Tenga en cuenta que el usuario siempre puede alternar el modo de pantalla completa dentro del cuadro de diálogo.
  • No se aplica a la IU clásica.

Configuración con los nodos secundarios cq:EditConfig

cq:dropTargets

El cq:dropTargets nodo (tipo de nodo nt:unstructured ) define una lista de destinatarios de colocación que pueden aceptar una colocación de un recurso arrastrado desde el buscador de contenido. Sirve como una colección de nodos de tipo cq:DropTargetConfig .
Los destinatarios de colocación múltiples solo están disponibles en la IU clásica.
En la IU táctil solo se utilizará el primer destinatario.
Cada nodo secundario del tipo cq:DropTargetConfig define un destinatario de colocación en el componente. El nombre del nodo es importante porque debe usarse en JSP, como se indica a continuación, para generar el nombre de clase CSS asignado al elemento DOM que es el destinatario de colocación efectivo:
<drop target css class> = <drag and drop prefix> + 
 <node name of the drop target in the edit configuration>

La propiedad Java <*drag and drop prefix*> define:
com.day.cq.wcm.api.components.DropTarget.CSS_CLASS_PREFIX .
Por ejemplo, el nombre de clase se define de la siguiente manera en el JSP del componente Descargar ( /libs/foundation/components/download/download.jsp ), donde file es el nombre del nodo del destinatario de colocación en la configuración de edición del componente Descargar:
String ddClassName = DropTarget.CSS_CLASS_PREFIX + "file";
El nodo de tipo cq:DropTargetConfig debe tener las siguientes propiedades:
Nombre de propiedad Valor de propiedad
accept Regex aplicado al tipo de MIME del recurso para validar si se permite la colocación.
groups Matriz de grupos destinatarios de colocación. Cada grupo debe coincidir con el tipo de grupo definido en la extensión de Content Finder y que se adjunta a los recursos.
propertyName Nombre de la propiedad que se actualizará después de una colocación válida.
La siguiente configuración se toma del componente Descargar. Permite que cualquier recurso (el tipo mime puede ser cualquier cadena) del media grupo se suelte del buscador de contenido en el componente. Tras la colocación, se fileReference actualiza la propiedad del componente:
    <cq:dropTargets jcr:primaryType="nt:unstructured">
        <file
            jcr:primaryType="cq:DropTargetConfig"
            accept="[.*]"
            groups="[media]"
            propertyName="./fileReference"/>
    </cq:dropTargets>

cq:actionConfigs (solo IU clásica)

El cq:actionConfigs nodo (tipo de nodo nt:unstructured ) define una lista de nuevas acciones que se anexan a la lista definida por la cq:actions propiedad. Cada nodo secundario de cq:actionConfigs define una nueva acción mediante la definición de una utilidad.
La siguiente configuración de ejemplo define un botón nuevo (con un separador para la IU clásica):
  • un separador, definido por xtype tbseparator ;
    • Solo lo utiliza la IU clásica.
    • La IU táctil ignora esta definición, ya que se omiten los xtype (y los separadores no son necesarios porque la barra de herramientas de acción se construye de forma diferente en la IU táctil).
  • un botón llamado Administrar comentarios que ejecuta la función de controlador CQ_collab_forum_openCollabAdmin() .
<jcr:root xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0" xmlns:nt="https://www.jcp.org/jcr/nt/1.0"
    cq:actions="[EDIT,COPYMOVE,DELETE,INSERT]"
    jcr:primaryType="cq:EditConfig">
    <cq:actionConfigs jcr:primaryType="nt:unstructured">
        <separator0
            jcr:primaryType="nt:unstructured"
            xtype="tbseparator"/>
        <manage
            jcr:primaryType="nt:unstructured"
            handler="function(){CQ_collab_forum_openCollabAdmin();}"
            text="Manage comments"/>
    </cq:actionConfigs>
</jcr:root>

Consulte Añadir nueva acción en una barra de herramientas de componentes como ejemplo para la IU táctil.

cq:formParameters

El cq:formParameters nodo (tipo de nodo nt:unstructured ) define parámetros adicionales que se agregan al formulario de diálogo. Cada propiedad se asigna a un parámetro de formulario.
La siguiente configuración agrega un parámetro llamado name , establecido con el valor photos/primary en el formulario de diálogo:
    <cq:formParameters
        jcr:primaryType="nt:unstructured"
        name="photos/primary"/>

cq:inplaceEditing

El cq:inplaceEditing nodo (tipo de nodo cq:InplaceEditingConfig ) define una configuración de edición in-situ para el componente. Puede tener las siguientes propiedades:
Nombre de propiedad Valor de propiedad
active ( boolean ) True para activar la edición in situ del componente.
configPath ( String ) Ruta de la configuración del editor. La configuración se puede especificar mediante un nodo de configuración.
editorType
( String ) Tipo de editor. Los tipos disponibles son:
  • texto sin formato: para utilizarse en contenido que no sea HTML.
  • title: es un editor de texto sin formato mejorado que convierte los títulos gráficos en un texto sin formato antes de comenzar la edición. Utilizado por el componente de título Geometrixx.
  • text: para utilizarse en contenido HTML (utiliza el Editor de texto enriquecido).
La siguiente configuración habilita la edición in situ del componente y define plaintext como el tipo de editor:
    <cq:inplaceEditing
        jcr:primaryType="cq:InplaceEditingConfig"
        active="{Boolean}true"
        editorType="plaintext"/>

cq:oyentes

El cq:listeners nodo (tipo de nodo cq:EditListenersConfig ) define lo que sucede antes o después de una acción en el componente. La tabla siguiente define sus posibles propiedades.
Nombre de propiedad Valor de propiedad
Valor predeterminado
(Solo IU clásica)
beforedelete El controlador se activa antes de eliminar el componente.
beforeedit El controlador se activa antes de editar el componente.
beforecopy El controlador se activa antes de que se copie el componente.
beforemove El controlador se activa antes de mover el componente.
beforeinsert El controlador se activa antes de insertar el componente. Solo funciona para la IU táctil.
beforechildinsert El controlador se activa antes de que el componente se inserte dentro de otro componente (solo contenedores).
afterdelete El controlador se activa después de eliminar el componente. REFRESH_SELF
afteredit El controlador se activa después de editar el componente. REFRESH_SELF
aftercopy El controlador se activa después de copiar el componente. REFRESH_SELF
afterinsert El controlador se activa después de insertar el componente. REFRESH_INSERTED
aftermove El controlador se activa después de mover el componente. REFRESH_SELFMOVED
afterchildinsert El controlador se activa después de insertar el componente dentro de otro componente (solo contenedores).
Los controladores REFRESH_INSERTED y REFRESH_SELFMOVED solo están disponibles en la IU clásica.
Los valores predeterminados para los oyentes solo se establecen en la IU clásica.
En el caso de los componentes anidados, existen ciertas restricciones en acciones definidas como propiedades en el cq:listeners nodo:
  • Para los componentes anidados, los valores de las siguientes propiedades deben ser REFRESH_PAGE : >
  • aftermove
  • aftercopy
El controlador de evento se puede implementar con una implementación personalizada. Por ejemplo (donde project.customerAction es un método estático):
afteredit = "project.customerAction"
El siguiente ejemplo equivale a la configuración REFRESH_INSERTED :
afterinsert="function(path, definition) { this.refreshCreated(path, definition); }"
Para ver qué parámetros se pueden utilizar en la IU clásica, consulte la sección before<action> y after<action> eventos de la documentación de la y la CQ.wcm.EditRollover utilidad.
Con la siguiente configuración, la página se actualiza después de eliminar, editar, insertar o mover el componente:
    <cq:listeners
        jcr:primaryType="cq:EditListenersConfig"
        afterdelete="REFRESH_PAGE"
        afteredit="REFRESH_PAGE"
        afterinsert="REFRESH_PAGE"
        afterMove="REFRESH_PAGE"/>