Crear un componente personalizado

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.

NOTE

Si utiliza el IDE de código de Visual Studio, puede resultar útil instalar extensiones para Java™.

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.

NOTE

Puede ver CustomComponentImpl.java finalizado aquí.

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.