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 una sencilla HelloWorld ejemplo. Se realizan pequeñas modificaciones en un componente existente que cubre 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 Código de Visual Studio y VSCode AEM Sync plugin.

Objetivo

  1. Aprenda la función de las plantillas HTL y los modelos Sling para procesar de forma dinámica el HTML.
  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 una HelloWorld componente. En el proceso de realizar actualizaciones en la variable HelloWorld obtenga información sobre 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 Tipo de archivo del proyecto AEM. Vea el siguiente vídeo y revise la 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 aem-guides-wknd repositorio:

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

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

  2. Vaya a aem-guides-wknd carpeta.

    $ 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, añada la variable classic perfil 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 pueden considerarse 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 below Sitio WKND > US > en.
  2. Agregue la variable Componente Hello World 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 la variable cq:dialog y helloworld.html secuencia de comandos ubicada en /apps/wknd/components/content/helloworld.

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

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

Cuadros de diálogo defina las configuraciones disponibles que se pueden realizar para un componente.

A continuación, actualizaremos el HelloWorld Secuencia de comandos HTL 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 a la ui.apps módulo.

  2. Abra el helloworld.html y realice un cambio en el 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 .content.xml que define el cuadro de diálogo para la variable HelloWorld en:

    <code>/aem-guides-wknd/ui.apps/src/main/content/jcr_root/apps/wknd/components/helloworld/_cq_dialog/.content.xml
    
  6. Actualizar el cuadro de diálogo para agregar un campo de texto adicional denominado Título con un nombre de ./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 la secuencia de comandos HTL principal responsable de procesar la variable HelloWorld componente, ubicado en:

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

    <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, haremos algunas actualizaciones en la HelloWorldModel Modelo de Sling 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 la variable HelloWorld componente.

    <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.lang3.StringUtils;
    import org.apache.sling.models.annotations.DefaultInjectionStrategy;
    
  3. Actualice el @Model anotación para usar una DefaultInjectionStrategy:

    @Model(adaptables = Resource.class,
       defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
       public class HelloWorldModel {
       ...
    
  4. Añada las siguientes líneas al HelloWorldModel para asignar los valores de las propiedades JCR del componente title y text a 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. Añada el siguiente método getTitle() a 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 nulo 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. Añada el siguiente método getText() a 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 core módulo:

    $ cd core
    $ mvn clean install -PautoInstallBundle
    
    NOTA

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

  8. Actualizar el archivo helloworld.html at 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 HelloWorld modelo:

    <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.

La variable ui.frontend es un módulo desacoplado webpack proyecto que se integra en el proceso de compilación. Esto permite el uso de bibliotecas front-end populares como Sass, LESS y TypeScript. La variable ui.frontend se explorará en mayor profundidad en el Capítulo de bibliotecas del cliente.

A continuación, actualice los estilos CSS para el HelloWorld componente.

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

  1. Abra una ventana de terminal y vaya a la ui.frontend directorio y

  2. En el ui.frontend ejecute el npm run watch comando:

    $ npm run watch
    
  3. Cambie al IDE y abra el proyecto a la ui.frontend módulo.

  4. Abra el archivo ui.frontend/src/main/webpack/components/_helloworld.scss.

  5. Actualice el archivo para mostrar un título rojo:

    .cmp-helloworld {}
    .cmp-helloworld__title {
        color: red;
    }
    
  6. En el terminal debe ver la actividad que indica que la variable ui.frontend está compilando y sincronizando los cambios con la instancia local de AEM.

    Entrypoint site 214 KiB = clientlib-site/site.css 8.45 KiB clientlib-site/site.js 206 KiB
    2022-02-22 17:28:51: webpack 5.69.1 compiled successfully in 119 ms
    change:dist/index.html
    + jcr_root/apps/wknd/clientlibs/clientlib-site/css/site.css
    + jcr_root/apps/wknd/clientlibs/clientlib-site/css
    + jcr_root/apps/wknd/clientlibs/clientlib-site/js/site.js
    + jcr_root/apps/wknd/clientlibs/clientlib-site/js
    + jcr_root/apps/wknd/clientlibs/clientlib-site
    + jcr_root/apps/wknd/clientlibs/clientlib-dependencies/css.txt
    + jcr_root/apps/wknd/clientlibs/clientlib-dependencies/js.txt
    + jcr_root/apps/wknd/clientlibs/clientlib-dependencies
    
  7. Vuelva al explorador y observe que el color del título ha cambiado.

    Actualización de conceptos básicos de componentes

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.

Ver el código terminado en GitHub o revisar e implementar el código localmente en la rama Git tutorial/component-basics-solution.

En esta página