Componenti contenitore modificabili
Componenti fissi offre una certa flessibilità per l’authoring dei contenuti SPA, tuttavia questo approccio è rigido e richiede agli sviluppatori di definire la composizione esatta dei contenuti modificabili. Per supportare la creazione di esperienze eccezionali da parte degli autori, l’Editor SPA supporta l’utilizzo di componenti contenitore nell’SPA. I componenti contenitore consentono agli autori di trascinare e rilasciare i componenti consentiti nel contenitore e di crearli, come fanno nell’authoring AEM Sites tradizionale.
In questo capitolo viene aggiunto un contenitore modificabile alla visualizzazione Home che consente agli autori di comporre e creare il layout di esperienze con contenuti avanzati utilizzando i componenti React modificabili direttamente nell’SPA.
Aggiornare l’app WKND
Per aggiungere un componente contenitore alla vista Home:
- Importare i componenti modificabili di React dell’AEM
ResponsiveGrid
componente - Importare e registrare componenti React modificabili personalizzati (testo e immagine) da utilizzare nel componente ResponsiveGrid
Utilizzare il componente ResponsiveGrid
Per aggiungere un'area modificabile alla vista Home:
-
Apri e modifica
react-app/src/components/Home.js
-
Importa
ResponsiveGrid
componente da@adobe/aem-react-editable-components
e aggiungerlo alHome
componente. -
Imposta i seguenti attributi su
<ResponsiveGrid...>
componentepagePath = '/content/wknd-app/us/en/home'
itemPath = 'root/responsivegrid'
Questo istruisce il
ResponsiveGrid
componente per recuperarne il contenuto dalla risorsa AEM:/content/wknd-app/us/en/home/jcr:content/root/responsivegrid
Il
itemPath
mappa suresponsivegrid
nodo definito inRemote SPA Page
modello AEM e viene creato automaticamente nelle nuove pagine AEM create dalRemote SPA Page
Modello AEM.Aggiorna
Home.js
per aggiungere<ResponsiveGrid...>
componente.code language-javascript ... import { ResponsiveGrid } from '@adobe/aem-react-editable-components'; ... function Home() { return ( <div className="Home"> <ResponsiveGrid pagePath='/content/wknd-app/us/en/home' itemPath='root/responsivegrid'/> <EditableTitle pagePath='/content/wknd-app/us/en/home' itemPath='title'/> <Adventures /> </div> ); }
Il Home.js
il file dovrebbe avere un aspetto simile a:
Creare componenti modificabili
Ottenere il pieno effetto dei contenitori di esperienza di authoring flessibili forniti nell’editor SPA. È già stato creato un componente Titolo modificabile, ma creiamo alcuni altri che consentono agli autori di utilizzare componenti Testo e Immagine modificabili nel componente ResponsiveGrid appena aggiunto.
I nuovi componenti Testo e Immagine modificabili di React vengono creati utilizzando il pattern di definizione del componente modificabile esportato in componenti fissi modificabili.
Componente testo modificabile
-
Aprire il progetto SPA nell’IDE
-
Creare un componente React in
src/components/editable/core/Text.js
-
Aggiungi il seguente codice a
Text.js
code language-javascript import React from 'react' const TextPlain = (props) => <div className={props.baseCssClass}><p className="cmp-text__paragraph">{props.text}</p></div>; const TextRich = (props) => { const text = props.text; const id = (props.id) ? props.id : (props.cqPath ? props.cqPath.substr(props.cqPath.lastIndexOf('/') + 1) : ""); return <div className={props.baseCssClass} id={id} data-rte-editelement dangerouslySetInnerHTML={{ __html: text }} /> }; export const Text = (props) => { if (!props.baseCssClass) { props.baseCssClass = 'cmp-text' } const { richText = false } = props return richText ? <TextRich {...props} /> : <TextPlain {...props} /> } export function textIsEmpty(props) { return props.text == null || props.text.length === 0; }
-
Creare un componente React modificabile in
src/components/editable/EditableText.js
-
Aggiungi il seguente codice a
EditableText.js
code language-javascript import React from 'react' import { EditableComponent, MapTo } from '@adobe/aem-react-editable-components'; import { Text, textIsEmpty } from "./core/Text"; import { withConditionalPlaceHolder } from "./core/util/withConditionalPlaceholder"; import { withStandardBaseCssClass } from "./core/util/withStandardBaseCssClass"; const RESOURCE_TYPE = "wknd-app/components/text"; const EditConfig = { emptyLabel: "Text", isEmpty: textIsEmpty, resourceType: RESOURCE_TYPE }; export const WrappedText = (props) => { const Wrapped = withConditionalPlaceHolder(withStandardBaseCssClass(Text, "cmp-text"), textIsEmpty, "Text V2") return <Wrapped {...props} /> }; const EditableText = (props) => <EditableComponent config={EditConfig} {...props}><WrappedText /></EditableComponent> MapTo(RESOURCE_TYPE)(EditableText); export default EditableText;
L’implementazione del componente Testo modificabile deve essere simile alla seguente:
Componente immagine
-
Aprire il progetto SPA nell’IDE
-
Creare un componente React in
src/components/editable/core/Image.js
-
Aggiungi il seguente codice a
Image.js
code language-javascript import React from 'react' import { RoutedLink } from "./RoutedLink"; export const imageIsEmpty = (props) => (!props.src) || props.src.trim().length === 0 const ImageInnerContents = (props) => { return (<> <img src={props.src} className={props.baseCssClass + '__image'} alt={props.alt} /> { !!(props.title) && <span className={props.baseCssClass + '__title'} itemProp="caption">{props.title}</span> } { props.displayPopupTitle && (!!props.title) && <meta itemProp="caption" content={props.title} /> } </>); }; const ImageContents = (props) => { if (props.link && props.link.trim().length > 0) { return ( <RoutedLink className={props.baseCssClass + '__link'} isRouted={props.routed} to={props.link}> <ImageInnerContents {...props} /> </RoutedLink> ) } return <ImageInnerContents {...props} /> }; export const Image = (props) => { if (!props.baseCssClass) { props.baseCssClass = 'cmp-image' } const { isInEditor = false } = props; const cssClassName = (isInEditor) ? props.baseCssClass + ' cq-dd-image' : props.baseCssClass; return ( <div className={cssClassName}> <ImageContents {...props} /> </div> ) };
-
Creare un componente React modificabile in
src/components/editable/EditableImage.js
-
Aggiungi il seguente codice a
EditableImage.js
import { EditableComponent, MapTo } from '@adobe/aem-react-editable-components';
import { Image, imageIsEmpty } from "./core/Image";
import React from 'react'
import { withConditionalPlaceHolder } from "./core/util/withConditionalPlaceholder";
import { withStandardBaseCssClass } from "./core/util/withStandardBaseCssClass";
const RESOURCE_TYPE = "wknd-app/components/image";
const EditConfig = {
emptyLabel: "Image",
isEmpty: imageIsEmpty,
resourceType: RESOURCE_TYPE
};
const WrappedImage = (props) => {
const Wrapped = withConditionalPlaceHolder(withStandardBaseCssClass(Image, "cmp-image"), imageIsEmpty, "Image V2");
return <Wrapped {...props}/>
}
const EditableImage = (props) => <EditableComponent config={EditConfig} {...props}><WrappedImage /></EditableComponent>
MapTo(RESOURCE_TYPE)(EditableImage);
export default EditableImage;
-
Creare un file SCSS
src/components/editable/EditableImage.scss
che fornisce stili personalizzati perEditableImage.scss
. Questi stili sono destinati alle classi CSS del componente React modificabile. -
Aggiungi il seguente SCSS a
EditableImage.scss
code language-css .cmp-image__image { margin: 1rem 0; width: 100%; border: 0; }
-
Importa
EditableImage.scss
inEditableImage.js
code language-javascript ... import './EditableImage.scss'; ...
L’implementazione del componente Immagine modificabile sarà simile alla seguente:
Importare i componenti modificabili
Il nuovo EditableText
e EditableImage
I componenti React sono indicati nell’SPA e vengono istanziati in modo dinamico in base al JSON restituito dall’AEM. Per garantire che questi componenti siano disponibili per l’SPA, crea le relative istruzioni di importazione in Home.js
-
Aprire il progetto SPA nell’IDE
-
Apri il file
src/Home.js
-
Aggiungi istruzioni di importazione per
AEMText
eAEMImage
code language-javascript ... // The following need to be imported, so that MapTo is run for the components import EditableText from './editable/EditableText'; import EditableImage from './editable/EditableImage'; ...
Il risultato dovrebbe essere simile al seguente:
Se tali importazioni sono non aggiunto, il EditableText
e EditableImage
Il codice non può essere richiamato dall’SPA e, pertanto, i componenti non sono mappati sui tipi di risorse forniti.
Configurazione del contenitore in AEM
I componenti contenitore AEM utilizzano i criteri per determinare i componenti consentiti. Si tratta di una configurazione critica quando si utilizza l’editor SPA, in quanto solo i componenti AEM che hanno mappato le controparti dei componenti SPA possono essere sottoposti a rendering da parte dell’SPA. Assicurati che siano consentiti solo i componenti per i quali abbiamo fornito le implementazioni SPA:
EditableTitle
mappato awknd-app/components/title
EditableText
mappato awknd-app/components/text
EditableImage
mappato awknd-app/components/image
Per configurare il contenitore reponsivegrid del modello Pagina SPA remota:
-
Accedi a AEM Author
-
Accedi a Strumenti > Generale > Modelli > App WKND
-
Modifica Pagina Report SPA
-
Seleziona Struttura nel commutatore modalità in alto a destra
-
Tocca per selezionare Contenitore di layout
-
Tocca il Policy icona nella barra a comparsa
-
A destra, sotto Componenti consentiti , espandere APP WKND - CONTENUTO
-
Accertati che siano selezionati solo i seguenti elementi:
- Immagine
- Testo
- Titolo
-
Tocca Fine
Authoring del contenitore nell’AEM
Dopo che l’SPA è stato aggiornato per incorporare il <ResponsiveGrid...>
, wrapper per tre componenti React modificabili (EditableTitle
, EditableText
, e EditableImage
), e l’AEM viene aggiornato con un criterio del modello corrispondente, possiamo iniziare a creare contenuti nel componente contenitore.
-
Accedi a AEM Author
-
Accedi a Sites > App WKND
-
Tocca Home e seleziona Modifica dalla barra delle azioni superiore
- Viene visualizzato un componente di testo "Hello World", che veniva aggiunto automaticamente durante la generazione del progetto dall’archetipo del progetto AEM
-
Seleziona Modifica dal selettore modalità in alto a destra nell’Editor pagina
-
Individua il Contenitore di layout area modificabile sotto il titolo
-
Apri Barra laterale dell’Editor pagina, e seleziona la Vista Componenti
-
Trascina i seguenti componenti in Contenitore di layout
- Immagine
- Titolo
-
Trascina i componenti per riordinarli nell’ordine seguente:
- Titolo
- Immagine
- Testo
-
Autore il Titolo componente
-
Tocca il componente Titolo, quindi tocca il chiave inglese icona a modifica il componente Titolo
-
Aggiungere il testo seguente:
- Titolo: L'estate sta arrivando, sfruttiamola al massimo!
- Tipo: H1
-
Tocca Fine
-
-
Autore il Immagine componente
- Trascina un’immagine in dalla barra laterale (dopo il passaggio alla vista Risorse) del componente Immagine
- Tocca il componente Immagine, quindi tocca chiave inglese icona da modificare
- Controlla la L'immagine è decorativa casella di controllo
- Tocca Fine
-
Autore il Testo componente
- Modifica il componente Testo toccando il componente Testo e toccando il chiave inglese icona
- Aggiungere il testo seguente:
- In questo momento, puoi ottenere il 15% su tutte le avventure di 1 settimana e il 20% di sconto su tutte le avventure che sono di 2 settimane o più! Al momento del pagamento, aggiungi il codice della campagna SUMMERISCOMING per ottenere i tuoi sconti!
- Tocca Fine
-
I componenti ora sono creati, ma si sovrappongono in verticale.
Utilizza la modalità Layout AEM per regolare le dimensioni e il layout dei componenti.
-
Passa a Modalità Layout utilizzo del selettore modalità in alto a destra
-
Ridimensiona i componenti Immagine e Testo, in modo che siano affiancati
- Immagine il componente deve essere Larghezza 8 colonne
- Testo il componente deve essere Larghezza 3 colonne
-
Anteprima le modifiche apportate nell’Editor pagina per AEM
-
Aggiorna l’app WKND in esecuzione localmente il http://localhost:3000 per visualizzare le modifiche create.
Congratulazioni.
Hai aggiunto un componente contenitore che consente agli autori di aggiungere componenti modificabili all’app WKND. Ora sai come:
- Utilizzare i componenti modificabili del React dell’AEM
ResponsiveGrid
componente dell'SPA - Creare e registrare componenti React modificabili (testo e immagine) da utilizzare nell’SPA tramite il componente contenitore
- Configurare il modello Pagina SPA remota per consentire i componenti abilitati per SPA
- Aggiungere componenti modificabili al componente contenitore
- Componenti di authoring e layout nell’editor SPA
Passaggi successivi
Il passaggio successivo utilizza la stessa tecnica per aggiungere un componente modificabile a un ciclo di lavorazione Dettagli avventura dell'SPA.