Conceptos básicos de componentes

En este capítulo, vamos a explorar 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

Aprenda la función de las plantillas HTL y los modelos Sling para procesar de forma dinámica el HTML.
Comprender cómo se utilizan los cuadros de diálogo para facilitar la creación de contenido.
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 se realizan varias modificaciones en HelloWorld componente. Mientras se actualizan las HelloWorld , conozca las áreas clave del desarrollo de componentes de AEM.

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

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.
Vaya a aem-guides-wknd carpeta.
```
$ cd aem-guides-wknd
```
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
```
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, vamos a crear un componente simple e inspeccionar 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.

Cree una página con el nombre Conceptos básicos de componentes below Sitio WKND > US > en.
Agregue la variable Componente Hello World a la página recién creada.
Abra el cuadro de diálogo del componente e introduzca texto. Guarde los cambios para ver el mensaje que aparece en la página.
Cambie al modo de desarrollador y vea la Ruta de contenido en CRXDE-Lite e inspeccione las propiedades de la instancia de componente.
Utilice CRXDE-Lite para ver la variable cq:dialog y helloworld.html script de /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, actualicemos 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.

Cambie al IDE y abra el proyecto a la ui.apps módulo.
Abra el helloworld.html y actualice el HTML Markup.
Utilice las herramientas IDE como VSCode AEM Sync para sincronizar el cambio de archivo con la instancia de AEM local.
Vuelva al explorador y observe que el procesamiento del componente ha cambiado.

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

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>

Vuelva a abrir el archivo helloworld.html, que representa la secuencia de comandos HTL principal responsable de procesar la variable HelloWorld componente desde la ruta inferior:
```
    <code>/aem-guides-wknd.ui.apps/src/main/content/jcr_root/apps/wknd/components/helloworld/helloworld.html
```

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>

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 "POJO" Java™ impulsados por anotaciones (objetos Java™ antiguos comunes) que facilitan la asignación de datos de las variables JCR a Java™. También proporcionan otras variedades cuando se desarrollan en el contexto de la AEM.

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

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

Añada las siguientes instrucciones de importación:

import org.apache.commons.lang3.StringUtils;
import org.apache.sling.models.annotations.DefaultInjectionStrategy;

Actualice el @Model anotación para usar una DefaultInjectionStrategy:

@Model(adaptables = Resource.class,
   defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
   public class HelloWorldModel {
   ...

Añada las siguientes líneas al HelloWorldModel para asignar los valores de las propiedades JCR del componente title y text a variables de Java™:

...
@Model(adaptables = Resource.class,
defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class HelloWorldModel {

    ...

    @ValueMapValue
    private String title;

    @ValueMapValue
    private String text;

    @PostConstruct
    protected void init() {
        ...

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!";
}
```

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;
}

Cree e implemente el paquete desde el core módulo:
```
$ cd core
$ mvn clean install -PautoInstallBundle
```
NOTA

Para uso AEM 6.4/6.5 mvn clean install -PautoInstallBundle -Pclassic

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>

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

Bibliotecas de cliente, clientlibs para abreviar, proporciona 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 explora en mayor profundidad en el Capítulo de bibliotecas del lado 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.

Abra una ventana de terminal y vaya a la ui.frontend directory
Estar en ui.frontend ejecute el npm install npm-run-all --save-dev para instalar el npm-run-all módulo de nodos. Este paso es requerido en el proyecto de AEM generado por Arquetipo 39, en la próxima versión de tipo de archivo no es obligatorio.
A continuación, ejecute el npm run watch comando:
```
$ npm run watch
```
Cambie al IDE y abra el proyecto a la ui.frontend módulo.
Abra el archivo ui.frontend/src/main/webpack/components/_helloworld.scss.

Actualice el archivo para mostrar un título rojo:

.cmp-helloworld {}
.cmp-helloworld__title {
    color: red;
}

En el terminal, debería 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

Vuelva al explorador y observe que el color del título ha cambiado.

¡Enhorabuena!

¡Felicidades, ha aprendido 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.

Conceptos básicos de componentes

Requisitos previos

Objetivo

Qué va a generar

Proyecto de inicio de capítulo

Creación de componentes

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

Modelos Sling

Bibliotecas de cliente

¡Enhorabuena!

Pasos siguientes

Recursos de Business.Adobe.com

En esta página

Ver siguiente:

Aprender

Documentación

Comunidad

Soporte técnico

Recursos

Cuenta de Adobe

Adobe