SPA AEM Asignación de componentes de a componentes de map-components

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

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

$ mvn clean install -PautoInstallSinglePackage

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

$ mvn clean install -PautoInstallSinglePackage -Pclassic

SPA AEM Antes de saltar al código de la, es importante comprender el modelo JSON que proporciona el usuario de la interfaz de usuario de JSON de la que se proporciona la aplicación. Vaya a la Biblioteca de componentes principales y vea la página del componente Texto. AEM La biblioteca de componentes principales proporciona ejemplos de todos los componentes principales de la.

Seleccione la ficha JSON para uno de los ejemplos:

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

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

SPA text y richText son propiedades adicionales que se exponen al componente de la.

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 usar el modelo JSON ficticio.

Debería ver una nueva ventana del explorador abierta a http://localhost:4200/content/wknd-spa-angular/us/en/home.html

AEM SPA En el IDE de su elección, abra el Proyecto de para el 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 el 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) {}
}

El decorador @Input() se usa para declarar campos cuyos valores se establecen a través del 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 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 usa para "eliminar" el HTML sin procesar y evitar vulnerabilidades de ejecución de scripts en sitios múltiples. El método está enlazado a la propiedad innerHtml mediante el decorador @HostBinding.

A continuación, inspeccione TextEditConfig en ~line 24:

const TextEditConfig = {
    emptyLabel: 'Text',
    isEmpty: cqModel =>
        !cqModel || !cqModel.text || cqModel.text.trim().length < 1
};

AEM El código anterior es responsable de determinar cuándo procesar el marcador de posición en el entorno de autor de la. Si el método isEmpty devuelve true, se procesará el marcador de posición.

Finalmente, eche un vistazo a la llamada de MapTo en la línea 53:

MapTo('wknd-spa-angular/components/text')(TextComponent, TextEditConfig );

AEM SPA MapTo lo proporciona el SDK de JS del Editor de la aplicación de código de tiempo de ejecución de la aplicación de la aplicación de código abierto de la aplicación de (@adobe/cq-angular-editable-components). AEM La ruta de acceso wknd-spa-angular/components/text representa el sling:resourceType del componente de la. Esta ruta de acceso coincide con el :type expuesto por el modelo JSON observado anteriormente. SPA MapTo analiza la respuesta del modelo JSON y pasa los valores correctos a las variables @Input() del componente de.

AEM Puede encontrar la definición del componente Text de la 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 la línea 62, actualice el primer valor Text para que utilice 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 que produce el servidor de desarrollo de Webpack:

Intente alternar la propiedad richText entre true / false para ver la lógica de procesamiento en acción.

Inspect text.component.html a las ui.frontend/src/app/components/text/text.component.html.

Este archivo está vacío porque la propiedad innerHTML establece todo el contenido del componente.

Inspect 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 {}

AEM SPA TextComponent no se incluye explícitamente, sino de forma dinámica a través de AEMResponsiveGridComponent proporcionado por el SDK de JS de Editor de de trabajo de la aplicación. Por lo tanto, debe aparecer en la matriz app.module.ts' entryComponents.

Vaya a los ejemplos de imagen de la biblioteca de componentes principales.

SPA Las propiedades de src, alt y title se usan para rellenar el componente de Image de la.

Vuelva a su IDE y abra en.model.json a las 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 la línea ~line 70 agregue una entrada JSON para el modelo image (no se olvide de la coma final , después del segundo 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 muestra en /mock-content/adobestock-140634652.jpeg que se usa con el servidor de desarrollo de Webpack.

Puedes ver en.model.json aquí.

Añada una foto estándar para que la muestre el componente.

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

Detenga el servidor de desarrollo de Webpack si se ha iniciado.

Cree un nuevo componente de imagen ejecutando el comando ng generate component de CLI de 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 actualícelo de la siguiente manera:

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

AEM ImageEditConfig es la configuración para determinar si se debe procesar el marcador de posición de autor en, en función de si se ha rellenado la propiedad src.

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

hasImage() es un método que determinará si se debe procesar la imagen.

SPA AEM MapTo asigna el componente de la al componente de la 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 procesará 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;
}

Abra app.module.ts y agregue ImageComponent a la matriz entryComponents:

entryComponents: [TextComponent, PageComponent, ImageComponent],

Al igual que TextComponent, ImageComponent se carga dinámicamente y debe incluirse en la matriz entryComponents.

Inicie webpack dev server para ver el procesamiento de ImageComponent.

$ npm run start:mock

SPA Imagen agregada a la página de inicio de sesión

AEM Detenga el servidor de desarrollo de Webpack y, desde la raíz del proyecto, implemente los cambios para usar sus habilidades con Maven:

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

AEM SPA Desde la pantalla Inicio de la, vaya a Herramientas > Plantillas > Angular de trabajo de WKND.

SPA Seleccione y edite la Página de la:

SPA

Seleccione el contenedor de diseño y haga clic en su icono directiva para editar la directiva:

SPA En Componentes permitidos > Angular de trabajo de WKND - Contenido > compruebe el componente Imagen:

SPA En Componentes predeterminados > Agregar asignación y elija el componente Imagen - Angular de trabajo de WKND - Contenido:

Escriba un tipo mime de image/*.

Haga clic en Listo para guardar las actualizaciones de la directiva.

En el contenedor de diseño, haga clic en el icono directiva para el componente Texto:

SPA Cree una nueva directiva con el nombre WKND Texto de la. En Complementos > Formato > marque todas las casillas para habilitar 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 la directiva.

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

También debería poder editar el componente Text y agregar estilos de párrafo adicionales en el modo pantalla completa.

También debería poder arrastrar y soltar una imagen desde Buscador de recursos:

Agregue sus propias imágenes a través de AEM Assets o instale la base de código final para el sitio de referencia WKND estándar. SPA El sitio de referencia WKND incluye muchas imágenes que se pueden reutilizar en el sitio de referencia de WKND. AEM El paquete se puede instalar usando el Administrador de paquetes de.

En el IDE, abra responsive-grid.component.ts a las ui.frontend/src/app/components/responsive-grid:

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

MapTo('wcm/foundation/components/responsivegrid')(AEMResponsiveGridComponent);

AEM SPA AEMResponsiveGridComponent se implementó como parte del SDK del Editor de código de tiempo de la y se incluyó 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

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

SPA Las mismas capacidades para cambiar el tamaño de un componente mediante Modo de diseño están disponibles con el Editor de elementos de diseño de la página de la página de la página de la página de la página de la página de la página de la página de inicio de la página de.

Volver a http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html. Agregue componentes adicionales de Image e intente cambiar su tamaño con la opción Diseño:

Vuelva a abrir el modelo JSON http://localhost:4502/content/wknd-spa-angular/us/en.model.json y observe columnClassNames como parte del JSON:

El nombre de clase aem-GridColumn--default--4 indica que el componente debe tener 4 columnas de ancho basado en una cuadrícula de 12 columnas. 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) utilizados por el contenedor de diseño. El propósito de este archivo es personalizarlo 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 directivas de texto enriquecido actualizadas del componente Text para crear una vista como la siguiente:

AEM En el IDE de código de Visual Studio, asegúrese de que tiene VSCode Sync instalado mediante la extensión Marketplace:

AEM

Expanda el módulo ui.content en el explorador del proyecto y vaya a /conf/wknd-spa-angular/settings/wcm/templates.

AEM Haga clic con el botón derecho en la carpeta templates y seleccione Importar desde el servidor:

Repita los pasos para importar contenido, pero seleccione la carpeta policies ubicada en /conf/wknd-spa-angular/settings/wcm/policies.

Inspect agregó el archivo filter.xml ubicado en ui.content/src/main/content/META-INF/vault/filter.xml.

<!--ui.content 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 acceso de los nodos instalados 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 sobrescriba el contenido no. 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.