Conceptos básicos de componentes component-basics

En este capítulo, vamos a explorar la tecnología subyacente de un componente de sitios de Adobe Experience Manager AEM () a través de una sencilla HelloWorld ejemplo. Se realizan pequeñas modificaciones en un componente existente, que cubren temas de creación, HTL, modelos Sling y bibliotecas del lado del cliente.

Requisitos previos prerequisites

Revise las herramientas y las instrucciones necesarias para configurar una entorno de desarrollo local.

El IDE utilizado en los vídeos es Código de Visual Studio y el AEM Sincronización de VSCode con la plugin.

Objetivo objective

  1. Aprenda la función que desempeñan las plantillas HTL y los modelos Sling para procesar dinámicamente el HTML.
  2. Descubra 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.

Lo que va a generar what-build

En este capítulo, se realizan varias modificaciones en un HelloWorld componente. Al realizar actualizaciones en HelloWorld AEM componente, aprenderá sobre las áreas clave del desarrollo de componentes de la red de trabajo de la red de la red de.

Proyecto de inicio de capítulo starter-project

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 la requisitos previos para empezar.

NOTE
Si ha completado correctamente el capítulo anterior, puede volver a utilizar el proyecto y omitir los pasos para desproteger 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:

    code language-shell
    $ git clone git@github.com:adobe/aem-guides-wknd.git --branch tutorial/component-basics-start --single-branch
    
    note note
    NOTE
    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.

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

    code language-shell
    $ mvn clean install -PautoInstallSinglePackage
    
    note note
    NOTE
    AEM Si se utiliza la versión 6.5 o 6.4, se debe anexar la variable classic de perfil a cualquier comando de Maven.
    code language-shell
    $ 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 component-authoring

Los componentes se pueden considerar como pequeños componentes modulares de una página web. Para reutilizar componentes, estos deben poder configurarse. Esto se realiza a través del cuadro de diálogo de autor. AEM A continuación, vamos a crear un componente simple e inspeccionar cómo se conservan los valores del cuadro de diálogo en los puntos de vista de la interfaz de usuario de la interfaz de usuario de la.

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

  1. Cree una página llamada Conceptos básicos de componentes debajo Sitio WKND > US > en.
  2. Añada el Componente Hello World a la página recién creada.
  3. Abra el cuadro de diálogo del componente e introduzca un texto. Guarde los cambios para ver el mensaje que se muestra 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 del componente.
  5. Utilice CRXDE-Lite para ver la cq:dialog y helloworld.html script desde /apps/wknd/components/content/helloworld.

Lenguaje de plantilla de HTML (HTL) y cuadros de diálogo htl-dialogs

Lenguaje de plantilla de HTML o HTL AEM es un lenguaje ligero de creación de plantillas del lado del servidor que utilizan los componentes de la para procesar contenido.

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

A continuación, vamos a actualizar el HelloWorld Script 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 en ui.apps módulo.

  2. Abra el helloworld.html y actualice el HTML Markup.

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

  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 de HelloWorld componente en:

    code language-plain
    <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 añadir un campo de texto adicional llamado Título con el nombre de ./title:

    code language-xml
    <?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 el HelloWorld componente de la siguiente ruta:

    code language-plain
        <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 Saludo textfield como parte de un H1 etiqueta:

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

Modelos Sling sling-models

Los modelos Sling son objetos Java™ "POJO" (Plain Old Java™ Objects) impulsados por anotaciones que facilitan la asignación de datos de las variables JCR a Java™. AEM También proporcionan varias otras sutilezas cuando se desarrollan en el contexto de la.

A continuación, vamos a realizar algunas actualizaciones en el HelloWorldModel Modelo Sling para aplicar 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 Sling utilizado con HelloWorld componente.

    code language-plain
    <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:

    code language-java
    import org.apache.commons.lang3.StringUtils;
    import org.apache.sling.models.annotations.DefaultInjectionStrategy;
    
  3. Actualice el @Model anotación para utilizar un DefaultInjectionStrategy:

    code language-java
    @Model(adaptables = Resource.class,
       defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
       public class HelloWorldModel {
       ...
    
  4. Añada las siguientes líneas a HelloWorldModel para asignar los valores de las propiedades JCR del componente title y text a variables Java™:

    code language-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 la HelloWorldModel clase, 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:

    code language-java
    /***
    *
    * @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 la HelloWorldModel clase, que devuelve el valor de la propiedad denominada text. Este método transforma la cadena en todos los caracteres en mayúsculas.

    code language-java
        /***
        *
        * @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:

    code language-shell
    $ cd core
    $ mvn clean install -PautoInstallBundle
    
    note note
    NOTE
    AEM Para el uso de 6.4/6.5, se utiliza: mvn clean install -PautoInstallBundle -Pclassic
  8. Actualizar 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 HelloWorld modelo.

    El HelloWorld Se crea una instancia del modelo para esta instancia de componente mediante la directiva HTL: data-sly-use.model="com.adobe.aem.guides.wknd.core.models.HelloWorldModel", guardando la instancia en la variable model.

    El HelloWorld La instancia de modelo de ya está disponible en HTL a través de la model usando la variable HelloWord. Estas invocaciones a estos métodos pueden utilizar sintaxis de método abreviada, por ejemplo: ${model.getTitle()} se puede abreviar como ${model.title}.

    Del mismo modo, todos los scripts HTL se insertan con objetos globales a los que se puede acceder mediante la misma sintaxis que los objetos del modelo Sling.

    code language-html
    <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>
    
  9. AEM Implemente los cambios en una instancia local de con el complemento Eclipse Developer o con sus habilidades con Maven.

Bibliotecas del cliente client-side-libraries

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

El ui.frontend El módulo está desacoplado webpack proyecto que se integra en el proceso de compilación. Esto permite el uso de bibliotecas de front-end populares como Sass, LESS y TypeScript. El ui.frontend El módulo de se explora con más detalle en Capítulo Bibliotecas del cliente.

A continuación, actualice los estilos CSS para 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 navegue hasta el ui.frontend directorio

  2. Estar en ui.frontend ejecute el npm install npm-run-all --save-dev para instalar el npm-run-all módulo del nodo. Este paso es AEM requerido en el tipo de archivo 39 generado por el proyecto de Sin embargo, en la próxima versión de tipo de archivo, esto no es obligatorio.

  3. A continuación, ejecute el npm run watch comando:

    code language-shell
    $ npm run watch
    
  4. Cambie al IDE y abra el proyecto en ui.frontend módulo.

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

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

    code language-scss
    .cmp-helloworld {}
    .cmp-helloworld__title {
        color: red;
    }
    
  7. En el terminal, debería ver la actividad que indica que la variable ui.frontend AEM Este módulo está compilando y sincronizando los cambios con la instancia local de.

    code language-shell
    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
    
  8. Vuelva al explorador y observe que el color del título ha cambiado.

    Actualización de conceptos básicos de componentes

Enhorabuena. congratulations

¡Felicidades, ha aprendido los conceptos básicos del desarrollo de componentes en Adobe Experience Manager!

Pasos siguientes next-steps

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

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

recommendation-more-help
b2a561c1-47c0-4182-b8c1-757a197484f9