Show Menu
ARGOMENTI×

Struttura di un'app

Adobe consiglia di utilizzare SPA Editor per i progetti che richiedono il rendering lato client basato sul framework dell'applicazione a pagina singola (ad es. React). Per saperne di più .
Un progetto AEM Mobile include una serie di tipi di contenuto diversi, tra cui pagine, librerie client JavaScript e CSS, componenti AEM riutilizzabili, configurazioni di sincronizzazione dei contenuti e contenuto della shell dell'app PhoneGap. Basare la nuova app AEM Mobile sul Starter Kit è un buon modo per inserire tutti i diversi tipi di contenuto nella struttura consigliata, al fine di semplificare la portabilità e la manutenzione nel lungo termine.

Contenuto pagina

Per essere riconosciute dalla console AEM Mobile, le pagine dell'applicazione devono essere riportate sotto /content/mobileapps.
Per convenzione AEM, la prima pagina dell’app deve essere un reindirizzamento a uno degli elementi figlio che funge da lingua predefinita dell’app (in entrambi i casi Geometrixx e Starter Kit). La pagina delle impostazioni internazionali di livello superiore in genere eredita dal componente 'splash-page' di base (/libs/mobileapps/components/splash-page) che si occupa dell'inizializzazione necessaria per supportare l'installazione degli aggiornamenti di sincronizzazione dei contenuti in modalità "over-the-air" (il codice contentInit si trova all'indirizzo /etc/clientlibs/mobile/content-sync/js/contentInit.js).

Modelli e componenti

Il modello e il codice del componente per l'app devono trovarsi in /apps/<brand name>/<app name>. In conformità con la convenzione, devi inserire il codice del modello e del componente in /apps/<brand name>/<app name>. Questo pattern deve essere familiare agli sviluppatori che hanno già lavorato con Site in AEM. In genere viene seguita quando /apps/ viene bloccato l'accesso anonimo per impostazione predefinita sulle istanze di pubblicazione. Di conseguenza, il codice JSP non elaborato è tenuto in considerazione dai potenziali attacchi.
I modelli specifici per le app possono essere configurati solo per essere presentati utilizzando il nodo allowedPaths delle proprietà sul modello stesso e impostando il relativo valore su '/content/mobileapps(/.&ast;)?" - o qualcosa di più specifico se il modello deve essere utilizzabile solo per una singola app. Le proprietà allowedParents e allowedChildren possono essere sfruttate anche per un controllo granulato molto accurato dei modelli che saranno disponibili a un autore in base alla posizione in cui viene creata la nuova pagina.
Quando create un nuovo componente di pagina di app da zero, si consiglia di impostare la relativa sling:resourceSuperType proprietà su 'mobileapps/components/angular/ng-page'. Questa opzione consente di impostare la pagina sia per l’authoring che per il rendering come app a pagina singola e di sovrapporre eventuali file .jsp che il componente potrebbe dover modificare. Poiché ng-page non include alcun framework di interfaccia utente, uno sviluppatore generalmente finisce per sovrapporre (almeno) 'template.jsp' (con sovrapposizione da /libs/mobileapps/components/angular/ng-page/template.jsp).
I componenti di pagina modificabili, che desiderano sfruttare AngularJS, dispongono di un sling:resourceSuperType componente equivalente ubicato in /libs/mobileapps/components/angular/ng-component che può essere sovrapposto e personalizzato allo stesso modo.

ClientScript e CSS

Per quanto riguarda le librerie client, lo sviluppatore può scegliere dove inserirle nella directory archivio. Il seguente modello è offerto per la guida, ma non è un requisito difficile.
Se il codice clientside può restare indipendente e non si riferisce a un componente specifico dell'applicazione, ovvero può essere riutilizzato in altre applicazioni, è consigliabile memorizzarlo in /etc/clientlibs/<brand name>/<lib name>. D'altro canto, se clientlib è specifica per una singola app, puoi nidificarla come figlio del nodo di progettazione dell'app; /etc/designs/phonegap/<brand name>/<app name>/clientlibs. La categoria clientlib non deve essere utilizzata da altre libs e dovrebbe essere utilizzata per incorporare altre libs, se necessario. In questo modo lo sviluppatore non deve più aggiungere nuove configurazioni di Content Sync ogni volta che una libreria client viene aggiunta all'app, ma semplicemente aggiornare la proprietà 'embeds' della clientlib di progettazione dell'app. Ad esempio, date un'occhiata al nodo di configurazione Geometrixx clientlibs-all Content Sync in /content/phonegap/geometrixx-outdoors/en/jcr:content/page-app/app-config/clientlibs-all.
Se il codice lato client è strettamente associato a un componente specifico, inseritelo in una libreria client nidificata sotto la posizione del componente in /apps/, e incorporate la sua categoria nella clientlib 'design' dell'app.

PhoneGap Configuration

Ogni app AEM Mobile contiene una directory che ospita i file di configurazione utilizzati dall'interfaccia della riga di comando PhoneGap e dalla build di PhoneGap per trasformare il contenuto Web in un'applicazione eseguibile. Nell’esempio di Geometrixx, ad esempio, questa directory (/content/phonegap/geometrixx-outdoors/shell/jcr:content/page-app/app-content) si trova come parte della Shell; una decisione di progettazione presa a causa del fatto che contiene solo contenuto che non può essere aggiornato in modalità "over-the-air", come i plug-in che si occupano di API dispositivo e configurazione dell'app stessa.
In questa directory troverete anche una serie di ganci guide_appdev_hooks_index.md.html#Hooks%20Guide Cordova che possono essere utilizzati per installare i plug-in, inserire i file di risorse nelle loro posizioni specifiche della piattaforma e altre azioni che dovrebbero essere eseguite come parte della build. Nota: come alternativa al download di ogni plugin come parte della build, è possibile seguire il modello dell'app Kitchen Sink e includere codice sorgente plugin con il resto del progetto dell'app.

Passaggi successivi

Dopo aver appreso la struttura dell'app, consulta Creazione e modifica delle app tramite la console app.