Sie sehen sich Hilfeinhalte der folgenden Version an:

Single Page Applications (SPAs) können ansprechende Erlebnisse für Website-Benutzer bieten. Entwickler möchten Sites mit SPA-Frameworks erstellen und Autoren möchten Inhalte in AEM nahtlos für eine Site bearbeiten, die mit diesen Frameworks erstellt wurde.

Der SPA-Editor bietet eine umfassende Lösung zur Unterstützung von SPAs in AEM. Auf dieser Seite finden Sie einen Überblick über die Unterstützung von SPA in AEM, die Funktionsweise des SPA-Editors und die Synchronisation des SPA-Frameworks und AEM.

Vorsicht:

Die Editor-Funktion für Single Page Applications (SPAs) wurde mit AEM 6.4 eingeführt und ist derzeit als Technologievorschau verfügbar. Der SPA-Editor wird separat zum AEM-Schnellstart im nächsten Service Pack für AEM 6.3 und 6.4 bereitgestellt.

  • Diese Funktion befindet sich noch in der Entwicklung und die Dokumentation kann jederzeit geändert werden.
  • Der SPA-Editor ist die empfohlene Lösung für Projekte, bei denen ein SPA-Framework basierend auf clientseitigem Rendering (z. B. React) erforderlich ist.

Einführung

Sites, die mit gängigen SPA-Frameworks wie React und Angular erstellt wurden, laden ihren Inhalt über dynamisches JSON und weisen nicht die HTML-Struktur auf, die für den Seiten-Editor von AEM erforderlich ist, um Steuerelemente zur Bearbeitung platzieren zu können.

Um die Bearbeitung von SPAs innerhalb von AEM zu ermöglichen, ist eine Zuordnung zwischen der JSON-Ausgabe der SPA und dem Inhaltsmodell im AEM-Repository erforderlich, damit Änderungen am Inhalt gespeichert werden können.

Mit der SPA-Unterstützung wird in AEM ein JS-Thin Layer eingeführt. Dieses interagiert mit dem SPA-JS-Code, wenn es in den Seiten-Editor geladen wird, mit dem Ereignisse gesendet und der Speicherort für die Steuerelemente zur Bearbeitung aktiviert werden kann, um eine kontextbezogene Bearbeitung zu ermöglichen. Diese Funktion baut auf dem Content Services API Endpoint-Konzept auf, da die Inhalte aus der SPA über Content Services geladen werden müssen.

Weitere Informationen zu SPAs in AEM finden Sie in den folgenden Dokumenten:

Design

Die Seitenkomponente für eine SPA stellt die HTML-Elemente ihrer untergeordneten Komponenten nicht über die JSP- oder HTL-Datei bereit. Dieser Vorgang wird an das SPA-Framework delegiert. Die Darstellung der untergeordneten Komponenten wird als JSON-Datenstruktur abgerufen. Die SPA-Komponenten werden dann entsprechend dieser Struktur zur Seite hinzugefügt. Durch dieses Verhalten unterscheidet sich die anfängliche Hauptteilkomposition der Seitenkomponente von entsprechenden Kompositionen, bei denen es sich nicht um SPA-Komponenten handelt.

Seitenmodellverwaltung

Die Auflösung und Verwaltung des Seitenmodells wird an eine bereitgestellte PageModel-Bibliothek delegiert. Die SPA muss die PageModel-Bibliothek verwenden, um vom Seiten-Editor initialisiert und erstellt zu werden. Die PageModel-Bibliothek wird der AEM-Seitenkomponente indirekt über den NPM cq-react-editable-components bereitgestellt. Das Seitenmodell fungiert als Interpreter zwischen AEM und der SPA und muss daher immer vorhanden sein. Bei der Erstellung der Seite muss eine zusätzliche Bibliothek cq.authoring.pagemodel.messaging hinzugefügt werden, um die Kommunikation mit dem Seiten-Editor zu ermöglichen.

Wenn die SPA-Seitenkomponente von der Seitenkernkomponente erbt, gibt es zwei Möglichkeiten, die Kategorie cq.authoring.pagemodel.messaging der Client-Bibliothek verfügbar zu machen:

  • Wenn die Vorlage bearbeitbar ist, fügen Sie sie der Seitenrichtlinie hinzu.
  • Oder fügen Sie die Kategorien mithilfe von customfooterlibs.html hinzu.

Vorsicht:

Die Einbindung der Kategorie cq.authoring.pagemodel.messaging sollte sich auf den Kontext des Seiten-Editors beschränken.

Kommunikationsdatentyp

Wenn der Seite die Kategorie cq.authoring.pagemodel.messaging hinzugefügt wird, sendet sie eine Nachricht an den Seiten-Editor, um den JSON-Kommunikationsdatentyp festzulegen. Wenn der Kommunikationsdatentyp auf JSON festgelegt ist, kommunizieren die GET-Anfragen mit den Endpunkten des Sling-Modells einer Komponente. Nach einer Aktualisierung im Seiten-Editor wird die JSON-Repräsentation der aktualisierten Komponente an die PageModel-Bibliothek gesendet. Die PageModel-Bibliothek informiert dann die SPA über Aktualisierungen.

Architektur

Die Architektur der Interaktion zwischen SPA und AEM lässt sich leichter verstehen, wenn der Seiten-Editor als Vermittler zwischen den beiden betrachtet wird.

  • Die Kommunikation zwischen dem Seiten-Editor und der SPA erfolgt über JSON statt über HTML.
  • Der Seiten-Editor stellt die neueste Version des Seitenmodells für die SPA über die iFrame- und Messaging-API bereit.
  • Der Seitenmodell-Manager informiert den Editor, dass er zur Bearbeitung bereit ist, und übergibt das Seitenmodell als JSON-Struktur.
  • Der Editor verändert weder die DOM-Struktur der zu erstellenden Seite, noch greift er darauf zu, sondern stellt vielmehr das neueste Seitenmodell bereit.

Client-Server-Workflow zur Seitenbearbeitung

page_editor_spa_authoringmediator-2
  1. Die SPA initialisiert sich selbst und fordert das Seitenmodell vom Sling Model Exporter an.

  2. Der Sling Model Exporter fordert die Ressourcen, aus denen sich die Seite zusammensetzt, aus dem Repository an.

  3. Das Repository gibt die Ressourcen zurück.

  4. Der Sling Model Exporter gibt das Modell der Seite zurück.

  5. Die SPA instanziiert ihre Komponenten auf Grundlage des Seitenmodells.

  6. 6a Der Inhalt teilt dem Editor mit, dass er für das Authoring bereit ist.

    6b Der Seiten-Editor fordert die Konfigurationen für das Komponenten-Authoring an.

    6c Der Seiten-Editor empfängt die Konfigurationen.

  7. Wenn der Autor eine Komponente bearbeitet, sendet der Seiten-Editor eine Änderungsanforderung an das standardmäßige POST-Servlet.

  8. Die Ressource wird im Repository aktualisiert.

  9. Die aktualisierte Ressource wird für das POST-Servlet bereitgestellt.

  10. Das standardmäßige POST-Servlet informiert den Seiten-Editor darüber, dass die Ressource aktualisiert wurde.

  11. Der Seiten-Editor fordert das neue Seitenmodell an.

  12. Die Ressourcen, aus denen sich die Seite zusammensetzt, werden vom Repository angefordert.

  13. Die Ressourcen, aus denen sich die Seite zusammensetzt, werden vom Repository für den Sling Model Exporter bereitgestellt.

  14. Das aktualisierte Seitenmodell wird an den Editor zurückgegeben.

  15. Der Seiten-Editor aktualisiert die Seitenmodellreferenz der SPA.

  16. Die SPA aktualisiert ihre Komponenten auf der Grundlage der neuen Seitenmodellreferenz.

  17. Die Komponentenkonfigurationen der Seiten-Editoren werden aktualisiert.

    17a Die SPA signalisiert dem Seiten-Editor, dass der Inhalt bereit ist.

    17b Der Seiten-Editor stellt Komponentenkonfigurationen für die SPA bereit.

    17c Die SPA stellt aktualisierte Komponentenkonfigurationen bereit.

Authoring-Workflow

spa_content_authoringmodel
  1. Die SPA ruft das Seitenmodell ab.

  2. 2a Das Seitenmodell stellt die für das Authoring notwendigen Daten für den Editor bereit.

    2b Wenn der Komponenten-Orchestrator benachrichtigt wird, aktualisiert er die Inhaltsstruktur der Seite.

  3. Der Komponenten-Orchestrator fragt die Zuordnung zwischen einem AEM-Ressourcentyp und einer SPA-Komponente ab.

  4. Der Komponenten-Orchestrator instanziiert die SPA-Komponente dynamisch anhand des Seitenmodells und der Komponentenzuordnung.

  5. Der Seiten-Editor aktualisiert das Seitenmodell.

  6. 6a Das Seitenmodell stellt die aktualisierten Authoring-Daten für den Seiten-Editor bereit.

    6b Das Seitenmodell versendet Änderungen an den Komponenten-Orchestrator.

  7. Der Komponenten-Orchestrator ruft die Komponentenzuordnung ab.

  8. Der Komponenten-Orchestrator aktualisiert den Inhalt der Seite.

  9. Wenn die SPA die Aktualisierung des Inhalts der Seite abgeschlossen hat, lädt der Seiten-Editor die Authoring-Umgebung.

Voraussetzungen

Damit der Autor den Seiten-Editor zum Bearbeiten von Inhalten in einer SPA verwenden kann, muss die SPA die Anforderungen im SPA-Blueprint erfüllen.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie