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.
In questo capitolo, sostituiamo il titolo della visualizzazione Home, "Current Adventures", che è un testo hardcoded in Home.js
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.
Per aggiungere una Fisso nella vista Home:
Nella visualizzazione Home dell’SPA, sostituisci il testo hardcoded <h2>Current Adventures</h2>
con un componente Titolo modificabile personalizzato. Prima di poter utilizzare il componente Titolo, è necessario:
@adobe/aem-react-editable-components
per renderlo modificabile.MapTo
in modo che possa essere utilizzato in componente contenitore in un secondo momento.Per effettuare questo collegamento:
Apri progetto SPA remoto all’indirizzo ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app
nell’IDE
Creare un componente React in react-app/src/components/editable/core/Title.js
Aggiungi il seguente codice 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
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.
Creare un componente React in react-app/src/components/editable/EditableTitle.js
Aggiungi il seguente codice 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
Componente React, avvolgimento e decorazione per essere modificabile in AEM SPA Editor.
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.
Modifica react-app/src/components/Home.js
In Home()
in basso, importa EditableTitle
e sostituisci il titolo hardcoded 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>
);
}
Il Home.js
il file dovrebbe avere un aspetto simile a:
Accedi ad AEM Author
Accedi a Sites > App WKND
Tocca Home e seleziona Modifica dalla barra delle azioni superiore
Seleziona Modifica dal selettore della modalità di modifica in alto a destra nell’Editor pagina
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
Tocca per esporre la barra delle azioni del componente, quindi tocca il chiave inglese per modificare
Creare il componente Titolo:
Titolo: WKND Adventures
Tipo/dimensione: H2
Tocca Fine per salvare
Visualizzare l’anteprima delle modifiche nell’Editor SPA dell’AEM
Aggiorna l’app WKND in esecuzione localmente il http://localhost:3000 e visualizzare le modifiche apportate al titolo immediatamente riflesse.
Hai aggiunto un componente fisso e modificabile all’app WKND. Ora sai come:
I passaggi successivi sono i seguenti: aggiungi un componente contenitore AEM ResponsiveGrid all’SPA, che consente all’autore di aggiungere all’SPA e di modificarne i componenti.