Conceptos básicos de componentes

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

Abra el archivo helloworld.html y actualice el marcado de HTML.

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

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

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

Actualice el cuadro de diálogo para agregar un campo de texto adicional denominado Title con el 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>

Vuelva a abrir el archivo helloworld.html, que representa el script HTL principal responsable de procesar el componente HelloWorld desde la siguiente ruta:

    <code>/aem-guides-wknd.ui.apps/src/main/content/jcr_root/apps/wknd/components/helloworld/helloworld.html

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>

Implemente los cambios en una instancia local de AEM con el complemento para desarrolladores o con sus habilidades con Maven.

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

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

Actualizar la anotación @Model para usar un DefaultInjectionStrategy:

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

Agregue las líneas siguientes 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() {
        ...

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

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

Genere e implemente el paquete desde el módulo core:

$ cd core
$ mvn clean install -PautoInstallBundle

NOTE

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

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.

Se crea una instancia del modelo HelloWorld 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.

La instancia del modelo HelloWorld ahora está disponible en HTL a través de la variable model usando HelloWord. Estas invocaciones a 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.

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

Implemente los cambios en una instancia local de AEM con el complemento Eclipse Developer o con sus habilidades con Maven.

Abra una ventana de terminal y vaya al directorio ui.frontend

Al estar en el directorio ui.frontend, ejecute el comando npm install npm-run-all --save-dev para instalar el módulo de nodo npm-run-all. Este paso es necesario en el tipo de archivo del proyecto AEM generado por el tipo de archivo 39; en la próxima versión del tipo de archivo, no es necesario.

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

$ npm run watch

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

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 el módulo 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.