Zuordnen SPA Komponenten zu AEM Komponenten

Erfahren Sie, wie Sie Angular-Komponenten Adobe Experience Manager-Komponenten (AEM) mit dem AEM SPA Editor JS SDK zuordnen. Die Komponentenzuordnung ermöglicht es Benutzern, im AEM SPA Editor dynamische Aktualisierungen an SPA -Komponenten vorzunehmen, ähnlich wie beim herkömmlichen AEM.

In diesem Kapitel werden die AEM JSON-Modell-API und die Möglichkeiten erläutert, wie der von einer AEM-Komponente angezeigte JSON-Inhalt automatisch als Props in eine Angular-Komponente eingefügt werden kann.

Ziele

Erfahren Sie, wie Sie AEM Komponenten SPA Komponenten zuordnen.
Machen Sie sich mit dem Unterschied zwischen den Komponenten Container und Inhalt vertraut.
Erstellen Sie eine neue Angular-Komponente, die einer vorhandenen AEM zugeordnet ist.

Was Sie erstellen werden

In diesem Kapitel wird untersucht, wie die bereitgestellte SPA Text der AEM TextKomponente zugeordnet wird. Es wird eine neue SPA Image erstellt, die in der SPA verwendet und in AEM erstellt werden kann. Die vordefinierten Funktionen der Layout-Container- und Vorlagen-Editor-Richtlinien werden auch verwendet, um eine Ansicht zu erstellen, die in ihrer Darstellung etwas abwechslungsreicher ist.

Kapitelbeispiel für die endgültige Bearbeitung

Voraussetzungen

Überprüfen Sie die erforderlichen Tools und Anweisungen zum Einrichten einer lokalen Entwicklungsumgebung.

Code abrufen

Laden Sie den Ausgangspunkt für dieses Tutorial über Git herunter:

$ git clone git@github.com:adobe/aem-guides-wknd-spa.git
$ cd aem-guides-wknd-spa
$ git checkout Angular/map-components-start

Stellen Sie die Codebasis mithilfe von Maven in einer lokalen AEM-Instanz bereit:
```
$ mvn clean install -PautoInstallSinglePackage
```
Wenn Sie AEM 6.x verwenden, fügen Sie das Profil classic hinzu:
```
$ mvn clean install -PautoInstallSinglePackage -Pclassic
```

Sie können den fertigen Code immer auf GitHub anzeigen oder den Code lokal auschecken, indem Sie zu der Verzweigung Angular/map-components-solution wechseln.

Mapping-Ansatz

Das grundlegende Konzept besteht darin, eine SPA Komponente einer AEM Komponente zuzuordnen. AEM Komponenten, Server-seitig ausführen, Inhalte als Teil der JSON-Modell-API exportieren. Der JSON-Inhalt wird vom SPA verwendet, der clientseitig im Browser ausgeführt wird. Es wird eine 1:1-Zuordnung zwischen SPA Komponenten und einer AEM Komponente erstellt.

Allgemeine Übersicht über die Zuordnung einer AEM-Komponente zu einer Angular-Komponente

Allgemeine Übersicht über die Zuordnung einer AEM-Komponente zu einer Angular-Komponente

Inspect der Textkomponente

Der AEM Projektarchetyp stellt eine Text-Komponente bereit, die der AEM Textkomponente zugeordnet ist. Dies ist ein Beispiel für eine content -Komponente, da sie content von AEM rendert.

Sehen wir uns an, wie die Komponente funktioniert.

Inspect des JSON-Modells

Bevor Sie in den SPA-Code springen, müssen Sie das von AEM bereitgestellte JSON-Modell verstehen. Navigieren Sie zur Kernkomponentenbibliothek und zeigen Sie die Seite für die Textkomponente an. Die Kernkomponentenbibliothek enthält Beispiele für alle AEM Kernkomponenten.
Wählen Sie die Registerkarte JSON für eines der Beispiele aus:

Es sollten drei Eigenschaften angezeigt werden: text, richText und :type.

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

text und richText sind zusätzliche Eigenschaften, die der SPA-Komponente angezeigt werden.

Inspect der Textkomponente

Öffnen Sie ein neues Terminal und navigieren Sie zum Ordner ui.frontend im Projekt. Führen Sie npm install und dann npm start aus, um den webpack-Dev-Server zu starten:
```
$ cd ui.frontend
$ npm run start:mock
```
Das Modul ui.frontend ist derzeit so eingerichtet, dass das JSON-Modell nachahmen verwendet wird.
Sie sollten ein neues Browserfenster sehen, das geöffnet ist für http://localhost:4200/content/wknd-spa-angular/us/en/home.html
Öffnen Sie in der IDE Ihrer Wahl das AEM Projekt für die WKND-SPA. Erweitern Sie das Modul ui.frontend und öffnen Sie die Datei text.component.ts unter ui.frontend/src/app/components/text/text.component.ts:
Der erste zu prüfende Bereich ist der class TextComponent bei ~line 35:
```
export class TextComponent {
    @Input() richText: boolean;
    @Input() text: string;
    @Input() itemName: string;

    @HostBinding('innerHtml') get content() {
        return this.richText
        ? this.sanitizer.bypassSecurityTrustHtml(this.text)
        : this.text;
    }
    @HostBinding('attr.data-rte-editelement') editAttribute = true;

    constructor(private sanitizer: DomSanitizer) {}
}
```
@Input() decorator wird verwendet, um Felder zu deklarieren, deren Werte über das zugeordnete JSON-Objekt festgelegt werden, das zuvor überprüft wurde.

@HostBinding('innerHtml') get content() ist eine Methode, die den erstellten Textinhalt aus dem Wert von this.text verfügbar macht. Wenn es sich bei dem Inhalt um Rich-Text handelt (bestimmt durch das this.richText-Flag), wird die integrierte Sicherheitsfunktion von Angular umgangen. Angular DomSanitizer wird verwendet, um den rohen HTML-Code zu scrubben und Sicherheitslücken beim Cross Site Scripting zu vermeiden. Die Methode wird mit dem Dekorator @HostBinding an die Eigenschaft innerHtml gebunden.
Überprüfen Sie dann TextEditConfig in Zeile 24:
```
const TextEditConfig = {
    emptyLabel: 'Text',
    isEmpty: cqModel =>
        !cqModel || !cqModel.text || cqModel.text.trim().length < 1
};
```
Der obige Code ist für die Bestimmung verantwortlich, wann der Platzhalter in der AEM Autorenumgebung wiedergegeben werden soll. Wenn die isEmpty-Methode true zurückgibt, wird der Platzhalter gerendert.
Sehen Sie sich schließlich den MapTo-Aufruf an unter ~line 53:
```
MapTo('wknd-spa-angular/components/text')(TextComponent, TextEditConfig );
```
MapTois wird vom AEM SPA Editor JS SDK (@adobe/cq-angular-editable-components) bereitgestellt. Der Pfad wknd-spa-angular/components/text stellt die sling:resourceType der AEM Komponente dar. Dieser Pfad wird mit dem :type übereinstimmen, der vom zuvor beobachteten JSON-Modell bereitgestellt wird. MapToparses die JSON-Modellantwort und übergibt die richtigen Werte an die @Input() Variablen der SPA Komponente.

Die AEM Text-Komponentendefinition finden Sie unter ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/components/text.
Experimentieren Sie, indem Sie die en.model.json-Datei unter ui.frontend/src/mocks/json/en.model.json ändern.

Aktualisieren Sie in ~line 62 den ersten Text -Wert, um die Tags H1 und u zu verwenden:
```
    "text": {
        "text": "<h1><u>Hello World!</u></h1>",
        "richText": true,
        ":type": "wknd-spa-angular/components/text"
    }
```
Kehren Sie zum Browser zurück, um die vom webpack dev server bereitgestellten Effekte anzuzeigen:

Versuchen Sie, die richText-Eigenschaft zwischen true / false umzuschalten, um die Renderlogik in Aktion zu sehen.
Inspect text.component.html unter ui.frontend/src/app/components/text/text.component.html.

Diese Datei ist leer, da der gesamte Inhalt der Komponente durch die Eigenschaft innerHTML festgelegt wird.

Inspect app.module.ts unter ui.frontend/src/app/app.module.ts.

@NgModule({
imports: [
    BrowserModule,
    SpaAngularEditableComponentsModule,
    AppRoutingModule
],
providers: [ModelManagerService, { provide: APP_BASE_HREF, useValue: '/' }],
declarations: [AppComponent, TextComponent, PageComponent, HeaderComponent],
entryComponents: [TextComponent, PageComponent],
bootstrap: [AppComponent]
})
export class AppModule {}

Die TextComponent ist nicht explizit enthalten, sondern dynamisch über AEMResponsiveGridComponent, bereitgestellt vom AEM SPA Editor JS SDK. Daher muss im Array app.module.ts' entryComponents aufgeführt werden.

Erstellen der Bildkomponente

Erstellen Sie anschließend eine Image-Angular-Komponente, die der AEM Bildkomponente zugeordnet ist. Die Komponente Image ist ein weiteres Beispiel für eine content -Komponente.

Inspect the JSON

Bevor Sie in den SPA-Code springen, überprüfen Sie das von AEM bereitgestellte JSON-Modell.

Navigieren Sie zu den Bildbeispielen in der Kernkomponentenbibliothek.

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

HINWEIS

Es gibt weitere angezeigte Bildeigenschaften (lazyEnabled, widths), die es einem Entwickler ermöglichen, eine adaptive und verzögerte Ladekomponente zu erstellen. Die in diesem Tutorial erstellte Komponente ist einfach und verwendet nicht diese erweiterten Eigenschaften.

Kehren Sie zu Ihrer IDE zurück und öffnen Sie en.model.json unter ui.frontend/src/mocks/json/en.model.json. Da dies eine netto-neue Komponente für unser Projekt ist, müssen wir die Bild-JSON "nachahmen".

Fügen Sie in ~line 70 einen JSON-Eintrag für das Modell image hinzu (vergessen Sie nicht das nachfolgende Komma , nach dem zweiten text_386303036) und aktualisieren Sie das Array :itemsOrder.

...
":items": {
            ...
            "text_386303036": {
                "text": "<p>A new text component.</p>\r\n",
                "richText": true,
                ":type": "wknd-spa-angular/components/text"
                },
            "image": {
                "alt": "Rock Climber in New Zealand",
                "title": "Rock Climber in New Zealand",
                "src": "/mocks/images/adobestock-140634652.jpeg",
                ":type": "wknd-spa-angular/components/image"
            }
        },
        ":itemsOrder": [
            "text",
            "text_386303036",
            "image"
        ],

Das Projekt enthält ein Beispielbild unter /mock-content/adobestock-140634652.jpeg , das mit dem webpack-Dev-Server verwendet wird.

Den vollständigen en.model.json finden Sie hier.

Fügen Sie ein Lagerbild hinzu, das von der Komponente angezeigt werden soll.

Erstellen Sie einen neuen Ordner mit dem Namen images unter ui.frontend/src/mocks. Laden Sie adobestock-140634652.jpeg herunter und legen Sie es im neu erstellten Ordner images ab. Sie können bei Bedarf Ihr eigenes Bild verwenden.

Implementieren der Bildkomponente

Beenden Sie den webpack-Dev-Server, falls er gestartet wurde.
Erstellen Sie eine neue Bildkomponente, indem Sie den Befehl Angular CLI ng generate component aus dem Ordner ui.frontend ausführen:
```
$ ng generate component components/image
```

Öffnen Sie in der IDE image.component.ts unter ui.frontend/src/app/components/image/image.component.ts und aktualisieren Sie wie folgt:

import {Component, Input, OnInit} from '@angular/core';
import {MapTo} from '@adobe/cq-angular-editable-components';

const ImageEditConfig = {
emptyLabel: 'Image',
isEmpty: cqModel =>
    !cqModel || !cqModel.src || cqModel.src.trim().length < 1
};

@Component({
selector: 'app-image',
templateUrl: './image.component.html',
styleUrls: ['./image.component.scss']
})
export class ImageComponent implements OnInit {

@Input() src: string;
@Input() alt: string;
@Input() title: string;

constructor() { }

get hasImage() {
    return this.src && this.src.trim().length > 0;
}

ngOnInit() { }
}

MapTo('wknd-spa-angular/components/image')(ImageComponent, ImageEditConfig);

ImageEditConfig ist die Konfiguration, um zu bestimmen, ob der Autoren-Platzhalter in AEM wiedergegeben werden soll, basierend darauf, ob die src Eigenschaft gefüllt ist.

@Input() von src, alt und title sind die Eigenschaften, die von der JSON-API zugeordnet sind.

hasImage() ist eine Methode, die bestimmt, ob das Bild gerendert werden soll.

MapTo ordnet die SPA Komponente der AEM Komponente zu, die sich unter ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/components/imagebefindet.

Öffnen Sie image.component.html und aktualisieren Sie es wie folgt:
```
<ng-container *ngIf="hasImage">
    <img class="image" [src]="src" [alt]="alt" [title]="title"/>
</ng-container>
```
Dadurch wird das Element <img> gerendert, wenn hasImage true zurückgibt.
Öffnen Sie image.component.scss und aktualisieren Sie es wie folgt:
```
:host-context {
    display: block;
}

.image {
    margin: 1rem 0;
    width: 100%;
    border: 0;
}
```
HINWEIS

Die :host-context-Regel ist kritisch, damit der Platzhalter für den AEM SPA-Editor ordnungsgemäß funktioniert. Alle SPA Komponenten, die im AEM Seiteneditor erstellt werden sollen, benötigen diese Regel mindestens.
Öffnen Sie app.module.ts und fügen Sie ImageComponent zum entryComponents-Array hinzu:
```
entryComponents: [TextComponent, PageComponent, ImageComponent],
```
Wie TextComponent wird ImageComponent dynamisch geladen und muss im entryComponents -Array enthalten sein.
Starten Sie den webpack-Dev-Server, um den ImageComponent-Renderer anzuzeigen.
```
$ npm run start:mock
```
Bild SPA hinzugefügt

HINWEIS

Bonusaufgabe: Implementieren Sie eine neue Methode, um den Wert von title als Beschriftung unter dem Bild anzuzeigen.

Richtlinien in AEM aktualisieren

Die Komponente ImageComponent ist nur im webpack-Dev-Server sichtbar. Stellen Sie anschließend die aktualisierte SPA bereit, um die Vorlagenrichtlinien zu AEM und zu aktualisieren.

Beenden Sie den webpack-Dev-Server und stellen Sie über das root des Projekts die Änderungen AEM mithilfe Ihrer Maven-Fähigkeiten bereit:
```
$ cd aem-guides-wknd-spa
$ mvn clean install -PautoInstallSinglePackage
```
Navigieren Sie im Bildschirm AEM Start zu Tools > Vorlagen > WKND SPA Angular.

Wählen Sie die SPA Seite aus und bearbeiten Sie sie:
Wählen Sie den Layout-Container aus und klicken Sie auf das Symbol policy , um die Richtlinie zu bearbeiten:
Überprüfen Sie unter Zulässige Komponenten > WKND SPA Angular - Content die Komponente Bild:

Wählen Sie unter Standardkomponenten > Mapping hinzufügen und die Komponente Bild - WKND SPA Angular - Content aus:

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 policy für die Komponente Text:

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

Aktivieren Sie unter Plugins > Absatzstile das Kontrollkästchen zu Absatzstile aktivieren:

Klicken Sie auf Fertig , um die Richtlinienaktualisierung zu speichern.
Navigieren Sie zur Homepage http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html.

Sie sollten auch in der Lage sein, die Komponente Text zu bearbeiten und zusätzliche Absatzstile im Modus Vollbild hinzuzufügen.
Sie sollten auch ein Bild aus dem Asset Finder ziehen und ablegen können:
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 Referenz-Website WKND enthält viele Bilder, die auf der WKND-SPA wiederverwendet werden können. Das Paket kann mit AEM Package Manager installiert werden.

Inspect des Layout-Containers

Unterstützung für den Layout-Container wird automatisch vom AEM SPA Editor SDK bereitgestellt. Der Layout-Container, wie durch den Namen angegeben, ist eine Container-Komponente. Container-Komponenten sind Komponenten, die JSON-Strukturen akzeptieren, die andere-Komponenten darstellen und sie dynamisch instanziieren.

Überprüfen wir nun den Layout-Container weiter.

Öffnen Sie in der IDE responsive-grid.component.ts unter ui.frontend/src/app/components/responsive-grid:
```
import { AEMResponsiveGridComponent,MapTo } from '@adobe/cq-angular-editable-components';

MapTo('wcm/foundation/components/responsivegrid')(AEMResponsiveGridComponent);
```
AEMResponsiveGridComponent wird als Teil des AEM SPA Editor SDK implementiert und über import-components in das Projekt aufgenommen.
Navigieren Sie in einem Browser zu http://localhost:4502/content/wknd-spa-angular/us/en.model.json

Die Komponente Layout-Container hat den Wert sling:resourceType von wcm/foundation/components/responsivegrid und wird vom SPA Editor mit der Eigenschaft :type erkannt, genau wie die Komponenten Text und Image.

Die gleichen Funktionen zum Neuskalieren einer Komponente mit Layout-Modus sind auch im SPA Editor verfügbar.
Kehren Sie zu http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html zurück. Fügen Sie weitere Bild-Komponenten hinzu und versuchen Sie, sie mithilfe der Option Layout neu zu skalieren:
Öffnen Sie das JSON-Modell http://localhost:4502/content/wknd-spa-angular/us/en.model.json erneut und beobachten Sie columnClassNames als Teil des JSON-Codes:

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 und im Modul ui.apps ist eine clientseitige Bibliothek definiert, die unter ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/clientlibs/clientlib-grid definiert ist. Öffnen Sie die Datei less/grid.less.

Diese Datei bestimmt die Haltepunkte (default, tablet und phone), die vom Layout-Container verwendet werden. Diese Datei soll gemäß den Projektspezifikationen angepasst werden. Derzeit sind die Haltepunkte auf 1200px und 650px festgelegt.
Sie sollten die responsiven Funktionen und die aktualisierten Rich-Text-Richtlinien der Komponente Text verwenden können, um eine Ansicht wie die folgende zu erstellen:

Herzlichen Glückwunsch!

Herzlichen Glückwunsch! Sie haben gelernt, wie Sie SPA Komponenten AEM Komponenten zuordnen und eine neue Image -Komponente implementiert haben. Sie haben auch die Möglichkeit erhalten, die responsiven Funktionen des Layout-Containers zu erkunden.

Sie können den fertigen Code immer auf GitHub anzeigen oder den Code lokal auschecken, indem Sie zu der Verzweigung Angular/map-components-solution wechseln.

Nächste Schritte

Navigation und Routing - Erfahren Sie, wie mehrere Ansichten im SPA durch Zuordnung zu AEM Seiten mit dem SPA Editor SDK unterstützt werden können. Die dynamische Navigation wird mithilfe des Angular-Routers implementiert und einer vorhandenen Kopfzeilenkomponente hinzugefügt.

Bonus - Beibehalten von Konfigurationen zur Quell-Code-Verwaltung

In vielen Fällen ist es insbesondere zu Beginn eines AEM-Projekts nützlich, Konfigurationen wie Vorlagen und zugehörige Inhaltsrichtlinien zur Quell-Code-Verwaltung beizubehalten. Dadurch wird sichergestellt, dass alle Entwickler mit demselben Inhalt und denselben Konfigurationen arbeiten und zusätzliche Konsistenz zwischen Umgebungen sichergestellt wird. Sobald ein Projekt einen gewissen Reifegrad erreicht hat, kann die Verwaltung von Vorlagen einer speziellen Gruppe von Power-Benutzern übertragen werden.

Die nächsten Schritte werden mit der Visual Studio Code-IDE und VSCode AEM Sync durchgeführt. Sie können jedoch jedes Tool und jede IDE verwenden, die Sie für Pull oder Import-Inhalte von einer lokalen Instanz von AEM konfiguriert haben.

Stellen Sie in der Visual Studio Code-IDE sicher, dass VSCode AEM Sync über die Marketplace-Erweiterung installiert ist:
Erweitern Sie das Modul ui.content im Projekt-Explorer und navigieren Sie zu /conf/wknd-spa-angular/settings/wcm/templates.
Klicken Sie mit der rechten Maustaste auf den templates Ordner und wählen Sie Import von AEM Server aus:
Wiederholen Sie die Schritte zum Importieren von Inhalten, wählen Sie jedoch den Ordner policies unter /conf/wknd-spa-angular/settings/wcm/policies aus.
Inspect die Datei filter.xml unter ui.content/src/main/content/META-INF/vault/filter.xml.
```

<?xml version="1.0" encoding="UTF-8"?>
 <workspaceFilter version="1.0">
     <filter root="/conf/wknd-spa-angular" mode="merge"/>
     <filter root="/content/wknd-spa-angular" mode="merge"/>
     <filter root="/content/dam/wknd-spa-angular" mode="merge"/>
     <filter root="/content/experience-fragments/wknd-spa-angular" mode="merge"/>
 </workspaceFilter>
```
Die filter.xml-Datei ist dafür verantwortlich, die Pfade von Knoten zu identifizieren, die mit dem Paket installiert werden. Beachten Sie die mode="merge" in jedem Filter, die darauf hinweisen, dass der vorhandene Inhalt nicht geändert wird, sondern nur neue Inhalte hinzugefügt werden. Da Inhaltsautoren diese Pfade möglicherweise aktualisieren, ist es wichtig, dass bei einer Codebereitstellung nicht Inhalte ü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.

Neue und verbesserte Suche

Zuordnen SPA Komponenten zu AEM Komponenten

Ziele

Was Sie erstellen werden

Voraussetzungen

Code abrufen

Mapping-Ansatz

Inspect der Textkomponente

Inspect des JSON-Modells

Inspect der Textkomponente

Erstellen der Bildkomponente

Inspect the JSON

Implementieren der Bildkomponente

Richtlinien in AEM aktualisieren

Inspect des Layout-Containers

Herzlichen Glückwunsch!

Nächste Schritte

Bonus - Beibehalten von Konfigurationen zur Quell-Code-Verwaltung

Materialien auf adobe.com

Auf dieser Seite

Als Nächstes anzeigen:

Training

Dokumentation

Community

Support

Ressourcen

Adobe-Konto

Adobe