subscripción
MadeInFlex
Flex Hero Mobile (I): MobileApplication
Diciembre 28th, 2010 - [Enlace local]
Igual que hicimos comentando las novedades de Hero para desktop, vamos a postear una serie para explicar, a grosso modo, lo que nos ofrecerá Hero para Mobile. En este primer post veremos una visión global centrada en la clase MobileApplication.
MobileApplication
Esta clase permite crear aplicaciones enfocadas a dispositivos móviles. Una aplicación mobile típica se divide en diferentes vistas que se van mostrando u ocultando según el flujo de la aplicación. Este modelo de aplicación se conoce como view-based. Una aplicación mobile saca partido del componente ViewNavigator, que ya veremos, para gestionar estas vistas.
Por otro lado, una aplicación mobile debe estar integrada con los eventos que nos puede lanzar el dispositivo, como la gestión de teclado o el control de la orientación.
A continuación vemos el típico flujo de una aplicación mobile (click para ampliar):
La metodología usada para desarrollar aplicaciones mobile es diferente a la que usamos para aplicaciones desktop. Una aplicación mobile se suele usar durante poco tiempo y a menudo interrumpida por otras acciones: mensajes, llamadas u otras aplicaciones. Se espera que al abrir una aplicación mobile, se hayan guardado los datos y estado anteriores, lo que implica que debemos persistirlos cada vez que la usamos.
Para poder conseguir este objetivo, Flex Hero nos proporciona apis de persistencia de datos para guardar los datos de las vistas. Esto permite a los developers guardar de forma rápida y sencilla los diferentes datos y estados entre sesiones.
MobileApplication no está pensada para ser usada para aplicaciones desktop o web, requiere AIR 2.5 SDK y swcs exclusivos de Flex Mobile (mobileComponents y mobileTheme).
Objetivos de MobileApplication
- Crear una aplicación mobile con una plantilla simple, que exponga los diferentes aspectos de UI comunes en las applicaciones mobile
- Automatizar el control de los eventos de orientación que se lanzan en runtime
- Automatizar el manejo de eventos de hardware, menu y búsqueda que se pueden dar en runtime
- La creación de un manager simple de persistencia que permita guardar los datos y recuperarlos bajo demanda
- La implementación de una skin básica para la aplicación
Descripción
Creación de Interficíe de Usuario
La clase MobileApplication provee una manera fácil y rápida de crear UI para móviles. Este componente extiende a SkinnableContainer y contiene una estructura muy específica definida con skin parts opcionales. Los componentes estándar de la UI son:
- ViewNavigator: usado par tratar la navegación a través de las vistas dentro de la aplicación. Se expande por todo el área libre de la pantalla del dispositivo. Nos proporciona acceso a una ActionBar, responsable de mostrar el título y los componentes contextuales de la vista actual.
- Menú de la aplicación: Se muestra en respuesta a un click a una acción sobre el menu del dispositivo.
Debido a que MobileApplication usa ViewNavigator para navegar a través de sus vistas, no podemos añadir directamente hijos al componente MobileApplication. El developer necesitará usar la propiedad firstView o invocar manualmente la llamada pushView() del navigator para definir que objeto visual se instancia al inicializar la aplicación.
Menú de aplicación
Muchos dispositivos móviles usan un menu de aplicación. Con este menu se muestran las acciones globales o contextuales relacionadas con cada estado de la aplicación.
Atajos de teclado
Se suelen usar en muchos dispositivos y también se ha aplicado a dispositivos que soportan Flex Mobile. La clase MobileApplication proporciona automáticamente un botón de retorno (back button) para gestionar la navegación principal de la aplicación. Cuando la tecla de retorno se pulsa, la clase MobileApplication comprueba cuantas vistas están en la pila. En el caso de que se esté gestionando más de una vista, mobile application llama el método popView() sobre el navigator para que muestre la vista anterior. Si no hay ninguna vista empilada o sólo se está gestionando la actual, al pulsar back retornamos a la vista principal de la aplicación.
La clase MobileApplication nos expone apis sencillas para que los developers puedan sobreescribir está funcionalidad si nos interesa otro comportamiento.
Soporte para la orientación
Las clases MobileApplication y ViewNavigator tienen comunicación estrecha para controlar la orientación del dispositivo. El developer puede usar la propiedad de la clase MobileApplication llamada landscapeOrientation, que es solo de lectura, y permite determinar la orientación del dispositivo. Cuando cambia la orientación del dispositivo, la clase MobileApplication capturará la orientación del stage y automáticamente actualize esta propiedad. Para cambiar la orientación física del dispositivo debemos usar las apis de la clase Stage.
La clase ViewNavigator soporta los estados de landscape y portrait.
Propiedades de vista a nivel de aplicación
A continuación mostramos propiedades interesantes de la clase MobileApplication. Estas propiedades se usan como proxy para usarlas sobre la clase ViewNavigator que contiene los mismos valores y definirlos si no han sido setteados en la vista actual.
- firstView: define la primera vista cuando no se ha definido ninguna sección
- firstViewData: el objeto de datos que se debe settear a la primera vista de la aplicación
Propiedades de la ActionBar
- title: el título usado en la action bar
- titleContent: los UIComponents que deberían ser visualizados en la ActionBar
- titleLayout: el layout por defecto de la zona de titleContent
- navigationContent: los UIComponents que se deben mostrar en la zona de navegación de la ActionBar
- navigationLayout: el layout de la zona de navegación de la ActionBar
- actionContent: los UIComponents a mostrar dentro de la zona de acción de la ActionBar
- actionLayout: el layout que se aplica dentro de la zona de acción de la ActionBar
Persistencia de datos entre las sesiones de la aplicación
Flex Mobile framework introduce un nuevo manager que nos permite guarda datos mediante una API muy sencilla. Este manager se llama PersistenceManager e implementa la interface IPersistenceManager. Nos da una lista de apis para que el developer pueda usar para guardar y tratar los datos de la aplicación.
Persistencia automática del estado de la aplicación
Usando PersistenceManager, la clase MobileApplication automáticamente guarda y restaura la información del estado de la aplicación para que dispongamos de ella cuando la aplicación se suspende y se relanza. MobileApplication tiene la propiedad sessionCachingEnabled que una vez habilitada hace que la aplicación guarde automáticamente su estado. Usa los siguientes parámetros para hacer este guardado:
versión de la aplicación, un timestamp para saber el momento es que se ha guardado y el estado de la navegación. Todo esto se guarda en la pila del navegador principal.
Debemos tener en cuenta que el objeto compartido que PersistenceManager usa para guardar los datos no está ni encriptado ni protegido. Se guarda con un formato fácilmente legible. Esto implica tener cuidado con lo datos que el developer guarda. El developer siempre tiene la posibilidad de implementar su propio manager de persistencia para crear una mejor manera de guardar los datos, si lo cree necesario.
Aquí encontrareis más información y ejemplos.