Conceptos básicos de componentes

En este capítulo analizaremos la tecnología subyacente de un componente de Adobe Experience Manager (AEM) Sites a través de un sencillo ejemplo HelloWorld. Se realizarán pequeñas modificaciones en un componente existente que cubrirá temas como la creación, HTL, modelos Sling y bibliotecas del lado del cliente.

Requisitos previos

Revise las herramientas e instrucciones necesarias para configurar un entorno de desarrollo local.

El IDE utilizado en los vídeos es Visual Studio Code y el complemento VSCode AEM Sync.

Objetivo

  1. Aprenda la función de las plantillas HTL y los modelos Sling para procesar HTML de forma dinámica.
  2. Comprender cómo se utilizan los cuadros de diálogo para facilitar la creación de contenido.
  3. Conozca los conceptos básicos de las bibliotecas del lado del cliente para incluir CSS y JavaScript para admitir un componente.

Qué va a generar

En este capítulo realizará varias modificaciones en un componente HelloWorld muy sencillo. En el proceso de hacer actualizaciones del componente HelloWorld, aprenderá las áreas clave del desarrollo de AEM componente.

Proyecto de inicio de capítulo

Este capítulo se basa en un proyecto genérico generado por el AEM tipo de archivo del proyecto. Vea el siguiente vídeo y revise los requisitos previos para empezar.

NOTA

Si ha completado correctamente el capítulo anterior, puede volver a utilizar el proyecto y omitir los pasos para extraer el proyecto de inicio.

Abra un nuevo terminal de línea de comandos y realice las siguientes acciones.

  1. En un directorio vacío, clone el repositorio aem-guides-wknd:

    $ git clone git@github.com:adobe/aem-guides-wknd.git --branch tutorial/component-basics-start --single-branch
    
    NOTA

    Opcionalmente, puede seguir utilizando el proyecto generado en el capítulo anterior, Configuración del proyecto.

  2. Vaya a la carpeta aem-guides-wknd .

    $ cd aem-guides-wknd
    
  3. Cree e implemente el proyecto en una instancia local de AEM con el siguiente comando:

    $ mvn clean install -PautoInstallSinglePackage
    
    NOTA

    Si utiliza AEM 6.5 o 6.4, anexe el perfil classic a cualquier comando Maven.

    $ mvn clean install -PautoInstallSinglePackage -Pclassic
    
  4. Importe el proyecto en su IDE preferido siguiendo las instrucciones para configurar un entorno de desarrollo local.

Creación de componentes

Los componentes se pueden considerar pequeños componentes modulares de una página web. Para reutilizar componentes, estos deben ser configurables. Esto se logra mediante el cuadro de diálogo de creación. A continuación, crearemos un componente simple e inspeccionaremos cómo se mantienen los valores del cuadro de diálogo en AEM.

A continuación se muestran los pasos de alto nivel realizados en el vídeo anterior.

  1. Cree una nueva página con el nombre Conceptos básicos de componentes debajo de Sitio WKND > EE.UU. > es.
  2. Añada el Hello World Component a la página recién creada.
  3. Abra el cuadro de diálogo del componente e introduzca texto. Guarde los cambios para ver el mensaje que aparece en la página.
  4. Cambie al modo de desarrollador y vea la Ruta de contenido en CRXDE-Lite e inspeccione las propiedades de la instancia de componente.
  5. Utilice CRXDE-Lite para ver el script cq:dialog y helloworld.html ubicado en /apps/wknd/components/content/helloworld.

HTL (lenguaje de plantilla HTML) y cuadros de diálogo

El lenguaje de plantilla HTML o HTL es un lenguaje de plantilla ligero del lado del servidor que utilizan los componentes de AEM para procesar contenido.

​Los cuadros de diálogo definen las configuraciones disponibles que se pueden realizar para un componente.

A continuación, actualizaremos el script HTL HelloWorld para mostrar un saludo adicional antes del mensaje de texto.

A continuación se muestran los pasos de alto nivel realizados en el vídeo anterior.

  1. Cambie al IDE y abra el proyecto en el módulo ui.apps.

  2. Abra el archivo helloworld.html y realice un cambio en el código HTML Markup.

  3. Utilice las herramientas IDE como VSCode AEM Sync para sincronizar el cambio de archivo con la instancia de AEM local.

  4. Vuelva al explorador y observe que el procesamiento del componente ha cambiado.

  5. Abra el archivo .content.xml que define el cuadro de diálogo para el componente HelloWorld en:

    <code>/aem-guides-wknd/ui.apps/src/main/content/jcr_root/apps/wknd/components/helloworld/_cq_dialog/.content.xml
    
  6. Actualice el cuadro de diálogo para agregar un campo de texto adicional denominado Title con un nombre ./title:

    <?xml version="1.0" encoding="UTF-8"?>
    <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
        jcr:primaryType="nt:unstructured"
        jcr:title="Properties"
        sling:resourceType="cq/gui/components/authoring/dialog">
        <content
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
            <items jcr:primaryType="nt:unstructured">
                <column
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/container">
                    <items jcr:primaryType="nt:unstructured">
                        <title
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                            fieldLabel="Title"
                            name="./title"/>
                        <text
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                            fieldLabel="Text"
                            name="./text"/>
                    </items>
                </column>
            </items>
        </content>
    </jcr:root>
    
  7. Vuelva a abrir el archivo helloworld.html, que representa el script HTL principal responsable de procesar el componente HelloWorld, ubicado en:

        <code>/aem-guides-wknd.ui.apps/src/main/content/jcr_root/apps/wknd/components/helloworld/helloworld.html
    
  8. Actualice helloworld.html para representar el valor del campo de texto Saludo como parte de una etiqueta H1:

    <div class="cmp-helloworld" data-cmp-is="helloworld">
        <h1 class="cmp-helloworld__title">${properties.title}</h1>
        ...
    </div>
    
  9. Implemente los cambios en una instancia local de AEM con el complemento de desarrollador o con sus habilidades con Maven.

Modelos Sling

Los modelos Sling son objetos Java Java "POJO" (objetos Java antiguos comunes) impulsados por anotaciones que facilitan la asignación de datos de JCR a variables Java y proporcionan otras variedades al desarrollar en el contexto de AEM.

A continuación, realizaremos algunas actualizaciones en el modelo de Sling HelloWorldModel para aplicar cierta lógica empresarial a los valores almacenados en el JCR antes de enviarlos a la página.

  1. Abra el archivo HelloWorldModel.java, que es el modelo de Sling utilizado con el componente HelloWorld.

    <code>/aem-guides-wknd.core/src/main/java/com/adobe/aem/guides/wknd/core/models/HelloWorldModel.java
    
  2. Añada las siguientes instrucciones de importación:

    import org.apache.commons.lang.StringUtils;
    import org.apache.sling.models.annotations.DefaultInjectionStrategy;
    
  3. Actualice la anotación @Model para utilizar una DefaultInjectionStrategy:

    @Model(adaptables = Resource.class,
       defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
       public class HelloWorldModel {
       ...
    
  4. Agregue las siguientes líneas a la clase HelloWorldModel para asignar los valores de las propiedades JCR del componente title y text a las variables Java:

    ...
    @Model(adaptables = Resource.class,
    defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
    public class HelloWorldModel {
    
        ...
    
        @ValueMapValue
        private String title;
    
        @ValueMapValue
        private String text;
    
        @PostConstruct
        protected void init() {
            ...
    
  5. Agregue el siguiente método getTitle() a la clase HelloWorldModel, que devuelve el valor de la propiedad denominada title. Este método agrega la lógica adicional para devolver un valor de cadena de "Valor predeterminado aquí!" si la propiedad title es nula o está en blanco:

    /***
    *
    * @return the value of title, if null or blank returns "Default Value here!"
    */
    public String getTitle() {
        return StringUtils.isNotBlank(title) ? title : "Default Value here!";
    }
    
  6. Agregue el siguiente método getText() a la clase HelloWorldModel, que devuelve el valor de la propiedad denominada text. Este método transforma la cadena a todos los caracteres en mayúsculas.

        /***
        *
        * @return All caps variation of the text value
        */
    public String getText() {
        return StringUtils.isNotBlank(this.text) ? this.text.toUpperCase() : null;
    }
    
  7. Cree e implemente el paquete desde el módulo core:

    $ cd core
    $ mvn clean install -PautoInstallBundle
    
    NOTA

    Si utiliza AEM 6.4/6.5, utilice mvn clean install -PautoInstallBundle -Pclassic

  8. Actualice el archivo helloworld.html en aem-guides-wknd.ui.apps/src/main/content/jcr_root/apps/wknd/components/content/helloworld/helloworld.html para utilizar los métodos recién creados del modelo HelloWorld:

    <div class="cmp-helloworld" data-cmp-is="helloworld"
    data-sly-use.model="com.adobe.aem.guides.wknd.core.models.HelloWorldModel">
        <h1 class="cmp-helloworld__title">${model.title}</h1>
        <div class="cmp-helloworld__item" data-sly-test="${properties.text}">
            <p class="cmp-helloworld__item-label">Text property:</p>
            <pre class="cmp-helloworld__item-output" data-cmp-hook-helloworld="property">${properties.text}</pre>
        </div>
        <div class="cmp-helloworld__item" data-sly-test="${model.text}">
            <p class="cmp-helloworld__item-label">Sling Model getText() property:</p>
            <pre class="cmp-helloworld__item-output" data-cmp-hook-helloworld="property">${model.text}</pre>
        </div>
        <div class="cmp-helloworld__item"  data-sly-test="${model.message}">
            <p class="cmp-helloworld__item-label">Model message:</p>
            <pre class="cmp-helloworld__item-output"data-cmp-hook-helloworld="model">${model.message}</pre>
        </div>
    </div>
    
  9. Implemente los cambios en una instancia local de AEM con el complemento para desarrolladores de Eclipse o con sus habilidades con Maven.

Bibliotecas de cliente

Las bibliotecas del lado del cliente, clientlibs para abreviar, proporcionan un mecanismo para organizar y administrar los archivos CSS y JavaScript necesarios para una implementación de AEM Sites. Las bibliotecas del lado del cliente son la forma estándar de incluir CSS y JavaScript en una página de AEM.

A continuación, incluiremos algunos estilos CSS para el componente HelloWorld para comprender los conceptos básicos de las bibliotecas del lado del cliente.

A continuación se muestran los pasos de alto nivel realizados en el vídeo anterior.

  1. debajo de /aem-guides-wknd.ui.apps/src/main/content/jcr_root/apps/wknd/clientlibs cree una nueva carpeta denominada clientlib-helloworld.

  2. Cree una carpeta y una estructura de archivos como la siguiente debajo de clientlibs

    /clientlib-helloworld
        /css/helloworld.css
        /js/helloworld.js
        +js.txt
        +css.txt
        +.content.xml
    
  3. Rellene helloworld.css con lo siguiente:

    .cmp-helloworld .cmp-helloworld__title {
        color: red;
    }
    
  4. Rellene helloworld/clientlibs/css.txt con lo siguiente:

    #base=css
    helloworld.css
    
  5. Rellene helloworld/clientlibs/js/helloworld.js con lo siguiente:

    console.log("Hello World from Javascript!");
    
  6. Rellene helloworld/clientlibs/js.txt con lo siguiente:

    #base=js
    helloworld.js
    
  7. Actualice el archivo clientlib-helloworld/.content.xml para incluir las siguientes propiedades:

    <?xml version="1.0" encoding="UTF-8"?>
    <jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
        jcr:primaryType="cq:ClientLibraryFolder"
        allowProxy="{Boolean}true"
        categories="[wknd.helloworld]" />
    
  8. Actualice el archivo clientlibs/clientlib-base/.content.xml a incrustar en la categoría wknd.helloworld:

    <?xml version="1.0" encoding="UTF-8"?>
    <jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
        jcr:primaryType="cq:ClientLibraryFolder"
        allowProxy="{Boolean}true"
        categories="[wknd.base]"
        embed="[core.wcm.components.accordion.v1,core.wcm.components.tabs.v1,core.wcm.components.carousel.v1,core.wcm.components.image.v2,core.wcm.components.breadcrumb.v2,core.wcm.components.search.v1,core.wcm.components.form.text.v2,core.wcm.components.pdfviewer.v1,core.wcm.components.commons.datalayer.v1,wknd.grid,wknd.helloworld]"/>
    
  9. Implemente los cambios en una instancia local de AEM con el complemento de desarrollador o con sus habilidades con Maven.

    NOTA

    CSS y JavaScript se almacenan con frecuencia en la caché por el explorador por motivos de rendimiento. Si no ve inmediatamente el cambio para la biblioteca de cliente, realice una actualización dura y borre la caché del explorador. Puede resultar útil utilizar una ventana de incógnito para garantizar una nueva caché.

Felicitaciones!

¡Enhorabuena, acaba de aprender los conceptos básicos del desarrollo de componentes en Adobe Experience Manager!

Pasos siguientes

Familiarícese con las páginas y plantillas de Adobe Experience Manager en el capítulo siguiente Páginas y plantillas. Comprenda cómo se procesan los componentes principales como proxy en el proyecto y aprenda las configuraciones de políticas avanzadas de las plantillas editables para crear una plantilla de página de artículo bien estructurada.

Vea el código terminado en GitHub o revise e implemente el código localmente en la rama tutorial/component-basics-solution de Git.

En esta página