Mappare i componenti dell’SPA ai componenti dell’AEM map-components
Scopri come mappare i componenti React ai componenti Adobe Experience Manager (AEM) con l’SDK JS dell’editor AEM SPA. La mappatura dei componenti consente agli utenti di apportare aggiornamenti dinamici ai componenti SPA nell’Editor SPA dell’AEM, in modo simile all’authoring AEM tradizionale.
Questo capitolo approfondisce l’analisi dell’API del modello JSON AEM e di come il contenuto JSON esposto da un componente AEM possa essere inserito automaticamente in un componente React come prop.
Obiettivo
- Scopri come mappare i componenti dell’AEM ai componenti dell’SPA.
- Inspect come un componente React utilizza le proprietà dinamiche passate dall’AEM.
- Scopri come utilizzare con i nuovi servizi React AEM Componenti core.
Cosa verrà creato
In questo capitolo viene verificato come Text
La componente SPA è mappata all'AEM Text
componente. Componenti core React come Image
La componente SPA viene utilizzata nell’SPA e creata nell’AEM. Funzioni pronte all’uso di Contenitore di layout e Editor modelli Le policy vengono inoltre utilizzate per creare una vista dall’aspetto leggermente più variabile.
Prerequisiti
Esaminare gli strumenti e le istruzioni necessari per l'impostazione di un ambiente di sviluppo locale. Questo capitolo è una continuazione del Integrare l’SPA capitolo, tuttavia, seguire lungo tutto ciò che serve è un progetto AEM abilitato per SPA.
Approccio di mappatura
Il concetto di base è quello di mappare un componente SPA a un componente AEM. I componenti AEM, esegui lato server, esportano contenuti come parte dell’API del modello JSON. Il contenuto JSON viene utilizzato dall’SPA, che esegue il lato client nel browser. Viene creata una mappatura 1:1 tra i componenti SPA e un componente AEM.
Panoramica ad alto livello della mappatura di un componente AEM su un componente React
Inspect il componente Testo
Il Archetipo progetto AEM fornisce un Text
componente mappato sull’AEM Componente testo. Questo è un esempio contenuto componente, in quanto esegue il rendering contenuto dall'AEM.
Vediamo come funziona il componente.
Inspect il modello JSON
-
Prima di passare al codice SPA, è importante comprendere il modello JSON fornito dall’AEM. Accedi a Libreria dei componenti core e visualizzare la pagina del componente Testo. La libreria dei componenti core fornisce esempi di tutti i componenti core dell’AEM.
-
Seleziona la JSON per uno degli esempi:
Dovresti vedere tre proprietà:
text
,richText
, e:type
.:type
è una proprietà riservata che elencasling:resourceType
(o percorso) della componente AEM. Il valore di:type
è ciò che viene utilizzato per mappare la componente AEM alla componente SPA.text
erichText
sono proprietà aggiuntive esposte al componente SPA. -
Visualizza l’output JSON in http://localhost:4502/content/wknd-spa-react/us/en.model.json. Dovresti essere in grado di trovare una voce simile a:
code language-json "text": { "id": "text-a647cec03a", "text": "<p>Hello World! Updated content!</p>\r\n", "richText": true, ":type": "wknd-spa-react/components/text", "dataLayer": {} }
Inspect il componente Testo SPA
-
Nell'IDE che preferisci, apri il Progetto AEM per l'SPA. Espandi
ui.frontend
e aprire il fileText.js
inui.frontend/src/components/Text/Text.js
. -
La prima area che esamineremo è
class Text
a ~line 40:code language-js class Text extends Component { get richTextContent() { return (<div id={extractModelId(this.props.cqPath)} data-rte-editelement dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(this.props.text)}} /> ); } get textContent() { return <div>{this.props.text}</div>; } render() { return this.props.richText ? this.richTextContent : this.textContent; } }
Text
è un componente React standard. Il componente utilizzathis.props.richText
per determinare se il contenuto da riprodurre sarà testo formattato o testo normale. Il "contenuto" effettivo utilizzato proviene dathis.props.text
.Per evitare un potenziale attacco XSS, il testo RTF viene sfuggito tramite
DOMPurify
prima di utilizzare dangerouslySetInnerHTML per riprodurre il contenuto. RichiamarichText
etext
proprietà del modello JSON precedenti nell’esercizio. -
Avanti, apri
ui.frontend/src/components/import-components.js
dai un'occhiata alTextEditConfig
a ~line 86:code language-js const TextEditConfig = { emptyLabel: 'Text', isEmpty: function(props) { return !props || !props.text || props.text.trim().length < 1; } };
Il codice di cui sopra è responsabile di determinare quando eseguire il rendering del segnaposto nell’ambiente di authoring dell’AEM. Se il
isEmpty
restituisce il metodo true quindi viene eseguito il rendering del segnaposto. -
Infine, dai un'occhiata al
MapTo
chiama alla riga 94:code language-js export default MapTo('wknd-spa-react/components/text')(LazyTextComponent, TextEditConfig);
MapTo
viene fornito dall’SDK JS dell’Editor SPA dell’AEM (@adobe/aem-react-editable-components
). Il percorsowknd-spa-react/components/text
rappresenta ilsling:resourceType
della componente AEM. Questo percorso viene abbinato al:type
esposti dal modello JSON osservato in precedenza.MapTo
si occupa di analizzare la risposta del modello JSON e di trasmettere i valori corretti comeprops
alla componente SPA.Potete trovare l'AEM
Text
definizione del componente inui.apps/src/main/content/jcr_root/apps/wknd-spa-react/components/text
.
Utilizzare i componenti core React
Componenti WCM AEM - Implementazione React Core e Componenti WCM AEM - Editor SPA - Implementazione React Core. Si tratta di un set di componenti riutilizzabili dell’interfaccia utente mappati su componenti AEM predefiniti. La maggior parte dei progetti può riutilizzare questi componenti come punto di partenza per la propria implementazione.
-
Nel codice del progetto apri il file
import-components.js
aui.frontend/src/components
.
Questo file importa tutti i componenti SPA mappati ai componenti AEM. Data la natura dinamica dell’implementazione dell’Editor SPA, è necessario fare riferimento esplicito a qualsiasi componente SPA associato ai componenti compatibili con l’AEM. Questo consente all’autore di AEM di scegliere di utilizzare un componente in qualsiasi posizione all’interno dell’applicazione. -
Le seguenti istruzioni di importazione includono i componenti SPA scritti nel progetto:
code language-js import './Page/Page'; import './Text/Text'; import './Container/Container'; import './ExperienceFragment/ExperienceFragment';
-
Ce ne sono molti altri
imports
da@adobe/aem-core-components-react-spa
e@adobe/aem-core-components-react-base
. Questi componenti importano i componenti core React e li rendono disponibili nel progetto corrente. Questi vengono quindi mappati su componenti AEM specifici del progetto utilizzandoMapTo
, proprio come con ilText
componente precedente.
Aggiornamento delle politiche AEM
Le policy sono una funzione dei modelli AEM che offre agli sviluppatori e agli utenti avanzati un controllo granulare sui componenti disponibili per l’utilizzo. I componenti core React sono inclusi nel codice SPA, ma devono essere abilitati tramite una policy prima di poter essere utilizzati nell’applicazione.
-
Dalla schermata iniziale dell’AEM, vai a Strumenti > Modelli > WKND SPA React.
-
Seleziona e apri la Pagina SPA modello per la modifica.
-
Seleziona la Contenitore di layout e fai clic su policy per modificare il criterio:
-
Sotto Componenti consentiti > WKND SPA React - Contenuto > spunta Immagine, Teaser, e Titolo.
Sotto Componenti predefiniti > Aggiungi mappatura e scegli la Immagine - React SPA WKND - Contenuto componente:
Immetti un tipo mime di
image/*
.Clic Fine per salvare gli aggiornamenti dei criteri.
-
In Contenitore di layout fai clic su policy icona per Testo componente.
Crea un nuovo criterio denominato Testo WKND SPA. Sotto Plug-in > Formattazione > seleziona tutte le caselle per abilitare opzioni di formattazione aggiuntive:
Sotto Plug-in > Stili paragrafo > seleziona la casella per Abilita stili di paragrafo:
Clic Fine per salvare l'aggiornamento del criterio.
Contenuto autore
-
Accedi a Homepage http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html.
-
Ora dovresti poter utilizzare i componenti aggiuntivi Immagine, Teaser, e Titolo sulla pagina.
-
Dovresti anche poter modificare il
Text
e aggiungi altri stili di paragrafo in a schermo intero modalità. -
Dovresti anche poter trascinare e rilasciare un’immagine dalla Asset Finder:
-
Esperienza con Titolo e Teaser componenti.
-
Aggiungi le tue immagini tramite AEM Assets o installare la base di codice completata per lo standard Sito di riferimento WKND. Il Sito di riferimento WKND include molte immagini che possono essere riutilizzate sull’SPA WKND. Il pacchetto può essere installato utilizzando Gestione pacchetti AEM.
Inspect il contenitore di layout
Supporto per Contenitore di layout viene fornito automaticamente dall’SDK dell’editor SPA dell’AEM. Il Contenitore di layout, come indicato dal nome, è un contenitore componente. I componenti contenitore sono componenti che accettano strutture JSON che rappresentano altro e crearne un'istanza dinamica.
Esaminiamo ulteriormente il Contenitore di layout.
-
In un browser passa a http://localhost:4502/content/wknd-spa-react/us/en.model.json
Il Contenitore di layout il componente ha
sling:resourceType
diwcm/foundation/components/responsivegrid
ed è riconosciuto dall'editor SPA utilizzando:type
proprietà, proprio comeText
eImage
componenti.Le stesse funzionalità di ridimensionamento di un componente mediante Modalità Layout sono disponibili con l’editor SPA.
-
Torna a http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html. Aggiungi ulteriori Immagine e provare a ridimensionarli utilizzando Layout opzione:
-
Riapri il modello JSON http://localhost:4502/content/wknd-spa-react/us/en.model.json e osservano
columnClassNames
come parte del JSON:Il nome della classe
aem-GridColumn--default--4
indica che il componente deve avere una larghezza di 4 colonne in base a una griglia a 12 colonne. Maggiori dettagli su la griglia reattiva si trova qui. -
Torna all’IDE e nella
ui.apps
è presente una libreria lato client definita inui.apps/src/main/content/jcr_root/apps/wknd-spa-react/clientlibs/clientlib-grid
. Apri il fileless/grid.less
.Questo file determina i punti di interruzione (
default
,tablet
, ephone
) utilizzato da Contenitore di layout. Questo file è stato progettato per essere personalizzato in base alle specifiche del progetto. Attualmente i punti di interruzione sono impostati su1200px
e768px
. -
Dovresti essere in grado di utilizzare le funzionalità reattive e i criteri Rich Text aggiornati di
Text
per creare una visualizzazione simile alla seguente:
Congratulazioni. congratulations
Congratulazioni, hai imparato a mappare i componenti SPA ai componenti AEM e hai utilizzato i componenti core React. Hai anche la possibilità di esplorare le funzionalità reattive del Contenitore di layout.
Passaggi successivi next-steps
Navigazione e indirizzamento - Scopri come è possibile supportare più visualizzazioni nell’SPA mediante la mappatura su pagine AEM con l’SDK dell’Editor SPA. La navigazione dinamica viene implementata utilizzando React Router e React Core Components.
(Bonus) Mantenere le configurazioni per il controllo del codice sorgente bonus-configs
In molti casi, soprattutto all’inizio di un progetto AEM, è utile mantenere le configurazioni, come i modelli e le relative policy di contenuto, per il controllo del codice sorgente. In questo modo tutti gli sviluppatori lavorano sullo stesso set di contenuti e configurazioni e possono garantire ulteriore coerenza tra gli ambienti. Quando un progetto raggiunge un certo livello di maturità, la pratica di gestione dei modelli può essere affidata a uno speciale gruppo di utenti esperti.
I passaggi successivi verranno eseguiti utilizzando l'IDE di Visual Studio Code e Sincronizzazione AEM VSCode ma potrebbe utilizzare qualsiasi strumento e IDE configurato per tirare o importa contenuti provenienti da un’istanza locale dell’AEM.
-
Nell'IDE di Visual Studio Code verificare di avere Sincronizzazione AEM VSCode installato tramite l’estensione Marketplace:
-
Espandi ui.content in Esplora progetti e passare a
/conf/wknd-spa-react/settings/wcm/templates
. -
Clic con il pulsante destro il
templates
cartella e seleziona Importa da server AEM: -
Ripeti i passaggi per importare il contenuto, ma seleziona la criteri cartella situata in
/conf/wknd-spa-react/settings/wcm/templates/policies
. -
Inspect
filter.xml
file che si trova inui.content/src/main/content/META-INF/vault/filter.xml
.code language-xml <!--ui.content filter.xml--> <?xml version="1.0" encoding="UTF-8"?> <workspaceFilter version="1.0"> <filter root="/conf/wknd-spa-react" mode="merge"/> <filter root="/content/wknd-spa-react" mode="merge"/> <filter root="/content/dam/wknd-spa-react" mode="merge"/> <filter root="/content/experience-fragments/wknd-spa-react" mode="merge"/> </workspaceFilter>
Il
filter.xml
Il file è responsabile dell’identificazione dei percorsi dei nodi installati con il pacchetto. Osservamode="merge"
in ciascuno dei filtri che indica che il contenuto esistente non verrà modificato, viene aggiunto solo il nuovo contenuto. Poiché gli autori dei contenuti potrebbero aggiornare questi percorsi, è importante che una distribuzione del codice non sovrascrivi il contenuto. Consulta la Documentazione di FileVault per ulteriori dettagli sull’utilizzo degli elementi filtro.Confronta
ui.content/src/main/content/META-INF/vault/filter.xml
eui.apps/src/main/content/META-INF/vault/filter.xml
per comprendere i diversi nodi gestiti da ciascun modulo.
(Bonus) Creare un componente immagine personalizzato bonus-image
I componenti core React hanno già fornito un componente Immagine SPA. Tuttavia, se desideri ulteriore pratica, crea la tua implementazione React che mappi all’AEM Componente immagine. Il Image
è un altro esempio di contenuto componente.
Inspect il JSON
Prima di passare al codice SPA, controlla il modello JSON fornito dall’AEM.
-
Accedi a Esempi di immagini nella libreria dei componenti core.
Proprietà di
src
,alt
, etitle
sono utilizzati per popolare l’SPAImage
componente.note note NOTE Sono esposte altre proprietà immagine ( lazyEnabled
,widths
) che consentono a uno sviluppatore di creare un componente adattivo e a caricamento lento. Il componente integrato in questa esercitazione è semplice e non utilizza queste proprietà avanzate.
Implementare il componente Immagine
-
Quindi, crea una nuova cartella denominata
Image
inui.frontend/src/components
. -
Sotto
Image
cartella crea un nuovo file denominatoImage.js
. -
Aggiungi quanto segue
import
istruzioni perImage.js
:code language-js import React, {Component} from 'react'; import {MapTo} from '@adobe/aem-react-editable-components';
-
Quindi aggiungi
ImageEditConfig
per determinare quando visualizzare il segnaposto in AEM:code language-js export const ImageEditConfig = { emptyLabel: 'Image', isEmpty: function(props) { return !props || !props.src || props.src.trim().length < 1; } };
Il segnaposto mostra se
src
proprietà non impostata. -
Avanti implementare
Image
classe:code language-js export default class Image extends Component { get content() { return <img className="Image-src" src={this.props.src} alt={this.props.alt} title={this.props.title ? this.props.title : this.props.alt} />; } render() { if(ImageEditConfig.isEmpty(this.props)) { return null; } return ( <div className="Image"> {this.content} </div> ); } }
Il codice riportato sopra restituirà un
<img>
in base alle proprietàsrc
,alt
, etitle
passato dal modello JSON. -
Aggiungi il
MapTo
codice per mappare il componente React al componente AEM:code language-js MapTo('wknd-spa-react/components/image')(Image, ImageEditConfig);
Prendi nota della stringa
wknd-spa-react/components/image
corrisponde alla posizione della componente AEM inui.apps
a:ui.apps/src/main/content/jcr_root/apps/wknd-spa-react/components/image
. -
Crea un nuovo file denominato
Image.css
nella stessa directory e aggiungi quanto segue:code language-scss .Image-src { margin: 1rem 0; width: 100%; border: 0; }
-
In entrata
Image.js
aggiungi un riferimento al file nella parte superiore sotto ilimport
istruzioni:code language-js import React, {Component} from 'react'; import {MapTo} from '@adobe/aem-react-editable-components'; require('./Image.css');
-
Apri il file
ui.frontend/src/components/import-components.js
e aggiungi un riferimento al nuovoImage
componente:code language-js import './Page/Page'; import './Text/Text'; import './Container/Container'; import './ExperienceFragment/ExperienceFragment'; import './Image/Image'; //add reference to Image component
-
In entrata
import-components.js
aggiungi un commento all’immagine del componente core React:code language-js //MapTo('wknd-spa-react/components/image')(ImageV2, {isEmpty: ImageV2IsEmptyFn});
In questo modo verrà utilizzato il componente immagine personalizzato.
-
Dalla directory principale del progetto, distribuisci il codice SPA all’AEM utilizzando Maven:
code language-shell $ cd aem-guides-wknd-spa.react $ mvn clean install -PautoInstallSinglePackage
-
Inspect l'SPA nell'AEM. Tutti i componenti Immagine sulla pagina continueranno a funzionare. Inspect ha eseguito il rendering dell’output e dovresti visualizzare il markup per il componente immagine personalizzato anziché il componente core React.
Markup del componente Immagine personalizzato
code language-html <div class="Image"> <img class="Image-src" src="/content/image-src.jpg"> </div>
Markup immagine del componente core React
code language-html <div class="cmp-image cq-dd-image"> <img src="/content/image-src.jpg" class="cmp-image__image"> </div>
Questa è una buona introduzione per estendere e implementare i propri componenti.