Componentes de contenedor editables

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

SPA En este capítulo, agregamos un contenedor editable a la vista de inicio que permite a los autores componer y diseñar experiencias de contenido enriquecido mediante componentes de React editables directamente en la.

Actualización de la aplicación WKND

Para agregar un componente de contenedor a la vista Inicio:

AEM Importar el componente editable de React de la ResponsiveGrid componente
Importar y registrar componentes React editables personalizados (texto e imagen) para utilizarlos en el componente Cuadrícula interactiva

Uso del componente Cuadrícula interactiva

Para agregar un área editable a la vista Inicio:

Abrir y editar react-app/src/components/Home.js
Importe el ResponsiveGrid componente de @adobe/aem-react-editable-components y agréguelo a la Home componente.
Establezca los siguientes atributos en la variable <ResponsiveGrid...> componente
- pagePath = '/content/wknd-app/us/en/home'
- itemPath = 'root/responsivegrid'
Esto indica a la ResponsiveGrid AEM para recuperar su contenido del recurso de la:
- /content/wknd-app/us/en/home/jcr:content/root/responsivegrid
El itemPath se asigna a responsivegrid nodo definido en la Remote SPA Page AEM AEM La plantilla y la plantilla se crean automáticamente en las nuevas páginas de creadas a partir de Remote SPA Page AEM Plantilla de.

Actualizar Home.js para añadir el <ResponsiveGrid...> componente.
```
...
import { ResponsiveGrid } from '@adobe/aem-react-editable-components';
...

function Home() {
    return (
        <div className="Home">
            <ResponsiveGrid
                pagePath='/content/wknd-app/us/en/home'
                itemPath='root/responsivegrid'/>

            <EditableTitle
                pagePath='/content/wknd-app/us/en/home'
                itemPath='title'/>

            <Adventures />
        </div>
    );
}
```

El Home.js el archivo debe tener un aspecto similar al siguiente:

Home.js

Crear componentes editables

SPA Para obtener el máximo efecto de la flexibilidad que ofrecen los contenedores de experiencia de creación en el Editor de. Ya hemos creado un componente Título editable, pero vamos a hacer algunos más que permitan a los autores utilizar componentes Texto e Imagen editables en el componente Cuadrícula interactiva recién agregado.

Los nuevos componentes Texto editable y Reacción de imagen se crean utilizando el patrón de definición de componente editable exportado en componentes fijos editables.

Componente de texto editable

SPA Abra el proyecto de la en su IDE
Cree un componente de React en src/components/editable/core/Text.js

Agregue el siguiente código a Text.js

import React from 'react'

const TextPlain = (props) => <div className={props.baseCssClass}><p className="cmp-text__paragraph">{props.text}</p></div>;
const TextRich = (props) => {
const text = props.text;
const id = (props.id) ? props.id : (props.cqPath ? props.cqPath.substr(props.cqPath.lastIndexOf('/') + 1) : "");
    return <div className={props.baseCssClass} id={id} data-rte-editelement dangerouslySetInnerHTML={{ __html: text }} />
};

export const Text = (props) => {
    if (!props.baseCssClass) {
        props.baseCssClass = 'cmp-text'
    }

    const { richText = false } = props

    return richText ? <TextRich {...props} /> : <TextPlain {...props} />
    }

    export function textIsEmpty(props) {
    return props.text == null || props.text.length === 0;
}

Cree un componente React editable en src/components/editable/EditableText.js

Agregue el siguiente código a EditableText.js

import React from 'react'
import { EditableComponent, MapTo } from '@adobe/aem-react-editable-components';
import { Text, textIsEmpty } from "./core/Text";
import { withConditionalPlaceHolder } from "./core/util/withConditionalPlaceholder";
import { withStandardBaseCssClass } from "./core/util/withStandardBaseCssClass";

const RESOURCE_TYPE = "wknd-app/components/text";

const EditConfig = {
    emptyLabel: "Text",
    isEmpty: textIsEmpty,
    resourceType: RESOURCE_TYPE
};

export const WrappedText = (props) => {
    const Wrapped = withConditionalPlaceHolder(withStandardBaseCssClass(Text, "cmp-text"), textIsEmpty, "Text V2")
    return <Wrapped {...props} />
};

const EditableText = (props) => <EditableComponent config={EditConfig} {...props}><WrappedText /></EditableComponent>

MapTo(RESOURCE_TYPE)(EditableText);

export default EditableText;

La implementación del componente Texto editable debería tener un aspecto similar al siguiente:

Componente de texto editable

Componente de imagen

SPA Abra el proyecto de la en su IDE
Cree un componente de React en src/components/editable/core/Image.js

Agregue el siguiente código a Image.js

import React from 'react'
import { RoutedLink } from "./RoutedLink";

export const imageIsEmpty = (props) => (!props.src) || props.src.trim().length === 0

const ImageInnerContents = (props) => {
return (<>
    <img src={props.src}
        className={props.baseCssClass + '__image'}
        alt={props.alt} />
    {
        !!(props.title) && <span className={props.baseCssClass + '__title'} itemProp="caption">{props.title}</span>
    }
    {
        props.displayPopupTitle && (!!props.title) && <meta itemProp="caption" content={props.title} />
    }
    </>);
};

const ImageContents = (props) => {
    if (props.link && props.link.trim().length > 0) {
        return (
        <RoutedLink className={props.baseCssClass + '__link'} isRouted={props.routed} to={props.link}>
            <ImageInnerContents {...props} />
        </RoutedLink>
        )
    }
    return <ImageInnerContents {...props} />
};

export const Image = (props) => {
    if (!props.baseCssClass) {
        props.baseCssClass = 'cmp-image'
    }

    const { isInEditor = false } = props;
    const cssClassName = (isInEditor) ? props.baseCssClass + ' cq-dd-image' : props.baseCssClass;

    return (
        <div className={cssClassName}>
            <ImageContents {...props} />
        </div>
    )
};

Cree un componente React editable en src/components/editable/EditableImage.js
Agregue el siguiente código a EditableImage.js

import { EditableComponent, MapTo } from '@adobe/aem-react-editable-components';
import { Image, imageIsEmpty } from "./core/Image";
import React from 'react'

import { withConditionalPlaceHolder } from "./core/util/withConditionalPlaceholder";
import { withStandardBaseCssClass } from "./core/util/withStandardBaseCssClass";

const RESOURCE_TYPE = "wknd-app/components/image";

const EditConfig = {
    emptyLabel: "Image",
    isEmpty: imageIsEmpty,
    resourceType: RESOURCE_TYPE
};

const WrappedImage = (props) => {
    const Wrapped = withConditionalPlaceHolder(withStandardBaseCssClass(Image, "cmp-image"), imageIsEmpty, "Image V2");
    return <Wrapped {...props}/>
}

const EditableImage = (props) => <EditableComponent config={EditConfig} {...props}><WrappedImage /></EditableComponent>

MapTo(RESOURCE_TYPE)(EditableImage);

export default EditableImage;

Creación de un archivo SCSS src/components/editable/EditableImage.scss que proporciona estilos personalizados para EditableImage.scss. Estos estilos se dirigen a las clases CSS del componente React editable.

Agregue el siguiente SCSS a EditableImage.scss

.cmp-image__image {
    margin: 1rem 0;
    width: 100%;
    border: 0;
 }

Importar EditableImage.scss in EditableImage.js
```
...
import './EditableImage.scss';
...
```

La implementación del componente Imagen editable debe tener un aspecto similar al siguiente:

Componente de imagen editable

Importar los componentes editables

El recién creado EditableText y EditableImage SPA AEM En el informe se hace referencia a los componentes de React y se crean instancias de forma dinámica en función del JSON devuelto por los componentes de React. SPA Para asegurarse de que estos componentes están disponibles para el usuario, cree instrucciones de importación para ellos en Home.js

SPA Abra el proyecto de la en su IDE
Abra el archivo src/Home.js

Agregar instrucciones de importación para AEMText y AEMImage

...
// The following need to be imported, so that MapTo is run for the components
import EditableText from './editable/EditableText';
import EditableImage from './editable/EditableImage';
...

El resultado debería ser similar al siguiente:

Home.js

Si estas importaciones son no se ha añadido, la variable EditableText y EditableImage SPA no invoca el código de y, por lo tanto, los componentes no se asignan a los tipos de recursos proporcionados.

AEM Configuración del contenedor en la

AEM Los componentes de contenedor de utilizan directivas para dictar los componentes permitidos. SPA AEM SPA SPA Se trata de una configuración esencial al utilizar el Editor de componentes, ya que solo los componentes de la aplicación que tienen asignados componentes de la interfaz de usuario de la aplicación de componentes se pueden procesar mediante el Editor de componentes de la. SPA Asegúrese de que solo se permiten los componentes para los que hemos proporcionado implementaciones de la:

EditableTitle asignado a wknd-app/components/title
EditableText asignado a wknd-app/components/text
EditableImage asignado a wknd-app/components/image

SPA Para configurar el contenedor de cuadrícula adaptable de la plantilla de página de remoto:

Inicie sesión en AEM Author
Vaya a Herramientas > General > Plantillas > Aplicación WKND
Editar SPA Página de informe
Seleccionar Estructura en el interruptor de modo, en la parte superior derecha
Pulse para seleccionar Contenedor de diseño
Pulse el botón Política en la barra emergente
A la derecha, debajo de Componentes permitidos pestaña, expandir APLICACIÓN WKND: CONTENIDO
Asegúrese de que solo están seleccionadas las siguientes opciones:
- Imagen
- Texto
- Título
Pulse Listo

AEM Creación del contenedor en la

SPA Después de la actualización de la para incrustar <ResponsiveGrid...>, contenedores para tres componentes React editables (EditableTitle, EditableText, y EditableImageAEM ), y si se actualiza con una política de plantilla correspondiente, podemos empezar a crear contenido en el componente contenedor.

Inicie sesión en AEM Author
Vaya a Sitios > Aplicación WKND
Tocar Inicio y seleccione Editar desde la barra de acciones superior
- AEM Se muestra un componente de texto "Hello World", ya que este se añadió automáticamente al generar el proyecto a partir del arquetipo de proyecto de la lista de tipos de archivo
Seleccionar Editar en el selector de modo situado en la parte superior derecha del Editor de páginas
Busque el Contenedor de diseño área editable debajo del título
Abra el Barra lateral del editor de páginas y seleccione la opción Vista de componentes
Arrastre los siguientes componentes al Contenedor de diseño
- Imagen
- Título
Arrastre los componentes para reordenarlos al siguiente orden:
1. Título
2. Imagen
3. Texto
Autor el Título componente
1. Pulse el componente Título y pulse el botón llave icono para editar el componente Título
2. Añada el siguiente texto:
  - Título: ¡El verano se acerca, vamos a aprovecharlo al máximo!
  - Tipo: H1
3. Pulse Listo
Autor el Imagen componente
1. Arrastre una imagen desde la barra lateral (después de cambiar a la vista Recursos) en el componente Imagen
2. Pulse el componente Imagen y pulse el botón llave icono para editar
3. Compruebe la La imagen es decorativa casilla de verificación
4. Pulse Listo
Autor el Texto componente
1. Edite el componente Texto al pulsar el componente Texto y luego el botón llave icono
2. Añada el siguiente texto:
  - Ahora mismo, puedes obtener un 15% en todas las aventuras de 1 semana, y un 20% de descuento en todas las aventuras que son de 2 semanas o más! Al finalizar la compra, añada el código de campaña SUMMERISCOMING para obtener sus descuentos.
3. Pulse Listo
Los componentes ya se han creado, pero se apilan verticalmente.

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

Cambiar a Modo de diseño uso del selector de modo en la parte superior derecha
Redimensionar los componentes Imagen y Texto, de modo que estén uno al lado del otro
- Imagen el componente debe ser 8 columnas de ancho
- Texto el componente debe ser 3 columnas de ancho
Previsualizar AEM Sus cambios en el Editor de páginas de la
Actualice la aplicación WKND ejecutándose localmente en http://localhost:3000 para ver los cambios realizados.

Enhorabuena.

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

AEM Usar el componente editable de React de la ResponsiveGrid SPA componente en el recurso de la
SPA Cree y registre componentes React editables (texto e imagen) para usarlos en la lista de componentes a través del componente de contenedor de
SPA SPA Configure la plantilla Página de administración remota de para permitir los componentes habilitados para la creación de informes
Agregar componentes editables al componente contenedor
SPA Componentes de autor y diseño en el editor de

Pasos siguientes

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

Componentes de contenedor editables

Actualización de la aplicación WKND

Uso del componente Cuadrícula interactiva

Crear componentes editables

Componente de texto editable

Componente de imagen

Importar los componentes editables

AEM Configuración del contenedor en la

AEM Creación del contenedor en la

Enhorabuena.

Pasos siguientes

Recursos de Business.Adobe.com

En esta página

Ver siguiente:

Aprender

Documentación

Comunidad

Soporte técnico

Recursos

Cuenta de Adobe

Adobe