Componentes de contenedor editables

Componentes fijos proporciona cierta flexibilidad para la creación SPA contenido, aunque este enfoque es rígido y requiere que los desarrolladores definan la composición exacta del contenido editable. Para que los autores puedan crear experiencias excepcionales, SPA Editor admite el uso de componentes de contenedor en el SPA. Los componentes de contenedor permiten a los autores arrastrar y soltar los componentes permitidos en el contenedor y crearlos, como pueden en la creación tradicional de AEM Sites.

Componentes de contenedor editables

En este capítulo, se añade un contenedor editable a la vista de inicio para que los autores puedan componer y diseñar experiencias de contenido enriquecido utilizando AEM componentes principales React directamente en el SPA.

Actualizar la aplicación WKND

Para añadir un componente contenedor a la vista Inicio:

  • Importar el componente ResponsiveGrid del componente React Editable de AEM
  • Importar y registrar AEM componentes principales de React (texto e imagen) para utilizarlos en el componente contenedor

Importar en el componente contenedor de cuadrícula interactiva

Para colocar un área editable en la vista Inicio, debemos:

  1. Importar el componente ResponsiveGrid desde @adobe/aem-react-editable-components
  2. Regístrelo usando withMappable para que los desarrolladores puedan colocarlo en el SPA
  3. Además, regístrese con MapTo de modo que se pueda reutilizar en otros componentes de contenedor, anidando efectivamente contenedores.

Para ello:

  1. Abra el proyecto SPA en su IDE

  2. Cree un componente React en src/components/aem/AEMResponsiveGrid.js

  3. Agregue el siguiente código a AEMResponsiveGrid.js

    // Import the withMappable API provided bu the AEM SPA Editor JS SDK
    import { withMappable, MapTo } from '@adobe/aem-react-editable-components';
    
    // Import the base ResponsiveGrid component
    import { ResponsiveGrid } from "@adobe/aem-react-editable-components";
    
    // The sling:resourceType for which this Core Component is registered with in AEM
    const RESOURCE_TYPE = "wcm/foundation/components/responsivegrid";
    
    // Create an EditConfig to allow the AEM SPA Editor to properly render the component in the Editor's context
    const EditConfig = {
        emptyLabel: "Layout Container",  // The component placeholder in AEM SPA Editor
        isEmpty: function(props) {
            return props.cqItemsOrder == null || props.cqItemsOrder.length === 0;
        },                              // The function to determine if this component has been authored
        resourceType: RESOURCE_TYPE     // The sling:resourceType this SPA component is mapped to
    };
    
    // MapTo allows the AEM SPA Editor JS SDK to dynamically render components added to SPA Editor Containers
    MapTo(RESOURCE_TYPE)(ResponsiveGrid, EditConfig);
    
    // withMappable allows the component to be hardcoded into the SPA; <AEMResponsiveGrid .../>
    const AEMResponsiveGrid = withMappable(ResponsiveGrid, EditConfig);
    
    export default AEMResponsiveGrid;
    

El código es similar AEMTitle.js that se ha importado el componente Título de los componentes principales de AEM alcance.

La variable AEMResponsiveGrid.js debe tener el siguiente aspecto:

AEMResponsiveGrid.js

Uso del componente SPA AEMResponsiveGrid

Ahora que AEM componente ResponsiveGrid está registrado en y disponible para su uso dentro de la SPA, podemos colocarlo en la vista Inicio.

  1. Abra y edite react-app/src/Home.js

  2. Importe el AEMResponsiveGrid y colóquelo encima de <AEMTitle ...> componente.

  3. Establezca los atributos siguientes en la variable <AEMResponsiveGrid...> componente

    • pagePath = '/content/wknd-app/us/en/home'
    • itemPath = 'root/responsivegrid'

    Esto indica a la AEMResponsiveGrid para recuperar su contenido del recurso de AEM:

    • /content/wknd-app/us/en/home/jcr:content/root/responsivegrid

    La variable itemPath se asigna a la variable responsivegrid nodo definido en la variable Remote SPA Page AEM plantilla y se crea automáticamente en las nuevas páginas AEM creadas a partir de la variable Remote SPA Page Plantilla AEM.

    Actualizar Home.js para agregar la variable <AEMResponsiveGrid...> componente.

    ...
    import AEMResponsiveGrid from './aem/AEMResponsiveGrid';
    ...
    
    function Home() {
        return (
            <div className="Home">
                <AEMResponsiveGrid
                    pagePath='/content/wknd-app/us/en/home'
                    itemPath='root/responsivegrid'/>
    
                <AEMTitle
                    pagePath='/content/wknd-app/us/en/home'
                    itemPath='title'/>
                <Adventures />
            </div>
        );
    }
    

La variable Home.js debe tener el siguiente aspecto:

Home.js

Crear componentes editables

Para obtener el efecto completo de la experiencia de creación flexible, los contenedores se proporcionan en SPA Editor. Ya hemos creado un componente Título editable, pero vamos a hacer algunos más que permitan a los autores utilizar Componentes principales de Texto e Imagen AEM WCM en el componente contenedor recién agregado.

Componente de texto

  1. Abra el proyecto SPA en su IDE

  2. Cree un componente React en src/components/aem/AEMText.js

  3. Agregue el siguiente código a AEMText.js

    import { withMappable, MapTo } from '@adobe/aem-react-editable-components';
    import { TextV2, TextV2IsEmptyFn } from "@adobe/aem-core-components-react-base";
    
    const RESOURCE_TYPE = "wknd-app/components/text";
    
    const EditConfig = {
        emptyLabel: "Text",
        isEmpty: TextV2IsEmptyFn,
        resourceType: RESOURCE_TYPE
    };
    
    MapTo(RESOURCE_TYPE)(TextV2, EditConfig);
    
    const AEMText = withMappable(TextV2, EditConfig);
    
    export default AEMText;
    

La variable AEMText.js debe tener el siguiente aspecto:

AEMText.js

Componente de imagen

  1. Abra el proyecto SPA en su IDE

  2. Cree un componente React en src/components/aem/AEMImage.js

  3. Agregue el siguiente código a AEMImage.js

    import { withMappable, MapTo } from '@adobe/aem-react-editable-components';
    import { ImageV2, ImageV2IsEmptyFn } from "@adobe/aem-core-components-react-base";
    
    const RESOURCE_TYPE = "wknd-app/components/image";
    
    const EditConfig = {
        emptyLabel: "Image",
        isEmpty: ImageV2IsEmptyFn,
        resourceType: RESOURCE_TYPE
    };
    
    MapTo(RESOURCE_TYPE)(ImageV2, EditConfig);
    
    const AEMImage = withMappable(ImageV2, EditConfig);
    
    export default AEMImage;
    
  4. Creación de un archivo SCSS src/components/aem/AEMImage.scss que proporciona estilos personalizados para la variable AEMImage.scss. Estos estilos se dirigen a las clases CSS de notación BEM del componente principal React de AEM.

  5. Agregue la siguiente SCSS a AEMImage.scss

    .cmp-image__image {
        margin: 1rem 0;
        width: 100%;
        border: 0;
     }
    
  6. Importar AEMImage.scss en AEMImage.js

    ...
    import './AEMImage.scss';
    ...
    

La variable AEMImage.js y AEMImage.scss debería tener el siguiente aspecto:

AEMImage.js y AEMImage.scs

Importación de componentes editables

El recién creado AEMText y AEMImage SPA componentes son referenciados en la SPA y se crean instancias de ellos de forma dinámica en función del JSON devuelto por AEM. Para asegurarse de que estos componentes están disponibles para el SPA, cree instrucciones de importación para ellos en Home.js

  1. Abra el proyecto SPA en su IDE

  2. Abra el archivo src/Home.js

  3. Agregar instrucciones de importación para AEMText y AEMImage

    ...
    import AEMText from './components/aem/AEMText';
    import AEMImage from './components/aem/AEMImage';
    ...
    

El resultado debería ser como:

Home.js

Si estas importaciones son not se ha añadido la variable AEMText y AEMImage SPA no invoca el código y, por lo tanto, los componentes no se registran en los tipos de recurso proporcionados.

Configuración del contenedor en AEM

AEM componentes de contenedor utilizan políticas para dictar sus componentes permitidos. Esta es una configuración crítica cuando se utiliza SPA Editor, ya que solo AEM componentes principales de WCM que tienen asignados SPA componentes equivalentes pueden procesarlos los SPA. Asegúrese de que solo están permitidos los componentes que hemos proporcionado SPA implementaciones de :

  • AEMTitle asignado a wknd-app/components/title
  • AEMText asignado a wknd-app/components/text
  • AEMImage asignado a wknd-app/components/image

Para configurar el contenedor de cuadrícula de respuesta de la plantilla Página de SPA remota:

  1. Iniciar sesión en AEM Author

  2. Vaya a Herramientas > General > Plantillas > Aplicación WKND

  3. Editar Página SPA informe

    Políticas de cuadrícula adaptable

  4. Select Estructura en el conmutador de modo en la parte superior derecha

  5. Toque para seleccionar el Contenedor de diseño

  6. Toque . Política en la barra emergente

    Políticas de cuadrícula adaptable

  7. A la derecha, debajo de Componentes permitidos pestaña, expandir APLICACIÓN WKND: CONTENIDO

  8. Asegúrese de que solo están seleccionadas las siguientes opciones:

    • Imagen
    • Texto
    • Título

    Página SPA remota

  9. Puntee Listo

Creación del contenedor en AEM

Después de actualizar el SPA para incrustar el <AEMResponsiveGrid...>, contenedores para tres componentes principales AEM React (AEMTitle, AEMTexty AEMImage), y AEM se actualiza con una directiva de plantilla coincidente, podemos empezar a crear contenido en el componente contenedor.

  1. Iniciar sesión en AEM Author

  2. Vaya a Sites > Aplicación WKND

  3. Toque Página principal y seleccione Editar desde la barra de acciones superior

    • Aparece un componente Texto "Hola a todos", ya que se agregó automáticamente al generar el proyecto a partir del tipo de archivo del proyecto AEM
  4. Select Editar del selector de modo en la parte superior derecha del Editor de páginas

  5. Busque la variable Contenedor de diseño área editable debajo del título

  6. Abra el Barra lateral del Editor de páginas y seleccione Vista Componentes

  7. Arrastre los componentes siguientes al Contenedor de diseño

    • Imagen
    • Título
  8. Arrastre los componentes para reordenarlos en el siguiente orden:

    1. Título
    2. Imagen
    3. Texto
  9. Autor el Título componente

    1. Pulse el componente Título y pulse el botón llave para editar el componente Título
    2. Añada el siguiente texto:
      • Título: El verano viene, ¡aprovechémoslo al máximo!
      • Tipo: H1
    3. Puntee Listo
  10. Autor el Imagen componente

    1. Arrastre una imagen desde la barra lateral (después de cambiar a la vista Recursos) del componente Imagen
    2. Pulse el componente Imagen y pulse el botón llave icono para editar
    3. Marque la La imagen es decorativa casilla de verificación
    4. Puntee Listo
  11. Autor el Texto componente

    1. Edite el componente Texto tocando el componente Texto y tocando el llave icono
    2. Añada el siguiente texto:
      • En este momento, puede obtener un 15% de todas las aventuras de una semana y un 20% de descuento en todas las aventuras de dos semanas o más. En el cierre de compra, añada el código de campaña SUMERISCOMING para obtener sus descuentos.
    3. Puntee Listo
  12. Los componentes ahora se crean, pero se apilan verticalmente.

    Componentes creados

    Utilice AEM modo Diseño para que podamos ajustar el tamaño y el diseño de los componentes.

  13. Cambie a Modo de diseño uso del selector de modo en la parte superior derecha

  14. Cambiar tamaño los componentes Imagen y texto, de forma que estén uno al lado del otro

    • Imagen debe ser 8 columnas anchas
    • Texto debe ser 3 columnas anchas

    Componentes de diseño

  15. Vista previa los cambios realizados en AEM Editor de páginas

  16. Actualice la aplicación WKND que se ejecuta localmente en http://localhost:3000 para ver los cambios creados.

    Componente de contenedor en SPA

Felicitaciones!

Ha agregado un componente contenedor que permite que los autores añadan componentes editables a la aplicación WKND. Ahora sabe cómo:

  • Utilice el componente AEM React Editable Component's ResponsiveGrid en el SPA
  • Registre AEM componentes principales de React (texto e imagen) para utilizarlos en la SPA a través del componente contenedor
  • Configure la plantilla Página de SPA remota para permitir los componentes principales habilitados para SPA
  • Añadir componentes editables al componente contenedor
  • Creación y diseño de componentes en SPA Editor

Siguientes pasos

El siguiente paso utiliza esta misma técnica para añadir un componente editable a una ruta de detalles de aventura en el SPA.

En esta página