SPA-Seitenkomponente spa-page-component

Die Seitenkomponente für eine SPA stellt die HTML-Elemente ihrer untergeordneten Komponenten nicht über die JSP- oder HTL-Datei und Ressourcenobjekte bereit. Dieser Vorgang wird an das SPA-Framework delegiert. Die Darstellung der untergeordneten Komponenten wird als JSON-Datenstruktur (d. h. das Modell) abgerufen. Die SPA-Komponenten werden dann gemäß dem angegebenen JSON-Modell zur Seite hinzugefügt. Somit unterscheidet sich die anfängliche Textzusammensetzung der Seitenkomponente von den im Vorab gerenderten HTML-Entsprechungen.

Seitenmodellverwaltung page-model-management

Die Auflösung und Verwaltung des Seitenmodells wird an ein bereitgestelltes PageModelManager-Modul delegiert. Die SPA muss mit dem PageModelManager-Modul interagieren, wenn es initialisiert wird, um das anfängliche Seitenmodell abzurufen und sich für Modellaktualisierungen zu registrieren – die meistens auftreten, wenn der Autor die Seite über den Seiteneditor bearbeitet. Der PageModelManager ist für das SPA-Projekt als NPM-Paket zugänglich. Als Dolmetscher zwischen AEM und der SPA soll der PageModelManager die SPA begleiten.

Damit die Seite erstellt werden kann, muss eine Client-Bibliothek mit dem Namen cq.authoring.pagemodel.messaging hinzugefügt werden, um einen Kommunikationskanal zwischen der SPA und dem Seiteneditor bereitzustellen. Wenn die SPA-Seitenkomponente von der page wcm/core-Komponente erbt, gibt es folgende Optionen, um die Kategorie der cq.authoring.pagemodel.messaging-Client-Bibliothek verfügbar zu machen:

Vergessen Sie nicht, die Einbeziehung der cq.authoring.pagemodel.messaging-Kategorie auf den Kontext des Seiteneditors zu beschränken.

Kommunikationsdatentyp communication-data-type

Der Kommunikationsdatentyp ist ein mit dem data-cq-datatype-Attribut festgelegtes HTML-Element innerhalb der AEM-Seitenkomponente. Wenn der Kommunikationsdatentyp auf JSON festgelegt ist, rufen die GET-Anfragen die Endpunkte des Sling-Modells einer Komponente auf. Nach einer Aktualisierung im Seiteneditor wird die JSON-Repräsentation der aktualisierten Komponente an die PageModel-Bibliothek gesendet. Die PageModel-Bibliothek informiert dann die SPA über Aktualisierungen.

SPA-Seitenkomponente –body.html

<div id="page"></div>

Neben dem bewährten Verfahren, die DOM-Generierung nicht zu verzögern, setzt das SPA-Framework voraus, dass die Skripte am Ende des Hauptteils hinzugefügt werden.

SPA-Seitenkomponente –customfooterlibs.html

<sly data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}"></sly>
<sly data-sly-test="${wcmmode.edit || wcmmode.preview}"
     data-sly-call="${clientLib.js @ categories='cq.authoring.pagemodel.messaging'}"></sly>
<sly data-sly-call="${clientLib.js @ categories='we-retail-journal-react'}"></sly>

Die Meta-Ressourceneigenschaften, die den SPA-Inhalt beschreiben:

SPA-Seitenkomponente –customheaderlibs.html

<meta property="cq:datatype" data-sly-test="${wcmmode.edit || wcmmode.preview}" content="JSON"/>
<meta property="cq:wcmmode" data-sly-test="${wcmmode.edit}" content="edit"/>
<meta property="cq:wcmmode" data-sly-test="${wcmmode.preview}" content="preview"/>
<meta property="cq:pagemodel_root_url" data-sly-use.page="com.adobe.cq.sample.spa.journal.models.AppPage" content="${page.rootUrl}"/>
<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
    <sly data-sly-call="${clientlib.css @ categories='we-retail-journal-react'}"/>
</sly>

Meta-Eigenschaften meta-properties

Synchronisation von Seiteneditor-Überlagerungen page-editor-overlay-synchronization

Die Synchronisation der Überlagerungen wird durch denselben Änderungsbeobachter gewährleistet, der von der Kategorie cq.authoring.page bereitgestellt wird.

Sling-Modell – JSON-exportierte Strukturkonfiguration sling-model-json-exported-structure-configuration

Wenn Routing-Funktionen aktiviert sind, wird angenommen, dass der JSON-Export der SPA aufgrund des JSON-Exports der AEM-Navigationskomponente die verschiedenen Routen der Anwendung enthält. Die JSON-Ausgabe der AEM-Navigationskomponente kann in der SPA-Stammseiten-Inhaltsrichtlinie mit den folgenden beiden Eigenschaften konfiguriert werden: