Componenti fissi modificabili

I componenti React modificabili possono essere "fissi" o codificati nelle viste SPA. Questo consente agli sviluppatori di inserire SPA componenti compatibili con l’editor nelle viste di SPA e permette agli utenti di creare il contenuto dei componenti in AEM SPA Editor.

In questo capitolo, sostituiamo il titolo della visualizzazione Home, "Current Adventures", che è un testo codificato in Home.js con un componente Titolo fisso ma modificabile. I componenti fissi garantiscono il posizionamento del titolo, ma consentono anche di creare il testo del titolo e di modificarlo al di fuori del ciclo di sviluppo.

Aggiornare l’app WKND

Per aggiungere una Fisso nella vista Home:

• Crea un componente Titolo modificabile personalizzato e registralo nel tipo di risorsa del Titolo del progetto
• Posiziona il componente Titolo modificabile nella vista Home SPA

Creare un componente Titolo reazione modificabile

Nella vista Home SPA, sostituisci il testo hardcoded <h2>Current Adventures</h2> con un componente Titolo modificabile personalizzato. Prima di poter utilizzare il componente Titolo , è necessario:

1. Creare un componente personalizzato per la reazione di un titolo
2. Decorare il componente Titolo personalizzato utilizzando i metodi di @adobe/aem-react-editable-components per renderlo modificabile.
3. Registra il componente Titolo modificabile con MapTo può essere utilizzato in componente contenitore in seguito.

Per effettuare questo collegamento:

1. Apri progetto di SPA remoto in ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app nell’IDE

2. Crea un componente React in react-app/src/components/editable/core/Title.js

3. Aggiungi il codice seguente a Title.js.

   import React from 'react'
   import { RoutedLink } from "./RoutedLink";
   
   const TitleLink = (props) => {
   return (
       <RoutedLink className={props.baseCssClass + (props.nested ? '-' : '__') + 'link'}
           isRouted={props.routed}
           to={props.linkURL}>
       {props.text}
       </RoutedLink>
   );
   };
   
   const TitleV2Contents = (props) => {
       if (!props.linkDisabled) {
           return <TitleLink {...props} />
       }
   
       return <>{props.text}</>
   };
   
   export const Title = (props) => {
       if (!props.baseCssClass) {
           props.baseCssClass = 'cmp-title'
       }
   
       const elementType = (!!props.type) ? props.type.toString() : 'h3';
       return (<div className={props.baseCssClass}>
           {
               React.createElement(elementType, {
                       className: props.baseCssClass + (props.nested ? '-' : '__') + 'text',
                   },
                   <TitleV2Contents {...props} />
               )
           }
   
           </div>)
   }
   
   export const titleIsEmpty = (props) => props.text == null || props.text.trim().length === 0
   

   Tieni presente che questo componente React non è ancora modificabile utilizzando AEM editor di SPA. Questo componente di base sarà reso modificabile nel passaggio successivo.

   Leggi i commenti del codice per i dettagli di implementazione.

4. Crea un componente React in react-app/src/components/editable/EditableTitle.js

5. Aggiungi il codice seguente a EditableTitle.js.

   // Import the withMappable API provided bu the AEM SPA Editor JS SDK
   import { EditableComponent, MapTo } from '@adobe/aem-react-editable-components';
   import React from 'react'
   
   // Import the AEM the Title component implementation and it's Empty Function
   import { Title, titleIsEmpty } from "./core/Title";
   import { withConditionalPlaceHolder } from "./core/util/withConditionalPlaceholder";
   import { withStandardBaseCssClass } from "./core/util/withStandardBaseCssClass";
   
   // The sling:resourceType of the AEM component used to collected and serialize the data this React component displays
   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: titleIsEmpty,      // The function to determine if this component has been authored
       resourceType: RESOURCE_TYPE // The sling:resourceType this component is mapped to
   };
   
   export const WrappedTitle = (props) => {
       const Wrapped = withConditionalPlaceHolder(withStandardBaseCssClass(Title, "cmp-title"), titleIsEmpty, "TitleV2")
       return <Wrapped {...props} />
   }
   
   // EditableComponent makes the component editable by the AEM editor, either rendered statically or in a container
   const EditableTitle = (props) => <EditableComponent config={EditConfig} {...props}><WrappedTitle /></EditableComponent>
   
   // MapTo allows the AEM SPA Editor JS SDK to dynamically render components added to SPA Editor Containers
   MapTo(RESOURCE_TYPE)(EditableTitle);
   
   export default EditableTitle;
   

   Questo EditableTitle Il componente React racchiude il Title Reagire componente, avvolgerlo e decorarlo per essere modificabile in AEM Editor SPA.

Utilizzare il componente React EditableTitle

Ora che il componente React EditableTitle è registrato e disponibile per l’uso nell’app React, sostituisci il testo del titolo codificato nella vista Home.

1. Modifica react-app/src/components/Home.js

2. In Home() in basso, importa EditableTitle e sostituisci il titolo codificato con il nuovo AEMTitle componente:

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

La Home.js dovrebbe essere simile a:

Creare il componente Titolo in AEM

1. Accedi ad AEM Author

2. Passa a Sites > App WKND

3. Tocca Pagina principale e seleziona Modifica dalla barra delle azioni superiore

4. Seleziona Modifica dal selettore della modalità di modifica in alto a destra dell’Editor pagina

5. Passa il puntatore del mouse sul testo del titolo predefinito sotto il logo WKND e sopra l’elenco delle avventure, fino a quando non viene visualizzata la struttura di modifica blu

6. Tocca per esporre la barra delle azioni del componente, quindi tocca chiave per modificare

   

7. Crea il componente Titolo :

   • Titolo: Avventure WKND

   • Tipo/Dimensione: H2

     

8. Tocca Fine per salvare

9. Anteprima delle modifiche in AEM Editor SPA

10. Aggiorna l’app WKND in esecuzione localmente su http://localhost:3000 e vedere le modifiche al titolo create immediatamente applicate.

    

Congratulazioni.

Hai aggiunto un componente fisso e modificabile all’app WKND. Ora sai come:

• È stato creato un componente fisso ma modificabile nella SPA
• Crea il componente fisso in AEM
• Visualizzare il contenuto creato in SPA remoto

Passaggi successivi

I passaggi successivi sono i seguenti: aggiungi un componente contenitore AEM responsiveGrid al SPA che consente all’autore di aggiungere e modificare componenti al SPA.

Risorse Business.Adobe.com