Mappare i componenti dell’SPA ai componenti dell’AEM map-components

Prima di passare al codice SPA, è importante comprendere il modello JSON fornito dall’AEM. Passa alla libreria dei componenti core e visualizza la pagina per il componente Testo. La libreria dei componenti core fornisce esempi di tutti i componenti core dell’AEM.

Selezionare la scheda JSON per uno degli esempi:

Dovrebbero essere visualizzate tre proprietà: text, richText e :type.

:type è una proprietà riservata che elenca sling:resourceType (o percorso) del componente AEM. Il valore di :type è quello utilizzato per mappare il componente AEM al componente SPA.

text e richText 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:

"text": {
    "id": "text-a647cec03a",
    "text": "<p>Hello World! Updated content!</p>\r\n",
    "richText": true,
    ":type": "wknd-spa-react/components/text",
    "dataLayer": {}
   }

Nell'IDE che preferisci, apri il Progetto AEM per l'SPA. Espandere il modulo ui.frontend e aprire il file Text.js in ui.frontend/src/components/Text/Text.js.

La prima area da controllare è class Text a ~riga 40:

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 utilizza this.props.richText per determinare se il contenuto da riprodurre sarà in formato Rich Text o testo normale. Il "contenuto" effettivo utilizzato proviene da this.props.text.

Per evitare un potenziale attacco XSS, al testo RTF viene applicato l'escape tramite DOMPurify prima di utilizzare dangerouslySetInnerHTML per il rendering del contenuto. Richiama le proprietà richText e text dal modello JSON in precedenza nell'esercizio.

Apri ui.frontend/src/components/import-components.js, quindi dai un'occhiata a TextEditConfig alla ~riga 86:

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 metodo isEmpty restituisce true, viene eseguito il rendering del segnaposto.

Infine, dare un'occhiata alla chiamata MapTo a ~riga 94:

export default MapTo('wknd-spa-react/components/text')(LazyTextComponent, TextEditConfig);

MapTo è fornito dall'SDK JS dell'editor SPA dell'AEM (@adobe/aem-react-editable-components). Il percorso wknd-spa-react/components/text rappresenta sling:resourceType del componente AEM. Questo percorso viene confrontato con :type esposto dal modello JSON osservato in precedenza. MapTo si occupa di analizzare la risposta del modello JSON e di passare i valori corretti come props al componente SPA.

La definizione del componente Text dell'AEM è disponibile in ui.apps/src/main/content/jcr_root/apps/wknd-spa-react/components/text.

Nel codice del progetto apri il file import-components.js in ui.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:

import './Page/Page';
import './Text/Text';
import './Container/Container';
import './ExperienceFragment/ExperienceFragment';

Ci 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 a componenti AEM specifici del progetto utilizzando MapTo, come nell'esempio precedente del componente Text.

Dalla schermata iniziale dell'AEM, passa a Strumenti > Modelli > WKND SPA React.

Seleziona e apri il modello Pagina SPA per la modifica.

Seleziona il Contenitore di layout e fai clic sulla relativa icona criterio per modificare il criterio:

In Componenti consentiti > Reazione SPA WKND - Contenuto > selezionare Immagine, Teaser e Titolo.

In Componenti predefiniti > Aggiungi mappatura e scegli Immagine - Reazione SPA WKND - Contenuto componente:

Immetti un tipo mime di image/*.

Fai clic su Fine per salvare gli aggiornamenti dei criteri.

Nel Contenitore di layout fare clic sull'icona criterio per il componente Testo.

Crea un nuovo criterio denominato Testo SPA WKND. In Plug-in > Formattazione > seleziona tutte le caselle per abilitare opzioni di formattazione aggiuntive:

In Plug-in > Stili di paragrafo > seleziona la casella per Abilitare gli stili di paragrafo:

Fai clic su Fine per salvare l'aggiornamento dei criteri.

Passa alla home page http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html.

Ora dovresti essere in grado di utilizzare i componenti aggiuntivi Immagine, Teaser e Titolo nella pagina.

Dovresti anche poter modificare il componente Text e aggiungere altri stili di paragrafo in modalità schermo intero.

Dovresti anche essere in grado di trascinare e rilasciare un'immagine da Asset Finder:

Esperienza con i componenti Title e Teaser.

Aggiungi le tue immagini tramite AEM Assets o installa la base di codice completata per il sito di riferimento WKND standard. Il sito di riferimento WKND include molte immagini che possono essere riutilizzate nell'SPA WKND. È possibile installare il pacchetto utilizzando Gestione pacchetti AEM.

In un browser passa a http://localhost:4502/content/wknd-spa-react/us/en.model.json

Il componente Contenitore di layout ha sling:resourceType di wcm/foundation/components/responsivegrid ed è riconosciuto dall'editor SPA tramite la proprietà :type, proprio come i componenti Text e Image.

Con l'editor SPA sono disponibili le stesse funzionalità di ridimensionamento di un componente mediante la modalità layout.

Torna a http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html. Aggiungi altri componenti Immagine e prova a ridimensionarli utilizzando l'opzione Layout:

Riapri il modello JSON http://localhost:4502/content/wknd-spa-react/us/en.model.json e osserva columnClassNames come parte del JSON:

Il nome di classe aem-GridColumn--default--4 indica che il componente deve avere una larghezza di 4 colonne in base a una griglia a 12 colonne. Ulteriori dettagli sulla griglia reattiva sono disponibili qui.

Tornare all'IDE e nel modulo ui.apps è presente una libreria lato client definita in ui.apps/src/main/content/jcr_root/apps/wknd-spa-react/clientlibs/clientlib-grid. Aprire il file less/grid.less.

Questo file determina i punti di interruzione (default, tablet e phone) utilizzati dal Contenitore di layout. Questo file è stato progettato per essere personalizzato in base alle specifiche del progetto. Attualmente i punti di interruzione sono impostati su 1200px e 768px.

Dovresti essere in grado di utilizzare le funzionalità reattive e i criteri Rich Text aggiornati del componente Text per creare una visualizzazione simile alla seguente:

Nell'IDE di Visual Studio Code verificare che sia installato VSCode AEM Sync tramite l'estensione Marketplace:

Espandi il modulo ui.content in Esplora progetti e passa a /conf/wknd-spa-react/settings/wcm/templates.

Fare clic con il pulsante destro del mouse sulla cartella templates e selezionare Importa da server AEM:

Ripeti i passaggi per importare il contenuto, ma seleziona la cartella criteri che si trova in /conf/wknd-spa-react/settings/wcm/templates/policies.

Inspect il file filter.xml che si trova in ui.content/src/main/content/META-INF/vault/filter.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 file filter.xml è responsabile dell'identificazione dei percorsi dei nodi installati con il pacchetto. Osserva mode="merge" su ciascuno dei filtri che indica che il contenuto esistente non verrà modificato, ma che verrà aggiunto solo il nuovo contenuto. Poiché gli autori di contenuto potrebbero aggiornare questi percorsi, è importante che una distribuzione del codice non sovrascriva il contenuto. Per ulteriori informazioni sull'utilizzo degli elementi del filtro, vedere la documentazione di FileVault.

Confrontare ui.content/src/main/content/META-INF/vault/filter.xml e ui.apps/src/main/content/META-INF/vault/filter.xml per comprendere i diversi nodi gestiti da ciascun modulo.

Passa a Esempi di immagini nella libreria dei componenti core.

Le proprietà di src, alt e title vengono utilizzate per popolare il componente SPA Image.

Creare una nuova cartella denominata Image in ui.frontend/src/components.

Nella cartella Image creare un nuovo file denominato Image.js.

Aggiungi le seguenti istruzioni import a Image.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:

export const ImageEditConfig = {

    emptyLabel: 'Image',

    isEmpty: function(props) {
        return !props || !props.src || props.src.trim().length < 1;
    }
};

Il segnaposto verrà visualizzato se la proprietà src non è impostata.

Implementazione successiva della classe Image:

 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 eseguirà il rendering di <img> in base alle proprietà src, alt e title trasmesse dal modello JSON.

Aggiungere il codice MapTo per mappare il componente React al componente AEM:

MapTo('wknd-spa-react/components/image')(Image, ImageEditConfig);

La stringa wknd-spa-react/components/image corrisponde alla posizione del componente AEM in ui.apps in: ui.apps/src/main/content/jcr_root/apps/wknd-spa-react/components/image.

Creare un nuovo file denominato Image.css nella stessa directory e aggiungere quanto segue:

.Image-src {
    margin: 1rem 0;
    width: 100%;
    border: 0;
}

In Image.js aggiungere un riferimento al file nella parte superiore sotto le istruzioni import:

import React, {Component} from 'react';
import {MapTo} from '@adobe/aem-react-editable-components';

require('./Image.css');

Aprire il file ui.frontend/src/components/import-components.js e aggiungere un riferimento al nuovo componente Image:

import './Page/Page';
import './Text/Text';
import './Container/Container';
import './ExperienceFragment/ExperienceFragment';
import './Image/Image'; //add reference to Image component

In import-components.js commento l'immagine del componente core React:

//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:

$ 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

<div class="Image">
    <img class="Image-src" src="/content/image-src.jpg">
</div>

Markup immagine componente core React

<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.