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

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.

Vea la salida de JSON en http://localhost:4502/content/wknd-spa-react/us/en.model.json. Debería 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": {}
   }

AEM SPA En el IDE de su elección, abra el Proyecto de para la creación de la página de inicio de sesión de la página de la página de. Expanda el módulo ui.frontend y abra el archivo Text.js en ui.frontend/src/components/Text/Text.js.

El primer área que inspeccionaremos 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 representar 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 a través de DOMPurify antes de usar peligrosamenteSetInnerHTML para procesar el contenido. Recupere las propiedades richText y text del modelo JSON anteriormente en el ejercicio.

A continuación, abra ui.frontend/src/components/import-components.js y eche un vistazo a TextEditConfig en ~line 86:

const TextEditConfig = {
emptyLabel: 'Text',

    isEmpty: function(props) {
        return !props || !props.text || props.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 94:

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

AEM SPA MapTo lo proporciona el SDK de JS del Editor de JS de la de datos (@adobe/aem-react-editable-components). AEM La ruta de acceso wknd-spa-react/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 se encarga de analizar la respuesta del modelo JSON y de pasar los valores correctos como props al componente de la.

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

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

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

import './Page/Page';
import './Text/Text';
import './Container/Container';
import './ExperienceFragment/ExperienceFragment';

Hay varios otros imports de @adobe/aem-core-components-react-spa y @adobe/aem-core-components-react-base. Se están importando los componentes principales de React y se están poniendo a disposición en el proyecto actual. AEM A continuación, se asignan a componentes de proyecto específicos del proyecto mediante el uso de MapTo, al igual que con el ejemplo del componente Text anterior.

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

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

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

SPA En Componentes permitidos > WKND React - Contenido > comprobar Imagen, Teaser y Título.

SPA En Componentes predeterminados > Agregar asignación y elija el componente Imagen - Reacción 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-react/us/en/home.html.

Ahora debería poder usar los componentes adicionales Imagen, Teaser y Título de la página.

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:

Experiencia con los componentes Title y Teaser.

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 un explorador, vaya a http://localhost:4502/content/wknd-spa-react/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-react/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-react/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-react/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 768px.

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-react/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-react/settings/wcm/templates/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-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 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.

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.

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

Debajo de la carpeta Image, cree un nuevo archivo con el nombre Image.js.

Agregar las siguientes import instrucciones a Image.js:

import React, {Component} from 'react';
import {MapTo} from '@adobe/aem-react-editable-components';

AEM A continuación, agregue ImageEditConfig para determinar cuándo se debe mostrar el marcador de posición en el código de tiempo de la:

export const ImageEditConfig = {

    emptyLabel: 'Image',

    isEmpty: function(props) {
        return !props || !props.src || props.src.trim().length < 1;
    }
};

El marcador de posición se mostrará si no se ha establecido la propiedad src.

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 procesará un <img> basado en las props src, alt y title pasadas por el modelo JSON.

AEM Agregue el código MapTo para asignar el componente React al componente de la:

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

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

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

.Image-src {
    margin: 1rem 0;
    width: 100%;
    border: 0;
}

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

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

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 el componente de imagen personalizado en su lugar.

SPA AEM Desde la raíz del proyecto, implemente el código de para que se ejecute mediante Maven:

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

Inspect SPA AEM el en la. Todos los componentes de imagen de la página deben seguir funcionando. Inspect muestra el resultado procesado y debería ver el marcado del componente de imagen personalizado en lugar del componente principal React.

Marcado de componente de imagen personalizado

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

Marcado de imagen del componente principal de React

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