Crear un componente personalizado custom-component

Descargue el punto de partida para este tutorial mediante Git:

$ git clone git@github.com:adobe/aem-guides-wknd-spa.git
$ cd aem-guides-wknd-spa
$ git checkout Angular/custom-component-start

Implemente el código base en una instancia local de AEM mediante Maven:

$ mvn clean install -PautoInstallSinglePackage

Si usa AEM 6.x, agregue el perfil classic:

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Instale el paquete terminado para el sitio de referencia WKND tradicional. Las imágenes proporcionadas por el sitio de referencia WKND se reutilizarán en el SPA de WKND. El paquete se puede instalar usando Administrador de paquetes de AEM.

Abra la carpeta ui.apps en el IDE que desee.

Vaya a ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/components y cree una carpeta llamada custom-component.

Cree un archivo con el nombre .content.xml debajo de la carpeta custom-component. Rellene custom-component/.content.xml con lo siguiente:

<?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"
    jcr:primaryType="cq:Component"
    jcr:title="Custom Component"
    componentGroup="WKND SPA Angular - Content"/>

jcr:primaryType="cq:Component": identifica que este nodo es un componente de AEM.

jcr:title es el valor que se muestra a los autores de contenido y componentGroup determina la agrupación de componentes en la interfaz de usuario de creación.

Debajo de la carpeta custom-component, cree otra carpeta denominada _cq_dialog.

Debajo de la carpeta _cq_dialog cree un archivo denominado .content.xml y rellénelo con lo siguiente:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/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="Custom Component"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <tabs
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/tabs"
                maximized="{Boolean}true">
                <items jcr:primaryType="nt:unstructured">
                    <properties
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Properties"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <columns
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                                margin="{Boolean}true">
                                <items jcr:primaryType="nt:unstructured">
                                    <column
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/container">
                                        <items jcr:primaryType="nt:unstructured">
                                            <message
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                fieldDescription="The text to display on the component."
                                                fieldLabel="Message"
                                                name="./message"/>
                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                    </properties>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

El archivo XML anterior genera un cuadro de diálogo sencillo para Custom Component. La parte crítica del archivo es el nodo <message> interno. Este cuadro de diálogo contiene un textfield simple denominado Message y persiste el valor del campo de texto en una propiedad denominada message.

Se crea un modelo Sling junto a para exponer el valor de la propiedad message a través del modelo JSON.

Con un componente tradicional de AEM, normalmente se requiere un script HTL. Dado que la SPA procesa el componente, no se necesita script HTL.

En el IDE de su elección, abra el módulo core. CustomComponent.java y CustomComponentImpl.java ya se han creado y tachado como parte del código de inicio del capítulo.

Abra la interfaz de Java™ CustomComponent.java en core/src/main/java/com/adobe/aem/guides/wknd/spa/angular/core/models/CustomComponent.java:

Esta es la interfaz Java™ que implementa el modelo Sling.

Actualizar CustomComponent.java para que extienda la interfaz ComponentExporter:

package com.adobe.aem.guides.wknd.spa.angular.core.models;
import com.adobe.cq.export.json.ComponentExporter;

public interface CustomComponent extends ComponentExporter {

    public String getMessage();

}

La implementación de la interfaz ComponentExporter es un requisito para que la API del modelo JSON recoja automáticamente el modelo Sling.

La interfaz CustomComponent incluye un solo método de captador getMessage(). Este es el método que expone el valor del cuadro de diálogo de autor a través del modelo JSON. En el modelo JSON solo se exportan los métodos de captador con parámetros vacíos ().

Abra CustomComponentImpl.java a las core/src/main/java/com/adobe/aem/guides/wknd/spa/angular/core/models/impl/CustomComponentImpl.java.

Esta es la implementación de la interfaz CustomComponent. La anotación @Model identifica la clase Java™ como modelo Sling. La anotación @Exporter permite serializar y exportar la clase Java™ a través del Exportador de modelos Sling.

Actualice la variable estática RESOURCE_TYPE para que apunte al componente de AEM wknd-spa-angular/components/custom-component creado en el ejercicio anterior.

static final String RESOURCE_TYPE = "wknd-spa-angular/components/custom-component";

El tipo de recurso del componente es el que enlaza el modelo Sling al componente AEM y, en última instancia, se asigna al componente Angular.

Agregue el método getExportedType() a la clase CustomComponentImpl para devolver el tipo de recurso de componente:

@Override
public String getExportedType() {
    return CustomComponentImpl.RESOURCE_TYPE;
}

Este método es necesario al implementar la interfaz ComponentExporter y expone el tipo de recurso que permite la asignación al componente de Angular.

Actualice el método getMessage() para devolver el valor de la propiedad message conservada por el cuadro de diálogo de autor. Usar la anotación @ValueMap es asignar el valor JCR message a una variable Java™:

import org.apache.commons.lang3.StringUtils;
...

@ValueMapValue
private String message;

@Override
public String getMessage() {
    return StringUtils.isNotBlank(message) ? message.toUpperCase() : null;
}

Se agrega alguna "lógica empresarial" adicional para devolver el valor del mensaje como mayúsculas. Esto nos permite ver la diferencia entre el valor sin procesar almacenado por el cuadro de diálogo del autor y el valor expuesto por el modelo Sling.

En el módulo ui.frontend, abra el archivo ui.frontend/src/app/components/custom/custom.component.ts

Observe la línea @Input() message: string;. Se espera que el valor en mayúsculas transformado se asigne a esta variable.

Importe el objeto MapTo desde AEM SPA Editor JS SDK y utilícelo para asignarlo al componente AEM:

+ import {MapTo} from '@adobe/cq-angular-editable-components';

 ...
 export class CustomComponent implements OnInit {
     ...
 }

+ MapTo('wknd-spa-angular/components/custom-component')(CustomComponent, CustomEditConfig);

Abra cutom.component.html y observe que el valor de {{message}} se muestra en una etiqueta <h2>.

Abra custom.component.css y agregue la regla siguiente:

:host-context {
    display: block;
}

Para que el marcador de posición del editor de AEM se muestre correctamente cuando el componente está vacío, :host-context u otro <div> debe establecerse en display: block;.

Implemente las actualizaciones en un entorno local de AEM desde la raíz del directorio del proyecto con sus habilidades con Maven:

$ cd aem-guides-wknd-spa
$ mvn clean install -PautoInstallSinglePackage

Compruebe el registro del nuevo modelo Sling navegando hasta http://localhost:4502/system/console/status-slingmodels.

com.adobe.aem.guides.wknd.spa.angular.core.models.impl.CustomComponentImpl - wknd-spa-angular/components/custom-component

com.adobe.aem.guides.wknd.spa.angular.core.models.impl.CustomComponentImpl exports 'wknd-spa-angular/components/custom-component' with selector 'model' and extension '[Ljava.lang.String;@6fb4a693' with exporter 'jackson'

Debería ver las dos líneas anteriores que indican que CustomComponentImpl está asociado con el componente wknd-spa-angular/components/custom-component y que está registrado a través del Exportador de modelos Sling.

Vaya a la plantilla de página de la SPA en http://localhost:4502/editor.html/conf/wknd-spa-angular/settings/wcm/templates/spa-page-template/structure.html.

Actualice la directiva del contenedor de diseño para agregar el nuevo Custom Component como componente permitido:

Guarde los cambios en la directiva y observe Custom Component como un componente permitido:

Vaya a http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html.

En el modo Edit, agregue Custom Component a Layout Container:

Abra el cuadro de diálogo del componente e introduzca un mensaje que contenga letras minúsculas.

Este es el cuadro de diálogo que se creó en función del archivo XML anteriormente en el capítulo.

Guarde los cambios. Observe que el mensaje que se muestra está en mayúsculas.

Vea el modelo JSON navegando a http://localhost:4502/content/wknd-spa-angular/us/en.model.json. Buscar wknd-spa-angular/components/custom-component:

"custom_component_208183317": {
    "message": "HELLO WORLD",
    ":type": "wknd-spa-angular/components/custom-component"
}

Observe que el valor JSON se establece en mayúsculas en función de la lógica agregada al modelo Sling.