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

Con CRXDE Lite, cree una nueva carpeta de componentes en:

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

Vuelva a crear la estructura de nodos 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 el jcr:title para reflejar su nuevo nombre.

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

Puede realizar cambios como:

• adición de un nuevo 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 a .jsp (asígnele el nombre de su nuevo componente)

• o retrabajando completamente 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 el .jsp para procesar los datos introducidos allí.

Uno de los siguientes nodos debe estar presente y adecuadamente inicializado 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 - cómo se comportan 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:

• uso del 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
• siga las instrucciones indicadas en Adición de nuevos componentes a sistemas de párrafos

En AEM WCM, abra una página de su sitio web e inserte un nuevo párrafo del tipo que acaba de crear para asegurarse de que el componente funciona correctamente.

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

Cambie al modo Diseño mediante:

• adición ?wcmmode=design hasta el final de la dirección URL y volver a acceder, por ejemplo:

  <contextPath>/ Test.html?wcmmode=design

• hacer clic en Diseño en la barra de tareas

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

Haga clic en Editar.

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

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

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

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

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

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

Edite los metadatos del componente:

• Nombre del componente

  • Establezca jcr:description a Text Image Component (Extended)
  • Establezca jcr:title a Text Image (Extended)

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

  • Leave componentGroup configure como General

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

  • Establezca sling:resourceSuperType a foundation/components/textimage

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

Cambie el sling:resourceType propiedad 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 suelta una imagen en el componente de la página, la variable sling:resourceType la propiedad del componente de textimage extendido se establece 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 iguales a las del original. La única adición que hacemos es ampliar el Avanzadas , agregar Posición de la imagen lista desplegable, con opciones Left y Right:

• Deje el textimage/dialogpropiedades sin modificar.

Tenga en cuenta cómo textimage/dialog/items tiene cuatro subnodos, tab1 a tab4, que representan las cuatro pestañas del cuadro de diálogo textimage.

• Para las dos primeras pestañas (pestaña 1 y pestaña 2):

  • Cambie xtype por cqinclude (para heredar del componente estándar).
  • Agregar una propiedad de ruta con valores /libs/foundation/components/textimage/dialog/items/tab1.infinity.jsony /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

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

  • Establezca las siguientes propiedades (de tipo String) para la nueva tab3/items/positionnodo:

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

  • Añadir subnodo position/options de tipo cq:WidgetCollection para representar las dos opciones de colocación de imagen y, en él, cree dos nodos, o1 y o2 de tipo nt:unstructured.

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

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

• Eliminar ficha4.

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

Amplíe el script de componente, textimage.jsp, con gestión adicional del nuevo parámetro:

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

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

Vamos a reemplazar el fragmento de código enfatizado %><div class="image"><% con el nuevo código 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.

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

Edite los metadatos del componente:

• Establezca jcr:title a Image (Extended)

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

Añadir una nueva 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/Empresa.

Cambie al modo de diseño y active Image (Extended).

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 acaba de crear.

Componente de imagen original:

El nuevo componente de imagen:

El componente ya está listo para utilizarse.