Estructurar una aplicación structure-an-app

Un proyecto de AEM Mobile AEM incluye un conjunto diverso de tipos de contenido, como páginas, bibliotecas de cliente JavaScript y CSS, componentes de la aplicación reutilizables, configuraciones de sincronización de contenido y contenido de shell de la aplicación PhoneGap. Basar su nueva aplicación de AEM Mobile en el Starter Kit es una buena manera de incorporar todos los diferentes tipos de contenido en nuestra estructura recomendada para facilitar tanto la portabilidad como la capacidad de mantenimiento a largo plazo.

Contenido de página page-content

Todas las páginas de la aplicación deben encontrarse debajo de /content/mobileapps para que la consola de AEM Mobile las reconozca.

AEM Por convención, la primera página de la aplicación debe ser una redirección a uno de sus elementos secundarios, que sirve como idioma predeterminado de la aplicación ("en" en los casos de Geometrixx y Starter Kit). La página de configuración regional de nivel superior generalmente hereda del componente "splash-page" base (https://experienceleague.adobe.com/libs/mobileapps/components/splash-page?lang=es), que se encarga de la inicialización necesaria para admitir la instalación de actualizaciones de sincronización de contenido por aire (el código contentInit se encuentra en /etc/clientlibs/mobile/content-sync/js/contentInit.js).

Plantillas y componentes templates-and-components

La plantilla y el código de componente de la aplicación deben estar en /apps/<brand name="">/<app name="">. De conformidad con la convención, debe colocar la plantilla y el código del componente en /apps/<brand name="">/<app name="">. AEM Este patrón debería resultarles familiar a los desarrolladores que ya han trabajado con Site en el mundo de la. Suele ir seguido de /apps/, que está bloqueado para el acceso anónimo de forma predeterminada en instancias de publicación. Por lo tanto, su código JSP sin procesar se oculta de los atacantes potenciales.

Las plantillas específicas de la aplicación se pueden configurar para que solo se presenten mediante el allowedPaths nodo de propiedad en la propia plantilla y estableciendo su valor en '/content/mobileapps(https://experienceleague.adobe.com/.*?lang=es)?' : o incluso algo más específico si la plantilla solo debe utilizarse para una sola aplicación. El allowedParents y allowedChildren las propiedades también se pueden utilizar para un control preciso de las plantillas disponibles para un autor en función de dónde se esté creando la nueva página.

Al crear un componente de página de aplicación desde cero, se recomienda establecer su sling:resourceSuperType a "mobileapps/components/angular/ng-page". Esto configura la página para la creación y el procesamiento como una aplicación de una sola página y permite superponer los archivos .jsp que el componente pueda necesitar cambiar. Dado que ng-page no incluye ningún marco de interfaz de usuario, un desarrollador suele terminar superponiendo (al menos) "template.jsp" (superpuesto desde /libs/mobileapps/components/angular/ng-page/template.jsp).

Los componentes de página con autorización que desean utilizar AngularJS tienen un equivalente sling:resourceSuperType componente en /libs/mobileapps/components/angular/ng-component, que se puede superponer y personalizar del mismo modo.

Clientlibs de JavaScript y CSS javascript-and-css-clientlibs

En las bibliotecas de cliente, hay algunas opciones disponibles para el desarrollador de dónde colocarlas en el repositorio. El siguiente patrón se ofrece como guía, pero no es un requisito difícil.

Si el código de cliente puede funcionar por sí solo y no está relacionado con un componente específico de la aplicación (lo que significa que puede reutilizarse en otras aplicaciones), Adobe recomienda almacenarlo en /etc/clientlibs/<brand name="">/<lib name="">. Por otro lado, si la clientlib es específica de una sola aplicación, puede anidarla como un elemento secundario del nodo de diseño de la aplicación; /etc/designs/phonegap/<brand name="">/<app name="">/clientlibs. No utilice la categoría de esta clientlib con otras bibliotecas; en su lugar, incruste otras bibliotecas según sea necesario. Seguir este patrón evita que el desarrollador tenga que añadir nuevas configuraciones de sincronización de contenido cada vez que se añade una biblioteca de cliente a la aplicación, en lugar de actualizar simplemente la propiedad "embeds" de la clientlib de diseño de la aplicación. Por ejemplo, observe el nodo de configuración Geometrixx clientlibs-all Content Sync en /content/phonegap/geometrixx-outdoors/en/jcr:content/page-app/app-config/clientlibs-all.

Si el código del lado del cliente está perfectamente acoplado a un componente específico, colóquelo en una biblioteca de cliente anidada debajo de la ubicación del componente en /apps/ e incruste su categoría en la clientlib de "diseño" de la aplicación.

Configuración de PhoneGap phonegap-configuration

Cada aplicación de AEM Mobile contiene un directorio que aloja los archivos de configuración utilizados por PhoneGap interfaz de línea de comandos y PhoneGap Build en https://build.phonegap.com/ para convertir el contenido web en una aplicación ejecutable. En el ejemplo de Geometrixx, por ejemplo, este directorio (https://experienceleague.adobe.com/content/phonegap/geometrixx-outdoors/shell/jcr:content/page-app/app-content?lang=es) se encuentra como parte del shell; una decisión de diseño hecha porque contiene solo contenido que no se puede actualizar por el aire, como complementos que tratan con las API de dispositivos y la configuración de la propia aplicación.

En este directorio, también puede encontrar Ganchos Cordova que se puede utilizar para instalar complementos, colocar archivos de recursos en sus ubicaciones específicas de la plataforma y otras acciones que deben ejecutarse como parte de la compilación. Nota: Como alternativa a descargar cada complemento como parte de la compilación, puede seguir el patrón de la aplicación Fregadero de cocina e incluir el código fuente del complemento con el resto del proyecto de la aplicación.

Pasos siguientes the-next-steps

Después de conocer la estructura de la aplicación, consulte Creación y edición de aplicaciones mediante la consola de aplicación.