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.
Comprender la diferencia entre Contenedor componentes y Contenido componentes.
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 proporciona Text SPA componente está asignado al AEM Textcomponente. Un nuevo Image Se creará SPA componente que se puede utilizar en el SPA y crear en AEM. Las funciones predeterminadas de la variable Contenedor de diseño y Editor de plantillas las políticas también se utilizarán para crear una vista que tenga 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 usa AEM 6.x añada la variable classic perfil:
```
$ mvn clean install -PautoInstallSinglePackage -Pclassic
```

Siempre puede ver el código terminado en GitHub o desproteja 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

La variable Tipo de archivo del proyecto AEM proporciona un Text componente asignado al AEM Componente de texto. Este es un ejemplo de contenido componente, en el que se procesa contenido de 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 el JSON para ver uno de los ejemplos:

Debería ver tres propiedades: text, richTexty :type.

:type es una propiedad reservada que muestra la variable 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 terminal nuevo y vaya a la ui.frontend dentro del proyecto. Ejecutar npm install y luego npm start para iniciar el servidor de desarrollo de webpack:
```
$ cd ui.frontend
$ npm run start:mock
```
La variable ui.frontend está configurado para usar la variable modelo JSON de maqueta.
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 ui.frontend y abra el archivo text.component.ts under ui.frontend/src/app/components/text/text.component.ts:
El primer área que se debe inspeccionar es la 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 la variable this.richText (indicador) Se omite la seguridad integrada del Angular. Angular DomSanitizer se utiliza para “eliminar” el HTML sin procesar y evitar vulnerabilidades de scripts entre sitios. El método está enlazado al innerHtml usando la propiedad @HostBinding decorador.
Inspeccione la siguiente 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 la variable isEmpty devuelve el método true a continuación, se representa el marcador de posición.
Finalmente, eche un vistazo a la MapTo llamada a ~line 53:
```
MapTo('wknd-spa-angular/components/text')(TextComponent, TextEditConfig );
```
MapTo es proporcionado por AEM SPA Editor JS SDK (@adobe/cq-angular-editable-components). La ruta wknd-spa-angular/components/text representa la variable sling:resourceType del componente AEM. Esta ruta se corresponde con la variable :type expuesto por el modelo JSON observado anteriormente. MapTo analiza la respuesta del modelo JSON y pasa los valores correctos a la variable @Input() variables del componente SPA.

Puede encontrar el AEM Text definición de componente en ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/components/text.
Experimento modificando el en.model.json file at ui.frontend/src/mocks/json/en.model.json.

En ~line 62 actualice la primera Text para usar un H1 y u etiquetas:
```
    "text": {
        "text": "<h1><u>Hello World!</u></h1>",
        "richText": true,
        ":type": "wknd-spa-angular/components/text"
    }
```
Vuelva al explorador para ver los efectos que proporciona el servidor de desarrollo de webpack:

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

Este archivo está vacío, ya que todo el contenido del componente será configurado por el innerHTML propiedad.

Inspect la variable app.module.ts at 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 {}

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

Crear el componente de imagen

A continuación, cree un Image Componente de angular asignado al AEM Componente de imagen. La variable Image es otro ejemplo de contenido componente.

Inspect JSON

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

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

Propiedades de src, alty title se utilizará para rellenar el SPA Image componente.

NOTA

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

Vuelva a su IDE y abra el en.model.json at 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 agregue una entrada JSON para el image modelo (no olvide la coma de cierre) , después de la segunda text_386303036) y actualice la variable :itemsOrder matriz.

...
":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 la variable servidor de desarrollo de webpack.

Puede ver la información completa en.model.json aquí.

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

Cree una nueva carpeta con el nombre imágenes below ui.frontend/src/mocks. Descargar adobestock-140634652.jpeg y colóquelo en la imágenes carpeta. Si lo desea, puede usar su propia imagen.

Implementar el componente Imagen

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

En el IDE, abra image.component.ts at 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 la variable src se rellena.

@Input() de src, alty 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.

Apertura 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 procesará el <img> element if hasImage return true.
Apertura image.component.scss y actualícelo de la siguiente manera:
```
:host-context {
    display: block;
}

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

La variable :host-context la regla es crítico 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.
Apertura app.module.ts y añada ImageComponent a entryComponents matriz:
```
entryComponents: [TextComponent, PageComponent, ImageComponent],
```
Como el TextComponent, el ImageComponent se carga dinámicamente y debe incluirse en la variable entryComponents matriz.
Inicie el servidor de desarrollo de webpack para ver el ImageComponent procesar.
```
$ npm run start:mock
```
Imagen añadida a la SPA

NOTA

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

Actualizar directivas en AEM

La variable ImageComponent solo está 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 root del proyecto, implemente los cambios en AEM con sus habilidades con Maven:
```
$ cd aem-guides-wknd-spa
$ mvn clean install -PautoInstallSinglePackage
```
Desde la pantalla Inicio de AEM vaya a Herramientas > Plantillas > WKND SPA Angular.

Seleccione y edite el Página SPA:
Seleccione el Contenedor de diseño y haga clic en ella directiva para editar la directiva:
En Componentes permitidos > Angular de SPA WKND: contenido > marque la Imagen componente:

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

Escriba un tipo mime de image/*.

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

Cree una nueva directiva con el nombre WKND SPA texto. En Complementos > Formato > marque todas las casillas para activar opciones de formato adicionales:

En Complementos > Estilos de párrafo > marque la casilla para Habilitar estilos de párrafo:

Haga clic en Listo para guardar la actualización de 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 la variable Text componente y añadir estilos de párrafo adicionales en pantalla completa en el menú contextual.
También debe poder arrastrar y soltar una imagen desde el Buscador de recursos:
Añada sus propias imágenes mediante AEM Assets o instalar la base de código finalizada para el estándar Sitio de referencia WKND. La variable Sitio de referencia WKND incluye muchas imágenes que se pueden reutilizar en el SPA WKND. El paquete se puede instalar mediante Administrador de paquetes AEM.

Inspect: contenedor de diseño

Compatibilidad con Contenedor de diseño es proporcionado automáticamente por AEM SPA Editor SDK. La variable Contenedor de diseño, como se indica con el nombre, es un container componente. Los componentes de contenedor son componentes que aceptan estructuras JSON que representan other y cree instancias de ellos de forma dinámica.

Inspeccionemos más el contenedor de diseño.

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

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

La variable Contenedor de diseño tiene un sling:resourceType de wcm/foundation/components/responsivegrid y es reconocido por el SPA Editor usando la variable :type como la Text y Image componentes.

Las mismas capacidades para cambiar el tamaño de un componente mediante Modo de diseño están disponibles con SPA Editor.
Volver a http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html. Agregar adicional Imagen e intente cambiar el tamaño de los componentes mediante el Diseño opción:
Vuelva a abrir el modelo JSON http://localhost:4502/content/wknd-spa-angular/us/en.model.json y observe la 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. Más detalles sobre la cuadrícula interactiva se puede encontrar aquí.
Vuelva al IDE y en el 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, tablety phone) que usa 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 de respuesta y las políticas de texto enriquecido actualizadas de la variable Text para crear una vista como la siguiente:

Felicitaciones!

Enhorabuena, ha aprendido a asignar SPA componentes a los componentes de AEM y ha implementado un nuevo Image componente. 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 desproteja el código localmente cambiando a la rama Angular/map-components-solution.

Siguientes pasos

Navegación y enrutamiento : Aprenda 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 el IDE de código de Visual Studio y VSCode AEM Sync pero podría estar utilizando cualquier herramienta y cualquier IDE que haya configurado extraer o importar contenido de una instancia local de AEM.

En el IDE de código de Visual Studio, asegúrese de que tiene VSCode AEM Sync instalado mediante la extensión de Marketplace:
Expanda el ui.content en el explorador de proyectos y vaya a /conf/wknd-spa-angular/settings/wcm/templates.
Clic con el botón derecho el templates carpeta y seleccione Importar desde AEM servidor:
Repita los pasos para importar contenido, pero seleccione la opción políticas carpeta ubicada en /conf/wknd-spa-angular/settings/wcm/policies.
Inspect la variable filter.xml archivo 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>
```
La variable filter.xml es responsable de identificar las rutas de los nodos que se instalarán con el paquete. Observe que mode="merge" en cada uno de los filtros que indica que el contenido existente no se modificará, solo se añadirá contenido nuevo. Dado que los autores de contenido pueden estar actualizando estas rutas, es importante que una implementación de código not sobrescribir contenido. Consulte la Documentación de FileVault para obtener más información sobre cómo trabajar con elementos de filtro.

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

Búsqueda nueva y mejorada

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 de Business.Adobe.com

En esta página

Ver siguiente:

Aprender

Documentación

Comunidad

Obtener asistencia

Recursos

Cuenta de Adobe

Adobe