Asignación de componentes de SPA a componentes de AEM

Obtenga información sobre cómo asignar componentes de React 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 AEM se puede insertar automáticamente en un componente React como props.

Objetivo

  1. Obtenga información sobre cómo asignar AEM componentes a SPA componentes.
  2. Inspect cómo un componente React utiliza propiedades dinámicas pasadas desde AEM.
  3. Obtenga información sobre cómo utilizar los React AEM Core Components predeterminados.

Qué va a generar

Este capítulo inspeccionará cómo se asigna el componente de SPA proporcionado Text al componente de AEM Text. Los componentes principales de React, como el componente de SPA Image, se utilizarán en la SPA y se crearán 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. Este capítulo es una continuación del capítulo Integrate the SPA , sin embargo, para seguir todo lo que necesita es un proyecto de AEM habilitado para SPA.

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 React

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

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

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

  2. Seleccione la pestaña JSON para uno de los ejemplos:

    Modelo JSON de texto

    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.

  3. Vea la salida JSON en http://localhost:4502/content/wknd-spa-react/us/en.model.json. Debe poder encontrar una entrada similar a:

    "text": {
        "id": "text-a647cec03a",
        "text": "<p>Hello World! Updated content!</p>\r\n",
        "richText": true,
        ":type": "wknd-spa-react/components/text",
        "dataLayer": {}
       }
    

Inspect del componente Texto SPA

  1. En el IDE de su elección, abra el proyecto AEM para el SPA. Expanda el módulo ui.frontend y abra el archivo Text.js en ui.frontend/src/components/Text/Text.js.

  2. El primer área que analizaremos es la class Text en ~line 40:

    class Text extends Component {
    
        get richTextContent() {
            return (<div
                    id={extractModelId(this.props.cqPath)}
                    data-rte-editelement
                    dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(this.props.text)}} />
                    );
        }
    
        get textContent() {
            return <div>{this.props.text}</div>;
        }
    
        render() {
            return this.props.richText ? this.richTextContent : this.textContent;
        }
    }
    

    Text es un componente React estándar. El componente utiliza this.props.richText para determinar si el contenido que se va a procesar va a ser texto enriquecido o texto sin formato. El "contenido" real utilizado proviene de this.props.text.

    Para evitar un posible ataque XSS, el texto enriquecido se escapa mediante DOMPurify antes de utilizar peligrosamenteSetInnerHTML para representar el contenido. Recuerde las propiedades richText y text del modelo JSON anteriormente en el ejercicio.

  3. A continuación, eche un vistazo a la TextEditConfig en ~line 29:

    const TextEditConfig = {
    emptyLabel: 'Text',
    
        isEmpty: function(props) {
            return !props || !props.text || props.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.

  4. Finalmente, eche un vistazo a la llamada MapTo en ~line 62:

    export default MapTo('wknd-spa-react/components/text')(Text, TextEditConfig);
    

    MapTo es proporcionado por AEM SPA Editor JS SDK (@adobe/aem-react-editable-components). La ruta wknd-spa-react/components/text representa el sling:resourceType del componente AEM. Esta ruta se compara con el :type expuesto por el modelo JSON observado anteriormente. MapTo se encarga de analizar la respuesta del modelo JSON y de pasar los valores correctos props al componente SPA.

    Puede encontrar la definición del componente AEM Text en ui.apps/src/main/content/jcr_root/apps/wknd-spa-react/components/text.

Usar componentes principales de React

Componentes AEM WCM: implementación React Core y componentes AEM WCM: editor de spa: implementación React Core. Se trata de un conjunto de componentes de interfaz de usuario reutilizables que se asignan a componentes de AEM listos para usar. La mayoría de los proyectos pueden reutilizar estos componentes como punto de partida para su propia implementación.

  1. En el código del proyecto, abra el archivo import-components.js en ui.frontend/src/components.
    Este archivo importa todos los componentes de SPA que se asignan a AEM componentes. Dada la naturaleza dinámica de la implementación del Editor de SPA, debemos hacer referencia explícita a cualquier componente de SPA vinculado a AEM componentes que se pueden crear. Esto permite a un autor AEM elegir utilizar un componente dondequiera que lo desee en la aplicación.

  2. Las siguientes instrucciones de importación incluyen SPA componentes escritos en el proyecto:

    import './Page/Page';
    import './Text/Text';
    import './Container/Container';
    import './ExperienceFragment/ExperienceFragment';
    
  3. Existen otros imports de @adobe/aem-core-components-react-spa y @adobe/aem-core-components-react-base. Se trata de importar los componentes de React Core y ponerlos a disposición del proyecto actual. A continuación, se asignan a componentes de AEM específicos del proyecto mediante el MapTo, como con el ejemplo de componente Text anterior.

Actualizar directivas AEM

Las políticas son una característica de AEM plantillas que proporciona a los desarrolladores y a los usuarios avanzados un control granular sobre qué componentes están disponibles para usar. Los componentes principales de React se incluyen en el código SPA, pero deben habilitarse mediante una directiva para poder utilizarse en la aplicación.

  1. En la pantalla Inicio de AEM, vaya a Herramientas > Plantillas > WKND SPA React.

  2. Seleccione y abra la plantilla SPA Página para editarla.

  3. Seleccione el Contenedor de diseño y haga clic en su icono directiva para editar la política:

    directiva de contenedor de diseño

  4. En Componentes permitidos > WKND SPA React - Content > marque Imagen, Teaser y Título.

    Componentes actualizados disponibles

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

    Definición de componentes predeterminados

    Introduzca un mime type de image/*.

    Haga clic en Listo para guardar las actualizaciones de directivas.

  5. 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:

    Habilitar formato RTE

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

    Activar estilos de párrafo

    Haga clic en Listo para guardar la actualización de la directiva.

Contenido de autor

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

  2. Ahora debería poder utilizar los componentes adicionales Image, Teaser y Title en la página.

    Componentes adicionales

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

    Edición de texto enriquecido en pantalla completa

  4. También debe poder arrastrar y soltar una imagen desde el Buscador de recursos:

    Arrastrar y soltar imagen

  5. Experiencia con los componentes Title y Teaser.

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

    Package Manager instalar wknd.all

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.

  1. En un explorador, vaya a http://localhost:4502/content/wknd-spa-react/us/en.model.json

    API de modelo JSON: cuadrícula interactiva

    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.

  2. Vuelva a http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html. Añada componentes Image adicionales e intente redimensionarlos con la opción Layout:

    Cambiar el tamaño de la imagen mediante el modo Diseño

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

    Nombres de clase de columna

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

  4. 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-react/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 768px.

  5. Debe poder utilizar las capacidades adaptables y las políticas de texto enriquecido actualizadas del componente Text para crear una vista como la siguiente:

    Creación final de un ejemplo de capítulo

Felicitaciones!

Felicidades, ha aprendido a asignar SPA componentes a los componentes AEM y ha utilizado los componentes principales de React. También tiene la oportunidad de explorar las capacidades de respuesta del Contenedor de diseño.

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 router React y los componentes principales React.

(Bono) Persistir configuraciones para 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.

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

    VSCode AEM Sync

  2. Expanda el módulo ui.content en el explorador de proyectos y vaya a /conf/wknd-spa-react/settings/wcm/templates.

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

    Plantilla de importación de VSCode

  4. Repita los pasos para importar contenido pero seleccione la carpeta policy ubicada en /conf/wknd-spa-react/settings/wcm/templates/policies.

  5. Inspect: 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-react" mode="merge"/>
         <filter root="/content/wknd-spa-react" mode="merge"/>
         <filter root="/content/dam/wknd-spa-react" mode="merge"/>
         <filter root="/content/experience-fragments/wknd-spa-react" 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.

(Bonos) Crear un componente de imagen personalizado

Los componentes principales de React ya han proporcionado un componente de imagen SPA. Sin embargo, si desea realizar prácticas adicionales, cree su propia implementación de React que se asigne al AEM Componente de imagen. 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.

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

    JSON, componente principal de imagen

    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.

Implementar el componente Imagen

  1. A continuación, cree una nueva carpeta denominada Image en ui.frontend/src/components.

  2. Debajo de la carpeta Image cree un nuevo archivo llamado Image.js.

    Archivo Image.js

  3. Agregue las siguientes instrucciones import a Image.js:

    import React, {Component} from 'react';
    import {MapTo} from '@adobe/aem-react-editable-components';
    
  4. A continuación, añada ImageEditConfig para determinar cuándo se debe mostrar el marcador de posición en AEM:

    export const ImageEditConfig = {
    
        emptyLabel: 'Image',
    
        isEmpty: function(props) {
            return !props || !props.src || props.src.trim().length < 1;
        }
    };
    

    El marcador de posición mostrará si la propiedad src no está establecida.

  5. A continuación, implemente la clase Image:

     export default class Image extends Component {
    
        get content() {
            return <img     className="Image-src"
                            src={this.props.src}
                            alt={this.props.alt}
                            title={this.props.title ? this.props.title : this.props.alt} />;
        }
    
        render() {
            if(ImageEditConfig.isEmpty(this.props)) {
                return null;
            }
    
            return (
                    <div className="Image">
                        {this.content}
                    </div>
            );
        }
    }
    

    El código anterior renderizará un <img> basado en las props src, alt y title pasadas por el modelo JSON.

  6. Agregue el código MapTo para asignar el componente React al componente AEM:

    MapTo('wknd-spa-react/components/image')(Image, ImageEditConfig);
    

    Tenga en cuenta que la cadena wknd-spa-react/components/image corresponde a la ubicación del componente AEM en ui.apps en: ui.apps/src/main/content/jcr_root/apps/wknd-spa-react/components/image.

  7. Cree un nuevo archivo llamado Image.css en el mismo directorio y agregue lo siguiente:

    .Image-src {
        margin: 1rem 0;
        width: 100%;
        border: 0;
    }
    
  8. En Image.js agregue una referencia al archivo en la parte superior debajo de las instrucciones import:

    import React, {Component} from 'react';
    import {MapTo} from '@adobe/aem-react-editable-components';
    
    require('./Image.css');
    
  9. Abra el archivo ui.frontend/src/components/import-components.js y agregue una referencia al nuevo componente Image:

    import './Page/Page';
    import './Text/Text';
    import './Container/Container';
    import './ExperienceFragment/ExperienceFragment';
    import './Image/Image'; //add reference to Image component
    
  10. En import-components.js comente la imagen del componente principal de React:

    //MapTo('wknd-spa-react/components/image')(ImageV2, {isEmpty: ImageV2IsEmptyFn});
    

    Esto garantizará que se utilice nuestro componente de imagen personalizado en su lugar.

  11. Desde la raíz del proyecto, implemente el código de SPA para AEM con Maven:

    $ cd aem-guides-wknd-spa.react
    $ mvn clean install -PautoInstallSinglePackage
    
  12. Inspect el SPA en AEM. Cualquier componente Imagen de la página debe seguir funcionando. Inspect muestra la salida representada y debería ver el marcado de nuestro componente de imagen personalizado en lugar del componente principal de React.

    Margen de componente de imagen personalizada

    <div class="Image">
        <img class="Image-src" src="/content/image-src.jpg">
    </div>
    

    React Core Component Image markup

    <div class="cmp-image cq-dd-image">
        <img src="/content/image-src.jpg" class="cmp-image__image">
    </div>
    

    Esta es una buena introducción para ampliar e implementar sus propios componentes.

En esta página