Asignación de componentes de SPA a componentes de AEM

Obtenga información sobre cómo asignar componentes de Angular a componentes de Adobe Experience Manager (AEM) con el SDK de JS de AEM Editor SPA. La asignación de componentes permite a los usuarios realizar actualizaciones dinámicas de los componentes de SPA dentro del AEM SPA Editor, de forma similar a la creación de AEM tradicional.

Este capítulo profundiza en la API del modelo JSON de AEM y en cómo el contenido JSON expuesto por un componente de AEM se puede insertar automáticamente en un componente de Angular como props.

Objetivo

Obtenga información sobre cómo asignar AEM componentes a SPA componentes.
Comprenda la diferencia entre los componentes Container y los componentes Content.
Cree un nuevo componente de Angular que se asigne a un componente de AEM existente.

Qué va a generar

Este capítulo inspeccionará cómo se asigna el componente de SPA proporcionado Text al componente de AEM Text. Se creará un nuevo componente de SPA Image que se puede utilizar en el SPA y crear en AEM. Las funciones predeterminadas de las políticas Contenedor de diseño y Editor de plantillas también se utilizarán para crear una vista con un aspecto un poco más variado.

Creación final de un ejemplo de capítulo

Requisitos previos

Revise las herramientas e instrucciones necesarias para configurar un entorno de desarrollo local.

Obtención del código

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/map-components-start

Implemente el código base en una instancia de AEM local mediante Maven:
```
$ mvn clean install -PautoInstallSinglePackage
```
Si utiliza AEM 6.x, añada el perfil classic:
```
$ mvn clean install -PautoInstallSinglePackage -Pclassic
```

Siempre puede ver el código terminado en GitHub o extraer el código localmente cambiando a la rama Angular/map-components-solution.

Enfoque de asignación

El concepto básico es asignar un componente SPA a un componente AEM. AEM componentes, ejecute contenido de exportación del lado del servidor como parte de la API del modelo JSON. El contenido JSON lo consume la SPA, que ejecuta el lado del cliente en el explorador. Se crea una asignación 1:1 entre SPA componentes y un componente AEM.

Resumen general de alto nivel de asignación de un componente AEM a un componente de Angular

Resumen general de alto nivel de asignación de un componente AEM a un componente de Angular

Inspect del componente de texto

El AEM tipo de archivo del proyecto proporciona un componente Text que está asignado al AEM Componente de texto. Este es un ejemplo de componente content, en el sentido de que procesa content desde AEM.

Veamos cómo funciona el componente.

Inspect con el modelo JSON

Antes de saltar al código SPA, es importante comprender el modelo JSON que AEM proporciona. Vaya a la Biblioteca de componentes principales y vea la página del componente Texto. La biblioteca de componentes principales proporciona ejemplos de todos los componentes principales de AEM.
Seleccione la pestaña JSON para uno de los ejemplos:

Debería ver tres propiedades: text, richText y :type.

:type es una propiedad reservada que enumera la sling:resourceType (o ruta) del componente AEM. El valor de :type es lo que se utiliza para asignar el componente AEM al componente SPA.

text y richText son propiedades adicionales que se expondrán al componente SPA.

Inspect del componente Texto

Abra un nuevo terminal y vaya a la carpeta ui.frontend dentro del proyecto. Ejecute npm install y luego npm start para iniciar el servidor de desarrollo de webpack:
```
$ cd ui.frontend
$ npm run start:mock
```
El módulo ui.frontend está configurado actualmente para utilizar el modelo burlar JSON.
Debería ver una nueva ventana del explorador abierta a http://localhost:4200/content/wknd-spa-angular/us/en/home.html
En el IDE de su elección, abra el proyecto AEM para el SPA WKND. Expanda el módulo ui.frontend y abra el archivo text.component.ts en ui.frontend/src/app/components/text/text.component.ts:
El primer área a inspeccionar es class TextComponent en ~line 35:
```
export class TextComponent {
    @Input() richText: boolean;
    @Input() text: string;
    @Input() itemName: string;

    @HostBinding('innerHtml') get content() {
        return this.richText
        ? this.sanitizer.bypassSecurityTrustHtml(this.text)
        : this.text;
    }
    @HostBinding('attr.data-rte-editelement') editAttribute = true;

    constructor(private sanitizer: DomSanitizer) {}
}
```
@Input() decorator se utiliza para declarar campos cuyos valores se establecen mediante el objeto JSON asignado, revisado anteriormente.

@HostBinding('innerHtml') get content() es un método que expone el contenido de texto creado del valor de this.text. En el caso de que el contenido sea texto enriquecido (determinado por el indicador this.richText), se omite la seguridad integrada del Angular. El DomSanitizer de angular se utiliza para “eliminar” el HTML sin procesar y evitar vulnerabilidades en las secuencias de comandos entre sitios. El método está enlazado a la propiedad innerHtml utilizando el decorador @HostBinding.
A continuación, revise el TextEditConfig en ~line 24:
```
const TextEditConfig = {
    emptyLabel: 'Text',
    isEmpty: cqModel =>
        !cqModel || !cqModel.text || cqModel.text.trim().length < 1
};
```
El código anterior es responsable de determinar cuándo procesar el marcador de posición en el entorno de creación de AEM. Si el método isEmpty devuelve true, se representará el marcador de posición.
Finalmente, eche un vistazo a la llamada MapTo en ~line 53:
```
MapTo('wknd-spa-angular/components/text')(TextComponent, TextEditConfig );
```
MapToes proporcionado por el AEM SPA Editor JS SDK (@adobe/cq-angular-editable-components). La ruta wknd-spa-angular/components/text representa el sling:resourceType del componente AEM. Esta ruta se compara con el :type expuesto por el modelo JSON observado anteriormente. MapTo analiza la respuesta del modelo JSON y pasa los valores correctos a las @Input() variables del componente SPA.

Puede encontrar la definición del componente AEM Text en ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/components/text.
Experimente modificando el archivo en.model.json en ui.frontend/src/mocks/json/en.model.json.

En ~line 62 actualice el primer valor Text para utilizar las etiquetas H1 y u :
```
    "text": {
        "text": "<h1><u>Hello World!</u></h1>",
        "richText": true,
        ":type": "wknd-spa-angular/components/text"
    }
```
Vuelva al explorador para ver los efectos servidos por el servidor de desarrollo de webpack:

Intente alternar la propiedad richText entre true / false para ver la lógica de renderización en acción.
Inspect text.component.html en ui.frontend/src/app/components/text/text.component.html.

Este archivo está vacío, ya que la propiedad innerHTML establecerá todo el contenido del componente.

Inspect utiliza app.module.ts en ui.frontend/src/app/app.module.ts.

@NgModule({
imports: [
    BrowserModule,
    SpaAngularEditableComponentsModule,
    AppRoutingModule
],
providers: [ModelManagerService, { provide: APP_BASE_HREF, useValue: '/' }],
declarations: [AppComponent, TextComponent, PageComponent, HeaderComponent],
entryComponents: [TextComponent, PageComponent],
bootstrap: [AppComponent]
})
export class AppModule {}

El TextComponent no se incluye explícitamente, sino que se incluye dinámicamente mediante AEMResponsiveGridComponent proporcionado por el SDK de JS AEM Editor. Por lo tanto, debe aparecer en la matriz app.module.ts' entryComponents.

Crear el componente de imagen

A continuación, cree un componente de Angular Image que esté asignado al componente de imagen AEM. El componente Image es otro ejemplo de un componente content.

Inspect JSON

Antes de saltar al código SPA, revise el modelo JSON proporcionado por AEM.

Vaya a los Ejemplos de imágenes de la biblioteca de componentes principales.

Las propiedades src, alt y title se utilizarán para rellenar el componente Image SPA.

NOTA

Hay otras propiedades de imagen expuestas (lazyEnabled, widths) que permiten a un desarrollador crear un componente adaptable y de carga diferida. El componente creado en este tutorial será sencillo y no utilizará estas propiedades avanzadas.

Vuelva a su IDE y abra en.model.json en ui.frontend/src/mocks/json/en.model.json. Dado que este es un nuevo componente para nuestro proyecto, necesitamos "burlarnos" del JSON de imagen.

En ~line 70 añada una entrada JSON para el modelo image (no olvide la coma final , después de la segunda text_386303036) y actualice la matriz :itemsOrder.

...
":items": {
            ...
            "text_386303036": {
                "text": "<p>A new text component.</p>\r\n",
                "richText": true,
                ":type": "wknd-spa-angular/components/text"
                },
            "image": {
                "alt": "Rock Climber in New Zealand",
                "title": "Rock Climber in New Zealand",
                "src": "/mocks/images/adobestock-140634652.jpeg",
                ":type": "wknd-spa-angular/components/image"
            }
        },
        ":itemsOrder": [
            "text",
            "text_386303036",
            "image"
        ],

El proyecto incluye una imagen de ejemplo en /mock-content/adobestock-140634652.jpeg que se utilizará con el servidor de desarrollo de webpack.

Puede ver el en.model.json completo aquí.

Añada una foto de existencias para que la muestre el componente.

Cree una nueva carpeta denominada images debajo de ui.frontend/src/mocks. Descargue adobestock-140634652.jpeg y colóquelo en la carpeta images recién creada. Si lo desea, puede usar su propia imagen.

Implementar el componente Imagen

Detenga el servidor de desarrollo de webpack si se inicia.
Cree un nuevo componente Imagen ejecutando el comando CLI ng generate component del Angular desde la carpeta ui.frontend:
```
$ ng generate component components/image
```

En el IDE, abra image.component.ts en ui.frontend/src/app/components/image/image.component.ts y actualice como se indica a continuación:

import {Component, Input, OnInit} from '@angular/core';
import {MapTo} from '@adobe/cq-angular-editable-components';

const ImageEditConfig = {
emptyLabel: 'Image',
isEmpty: cqModel =>
    !cqModel || !cqModel.src || cqModel.src.trim().length < 1
};

@Component({
selector: 'app-image',
templateUrl: './image.component.html',
styleUrls: ['./image.component.scss']
})
export class ImageComponent implements OnInit {

@Input() src: string;
@Input() alt: string;
@Input() title: string;

constructor() { }

get hasImage() {
    return this.src && this.src.trim().length > 0;
}

ngOnInit() { }
}

MapTo('wknd-spa-angular/components/image')(ImageComponent, ImageEditConfig);

ImageEditConfig es la configuración para determinar si se va a procesar el marcador de posición de autor en AEM, en función de si se rellena la src propiedad.

@Input() de src, alt, y title son las propiedades asignadas desde la API de JSON.

hasImage() es un método que determina si se debe representar la imagen.

MapTo asigna el componente SPA al componente AEM ubicado en ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/components/image.

Abra image.component.html y actualícelo de la siguiente manera:
```
<ng-container *ngIf="hasImage">
    <img class="image" [src]="src" [alt]="alt" [title]="title"/>
</ng-container>
```
Esto renderizará el elemento <img> si hasImage devuelve true.
Abra image.component.scss y actualícelo de la siguiente manera:
```
:host-context {
    display: block;
}

.image {
    margin: 1rem 0;
    width: 100%;
    border: 0;
}
```
NOTA

La regla :host-context es crítica para que el marcador de posición del editor de SPA de AEM funcione correctamente. Todos los componentes de SPA que se pretenda crear en el editor de páginas de AEM necesitarán esta regla como mínimo.
Abra app.module.ts y añada ImageComponent a la matriz entryComponents:
```
entryComponents: [TextComponent, PageComponent, ImageComponent],
```
Al igual que TextComponent, el ImageComponent se carga dinámicamente y debe incluirse en la matriz entryComponents.
Inicie el servidor de desarrollo de webpack para ver el ImageComponent renderizado.
```
$ npm run start:mock
```
Imagen añadida a la SPA

NOTA

Desafío para una bonificación: Implemente un nuevo método para mostrar el valor de title como un rótulo debajo de la imagen.

Actualizar directivas en AEM

El componente ImageComponent solo es visible en el servidor de desarrollo de webpack. A continuación, implemente la SPA actualizada para AEM y actualizar las directivas de plantilla.

Detenga el servidor de desarrollo de webpack y, desde root del proyecto, implemente los cambios en AEM con sus habilidades con Maven:
```
$ cd aem-guides-wknd-spa
$ mvn clean install -PautoInstallSinglePackage
```
En la pantalla Inicio de AEM, vaya a Herramientas > Plantillas > Angular de SPA de WKND.

Seleccione y edite la SPA Página:
Seleccione el Contenedor de diseño y haga clic en su icono directiva para editar la política:
En Componentes permitidos > Angular de SPA WKND - Contenido > compruebe el componente Imagen:

En Componentes predeterminados > Añadir asignación y elija el componente Imagen - WKND SPA Angular - Contenido:

Introduzca un mime type de image/*.

Haga clic en Listo para guardar las actualizaciones de directivas.
En el Contenedor de diseño haga clic en el icono directiva para el componente Texto:

Cree una nueva directiva denominada WKND SPA Text. En Plugins > Formatting, marque todas las casillas para habilitar opciones de formato adicionales:

En Plugins > Estilos de párrafo, marque la casilla Habilitar estilos de párrafo:

Haga clic en Listo para guardar la actualización de la directiva.
Vaya a la Página principal http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html.

También debe poder editar el componente Text y agregar estilos de párrafo adicionales en modo pantalla completa.
También debe poder arrastrar y soltar una imagen desde el Buscador de recursos:
Añada sus propias imágenes a través de AEM Assets o instale la base de código terminada para el sitio de referencia WKND estándar. El sitio de referencia WKND incluye muchas imágenes que se pueden reutilizar en el SPA WKND. El paquete se puede instalar utilizando AEM Package Manager.

Inspect: contenedor de diseño

El SDK AEM Editor SDK proporciona automáticamente compatibilidad con el Contenedor de diseño. El contenedor de diseño, tal como indica el nombre, es un componente contenedor. Los componentes de contenedor son componentes que aceptan estructuras JSON que representan otros componentes y que crean instancias de ellos de forma dinámica.

Inspeccionemos más el contenedor de diseño.

En el IDE, abra responsive-grid.component.ts en ui.frontend/src/app/components/responsive-grid:
```
import { AEMResponsiveGridComponent,MapTo } from '@adobe/cq-angular-editable-components';

MapTo('wcm/foundation/components/responsivegrid')(AEMResponsiveGridComponent);
```
El AEMResponsiveGridComponent se implementa como parte del SDK AEM SPA Editor y se incluye en el proyecto a través de import-components.
En un explorador, vaya a http://localhost:4502/content/wknd-spa-angular/us/en.model.json

El componente Contenedor de diseño tiene un sling:resourceType de wcm/foundation/components/responsivegrid y el Editor de SPA lo reconoce mediante la propiedad :type, al igual que los componentes Text y Image.

Las mismas capacidades de cambiar el tamaño de un componente mediante el Modo de diseño están disponibles con el Editor de SPA.
Vuelva a http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html. Añada componentes Image adicionales e intente redimensionarlos con la opción Layout:
Vuelva a abrir el modelo JSON http://localhost:4502/content/wknd-spa-angular/us/en.model.json y observe el columnClassNames como parte del JSON:

El nombre de clase aem-GridColumn--default--4 indica que el componente debe tener 4 columnas de ancho en función de una cuadrícula de 12 columnas. Puede encontrar más detalles sobre la cuadrícula adaptable aquí.
Vuelva al IDE y en el módulo ui.apps hay una biblioteca del lado del cliente definida en ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/clientlibs/clientlib-grid. Abra el archivo less/grid.less.

Este archivo determina los puntos de interrupción (default, tablet y phone) que utiliza el contenedor de diseño. Este archivo está diseñado para personalizarse según las especificaciones del proyecto. Actualmente, los puntos de interrupción están establecidos en 1200px y 650px.
Debe poder utilizar las capacidades adaptables y las políticas de texto enriquecido actualizadas del componente Text para crear una vista como la siguiente:

Felicitaciones!

Enhorabuena, ha aprendido a asignar SPA componentes a AEM componentes y ha implementado un nuevo componente Image. También tiene la oportunidad de explorar las capacidades de respuesta del Contenedor de diseño.

Siempre puede ver el código terminado en GitHub o extraer el código localmente cambiando a la rama Angular/map-components-solution.

Siguientes pasos

Navegación y enrutamiento : Descubra cómo se pueden admitir varias vistas de la SPA asignando páginas AEM con el SDK del Editor de SPA. La navegación dinámica se implementa mediante el enrutador de Angular y se agrega a un componente de encabezado existente.

Bonus: Persistir configuraciones en el control de código fuente

En muchos casos, especialmente al principio de un proyecto AEM, es importante mantener las configuraciones, como las plantillas y las políticas de contenido relacionadas, para el control de código fuente. Esto garantiza que todos los desarrolladores trabajen con el mismo conjunto de contenido y configuraciones, y puede garantizar una coherencia adicional entre entornos. Una vez que un proyecto alcanza un cierto nivel de madurez, la práctica de administrar plantillas se puede transferir a un grupo especial de usuarios avanzados.

Los siguientes pasos se llevarán a cabo utilizando Visual Studio Code IDE y VSCode AEM Sync, pero podría estar utilizando cualquier herramienta y IDE que haya configurado para extraer o importar contenido de una instancia local de AEM.

En el IDE de código de Visual Studio, asegúrese de tener VSCode AEM Sync instalado mediante la extensión de Marketplace:
Expanda el módulo ui.content en el explorador de proyectos y vaya a /conf/wknd-spa-angular/settings/wcm/templates.
Haga clic con el botón derecho en la templates carpeta y seleccione Importar desde AEM servidor:
Repita los pasos para importar contenido pero seleccione la carpeta policy ubicada en /conf/wknd-spa-angular/settings/wcm/policies.
Inspect: el archivo filter.xml ubicado en ui.content/src/main/content/META-INF/vault/filter.xml.
```

<?xml version="1.0" encoding="UTF-8"?>
 <workspaceFilter version="1.0">
     <filter root="/conf/wknd-spa-angular" mode="merge"/>
     <filter root="/content/wknd-spa-angular" mode="merge"/>
     <filter root="/content/dam/wknd-spa-angular" mode="merge"/>
     <filter root="/content/experience-fragments/wknd-spa-angular" mode="merge"/>
 </workspaceFilter>
```
El archivo filter.xml es responsable de identificar las rutas de los nodos que se instalarán con el paquete. Observe el mode="merge" en cada uno de los filtros que indica que el contenido existente no se modificará, solo se agregará contenido nuevo. Dado que los autores de contenido pueden estar actualizando estas rutas, es importante que una implementación de código no sobrescriba el contenido. Consulte la Documentación de FileVault para obtener más información sobre cómo trabajar con elementos de filtro.

Compare ui.content/src/main/content/META-INF/vault/filter.xml y ui.apps/src/main/content/META-INF/vault/filter.xml para comprender los diferentes nodos administrados por cada módulo.

Asignación de componentes de SPA a componentes de AEM

Objetivo

Qué va a generar

Requisitos previos

Obtención del código

Enfoque de asignación

Inspect del componente de texto

Inspect con el modelo JSON

Inspect del componente Texto

Crear el componente de imagen

Inspect JSON

Implementar el componente Imagen

Actualizar directivas en AEM

Inspect: contenedor de diseño

Felicitaciones!

Siguientes pasos

Bonus: Persistir configuraciones en el control de código fuente

Recursos en adobe.com

En esta página

Ver siguiente:

Aprender

Documentación

Comunidad

Soporte técnico

Recursos

Cuenta de Adobe

Adobe