Struttura di un'app

NOTA

Adobe consiglia di utilizzare l'editor SPA 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 un insieme 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 a lungo termine.

Contenuto pagina

Le pagine dell'applicazione devono essere tutte posizionate sotto /content/mobileapps per essere riconosciute dalla console AEM Mobile .

chlimage_1-52

Per AEM convenzione, la prima pagina dell'app deve essere un reindirizzamento a uno dei suoi 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?lang=it) 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 di proprietà allowedPaths nel modello stesso e impostando il relativo valore su '/content/mobileapps(/.&ast;?lang=it)?" - 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 preciso su quali modelli saranno disponibili per un autore in base alla posizione in cui viene creata la nuova pagina.

Quando create un nuovo componente di pagina dell'app da zero, si consiglia di impostare la proprietà sling:resourceSuperType 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, hanno un componente sling:resourceSuperType equivalente ubicato in /libs/mobileapps/components/angular/ng-component che può essere sovrapposto e personalizzato allo stesso modo.

Clientlibs JavaScript 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 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.

Configurazione PhoneGap

Ogni app AEM Mobile contiene una directory che ospita i file di configurazione utilizzati dall'interfaccia della riga di comando PhoneGap a1/> e PhoneGap build per trasformare il contenuto Web in un'applicazione eseguibile. Nell’Geometrixx di esempio, questa directory (/content/phonegap/geometrixx-outdoors/shell/jcr:content/page-app/app-content?lang=it) 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 delle API del dispositivo e della configurazione dell'app stessa.

In questa directory troverete anche una serie di ganci 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 ciascun plug-in come parte della build, è possibile seguire il modello dell'app Kitchen Sink e includere codice sorgente plug-in con il resto del progetto dell'app.

Passaggi successivi

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

In questa pagina