Desarrollo de componentes de Adobe Experience Manager AEM () (IU clásica) developing-aem-components-classic-ui

Con CRXDE Lite, cree una carpeta de componentes en:

/ apps/<myProject>/components/<myComponent>

Vuelva a crear la estructura del nodo como en las bibliotecas y, a continuación, copie la definición de un componente existente, como el componente Texto. Por ejemplo, para personalizar la copia del componente Texto:

• de /libs/foundation/components/text
• hasta /apps/myProject/components/text

Modifique jcr:title para reflejar su nuevo nombre.

Abra la nueva carpeta de componentes y realice los cambios necesarios. Elimine también la información superflua de la carpeta.

Puede realizar cambios como los siguientes:

• adición de un campo en el cuadro de diálogo

  • cq:dialog - cuadro de diálogo para la IU táctil
  • dialog - cuadro de diálogo para la IU clásica

• reemplazando el archivo .jsp (asígnele el nombre después del nuevo componente)

• o reprocesamiento completo de todo el componente si lo desea

Por ejemplo, si toma una copia del componente Texto estándar, puede agregar un campo adicional al cuadro de diálogo y, a continuación, actualizar .jsp para procesar la entrada realizada allí.

Uno de los siguientes nodos debe estar presente e inicializarse correctamente para que aparezca el nuevo componente:

• cq:dialog - cuadro de diálogo para la IU táctil
• dialog - cuadro de diálogo para la IU clásica
• cq:editConfig: comportamiento de los componentes en el entorno de edición (por ejemplo, arrastrar y soltar)
• design_dialog: cuadro de diálogo para el modo de diseño (solo IU clásica)

Active el nuevo componente en el sistema de párrafos mediante:

• usando el CRXDE Lite para agregar el valor <path-to-component> (por ejemplo, /apps/geometrixx/components/myComponent) a los componentes de propiedad del nodo /etc/designs/geometrixx/jcr:content/contentpage/par
• siguiendo las instrucciones de Agregar nuevos componentes a los sistemas de párrafos

AEM En WCM, abra una página en el sitio web e inserte un párrafo del tipo que ha creado para asegurarse de que el componente funciona correctamente.

Obtenga acceso a una página del entorno de creación que usa el sistema de párrafos, por ejemplo, <contentPath>/Test.html.

Cambie al modo Diseño mediante una de las siguientes opciones:

• agregando ?wcmmode=design al final de la dirección URL y obteniendo acceso de nuevo, por ejemplo:

  <contextPath>/ Test.html?wcmmode=design

• haciendo clic en Diseño en Sidekick

Ahora se encuentra en modo de diseño y puede editar el sistema de párrafos.

Haga clic en Editar.

Se mostrará una lista de los componentes que pertenecen al sistema de párrafos. El nuevo componente también aparece en la lista.

Los componentes se pueden activar (o desactivar) para determinar qué se ofrecen al autor al editar una página.

Active el componente y vuelva al modo de edición normal para confirmar que está disponible para su uso.

Copie el componente textimage estándar de /libs/foundation/components/textimage en la carpeta de componentes de Geometrixx, /apps/geometrixx/components, utilizando textimage como nombre de nodo de destino. (Copie el componente navegando hasta el componente, haciendo clic con el botón derecho y seleccionando Copiar y explorando el directorio de destino).

Para que este ejemplo sea sencillo, vaya al componente que ha copiado y elimine todos los subnodos del nuevo nodo textimage, excepto los siguientes:

• definición del cuadro de diálogo: textimage/dialog
• script de componente: textimage/textimage.jsp
• editar el nodo de configuración (permitiendo arrastrar y soltar recursos): textimage/cq:editConfig

Edite los metadatos del componente:

• Nombre del componente

  • Establecer jcr:description en Text Image Component (Extended)
  • Establecer jcr:title en Text Image (Extended)

• Grupo, donde el componente aparece en la barra de tareas (dejar tal cual)

  • Dejar componentGroup establecido en General

• Componente principal para el nuevo componente (el componente estándar textimage)

  • Establecer sling:resourceSuperType en foundation/components/textimage

Después de este paso, el nodo de componente tiene este aspecto:

Cambie la propiedad sling:resourceType del nodo de configuración de edición de la imagen (propiedad: textimage/cq:editConfig/cq:dropTargets/image/parameters/sling:resourceType) a geometrixx/components/textimage.

De este modo, cuando se coloque una imagen en el componente de la página, la propiedad sling:resourceType del componente textimage extendido se establecerá en: geometrixx/components/textimage.

Modifique el cuadro de diálogo del componente para incluir la nueva opción. El nuevo componente hereda las partes del cuadro de diálogo que son las mismas que en el original. La única adición que hace es ampliar la ficha Avanzado, agregando una lista desplegable de Posición de la imagen, con las opciones Izquierda y Derecha:

• No modifique las propiedades textimage/dialog.

Observe cómo textimage/dialog/items tiene cuatro subnodos, tab1 a tab4, que representan las cuatro fichas del cuadro de diálogo textimage.

• Para las dos primeras pestañas (tab1 y tab2):

  • Cambie xtype a cqinclude (para heredar del componente estándar).
  • Agregue una propiedad path con los valores /libs/foundation/components/textimage/dialog/items/tab1.infinity.json y /libs/foundation/components/textimage/dialog/items/tab2.infinity.json, respectivamente.
  • Elimine todas las demás propiedades o subnodos.

• Para la pestaña 3:

  • Deje las propiedades y los subnodos sin cambios

  • Agregar una definición de campo a tab3/items, posición de nodo de tipo cq:Widget

  • Establezca las siguientes propiedades (de tipo cadena) para el nuevo nodo tab3/items/position:

    • name: ./imagePosition
    • xtype: selection
    • fieldLabel: Image Position
    • type: select

  • Agregue el subnodo position/options de tipo cq:WidgetCollection para representar las dos opciones de colocación de la imagen y, debajo de él, cree dos nodos, o1 y o2 de tipo nt:unstructured.

  • Para el nodo position/options/o1 establezca las propiedades: text en Left y value en left.

  • Para el nodo position/options/o2 establezca las propiedades: text en Right y value en right.

• Eliminar ficha4.

La posición de la imagen se mantiene en el contenido como la propiedad imagePosition del nodo que representa el párrafo textimage. Después de estos pasos, el cuadro de diálogo del componente tiene este aspecto:

Amplíe el script del componente textimage.jsp con un control adicional del nuevo parámetro:

Image image = new Image(resource, "image");

if (image.hasContent() || WCMMode.fromRequest(request) == WCMMode.EDIT) {
     image.loadStyleData(currentStyle);

Va a reemplazar el fragmento de código enfatizado %><div class="image"><% con código nuevo que genera un estilo personalizado para esta etiqueta.

// todo: add new CSS class for the 'right image' instead of using
// the style attribute
String style="";
     if (properties.get("imagePosition", "left").equals("right")) {
          style = "style=\"float:right\"";
     }
     %><div <%= style %> class="image"><%

Guarde el componente en el repositorio. El componente está listo para probarse.

Copie el componente de imagen estándar de /libs/foundation/components/image en la carpeta de componentes de Geometrixx, /apps/geometrixx/components, utilizando la imagen como nombre de nodo de destino.

Edite los metadatos del componente:

• Definir jcr:title en Image (Extended)

Navegue hasta /apps/geometrixx/components/image/dialog/items/image.

Añada una propiedad:

• Nombre: allowUpload
• Tipo: String
• Valor: false

Haga clic en Guardar todo. El componente está listo para probarse.

Abra una página en Geometrixx como Inglés/Compañía.

Cambie al modo de diseño y active Imagen (ampliada).

Vuelva al modo de edición y agréguelo al sistema de párrafos. En las siguientes imágenes, puede ver las diferencias entre el componente de imagen original y el que ha creado.

Componente de imagen original:

El nuevo componente de imagen:

El componente ya está listo para usarse.