Cuando comience a 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 de AEM estándar. Este último enfoque se complica ligeramente por el hecho de que, aunque AEM ha cambiado a una nueva interfaz de usuario estándar, moderna y con capacidad táctil, sigue siendo compatible con la IU clásica.
Esta sección trata los conceptos y problemas clave como una introducción a los detalles necesarios para desarrollar sus propios componentes.
Antes de empezar a configurar o codificar realmente su componente, debe preguntar:
Antes de comenzar una conversación seria sobre el desarrollo de componentes, debe saber qué IU utilizarán sus autores:
Consulte Interfaz de interfaz de usuario de Recommendations para clientes para obtener más información.
Se pueden implementar componentes para admitir la IU táctil, la IU clásica o ambas. 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 ambas.
Por este motivo, 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 última tecnología. Herramientas de modernización AEM puede facilitar la migración.
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 limitado intencionalmente para garantizar que se utilice un lenguaje de programación real para definir la lógica empresarial 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 diferentes vistas del mismo componente.
HTL es un lenguaje de plantilla HTML introducido con AEM 6.0.
Debate sobre la conveniencia de utilizar HTL o JSP (Java Server Pages) cuando desarrolle sus propios componentes deberían ser simples, ya que HTL es ahora el lenguaje de secuencias de comandos recomendado para AEM.
Tanto HTL como JSP pueden utilizarse para desarrollar componentes tanto para la IU clásica como para la táctil. Aunque puede haber una tendencia a suponer que HTL solo es 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 periodo. Dado que HTL es ahora el idioma recomendado, se utiliza para componentes nuevos, que tienden a ser para la IU táctil.
Las excepciones son campos de formulario de base de Granite UI (como se utiliza en los cuadros de diálogo). Estos todavía requieren el uso de JSP.
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 aprender a crear sus propios componentes y añadirlos al sistema de párrafos, consulte:
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 autor 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.
Página:
cq:Page
).Sistemas de párrafos:
parsys
, [responsivegrid](/docs/experience-manager-65/sites-authoring/responsive-layout.md)
).La estructura de un componente AEM es potente y flexible, y las principales consideraciones son:
Un elemento clave de la estructura es el tipo de recurso.
Esta es una abstracción que ayuda a garantizar que, incluso cuando la apariencia cambie con el tiempo, la intención se mantenga en el tiempo.
La definición de un componente se puede desglosar de la siguiente manera:
AEM componentes se basan en Sling.
AEM componentes se encuentran (normalmente) en:
/libs/wcm/foundation/components
/libs/foundation/components
Los componentes específicos del proyecto/sitio se encuentran (generalmente) en:
/apps/<myApp>/components
AEM componentes estándar se definen como cq:Component
y que tengan los elementos clave:
propiedades de jcr:
Una lista de las propiedades de 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 variable cq:Component
definición
Medios:
Definen los elementos estáticos utilizados por el componente.
Scripts:
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 se enumera en el navegador de componentes o en la barra de tareas.
jcr:description
- Descripción del componente; se puede utilizar como indicio de pase de ratón en el navegador de componentes o la barra de tareas.
IU clásica:
icon.png
- Icono para este componente.thumbnail.png
- Imagen mostrada 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 explorador 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 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 o editar contenido.cq:design_dialog
( nt:unstructured
): edición de diseño para este componenteIU clásica:
dialog
( cq:Dialog
): cuadro de diálogo para este componente. Define la interfaz que permite al usuario configurar el componente o editar contenido.design_dialog
( cq:Dialog
): edición de diseño para este componente.El icono o la abreviatura del componente se definen mediante las propiedades JCR del componente cuando el desarrollador crea el componente. Estas propiedades se evalúan en el siguiente orden y se utiliza la primera propiedad válida encontrada.
cq:icon
- Propiedad de cadena que señala a un icono estándar en la variable Biblioteca de Coral UI para mostrar en el navegador de componentes
abbreviation
- Propiedad de cadena para personalizar la abreviatura del nombre del componente en el navegador de componentes
jcr:title
propiedad.
abbreviation_commentI18n
, que luego se utiliza como indicio de traducción.cq:icon.png
o cq:icon.svg
- Icono para este componente, que se muestra en el navegador de componentes
.png
y .svg
son compatibles._cq_icon.png
o _cq_icon.svg
por ejemplo..png
toma precedencia sobre .svg
si ambas están presentesSi ninguna de las propiedades anteriores ( cq:icon
, abbreviation
, cq:icon.png
o cq:icon.svg
) se encuentran en el componente:
sling:resourceSuperType
propiedad.jcr:title
propiedad del componente actual.Para cancelar la herencia de los iconos de los supercomponentes, establezca un vacío abbreviation
en el componente volverá al comportamiento predeterminado.
La variable Consola Componentes muestra cómo se define el icono de un componente determinado.
<?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>
Muchos de los nodos o propiedades necesarios para definir un componente son comunes a ambas IU, con diferencias que 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 de tipo 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 componentes que no están disponibles para la selección desde la interfaz de usuario, como los sistemas de párrafos reales. |
cq:isContainer |
Boolean |
Indica si el componente es un componente contenedor y, por lo 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 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 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 |
Editar 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 explorador 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 explorador de componentes o la barra de tareas. Debe ser una ruta absoluta, no relativa al nodo del componente. A menos que desee reutilizar contenido que ya esté disponible en otra parte, no es obligatorio 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 script. |
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 miramos el Texto (cualquiera de las versiones), se pueden 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 de componentes dentro del navegador de componentes o la barra de tareasjcr:description
- descripción del componente; se puede utilizar como sugerencia de pase de ratón en la lista de componentes de la barra de tareassling: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 agregar controles personalizadoscq:childEditConfig
( cq:EditConfig
): controla los aspectos visuales de los componentes secundarios que no tienen sus propias definicionescq:dialog
( nt:unstructured
): define el cuadro de diálogo para editar el contenido de este componentecq:design_dialog
( nt:unstructured
): especifica las opciones de edición de diseño para este componentedialog
( 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 componenteicon.png
- archivo gráfico que se utilizará como icono para el componente en la barra de tareasthumbnail.png
- archivo gráfico que se utilizará como miniatura del componente mientras lo arrastra desde la barra de tareasLos cuadros de diálogo son un elemento clave de su componente, ya que proporcionan una interfaz para que los autores configuren y proporcionen entradas para ese componente.
Dependiendo de la complejidad del componente, su cuadro de diálogo puede necesitar una o más 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 IU:
IU táctil
cq:dialog
( nt:unstructured
) nodes:
sling:resourceType
como estructura de contenido estándar de SlinghelpPath
para definir el recurso de ayuda contextual (ruta absoluta o relativa) al que se accede al icono Ayuda (el icono ? ).
helpPath
, se muestra la dirección URL predeterminada (página de información general de la documentación).Dentro del cuadro de diálogo, se definen los campos individuales:
IU clásica
dialog
( cq:Dialog
) nodes
xtype
, que hace referencia a ExtJShelpPath
para definir el recurso de ayuda contextual (ruta absoluta o relativa) al que se accede cuando se usa la variable Ayuda está seleccionado.
helpPath
, se muestra la dirección URL predeterminada (página de información general de la documentación).Dentro del cuadro de diálogo, se definen los campos individuales:
Dentro de un cuadro de diálogo clásico:
cq:Dialog
, que proporcionará una sola ficha, como en el componente de texto, o si necesita varias pestañas, como con el componente de textimage, el cuadro de diálogo se puede definir como cq:TabPanel
.cq:WidgetCollection
( items
) se utiliza para proporcionar una base para cualquiera de los campos de entrada ( cq:Widget
) o pestañas posteriores ( cq:Widget
). Esta jerarquía se puede ampliar.Los cuadros de diálogo de diseño son muy similares a los cuadros de diálogo utilizados para editar y configurar contenido, pero proporcionan la interfaz para que los autores configuren y proporcionen detalles de diseño para ese componente.
Los cuadros de diálogo Diseño están disponibles en el modo Diseño, aunque no son necesarios para todos los componentes, por ejemplo Título y 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 (desde el navegador de componentes o la barra de tareas) en la página.
Una vez definido un componente, debe estar disponible para su uso. Para que un componente esté disponible para su uso en un sistema de párrafos, puede:
Apertura Modo de diseño para una página y habilite el componente requerido.
Agregue los componentes necesarios al components
de la definición de la plantilla en:
/etc/designs/<*yourProject*>/jcr:content/<*yourTemplate*>/par
Por ejemplo, consulte:
/etc/designs/geometrixx/jcr:content/contentpage/par
Si creamos y configuramos una instancia de la variable Título en la página: <content-path>/Prototype.html
IU táctil
IU clásica
A continuación, podemos ver la estructura del contenido creado dentro del repositorio:
En concreto, 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, esto genera la propiedad jcr:title
contiene el contenido del autor.
Las propiedades definidas dependen de las definiciones individuales. Aunque pueden ser más complejos que arriba, siguen los mismos principios básicos.
Los componentes dentro de AEM están sujetos a tres jerarquías diferentes:
Jerarquía de tipo de recurso
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.
Jerarquía de contenedores
Se utiliza para rellenar los ajustes de configuración en el componente secundario y se utiliza más comúnmente en un escenario de parsys.
Por ejemplo, los ajustes de configuración de los botones de la barra de edición, el diseño del conjunto de controles (barras de edición, desplazamiento) y el diseño del cuadro de diálogo (en línea, flotante) se pueden definir en el componente principal y propagarse a los componentes secundarios.
Ajustes de configuración (relacionados con la funcionalidad de edición) en cq:editConfig
y cq:childEditConfig
se propagan.
Incluir jerarquía
Esto se impone en tiempo de ejecución por la secuencia de inclusiones.
Esta jerarquía la utiliza el Diseñador, que a su vez actúa como base para varios aspectos de diseño de la renderización; incluyendo información de diseño, información css, los componentes disponibles en un parsys, entre otros.
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 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 añadiendo un cq:editConfig
nodo de tipo cq:EditConfig
debajo del nodo del componente (de tipo cq:Component
) y añadiendo propiedades específicas y nodos secundarios. Están disponibles las siguientes propiedades y nodos secundarios:
cq:editConfig
propiedades de nodo:
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
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
nodos secundarios:
cq:dropTargets
(tipo de nodo nt:unstructured
): define una lista de destinos de colocación que pueden aceptar una colocación de un recurso del buscador de contenido
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>
Hay muchas configuraciones existentes en el repositorio. Puede buscar fácilmente propiedades específicas o nodos secundarios:
Para buscar una propiedad de la variable cq:editConfig
nodo, p. ej. cq:actions
, puede utilizar la herramienta Consulta en CRXDE Lite y busque 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)
Los componentes siempre deben representar algún HTML que sea visible para el autor, incluso cuando el componente no tenga contenido. De lo contrario, podría desaparecer visualmente de la interfaz del editor, haciendo que esté técnicamente presente pero invisible en la página y en el editor. En tal caso, los autores no podrán seleccionar ni interactuar con el componente vacío.
Por este motivo, los componentes deben representar un marcador de posición siempre que no muestren ningún resultado visible cuando la página se procese en el editor de páginas (cuando el modo WCM sea edit
o preview
).
El marcado de HTML típico de un marcador de posición es el siguiente:
<div class="cq-placeholder" data-emptytext="Component Name"></div>
El script HTL típico que procesa el HTML de marcador de posición anterior es el siguiente:
<div class="cq-placeholder" data-emptytext="${component.properties.jcr:title}"
data-sly-test="${(wcmmode.edit || wcmmode.preview) && isEmpty}"></div>
En el ejemplo anterior, isEmpty
es una variable que solo es verdadera cuando el componente no tiene contenido y es invisible para el autor.
Para evitar la repetición, Adobe recomienda que los implementadores de componentes utilicen una plantilla HTL para estos marcadores de posición. como el proporcionado por los componentes principales.
El uso de la plantilla en el vínculo anterior se realiza con la siguiente línea de HTL:
<sly data-sly-use.template="core/wcm/components/commons/v1/templates.html"
data-sly-call="${template.placeholder @ isEmpty=!model.text}"></sly>
En el ejemplo anterior, model.text
es la variable que solo tiene el valor "True" cuando el contenido tiene contenido y es visible.
Se puede ver un ejemplo de uso de esta plantilla en los componentes principales, como en el componente Título.
La variable cq:actions
propiedad ( String array
) define una o varias acciones que se pueden realizar en el componente. Los siguientes valores están disponibles para su configuración:
Valor de propiedad | Descripción |
text:<some text> |
Muestra el valor de texto estático <some text=""> Solo visible en la IU clásica. La IU táctil no muestra acciones en un menú contextual, por lo que no es aplicable. |
- | Agrega un separador. Solo visible en la IU clásica. La IU táctil no muestra acciones en un menú contextual, por lo que no es aplicable. |
edit |
Agrega un botón para editar el componente. |
editannotate |
Añade un botón para editar el componente, así como para permitir anotaciones. |
delete |
Añade un botón para eliminar el componente |
insert |
Agrega un botón para insertar un componente nuevo antes del componente actual |
copymove |
Agrega un botón para copiar y cortar el componente. |
La configuración siguiente añade un botón de edición, un separador, una 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 la estructura base" 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"/>
La variable cq:layout
propiedad ( String
) define cómo se puede editar el componente en la IU clásica. Los valores disponibles son los siguientes:
Valor de propiedad | Descripción |
rollover |
Valor predeterminado. Se puede acceder a la edición de componentes "al pasar el ratón" mediante clics o el menú contextual. Para un uso avanzado, tenga en cuenta que el objeto 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 un uso avanzado, tenga en cuenta que el objeto cliente correspondiente es: CQ.wcm.EditBar . |
auto |
La opción se deja en el código del lado del cliente. |
Los conceptos de sustitución y barra de edición no se aplican en la IU táctil.
La configuración siguiente añade 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>
El componente se puede vincular a un cuadro de diálogo de edición. La variable cq:dialogMode
propiedad ( String
) define cómo se abrirá el cuadro de diálogo del componente en la IU clásica. Los valores disponibles son los siguientes:
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 del lado del cliente CQ.themes.wcm.EditBase.INLINE_MINIMUM_WIDTH , el cuadro de diálogo está flotando; de lo contrario, está en línea. |
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 configuración siguiente 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>
La variable 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
.
La variable cq:inherit
propiedad ( boolean
) define si los valores que faltan se heredan del componente del que se hereda. Su valor predeterminado es false
.
La variable dialogLayout
define cómo se debe abrir un cuadro de diálogo de forma predeterminada.
fullscreen
abre el cuadro de diálogo en pantalla completa.La variable cq:dropTargets
nodo (tipo de nodo) nt:unstructured
) define una lista de destinos de colocación que pueden aceptar una colocación desde un recurso arrastrado desde el buscador de contenido. Sirve como una colección de nodos de tipo cq:DropTargetConfig
.
Los objetivos de colocación múltiple solo están disponibles en la IU clásica.
En la IU táctil solo se utilizará el primer destino.
Cada nodo secundario del tipo cq:DropTargetConfig
define un destino de colocación en el componente. El nombre del nodo es importante porque debe usarse en el JSP, como se indica a continuación, para generar el nombre de clase CSS asignado al elemento DOM que es el destino de colocación efectivo:
<drop target css class> = <drag and drop prefix> +
<node name of the drop target in the edit configuration>
La variable <drag and drop prefix>
está definido por la propiedad Java:
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 de descarga ( /libs/foundation/components/download/download.jsp
), donde file
es el nombre del nodo del destino de la 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 de destino de colocación. Cada grupo debe coincidir con el tipo de grupo definido en la extensión del buscador de contenido y que está adjunto 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. Habilita cualquier recurso (el tipo mime puede ser cualquier cadena) desde la variable media
del buscador de contenido al componente. Después de la colocación, la propiedad del componente fileReference
se está actualizando:
<cq:dropTargets jcr:primaryType="nt:unstructured">
<file
jcr:primaryType="cq:DropTargetConfig"
accept="[.*]"
groups="[media]"
propertyName="./fileReference"/>
</cq:dropTargets>
La variable cq:actionConfigs
nodo (tipo de nodo) nt:unstructured
) define una lista de nuevas acciones que se adjuntan a la lista definida por la variable cq:actions
propiedad. Cada nodo secundario de cq:actionConfigs
define una nueva acción definiendo un widget.
La siguiente configuración de ejemplo define un nuevo botón (con un separador para la IU clásica):
un separador, definido por xtype tbseparator
;
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 a una barra de herramientas de componentes como ejemplo para la IU táctil.
La variable cq:formParameters
nodo (tipo de nodo) nt:unstructured
) define parámetros adicionales que se agregan al formulario de diálogo. Cada propiedad está asignada a un parámetro de formulario.
La siguiente configuración añade un parámetro denominado name
, configurado con el valor photos/primary
al formulario de diálogo:
<cq:formParameters
jcr:primaryType="nt:unstructured"
name="photos/primary"/>
La variable 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 habilitar 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 |
(
|
La siguiente configuración habilita la edición in situ del componente y define plaintext
como tipo de editor:
<cq:inplaceEditing
jcr:primaryType="cq:InplaceEditingConfig"
active="{Boolean}true"
editorType="plaintext"/>
La variable 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 que se elimine 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 que se inserte el componente. Solo es operativo 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 que el componente se inserte dentro de otro componente (solo contenedores). |
La variable REFRESH_INSERTED
y REFRESH_SELFMOVED
Los controladores 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 las acciones definidas como propiedades en la variable cq:listeners
nodo:
REFRESH_PAGE
: >
aftermove
aftercopy
El controlador de eventos se puede implementar con una implementación personalizada. Por ejemplo, donde project.customerAction
es un método estático):
afteredit = "project.customerAction"
El ejemplo siguiente es equivalente al REFRESH_INSERTED
configuración:
afterinsert="function(path, definition) { this.refreshCreated(path, definition); }"
Para ver qué parámetros se pueden utilizar en los controladores de la IU clásica, consulte la before<action>
y after<action>
de la sección CQ.wcm.EditBar
y CQ.wcm.EditRollover
documentación del widget.
Con la siguiente configuración, la página se actualiza después de que el componente se haya eliminado, editado, insertado o movido:
<cq:listeners
jcr:primaryType="cq:EditListenersConfig"
afterdelete="REFRESH_PAGE"
afteredit="REFRESH_PAGE"
afterinsert="REFRESH_PAGE"
afterMove="REFRESH_PAGE"/>