Een app structureren structure-an-app

Een AEM Mobile-project omvat een aantal verschillende inhoudstypen, zoals pagina's, JavaScript- en CSS-clientbibliotheken, herbruikbare AEM componenten, configuraties van Content Sync en inhoud van de shell van de PhoneGap-app. Baseer uw nieuwe AEM Mobile-app op de Starter Kit is een goede manier om alle verschillende soorten inhoud in onze aanbevolen structuur te krijgen om zowel draagbaarheid als onderhoudsgemak op lange termijn te verlichten.

Pagina-inhoud page-content

De pagina's van uw toepassing moeten zich allemaal onder /content/mobileapps bevinden, anders worden ze niet herkend door de AEM Mobile-console.

Volgens AEM conventie moet de eerste pagina van uw app een omleiding zijn naar een van de onderliggende items van de app die als standaardtaal voor de app fungeert (en in zowel de gevallen Geometrixx en Starter Kit). De landinstellingspagina op het hoogste niveau neemt doorgaans de elementen over van de stichting 'splash-page' (https://experienceleague.adobe.com/libs/mobileapps/components/splash-page?lang=nl) die zorg dragen voor de initialisatie die nodig is om de installatie van updates voor de synchronisatie van over-the-air inhoud te ondersteunen (contentInit-code vindt u op /etc/clientlibs/mobile/content-sync/js/contentInit.js).

Sjablonen en componenten templates-and-components

De sjabloon- en componentcode voor uw app bevinden zich in /apps/<brand name="">/<app name="">. Conform de conventie moet u de sjabloon en de componentcode in /apps/ plaatsen<brand name="">/<app name="">. Dit patroon is bekend bij ontwikkelaars die al in AEM met Site hebben gewerkt. Dit wordt meestal gevolgd wanneer /apps/ standaard is vergrendeld op anonieme toegang in publicatieinstanties. Uw onbewerkte JSP-code is dan ook verborgen achter potentiële aanvallers.

Toepassingsspecifieke sjablonen kunnen alleen worden geconfigureerd om te worden weergegeven met de allowedPaths eigenschapknooppunt op de sjabloon zelf en de waarde ervan instellen op '/content/mobileapps(https://experienceleague.adobe.com/.*?lang=nl)?' - of zelfs iets specifiekers als de sjabloon slechts voor één app bruikbaar mag zijn. De allowedParents en allowedChildren eigenschappen kunnen ook worden gebruikt voor een zeer fijnkorrelig besturingselement waarvan sjablonen beschikbaar zijn voor een auteur op basis van de locatie waar de nieuwe pagina wordt gemaakt.

Als u een geheel nieuwe app-paginacomponent maakt, is het raadzaam deze in te stellen op sling:resourceSuperType eigenschap naar 'mobileapps/components/angular/ng-page'. Hierdoor wordt de pagina ingesteld voor zowel ontwerpen als weergeven als een app van één pagina, en kunt u .jsp-bestanden bedekken die mogelijk door de component moeten worden gewijzigd. Aangezien ng-page helemaal geen UI-framework bevat, zal een ontwikkelaar gewoonlijk 'template.jsp' (bedekt door /libs/mobileapps/components/angular/ng-page/template.jsp) bedekken.

Componenten van authentieke pagina's die gebruik willen maken van AngularJS, hebben een equivalent sling:resourceSuperType component die zich bevindt op /libs/mobileapps/components/angular/ng-component en die op dezelfde manier kan worden bedekt en aangepast.

JavaScript- en CSS-clips javascript-and-css-clientlibs

Wanneer het over cliëntbibliotheken komt, zijn er een paar opties beschikbaar aan de ontwikkelaar van waar te om hen in de bewaarplaats te plaatsen. Het volgende patroon wordt ter begeleiding aangeboden, maar is geen harde eis.

Als uw clientside-code zelfstandig kan staan en geen betrekking heeft op een specifieke component van uw toepassing (dit betekent dat de code opnieuw kan worden gebruikt in andere toepassingen), raden we u aan de code op te slaan in /etc/clientlibs/<brand name="">/<lib name="">. Als de clientlib echter specifiek is voor één toepassing, kunt u deze nesten als een onderliggend knooppunt van het ontwerpknooppunt van uw app. /etc/designs/phonegap/<brand name="">/<app name="">/clientlibs. De categorie van deze clientlib mag niet door andere bibliotheken worden gebruikt en moet zo nodig worden gebruikt om andere bibliotheken in te sluiten. Als u deze patronen volgt, hoeft de ontwikkelaar niet telkens nieuwe configuraties voor Content Sync toe te voegen wanneer een clientbibliotheek aan de app wordt toegevoegd, maar werkt u gewoon de eigenschap 'embeds' van de ontwerpclient van de app bij. Neem bijvoorbeeld een blik op het configuratieknooppunt voor Geometrixx clientlibs-all Content Sync op /content/phonegap/geometrixx-outdoor/en/jcr:content/pge-app/app-config/clientlibs-all.

Als uw clientcode nauw aan een specifieke component is gekoppeld, plaatst u die code in een clientbibliotheek die onder de locatie van de component is genest in /apps/ en sluit u de categorie in de client lib 'design' van uw app in.

PhoneGap-configuratie phonegap-configuration

Elke AEM Mobile-app bevat een map die fungeert als host voor de configuratiebestanden die worden gebruikt door PhoneGap opdrachtregelinterface en PhoneGap-build om van uw webinhoud een uitvoerbare toepassing te maken. In het voorbeeld Geometrixx bevindt deze map (content/content/phonegap/geometrixx-outdoor/shell/jcr:content/page-app/app-content) zich als onderdeel van de Shell; een ontwerpbesluit dat is genomen omdat het alleen inhoud bevat die niet via de lucht kan worden bijgewerkt, zoals plug-ins die betrekking hebben op apparaat-API's en de configuratie van de app zelf.

In deze map vindt u ook een aantal Cordova hooks die kunnen worden gebruikt om insteekmodules te installeren, bronbestanden op hun platformspecifieke locaties te plaatsen en andere acties die als onderdeel van de build moeten worden uitgevoerd. Opmerking: als alternatief voor het downloaden van elke insteekmodule als onderdeel van de build, kunt u het patroon van de Kitchen Sink-app volgen en broncode van insteekmodule opnemen met de rest van uw app-project.

De volgende stappen the-next-steps

Als u meer hebt geleerd over de structuur van de app, raadpleegt u Apps maken en bewerken met App Console.