Strukturera ett program structure-an-app

Ett AEM Mobile-projekt innehåller en mängd olika innehållstyper, bland annat sidor, JavaScript- och CSS-klientbibliotek, återanvändbara AEM, Content Sync-konfigurationer och PhoneGap-appskalinnehåll. Bygga din nya AEM Mobile-app på Startpaket är ett bra sätt att införliva alla olika typer av innehåll i vår rekommenderade struktur för att underlätta både bärbarhet och underhåll på lång sikt.

Sidinnehåll page-content

Sidorna för ditt program ska alla finnas under /content/mobileapps för att de ska identifieras av AEM Mobile-konsolen.

Som AEM bör den första sidan i appen vara en omdirigering till ett av dess underordnade objekt, som fungerar som standardspråk för appen (en i både Geometrixx- och Starter Kit-fall). Språksidan på den översta nivån ärver vanligtvis från startsidans grundkomponent (https://experienceleague.adobe.com/libs/mobileapps/components/splash-page?lang=sv), som tar hand om den initiering som krävs för installation av innehållssynkroniseringsuppdateringar (contentInit-koden finns på /etc/clientlibs/mobile/content-sync/js/contentInit.js).

Mallar och komponenter templates-and-components

Mallen och komponentkoden för ditt program ska vara i /apps/<brand name="">/<app name="">. I enlighet med konventionerna bör du placera mallen och komponentkoden i /apps/<brand name="">/<app name="">. Det här mönstret bör vara bekant för utvecklare som redan har arbetat med Site in AEM. Den följs vanligtvis när /apps/ är låst för anonym åtkomst som standard för publiceringsinstanser. Din råa JSP-kod är dold för potentiella angripare.

Appspecifika mallar kan konfigureras så att de bara presenteras med allowedPaths egenskapsnoden i själva mallen och ange dess värde till /content/mobileapps(https://experienceleague.adobe.com/.*?lang=sv)?' - eller något mer specifikt om mallen bara ska kunna användas för ett enstaka program. The allowedParents och allowedChildren -egenskaper kan också användas för att finjustera vilka mallar som är tillgängliga för en författare baserat på var den nya sidan skapas.

När du skapar en programsideskomponent från grunden bör du ange dess sling:resourceSuperType egenskapen till 'mobileapps/components/angular/ng-page'. Då konfigureras sidan för både redigering och återgivning som ett enkelsidigt program och du kan täcka över alla .jsp-filer som komponenten kan behöva ändra. Eftersom ng-page inte innehåller något gränssnittsramverk alls, blir utvecklaren vanligtvis överlagrad (åtminstone) template.jsp (overlay from /libs/mobileapps/components/angular/ng-page/template.jsp).

Redigerbara sidkomponenter som vill använda AngularJS har en motsvarighet sling:resourceSuperType på /libs/mobileapps/components/angular/ng-component som kan överlappas och anpassas på samma sätt.

JavaScript och CSS Clientlibs javascript-and-css-clientlibs

I klientbibliotek finns det ett fåtal alternativ som utvecklaren kan välja var de ska placeras i databasen. Följande mönster kan användas som vägledning, men är inget svårt krav.

Om din klientsidkod kan stå för sig själv och inte gäller en viss komponent i programmet, vilket innebär att den kan återanvändas i andra program, rekommenderar Adobe att du lagrar den i /etc/clientlibs/<brand name="">/<lib name="">. Om däremot clientlib är specifikt för ett fristående program kan du kapsla det som ett underordnat objekt till programdesignnoden, /etc/designs/phonegap/<brand name="">/<app name="">/clientlibs. Använd inte denna clientlibs kategori med andra libs, utan bädda in andra libs efter behov. Med det här mönstret slipper utvecklaren lägga till nya konfigurationer för innehållssynkronisering varje gång ett klientbibliotek läggs till i appen. I stället behöver utvecklaren bara uppdatera egenskapen"embed" för appens designklipp. Titta till exempel på konfigurationsnoden Geometrixx clientlibs-all Content Sync på /content/phonegap/geometrixx-outdoor/en/jcr:content/page-app/app-config/clientlibs-all.

Om klientsidans kod är nära kopplad till en viss komponent placerar du den koden i ett klientbibliotek som är kapslat under komponentens plats i /apps/ och bäddar in dess kategori i appens 'design'-klientlib.

PhoneGap-konfiguration phonegap-configuration

Varje AEM Mobile-program innehåller en katalog som är värd för de konfigurationsfiler som används av PhoneGap kommandoradsgränssnitt och PhoneGap Build på https://build.phonegap.com/ för att omvandla webbinnehåll till ett körbart program. I exemplet med Geometrixx är den här katalogen (https://experienceleague.adobe.com/content/phonegap/geometrixx-outdoor/shell/jcr:content/page-app/app-content?lang=sv) placerad som en del av Shell. Ett designbeslut fattas eftersom den bara innehåller innehåll som inte kan uppdateras över hela flödet, till exempel plugin-program som hanterar enhets-API:er och konfigurationen av själva appen.

I den här katalogen finns även Cordova hooks som kan användas för att installera plugin-program, placera resursfiler på deras plattformsspecifika platser och andra åtgärder som ska utföras som en del av bygget. Obs! Som ett alternativ till att hämta varje plugin-program som en del av bygget kan du följa mönstret för Kitchen Sink-appen och inkludera plugin-källkod med resten av programprojektet.

Nästa steg the-next-steps

När du har läst om programmets struktur kan du gå till Skapa och redigera appar med App Console.