Componenti fissi modificabili

I componenti React modificabili possono essere "fissi" o codificati nelle viste SPA. Questo consente agli sviluppatori di inserire componenti compatibili con l’editor SPA nelle viste SPA e agli utenti di creare i contenuti dei componenti nell’editor AEM SPA.

Componenti fissi

In questo capitolo, il titolo della visualizzazione Home, "Avventure correnti", che è testo hardcoded in Home.js, viene sostituito con un componente Titolo fisso ma modificabile. I componenti fissi garantiscono il posizionamento del titolo, ma consentono anche la creazione del testo del titolo e la modifica al di fuori del ciclo di sviluppo.

Aggiornare l’app WKND

Per aggiungere un componente Fisso alla visualizzazione Home:

  • Creare un componente Titolo modificabile personalizzato e registrarlo nel tipo di risorsa Titolo del progetto
  • Posizionare il componente Titolo modificabile nella vista Home del SPA

Creare un componente Titolo di React modificabile

Nella visualizzazione Home SPA sostituire 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 React titolo personalizzato
  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 in modo che possa essere utilizzato in componente contenitore in un secondo momento.

Per effettuare questo collegamento:

  1. Apri progetto 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. Aggiungere il codice seguente a Title.js.

    code language-javascript
    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
    

    Questo componente React non è ancora modificabile tramite l’Editor SPA dell’AEM. Questo componente di base diventerà modificabile nel passaggio successivo.

    Leggi i commenti del codice per i dettagli sull’implementazione.

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

  5. Aggiungere il codice seguente a EditableTitle.js.

    code language-javascript
    // 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 componente React EditableTitle racchiude il componente React Title, racchiudendolo e decorandolo per renderlo modificabile nell'editor SPA dell'AEM.

Utilizzare il componente React EditableTitle

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

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

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

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

Il file Home.js deve essere simile al seguente:

Home.js

Creare il componente Titolo nell’AEM

  1. Accedi a AEM Author

  2. Passa a Sites > App WKND

  3. Tocca Home e seleziona Modifica dalla barra delle azioni superiore

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

  5. Passa il cursore del mouse sul testo del titolo predefinito sotto il logo WKND e sopra l’elenco delle avventure, fino a visualizzare il contorno blu della modifica

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

    Barra delle azioni del componente Titolo

  7. Creare il componente Titolo:

    • Titolo: Avventure WKND

    • Tipo/Dimensione: H2

      Finestra di dialogo del componente Titolo

  8. Tocca Fine per salvare

  9. Visualizzare l’anteprima delle modifiche nell’Editor SPA dell’AEM

  10. Aggiorna l'app WKND in esecuzione localmente su http://localhost:3000 e visualizza immediatamente le modifiche apportate al titolo.

    Componente titolo in SPA

Congratulazioni.

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

  • Creazione di un componente fisso ma modificabile per l'SPA
  • Creare il componente fisso nell’AEM
  • Visualizzare i contenuti creati nell’SPA remoto

Passaggi successivi

I passaggi successivi consistono nell'aggiungere un componente contenitore di AEM ResponsiveGrid all'SPA che consente all'autore di aggiungere e modificare componenti all'SPA.

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4