Estructurar una aplicación

NOTA

Adobe recomienda el uso del Editor de SPA para proyectos que requieren una representación de cliente basada en el marco de aplicaciones de una sola página (por ejemplo, React). Más información.

Un proyecto de AEM Mobile incluye un conjunto diverso de tipos de contenido, como páginas, bibliotecas de cliente JavaScript y CSS, componentes de AEM reutilizables, configuraciones de sincronización de contenido y contenido del 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 a nuestra estructura recomendada para facilitar la portabilidad y el mantenimiento a largo plazo.

Contenido de página

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

chlimage_1-52

Por AEM 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 de Starter Kit). La página de configuración regional de nivel superior suele heredar del componente básico 'splash-page' (/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 sobre el contenido (el código contentInit se encuentra en /etc/clientlibs/mobile/content-sync/js/contentInit.js).

Plantillas y componentes

La plantilla y el código de componente de la aplicación deben encontrarse en /apps/<nombre de marca>/<nombre de la aplicación>. De conformidad con la convención, debe colocar la plantilla y el código de componente en /apps/<nombre de marca>/<nombre de la aplicación>. Este patrón debe ser familiar para los programadores que ya han trabajado con el sitio en AEM. Generalmente se sigue porque /apps/ está bloqueado de forma predeterminada en el acceso anónimo en las instancias de publicación. En consecuencia, el código JSP sin procesar está oculto para los posibles atacantes.

Las plantillas específicas de la aplicación se pueden configurar para que solo se presenten mediante el nodo de propiedad allowedPaths de la propia plantilla y estableciendo su valor en '/content/mobileapps(/).&ast;)?' - o incluso algo más específico si la plantilla solo debería utilizarse para una sola aplicación. Las propiedades allowedParents y allowedChildren también se pueden aprovechar para obtener un control muy preciso de qué plantillas estará disponible para un autor en función del lugar donde se esté creando la nueva página.

Al crear un nuevo componente de página de aplicación desde cero, se recomienda establecer su propiedad sling:resourceSuperType en 'mobileapps/components/angular/ng-page'. Esto configurará la página para la creación y el procesamiento como una aplicación de una sola página y le permitirá superponer cualquier archivo .jsp que su componente deba cambiar. Dado que ng-page no incluye ningún marco de interfaz de usuario, un desarrollador normalmente terminará superponiendo (al menos) 'template.jsp' (superpuesto desde /libs/mobileapps/components/angular/ng-page/template.jsp).

Los componentes de página autorizados, que desean aprovechar AngularJS, tienen un componente equivalente sling:resourceSuperType ubicado en /libs/mobileapps/components/angular/ng-component que puede superponerse y personalizarse del mismo modo.

Clientlibs de JavaScript y CSS

Cuando se trata de bibliotecas de cliente, hay algunas opciones disponibles para el desarrollador de dónde colocarlas en el repositorio. Se ofrece la siguiente pauta de orientación, pero no es un requisito difícil.

Si el código de cliente puede mantenerse por su cuenta y no se relaciona con un componente específico de la aplicación, lo que significa que puede reutilizarse en otras aplicaciones, se recomienda almacenarlo en /etc/clientlibs/<nombre de marca>/<nombre de biblioteca>. 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/<nombre de marca>/<nombre de aplicación>/clientlibs. La categoría de clientlib no debe ser utilizada por otras bibliotecas y debe utilizarse para incrustar otras bibliotecas según sea necesario. Si sigue estos patrones, el desarrollador no tendrá que agregar nuevas configuraciones de sincronización de contenido cada vez que se agregue una biblioteca de cliente a la aplicación, sino que simplemente actualizará la propiedad 'embeds' de la clientlib de diseño de la aplicación. Por ejemplo, observe el nodo de configuración de Geometrixx clientlibs-all Content Sync en /content/phonegap/geometrixx-outdoors/en/jcr:content/pge-app/app-config/clientlibs-all.

Si el código de cliente está estrechamente vinculado 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 'design' de la aplicación.

Configuración de PhoneGap

Cada aplicación de AEM Mobile contiene un directorio que aloja los archivos de configuración utilizados por la interfaz de línea de comandos PhoneGap y PhoneGap build para convertir el contenido web en una aplicación ejecutable. En el ejemplo de Geometrixx, por ejemplo, este directorio (/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 tomada por el hecho de que solo contiene contenido que no se puede actualizar de forma instantánea, como complementos que se ocupan de las API de dispositivo y la configuración de la propia aplicación.

En este directorio también encontrará un número de enlaces de Cordova que pueden utilizarse para instalar complementos, colocar archivos de recursos en 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 Kitchen Sink e incluir código fuente del complemento con el resto del proyecto de la aplicación.

Pasos siguientes

Una vez que conozca la Estructura de la aplicación, consulte Creación y edición de aplicaciones mediante la consola de la aplicación.

En esta página