Componentes fijos editables

Los componentes React editables se pueden "corregir" o codificar en las vistas de SPA. Esto permite a los desarrolladores colocar componentes compatibles con SPA Editor en las vistas de SPA y permitir a los usuarios crear el contenido de los componentes en AEM SPA Editor.

En este capítulo, reemplazamos el título de la vista Inicio, "Aventuras actuales", que es texto codificado en Home.js con un componente de Título fijo pero editable. Los componentes fijos garantizan la colocación del título, pero también permiten que el texto del título se cree y cambie fuera del ciclo de desarrollo.

Actualizar la aplicación WKND

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

• Importe el componente Título del componente principal de React de AEM y regístrelo en el tipo de recurso del Título del proyecto
• Coloque el componente Título editable en la vista Inicio de SPA

Importar en el componente Título del componente principal de React de AEM

En la vista Inicio de SPA, sustituya el texto codificado <h2>Current Adventures</h2> por el componente Título de los componentes principales de React AEM. Antes de poder utilizar el componente Título , debemos:

1. Importar el componente Título desde @adobe/aem-core-components-react-base
2. Regístrela mediante withMappable para que los desarrolladores puedan colocarla en el SPA
3. Además, regístrese con MapTo para que se pueda utilizar en el componente contenedor más adelante.

Para ello:

1. Abra el proyecto SPA remoto en ~/Code/wknd-app/aem-guides-wknd-graphql/react-app en su IDE

2. Crear un componente React en react-app/src/components/aem/AEMTitle.js

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

   // Import the withMappable API provided by the AEM SPA Editor JS SDK
   import { withMappable, MapTo } from '@adobe/aem-react-editable-components';
   
   // Import the AEM React Core Components' Title component implementation and it's Empty Function 
   import { TitleV2, TitleV2IsEmptyFn } from "@adobe/aem-core-components-react-base";
   
   // The sling:resourceType for which this Core Component is registered with in AEM
   const RESOURCE_TYPE = "wknd-app/components/title";
   
   // Create an EditConfig to allow the AEM SPA Editor to properly render the component in the Editor's context
   const EditConfig = {    
       emptyLabel: "Title",  // The component placeholder in AEM SPA Editor
       isEmpty: TitleV2IsEmptyFn, // The function to determine if this component has been authored
       resourceType: RESOURCE_TYPE // The sling:resourceType this component is mapped to
   };
   
   // MapTo allows the AEM SPA Editor JS SDK to dynamically render components added to SPA Editor Containers
   MapTo(RESOURCE_TYPE)(TitleV2, EditConfig);
   
   // withMappable allows the component to be hardcoded into the SPA; <AEMTitle .../>
   const AEMTitle = withMappable(TitleV2, EditConfig);
   
   export default AEMTitle;
   

Lea los comentarios del código para conocer los detalles de implementación.

El archivo AEMTitle.js debería tener el siguiente aspecto:

Utilice el componente AEMTitle React

Ahora que el componente Título del componente principal de React de AEM está registrado en y disponible para su uso en la aplicación React, reemplace el texto de título codificado en la vista Inicio.

1. Editar react-app/src/App.js

2. en Home() en la parte inferior, sustituya el título codificado por el nuevo componente AEMTitle:

   <h2>Current Adventures</h2>
   

   con

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

   Actualice Apps.js con el siguiente código:

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

El archivo Apps.js debería tener el siguiente aspecto:

Cree el componente Título en AEM

1. Iniciar sesión en AEM Author

2. Vaya a Sites > WKND App

3. Pulse Inicio y seleccione Editar en la barra de acciones superior

4. Seleccione Editar en el selector de modo de edición en la parte superior derecha del Editor de páginas

5. Pase el ratón sobre el texto predeterminado del título debajo del logotipo de WKND y encima de la lista de aventuras, hasta que aparezca el contorno azul de edición

6. Pulse para exponer la barra de acciones del componente y, a continuación, pulse la llave inglesa para editar

   

7. Cree el componente Título :

   • Título: Aventuras de WKND

   • Tipo/tamaño: H2

     

8. Toque Listo para guardar

9. Previsualizar los cambios en AEM Editor SPA

10. Actualice la aplicación WKND que se ejecuta localmente en http://localhost:3000 y vea los cambios de título creados inmediatamente reflejados.

    

Felicitaciones!

¡Ha agregado un componente fijo y editable a la aplicación WKND! Ahora sabe cómo:

• Importe y vuelva a utilizar un componente principal de React AEM en el SPA
• Agregue un componente fijo, pero editable, al SPA
• Cree el componente fijo en AEM
• Ver el contenido creado en el SPA remoto

Pasos siguientes

Los siguientes pasos son agregar un componente de contenedor AEM ResponsiveGrid a la SPA que permite al autor agregar y editar componentes a la SPA!