Show Menu
THEMEN×

App strukturieren

Adobe empfiehlt die Verwendung des SPA-Editors für Projekte, für die ein frameworkbasiertes clientseitiges Rendering für einzelne Seiten (z. B. React) erforderlich ist. Weitere Informationen
Ein AEM Mobile-Projekt umfasst verschiedene Inhaltstypen wie Seiten, JavaScript- und CSS-Client-Bibliotheken, wiederverwendbare AEM-Komponenten, Inhaltssynchronisierungskonfigurationen und PhoneGap-App-Shell-Inhalte. Die Stützung Ihrer neuen AEM Mobile-App auf dem Starter Kit ist eine gute Möglichkeit, alle verschiedenen Inhaltstypen in unsere empfohlene Struktur zu integrieren, um die Portabilität und Wartbarkeit langfristig zu erleichtern.

Seiteninhalt

Die Seiten Ihrer Anwendung sollten sich alle unter "/content/mobileapps"befinden, damit sie von der AEM Mobile-Konsole erkannt werden.
Gemäß der AEM-Konvention sollte die erste Seite Ihrer App eine Umleitung zu einem untergeordneten Element der App sein, das als Standardsprache der App dient ("en"in beiden Fällen "Geometrixx"und "Starter Kit"). Die Seite mit dem Gebietsschema auf der obersten Ebene wird normalerweise von der Komponente "splash-page"der Stiftung (/libs/mobileapps/components/splash-page) übernommen, die die erforderliche Initialisierung übernimmt, um die Installation von Updates mit der Inhaltssynchronisierung zu unterstützen (der contentInit-Code kann unter /etc/clientlibs/mobile/content-sync/js/contentInit.js gefunden werden).

Vorlagen und Komponenten

Der Vorlagen- und Komponentencode für Ihre App sollte sich unter /apps//<Name der App>/ befinden. In Übereinstimmung mit der Konvention sollten Sie Ihre Vorlage und Ihren Komponentencode in /apps/<Name der Marke>/<Name der App> platzieren. Dieses Muster sollte Entwicklern vertraut sein, die bereits mit Site in AEM gearbeitet haben. Es wird normalerweise gefolgt, da "/apps/"in Veröffentlichungsinstanzen standardmäßig auf anonymen Zugriff gesperrt ist. Dementsprechend wird Ihr roher JSP-Code von potenziellen Angreifern verschleiert.
App-spezifische Vorlagen können so konfiguriert werden, dass sie nur angezeigt werden, indem der allowedPaths Eigenschafts-Knoten in der Vorlage selbst verwendet und der zugehörige Wert auf "/content/mobileapps(/"festgelegt wird.&ast;)?" - oder etwas Spezifischeres, wenn die Vorlage nur für eine einzelne App verwendet werden sollte. Die allowedParents und allowedChildren Eigenschaften können auch für eine sehr feine, abgestufte Steuerung genutzt werden, welche Vorlagen einem Autor je nach dem Erstellungsort der neuen Seite zur Verfügung stehen.
Wenn Sie eine neue App-Seitenkomponente von Grund auf neu erstellen, wird empfohlen, ihre sling:resourceSuperType Eigenschaft auf "mobileapps/components/angular/ng-page"festzulegen. Dadurch wird Ihre Seite sowohl für das Authoring als auch für das Rendering als eine einseitige App eingerichtet und Sie können alle .jsp-Dateien überlagern, die Ihre Komponente möglicherweise ändern muss. Da ng-page überhaupt kein UI-Framework enthält, wird ein Entwickler in der Regel Überlagerungen (mindestens) "template.jsp"(überlagert von /libs/mobileapps/components/angular/ng-page/template.jsp) erstellen.
Autorbare Seitenkomponenten, die AngularJS nutzen möchten, verfügen über eine gleichwertige sling:resourceSuperType Komponente unter /libs/mobileapps/components/angular/ng-component, die auf dieselbe Weise überlagert und angepasst werden kann.

JavaScript- und CSS-Clientlibs

Wenn es um Client-Bibliotheken geht, stehen dem Entwickler einige Optionen zur Verfügung, wo sie im Repository abgelegt werden können. Das folgende Muster wird zur Orientierung angeboten, ist aber keine schwierige Voraussetzung.
Wenn der clientseitige Code selbstständig sein kann und nicht mit einer bestimmten Komponente Ihrer Anwendung in Verbindung steht - d. h., er kann in anderen Anwendungen wiederverwendet werden -, empfehlen wir, ihn in /etc/clientlibs// zu speichern. Wenn die clientlib-Datei hingegen für eine einzelne App spezifisch ist, können Sie sie als untergeordnetes Element des Design-Knotens Ihrer App verschachteln. /etc/designs/phonegap/<Name der Marke>//clientlibs. Diese clientlib-Kategorie sollte nicht von anderen libs verwendet werden und sollte verwendet werden, um andere libs nach Bedarf einzubetten. Wenn Sie diesen Mustern folgen, müssen Entwickler keine neuen Content Sync-Konfigurationen jedes Mal hinzufügen, wenn eine Client-Bibliothek der App hinzugefügt wird, und stattdessen einfach die Eigenschaft "embed"des Entwurfs-clientlib der App aktualisieren. Sehen Sie sich beispielsweise den Knoten Geometrixx clientlibs-all Content Sync unter /content/phonegap/geometrixx-outdoors/en/jcr:content/pge-app/app-config/clientlibs-all an.
Wenn Ihr clientseitiger Code eng mit einer bestimmten Komponente verbunden ist, platzieren Sie diesen Code in einer Client-Bibliothek, die unter dem Speicherort der Komponente in "/apps/"verschachtelt ist, und betten Sie ihn in die "design"-clientlib Ihrer App ein.

PhoneGap Configuration

Jede AEM Mobile-App enthält einen Ordner, in dem die Konfigurationsdateien gespeichert sind, die von der PhoneGap- Befehlszeilenschnittstelle und dem PhoneGap-Build verwendet werden, um Ihre Webinhalte in eine ausführbare Anwendung zu verwandeln. Im Geometrixx-Beispiel befindet sich dieser Ordner (/content/phonegap/geometrixx-outdoors/shell/jcr:content/page-app/app-content) beispielsweise als Teil der Shell; eine Designentscheidung getroffen wurde, weil sie nur Inhalte enthält, die nicht im Freien aktualisiert werden können, z. B. Plugins, die Geräte-APIs und die Konfiguration der App selbst betreffen.
In diesem Verzeichnis finden Sie auch eine Reihe von Cordova-Haken , die zum Installieren von Plugins, Platzieren von Ressourcendateien an ihren plattformspezifischen Speicherorten und andere Aktionen verwendet werden können, die als Teil des Builds ausgeführt werden sollten. Hinweis: als Alternative zum Herunterladen jedes Plugins als Teil des Builds können Sie dem Muster der Kitchen Sink-App folgen und Plugin-Quellcode mit dem Rest Ihres App-Projekts einschließen.

Die nächsten Schritte

Sobald Sie mehr über die Struktur der App erfahren haben, lesen Sie Erstellen und Bearbeiten der Apps mit der App-Konsole .