Een app structureren structure-an-app

Een AEM Mobile-project omvat een aantal verschillende inhoudssoorten, waaronder pagina's, JavaScript- en CSS-clientbibliotheken, herbruikbare AEM componenten, configuraties voor inhoudssynchronisatie en inhoud van de shell van de PhoneGap-app. Het baseren van uw nieuwe AEM Mobile app op de Uitrusting van de Aanzetis een goede manier om alle verschillende types van inhoud in onze geadviseerde structuur te krijgen om zowel portabiliteit als onderhoudbaarheid op de lange termijn te verlichten.

Pagina-inhoud page-content

De pagina's van uw toepassing moeten zich 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 die als standaardtaal van de app fungeren (en in zowel de gevallen Geometrixx als Starter Kit). De landinstellingspagina op hoofdniveau overerft doorgaans de 'splash-page'-component (https://experienceleague.adobe.com/libs/mobileapps/components/splash-page?lang=nl) die zorgt voor de initialisatie die nodig is voor de installatie van updates voor de synchronisatie van over-the-air inhoud (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 moeten in /apps/<merknaam>/<toepassingsnaam> staan. Conform de conventies moet u de sjabloon en de componentcode in /apps/<merknaam>/<toepassingsnaam> plaatsen. 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 dus verborgen achter potentiële aanvallers.

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

Als u een geheel nieuwe app-paginacomponent maakt, wordt aangeraden de eigenschap sling:resourceSuperType ervan in te stellen op 'mobileapps/components/angular/ng-page'. Hierdoor wordt uw pagina ingesteld voor zowel ontwerp als rendering 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, eindigt een ontwikkelaar gewoonlijk met het bedekken van (ten minste) 'template.jsp' (bedekt door /libs/mobileapps/components/angular/ng-page/template.jsp).

Authorable page components, die AngularJS willen gebruiken, hebben een equivalent sling:resourceSuperType -component op /libs/mobileapps/components/angular/ng-component dat op dezelfde manier kan worden bedekt en aangepast.

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

In clientbibliotheken zijn er een paar opties beschikbaar voor de ontwikkelaar van waar deze in de opslagplaats moeten worden geplaatst. 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 kan in andere toepassingen worden hergebruikt), raadt de Adobe aan de code op te slaan in /etc/clientlibs/<merknaam>/<lib name>. Als de clientlib echter specifiek is voor één toepassing, kunt u deze nesten als een onderliggend element van het ontwerpknooppunt van uw app; /etc/designs/phonegap/<merknaam>/<toepassingsnaam>/clientlibs. Gebruik de categorie van deze client niet met andere bibliotheken, maar sluit indien nodig andere bibliotheken in. Als u dit patroon 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. Kijk bijvoorbeeld naar 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 app van AEM Mobile bevat een folder die gastheren de configuratiedossiers die door de interface van de bevellijn PhoneGap 🔗 worden gebruikt en PhoneGap bouwt bij https://build.phonegap.com/ om uw Webinhoud in een runnable toepassing te veranderen. 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 ontwerpbeslissing omdat deze 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 folder, vindt u ook sommige haken Cordovadie kunnen worden gebruikt om stoppen te installeren, middeldossiers in hun platform-specifieke plaatsen, en andere acties te plaatsen die als deel van de bouwstijl zouden 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 voor insteekmodules opnemen met de rest van uw app-project.

De volgende stappen the-next-steps

Nadat u over de Structuur van app leert, zie Creërend en het Uitgeven van Apps gebruikend de Console van de App.