Single Page Applications (SPAs) können ansprechende Erlebnisse für Website-Benutzer bieten. Entwickler möchten Sites mit SPA Frameworks erstellen können und Autoren möchten Inhalte in AEM für eine Site, die mit solchen Frameworks erstellt wurde, nahtlos bearbeiten.
Der SPA-Editor bietet eine umfassende Lösung zur Unterstützung von SPAs in AEM. Auf dieser Seite erhalten Sie einen Überblick darüber, wie SPA Support in AEM strukturiert ist, wie der SPA Editor funktioniert und wie das SPA Framework und AEM synchronisiert bleiben.
Der SPA Editor ist die empfohlene Lösung für Projekte, die SPA Framework-basiertes Client-seitiges Rendering erfordern (z. B. React oder Angular).
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 Seiteneditor von AEM erforderlich ist, um Steuerelemente zur Bearbeitung platzieren zu können.
Um die Bearbeitung von SPA in AEM zu aktivieren, ist eine Zuordnung zwischen der JSON-Ausgabe der SPA und dem Inhaltsmodell im AEM Repository erforderlich, um Änderungen am Inhalt zu speichern.
SPA Unterstützung in AEM führt eine dünne JS-Ebene ein, die mit dem SPA JS-Code interagiert, wenn sie im Seiteneditor geladen wird, mit dem Ereignisse gesendet werden können und der Speicherort für die Bearbeitungssteuerelemente aktiviert werden kann, um eine kontextbezogene Bearbeitung zu ermöglichen. Diese Funktion baut auf dem Content Services API-Endpoint-Konzept auf, da die Inhalte der SPA über Content Services geladen werden müssen.
Weitere Informationen zu SPA in AEM finden Sie in den folgenden Dokumenten:
Die Seitenkomponente für einen SPA stellt die HTML-Elemente seiner untergeordneten Komponenten nicht über die JSP- oder HTL-Datei bereit. Dieser Vorgang wird an das SPA-Framework delegiert. Die Darstellung der untergeordneten Komponenten oder von Modellen wird als JSON-Datenstruktur von JCR abgerufen. Die SPA Komponenten werden dann der Seite entsprechend dieser Struktur hinzugefügt. Durch dieses Verhalten wird die anfängliche Textkörperzusammensetzung der Seitenkomponente von SPA unterschieden.
Die Auflösung und Verwaltung des Seitenmodells wird an eine bereitgestellte PageModel
-Bibliothek delegiert. Die SPA muss die PageModel-Bibliothek verwenden, um vom SPA-Editor initialisiert und erstellt zu werden. Die PageModel-Bibliothek wird der AEM-Seitenkomponente indirekt über den NPM aem-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 Seiteneditor 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:
customfooterlibs.html
hinzu.Für jede Ressource im exportierten Modell ordnet die SPA eine tatsächliche Komponente zu, die das Rendern durchführt. Das als JSON dargestellte Modell wird dann mithilfe der Komponentenzuordnungen innerhalb eines Containers gerendert.
Die Einbindung der Kategorie cq.authoring.pagemodel.messaging
sollte sich auf den Kontext des SPA-Editors beschränken.
Wenn der Seite die Kategorie cq.authoring.pagemodel.messaging
hinzugefügt wird, sendet sie eine Nachricht an den Seiteneditor, um den JSON-Kommunikationsdatentyp festzulegen. Wenn der Kommunikationsdatentyp auf JSON festgelegt ist, kommunizieren die GET-Anfragen mit den Sling-Modell-Endpunkten einer Komponente. Nach einer Aktualisierung im Seiteneditor wird die JSON-Repräsentation der aktualisierten Komponente an die PageModel-Bibliothek gesendet. Die Seitenmodellbibliothek informiert dann über die SPA von Aktualisierungen.
Der Interaktionsfluss zwischen SPA und AEM lässt sich leichter verstehen, wenn der SPA-Editor als Vermittler zwischen den beiden betrachtet wird.
Unter Berücksichtigung der Schlüsselelemente des SPA-Editors erscheint der allgemeine Workflow zur Bearbeitung einer SPA in AEM für die Autorin bzw. den Autor wie folgt:
Beachten Sie:
Dies ist ein detaillierterer Überblick über die Interaktion zwischen Client und Server beim Bearbeiten einer SPA.
Die SPA initialisiert sich selbst und fordert das Seitenmodell vom Sling Model Exporter an.
Der Sling Model Exporter fordert die Ressourcen, aus denen sich die Seite zusammensetzt, aus dem Repository an.
Das Repository gibt die Ressourcen zurück.
Der Sling Model Exporter gibt das Modell der Seite zurück.
Die SPA instanziiert ihre Komponenten auf Grundlage des Seitenmodells.
6a Der Inhalt informiert den Editor darüber, dass er für die Bearbeitung bereit ist.
6b Der Seiteneditor fordert die Konfigurationen für die Komponentenbearbeitung an.
6c Der Seiteneditor erhält die Komponentenkonfigurationen.
Wenn der Autor eine Komponente bearbeitet, sendet der Seiteneditor eine Änderungsanfrage an das standardmäßige POST-Servlet.
Die Ressource wird im Repository aktualisiert.
Die aktualisierte Ressource wird für das POST-Servlet bereitgestellt.
Das standardmäßige POST-Servlet informiert den Seiteneditor darüber, dass die Ressource aktualisiert wurde.
Der Seiteneditor fordert das neue Seitenmodell an.
Die Ressourcen, aus denen sich die Seite zusammensetzt, werden vom Repository angefordert.
Die Ressourcen, aus denen sich die Seite zusammensetzt, werden vom Repository für den Sling Model Exporter bereitgestellt.
Das aktualisierte Seitenmodell wird an den Editor zurückgegeben.
Der Seiteneditor aktualisiert die Seitenmodellreferenz der SPA.
Die SPA aktualisiert ihre Komponenten auf der Grundlage der neuen Seitenmodellreferenz.
Die Komponentenkonfigurationen der Seiteneditoren werden aktualisiert.
17a Die SPA signalisiert dem Seiteneditor, dass der Inhalt bereit ist.
17b Der Seiteneditor stellt Komponentenkonfigurationen für die SPA bereit.
17c Die SPA stellt aktualisierte Komponentenkonfigurationen bereit.
Dies ist ein detaillierterer Überblick, der sich auf das Autorenerlebnis konzentriert.
Die SPA ruft das Seitenmodell ab.
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.
Der Komponenten-Orchestrator fragt die Zuordnung zwischen einem AEM-Ressourcentyp und einer SPA-Komponente ab.
Der Komponenten-Orchestrator instanziiert die SPA-Komponente dynamisch anhand des Seitenmodells und der Komponentenzuordnung.
Der Seiteneditor aktualisiert das Seitenmodell.
6a Das Seitenmodell stellt die aktualisierten Authoring-Daten für den Seiteneditor bereit.
6b Das Seitenmodell versendet Änderungen an den Komponenten-Orchestrator.
Der Komponenten-Orchestrator ruft die Komponentenzuordnung ab.
Der Komponenten-Orchestrator aktualisiert den Inhalt der Seite.
Wenn die SPA die Aktualisierung des Inhalts der Seite abgeschlossen hat, lädt der Seiteneditor die Authoring-Umgebung.
Damit die Autorin bzw. der Autor den Seiteneditor zum Bearbeiten von Inhalten in einer SPA verwenden kann, muss die SPA für die Interaktion mit dem AEM SPA Editor SDK implementiert sein. Weitere Informationen, die Sie benötigen, um Ihre SPAs zum Laufen zu bringen, finden Sie im Dokument Erste Schritte mit SPAs in AEM.
Das SPA Editor SDK unterstützt die folgenden Mindestversionen:
Frühere Versionen dieser Frameworks funktionieren möglicherweise mit dem AEM SPA Editor SDK, werden jedoch nicht unterstützt.
Für die Arbeit mit dem AEM SPA Editor SDK können weitere SPA-Frameworks implementiert werden. Im Dokument SPA-Blueprint finden Sie Informationen zu den Anforderungen, die ein Framework erfüllen muss, um eine Framework-spezifische Ebene aus Modulen, Komponenten und Services zu erstellen, die mit dem SPA-Editor von AEM verwendet werden kann.
Zusätzliche benutzerdefinierte Selektoren können als Teil einer für das AEM SPA SDK entwickelten SPA definiert und verwendet werden. Diese Unterstützung erfordert jedoch, dass – entsprechend den Anforderungen des JSON Exporters – der model
-Selektor der erste Selektor und .json
die Erweiterung ist.
Wenn Sie den Editor einer Textkomponente verwenden möchten, die in der SPA erstellt wurde, ist eine zusätzliche Konfiguration erforderlich.
<div>
-Element und der verwendete Selektor ist data-rte-editelement
.editElementQuery
-Konfiguration für die entsprechende cq:InplaceEditingConfig
der AEM-Textkomponente fest, die auf diesen Selektor verweist, z. B. data-rte-editelement
. Dadurch weiß der Editor, welches HTML-Element den HTML-Text umschließt.Ein Beispiel dafür finden Sie im WKND-Journal-Beispielinhalt.
Weitere Informationen zur editElementQuery
-Eigenschaft und zur Konfiguration des Rich-Text-Editors finden Sie unter Konfigurieren des Rich-Text-Editors.
Das AEM SPA Editor SDK wurde mit AEM 6.4 Service Pack 2 eingeführt. Es wird von Adobe vollständig unterstützt und ständig verbessert und erweitert. Die folgenden AEM-Funktionen werden vom SPA-Editor noch nicht unterstützt: