App strukturieren structure-an-app

Ein AEM Mobile-Projekt umfasst eine Vielzahl von Inhaltstypen, darunter Seiten, JavaScript- und CSS-Client-Bibliotheken, wiederverwendbare AEM, Inhaltssynchronisierungskonfigurationen und Shell-Inhalte der PhoneGap-App. Stützen der neuen AEM Mobile-App auf 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 page-content

Die Seiten Ihrer Anwendung sollten sich alle unter /content/mobileapps befinden, damit sie von der AEM Mobile-Konsole erkannt werden.

Standardmäßig sollte die erste Seite Ihrer App eine Umleitung zu einem der untergeordneten Elemente sein, die als Standardsprache der App dient ("en"sowohl in Geometrixx- als auch in Starter Kit-Fällen). Die Gebietsschema-Seite der obersten Ebene übernimmt normalerweise die Foundation-Komponente "splash-page"(https://experienceleague.adobe.com/libs/mobileapps/components/splash-page?lang=de), die die erforderliche Initialisierung übernimmt, um die Installation von Aktualisierungen der Inhaltssynchronisierung außerhalb der Luft zu unterstützen (der ContentInit-Code finden Sie unter /etc/clientlibs/mobile/content-sync/js/contentInit.js).

Vorlagen und Komponenten templates-and-components

Die Vorlage und der Komponentencode für Ihre App sollten sich unter /apps/ befinden.<brand name="">/<app name="">. In Übereinstimmung mit der Konvention sollten Sie Ihre Vorlage und Ihren Komponentencode in /apps/ platzieren.<brand name="">/<app name="">. Dieses Muster sollte Entwicklern bekannt sein, die bereits mit Site in AEM gearbeitet haben. Dies wird in der Regel so ausgeführt, dass /apps/ standardmäßig in Veröffentlichungsinstanzen auf anonymen Zugriff beschränkt ist. Dementsprechend wird Ihr roher JSP-Code vor potenziellen Angreifern verborgen.

App-spezifische Vorlagen können so konfiguriert werden, dass sie nur mit dem allowedPaths Eigenschaftenknoten auf der Vorlage selbst und legen Sie den Wert auf "/content/mobileapps(https://experienceleague.adobe.com/"fest.*?lang=de)?' - oder etwas spezifischeres, wenn die Vorlage nur für eine einzelne App verwendet werden sollte. Die allowedParents und allowedChildren -Eigenschaften können auch genutzt werden, um sehr präzise steuern zu können, welche Vorlagen einem Autor je nach dem, wo die neue Seite erstellt wird, zur Verfügung stehen.

Wenn Sie eine neue App-Seitenkomponente von Grund auf neu erstellen, wird empfohlen, den sling:resourceSuperType -Eigenschaft auf "mobileapps/components/angular/ng-page"fest. Dadurch wird Ihre Seite sowohl für das Authoring als auch für das Rendering als Einzelseitenanwendung 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, überlagert ein Entwickler normalerweise (zumindest) "template.jsp"(überlagert von /libs/mobileapps/components/angular/ng-page/template.jsp).

Autorenfähige 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 javascript-and-css-clientlibs

In Bezug auf Client-Bibliotheken stehen dem Entwickler einige Optionen zur Verfügung, in denen er sie im Repository platzieren kann. Das folgende Muster wird zur Anleitung angeboten, ist jedoch keine schwierige Anforderung.

Wenn Ihr clientseitiger Code alleine stehen 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.<brand name="">/<lib name="">. Wenn die clientlib dagegen für eine einzelne App spezifisch ist, können Sie sie als untergeordnetes Element des Design-Knotens Ihrer App verschachteln. /etc/designs/phonegap/<brand name="">/<app name="">/clientlibs. Die Kategorie dieser clientlib sollte nicht von anderen Bibliotheken verwendet werden und sollte verwendet werden, um ggf. andere Bibliotheken einzubetten. Durch dieses Muster wird verhindert, dass Entwickler bei jedem Hinzufügen einer Client-Bibliothek zur App neue Konfigurationen für die Inhaltssynchronisierung hinzufügen müssen, anstatt einfach die Eigenschaft "embetts"der Design-Client-Bibliothek der App zu aktualisieren. Sehen Sie sich beispielsweise den Konfigurationsknoten Geometrixx clientlibs-all Content Sync unter /content/phonegap/geometrixx-outdoors/en/jcr:content/page-app/app-config/clientlibs-all an.

Wenn Ihr clientseitiger Code eng mit einer bestimmten Komponente verknüpft 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 Client-Bibliothek "Design"Ihrer App ein.

PhoneGap-Konfiguration phonegap-configuration

Jede AEM Mobile-App enthält einen Ordner, in dem die von PhoneGap verwendeten Konfigurationsdateien gespeichert werden. Befehlszeilenschnittstelle und PhoneGap-Build , um Ihren Webinhalt in eine ausführbare Anwendung umzuwandeln. Im Geometrixx-Beispiel befindet sich dieser Ordner (https://experienceleague.adobe.com/content/phonegap/geometrixx-outdoors/shell/jcr:content/page-app/app-content?lang=de) als Teil der Shell. eine Designentscheidung getroffen wurde, da sie nur Inhalte enthält, die nicht sofort aktualisiert werden können, z. B. Plugins, die Geräte-APIs behandeln und die Konfiguration der App selbst.

In diesem Verzeichnis finden Sie auch eine Reihe von Cordova-Hooks , die zum Installieren von Plug-ins, zum Platzieren von Ressourcendateien an ihren plattformspezifischen Speicherorten und anderen Aktionen verwendet werden kann, die im Rahmen des Builds ausgeführt werden sollen. Hinweis: als Alternative zum Herunterladen jedes Plug-ins als Teil des Builds können Sie dem Muster der Kitchen Sink-App folgen und Plug-in-Quellcode einschließen mit dem Rest Ihres App-Projekts.

Die nächsten Schritte the-next-steps

Sobald Sie sich mit der Struktur der App vertraut gemacht haben, finden Sie weitere Informationen unter Erstellen und Bearbeiten von Apps mithilfe der App Console.