Zuordnen von SPA-Komponenten zu AEM-Komponenten map-components

Bevor wir zum SPA-Code kommen, müssen Sie zunächst das von AEM bereitgestellte JSON-Modell verstehen. Navigieren Sie zur Kernkomponentenbibliothek und rufen Sie die Seite für die Textkomponente auf. Die Kernkomponentenbibliothek enthält Beispiele für alle AEM-Kernkomponenten.

Wählen Sie die Registerkarte JSON für eines der folgenden Beispiele aus:

Es sollten drei Eigenschaften angezeigt werden: text, richTextund :type.

:type ist eine reservierte Eigenschaft, die den sling:resourceType (oder Pfad) der AEM-Komponente auflistet. Der Wert von :type wird verwendet, um die AEM-Komponente der SPA zuzuordnen.

text und richText sind zusätzliche Eigenschaften, die für die SPA-Komponente verfügbar gemacht werden.

Sehen Sie sich die JSON-Ausgabe unter http://localhost:4502/content/wknd-spa-react/us/en.model.json an. Sie sollten einen Eintrag finden können, der in etwa wie folgt aussieht:

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

Öffnen Sie in der IDE Ihrer Wahl das AEM-Projekt für die SPA. Erweitern Sie das ui.frontend-Modul und öffnen Sie die Datei Text.js unter ui.frontend/src/components/Text/Text.js.

Der erste Bereich, den wir untersuchen werden, ist der class Text bei ~Zeile 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 ist eine standardmäßige React-Komponente. Die Komponente verwendet this.props.richText, um zu bestimmen, ob es sich bei dem zu rendernden Inhalt um Rich-Text oder Nur-Text handelt. Der tatsächlich verwendete „Inhalt“ stammt aus this.props.text.

Um einen möglichen XSS-Angriff zu vermeiden, wird der Rich-Text über DOMPurify mit Escape-Zeichen versehen, bevor dangerouslySetInnerHTML zum Rendern des Inhalts verwendet wird. Erinnern Sie sich an die richText- und text-Eigenschaften aus dem JSON-Modell, das zu einem früheren Zeitpunkt in der Übung verwendet wurde.

Als Nächstes öffnen Sie ui.frontend/src/components/import-components.js und schauen Sie sich TextEditConfig in ~Zeile 86 an:

const TextEditConfig = {
emptyLabel: 'Text',

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

Der obige Code bestimmt, wann der Platzhalter in der AEM Author-Umgebung gerendert werden soll. Wenn die Methode isEmpty true zurückgibt, wird der Platzhalter gerendert.

Sehen Sie sich abschließend den Aufruf MapTo bei ~Zeile 94 an:

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

MapTo wird durch das AEM SPA Editor JS SDK (@adobe/aem-react-editable-components) bereitgestellt. Der Pfad wknd-spa-react/components/text stellt die sling:resourceType der AEM-Komponente dar. Dieser Pfad wird mit dem :type abgeglichen, der von dem zuvor festgestellten JSON-Modell bereitgestellt wird. MapTo analysiert die JSON-Modellantwort und übergibt die richtigen Werte als props zur SPA-Komponente.

Sie finden die AEM-TextKomponentendefinition unter ui.apps/src/main/content/jcr_root/apps/wknd-spa-react/components/text.

Öffnen Sie im Projekt-Code die Datei import-components.js unter ui.frontend/src/components.
Diese Datei importiert alle SPA-Komponenten, die AEM-Komponenten zugeordnet sind. Angesichts der Dynamik der SPA-Editor-Implementierung müssen wir explizit auf alle SPA-Komponenten verweisen, die mit AEM Author-fähigen Komponenten verknüpft sind. Dadurch können AEM-Autorinnen und -Autoren wählen, ob sie eine Komponente überall in der Anwendung verwenden möchten.

Die folgenden Importanweisungen enthalten SPA-Komponenten, die in das Projekt geschrieben wurden:

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

Es gibt mehrere andere imports aus @adobe/aem-core-components-react-spa und @adobe/aem-core-components-react-base. Diese importieren die React-Kernkomponenten und stellen sie im aktuellen Projekt zur Verfügung. Diese werden dann mithilfe von MapTo projektspezifischen AEM-Komponenten zugeordnet, genau wie im Beispiel der Text-Komponente zuvor.

Navigieren Sie auf dem AEM-Startbildschirm zu Tools > Vorlagen > WKND SPA React.

Wählen Sie die Vorlage SPA-Seite aus und öffnen Sie sie zur Bearbeitung.

Wählen Sie den Layout-Container und klicken Sie auf das Symbol Richtlinie, um die Richtlinie zu bearbeiten:

Unter Zugelassene Komponenten > WKND SPA React – Inhalt > überprüfen Sie Bild, Teaser und Titel.

Unter Standardkomponenten > Zuordnung hinzufügen wählen Sie die Komponente Bild – WKND SPA React – Inhalt:

Geben Sie einen MIME-Typ von image/* ein.

Klicken Sie auf Fertig, um die Richtlinienaktualisierungen zu speichern.

Klicken Sie im Layout-Container auf das Symbol Richtlinie für die Komponente Text.

Erstellen Sie eine neue Richtlinie mit dem Namen WKND SPA-Text. Unter Plugins > Formatierung > markieren Sie alle Kästchen, um zusätzliche Formatierungsoptionen zu aktivieren:

Kreuzen Sie unter Plugins > Absatzformate > das Kontrollkästchen Absatzformate aktivieren an:

Klicken Sie auf Fertig, um die Richtlinienaktualisierung zu speichern.

Navigieren Sie zur Startseite http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html.

Sie sollten jetzt in der Lage sein, die zusätzlichen Komponenten Bild, Teaser und Titel auf der Seite zu verwenden.

Sie sollten auch in der Lage sein, die Text-Komponente zu bearbeiten und zusätzliche Absatzformate im Vollbild-Modus hinzuzufügen.

Sie sollten auch dazu in der Lage sein, ein Bild per Drag-and-Drop aus dem Asset-Finder zu ziehen:

Experimentieren Sie mit der Titel- und der Teaser-Komponente.

Fügen Sie Ihre eigenen Bilder über AEM Assets hinzu oder installieren Sie die fertige Codebasis für die standardmäßige WKND-Referenz-Site. Die WKND-Referenz-Site enthält viele Bilder, die auf der WKND-SPA wiederverwendet werden können. Das Paket kann mit dem Package Manager von AEM installiert werden.

Navigieren Sie in einem Browser zu http://localhost:4502/content/wknd-spa-react/us/en.model.json

Die Komponente Layout-Container verfügt über einen sling:resourceType von wcm/foundation/components/responsivegrid und wird vom SPA-Editor mithilfe der :type-Eigenschaft erkannt, genau wie die Komponenten Text und Image.

Die gleichen Funktionen für die Änderung der Größe einer Komponente mit dem Layout-Modus sind mit dem SPA-Editor verfügbar.

Kehren Sie zurück zu http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html. Fügen Sie zusätzliche Bild-Komponenten hinzu und versuchen Sie, mithilfe der Layout-Option ihre Größe zu verändern:

Öffnen Sie das JSON-Modell http://localhost:4502/content/wknd-spa-react/us/en.model.json erneut und betrachten Sie die columnClassNames als Teil von JSON:

Der Klassenname aem-GridColumn--default--4 gibt an, dass die Komponente basierend auf einem 12-Spalten-Raster 4 Spalten breit sein sollte. Weitere Informationen zum Responsiven Raster finden Sie hier.

Kehren Sie zur IDE zurück. Im ui.apps-Modul gibt es eine Client-seitige Bibliothek, die unter ui.apps/src/main/content/jcr_root/apps/wknd-spa-react/clientlibs/clientlib-grid definiert ist. Öffnen Sie die Datei less/grid.less.

Diese Datei bestimmt die Haltepunkte (default, tablet und phone), die der Layout-Container verwendet. Diese Datei soll gemäß den Projektspezifikationen angepasst werden. Derzeit sind die Haltepunkte auf 1200px und 768px festgelegt.

Sie sollten in der Lage sein, die responsiven Funktionen und die aktualisierten Rich-Text-Richtlinien der Text-Komponente zu verwenden, um eine Ansicht wie die folgende zu erstellen:

Stellen Sie in der Visual Studio Code-IDE sicher, dass Sie VSCode AEM Sync über die Marketplace-Erweiterung installiert haben:

Erweitern Sie das ui.content-Modul im Project Explorer und navigieren Sie zu /conf/wknd-spa-react/settings/wcm/templates.

Klicken Sie mit der rechten Maustaste auf den Ordner templates und wählen Sie Importieren aus AEM Server:

Wiederholen Sie die Schritte zum Importieren von Inhalten, aber wählen Sie den Ordner policies unter /conf/wknd-spa-react/settings/wcm/templates/policies aus.

Überprüfen Sie die Datei filter.xml unter 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>

Die Datei filter.xml ist für die Identifizierung der Pfade von Knoten verantwortlich, die mit dem Paket installiert werden. mode="merge" bei jedem Filter bedeutet, dass vorhandener Inhalt nicht geändert wird, sondern nur neue Inhalte hinzugefügt werden. Da Inhaltsautorinnen und Inhaltsautoren diese Pfade möglicherweise aktualisieren, ist es wichtig, dass Inhalte bei einer Code-Bereitstellung nicht überschrieben werden. Weitere Informationen zum Arbeiten mit Filterelementen finden Sie in der FileVault-Dokumentation.

Vergleichen Sie ui.content/src/main/content/META-INF/vault/filter.xml und ui.apps/src/main/content/META-INF/vault/filter.xml, um die verschiedenen Knoten zu verstehen, die von den einzelnen Modulen verwaltet werden.

Navigieren Sie zu den Bildbeispielen in der Kernkomponentenbibliothek.

Die Eigenschaften src, alt und title werden zum Auffüllen der Image-SPA-Komponente verwendet.

Als Nächstes erstellen Sie einen neuen Ordner mit dem Namen Image unter ui.frontend/src/components.

Erstellen Sie im Ordner Image eine neue Datei mit dem Namen Image.js.

Fügen Sie folgende import-Anweisung zu Image.js hinzu:

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

Fügen Sie dann ImageEditConfig hinzu, um zu bestimmen, wann der Platzhalter in AEM angezeigt werden soll:

export const ImageEditConfig = {

    emptyLabel: 'Image',

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

Der Platzhalter zeigt an, wenn die Eigenschaft src nicht festgelegt ist.

Implementieren Sie anschließend die Image-Klasse:

 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>
        );
    }
}

Der obige Code rendert nun ein <img>-Objekt basierend auf den vom JSON-Modell übergebenen Eigenschaften src, alt und title.

Fügen Sie den Code MapTo zum Zuordnen der React-Komponente zur AEM-Komponente hinzu:

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

Beachten Sie, dass die Zeichenfolge wknd-spa-react/components/image dem Speicherort der AEM-Komponente in ui.apps unter ui.apps/src/main/content/jcr_root/apps/wknd-spa-react/components/image entspricht.

Erstellen Sie eine neue Datei mit dem Namen Image.css im selben Verzeichnis und fügen Sie Folgendes hinzu:

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

Fügen Sie in Image.js einen Verweis auf die Datei oben unter den import-Anweisungen hinzu:

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

require('./Image.css');

Öffnen Sie die Datei ui.frontend/src/components/import-components.js und fügen Sie einen Verweis auf die neue Image-Komponente hinzu:

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

Kommentieren Sie in import-components.js das Bild der React-Kernkomponente aus:

//MapTo('wknd-spa-react/components/image')(ImageV2, {isEmpty: ImageV2IsEmptyFn});

Dadurch wird sichergestellt, dass stattdessen die benutzerdefinierte Bildkomponente verwendet wird.

Stellen Sie aus dem Stammverzeichnis des Projekts den SPA-Code mithilfe von Maven für AEM bereit:

$ cd aem-guides-wknd-spa.react
$ mvn clean install -PautoInstallSinglePackage

Überprüfen Sie die SPA in AEM. Alle Bildkomponenten auf der Seite sollten weiterhin funktionieren. Überprüfen Sie die gerenderte Ausgabe. Sie sollten das Markup für die benutzerdefinierte Bildkomponente anstelle der React-Kernkomponente sehen.

Markup für die benutzerdefinierte Bildkomponente

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

Markup für das Bild der React-Kernkomponente

<div class="cmp-image cq-dd-image">
    <img src="/content/image-src.jpg" class="cmp-image__image">
</div>

Dies stellt eine gute Einführung in die Erweiterung und Implementierung Ihrer eigenen Komponenten dar.