Flex Hero Mobile (II): ViewNavigator

En el segundo post de Hero en cuanto a Mobile veremos el componente ViewNavigator, que actúa como core del modelo de navegación de las aplicaciones mobile hechas con Hero.

Introducción

El concepto View y view navigator son conceptos del nuevo framework Hero que nos permite crear y navegar dinámicamente por el contenido de la aplicación. ViewNavigator es un componente que trata la creación y presentación de las vistas. ViewNavigator usa una pila de vistas, que hace que solo sea visible la que se situa en el top de la pila. El developer puede usar los métodos como pushView y popView para ir a una vista o retornar a una vista previa.

Objetivos

• Mostrar dinámicamente el contenido de una área específica
• Dar la habilidad para navegar por distintas vistas
• Proporcionar un sistema de datos para dar la información necesaria a una vista cuando se crea
• Soportar diferentes políticas de destrucción
• Proporcionar una Infrastructura para rellenar automáticamente la ActionBar con los datos relacionados con la vista activa

Relación con ViewStack

ViewNavigator es similar al componente mx:ViewStack: pueden cambiar rápidamente el contenido visual. La mayor diferencia entre ellos es el sistema de navegación: ViewStack solo puede cambiar entre estados predefinidos, mientras que ViewNavigator permite al developer activar dinámicamente un número de vistas y saltar rápidamente entre ellas, según el flujo que defina el usuario. Esto significa que ViewNavigator crea y mantiene un historial de navegación y representa mejor el modelo de navegación. Además ViewNavigator contiene un modelo de datos con la habilidad de persistir los datos y estados entre diferentes sesiones de la aplicación.

Relación con los States

ViewNavigator no se puede considerar un reemplazo de los States de Flex. Aún y así, las vistas y los states son similares en tanto que permiten al developer cambiar el contenido bajo demanda, pero hay diferencias: los states son un subsistema que se concentra en el cambio de subpartes de componentes y propiedades en el mismo instante de tiempo, controlados por un solo thread; mientras que las vistas centralizan toda la lógica y el contenido relacionado en un único componente, el cual es reemplazado totalmente al navegar a otra vista.

Descripción detallada

Estructura del componente

A continuación vemos este componente:

La content area es el contenendor principal de la vista actual. Cuando se crea una vista, automáticamente es añadida a este contenedor. La ActionBar nos permite mostrar la información contextual a la vista actual.

Control de las vistas

Como hemos dicho, ViewNavigator usa una pila para controlar las vistas, concretamente tiene un vector de objetos llamado navigation stack, donde el primer elemento es el que estará activo y visible. ViewNavigator nos proporciona un sistema de push y pop de vistas. Es importante destacar que no proporciona ningún mecanismo para poder mostrar una vista específica de la navigation stack.

En la imagen anterior vemos como al seleccionar un elemento de la vista de búsqueda, accedemos a la vista de detalle. Esto provoca la destrucción de la vista de búsqueda y la vista de detalle pasa a ser la activa y visible.

Vistas

Una vista (View) es la clase base de todas las vistas de la aplicación y es una subclase de Group. Una vista tiene una propiedad data que será usada para representar su contenido y estado. Este objeto es automáticamente serializado, persistido y restaurado por el view navigator cuando una vista se activa o desactiva.

Políticas de destrucción

La implementación incial de ViewNavigator solo permite una vista visible. Cuando una vista pasa a ser activa, los componentes de la anterior se destruyen. De esta manera tenemos una mejor gestión de memoria.
También es cierto que en determinados escenarios es más costoso destruir una vista y volverla a crear cuando sea necesario. Para tratar esto, las vistas tienen una propiedad llamada destructionPolicy que determina que debe pasar cuando la vista es reemplazada en la pila. Por defecto se destruyen, pero podemos determinar que se mantengan en memoria.

Modelo de datos de la vista

Las vistas también tiene soporte para la persistencia de datos. Estos datos se guardan en un objeto y se settean a la propiedad data de la vista cuando se hace la llamada de pushView(). Des esta manera se asegura que la vista contenga los datos que necesita. Cuando una nueva vista se pone como activa, los datos de la anterior son guardados.

Ciclo de vida de una vista

ViewNavigator sigue el flujo típico de invalidación de las aplicaciones Flex para hacer la transición entre vistas. Así un developer puede ejecutar operaciones de navegación en un solo frame. Todas las operaciones de navegación pueden ser canceladas.

A continuación el diagrama de acciones y eventos que suceden cuando se solicita una nueva vista:

Visibilidad de la ActionBar

Disponemos de dos layouts para la action bar dentro del navegador. El developer puede cambiar entre ellos usando la propiedad overlayControls de la vista y del ViewNavigator. Con overlayControls a false, la ActionBar usa como layout vertical. SI tiene valor true, el área de vista se expande al width y height del navegador. La ActionBar se pone encima aplicando un alpha determinado.

Orientación

ViewNavigator soporta las orientaciones de portrait y landscape. Debemos usar los siguientes skin states del ViewNavigator:

• portrait: Las vistas se muestran en layout portrait y con la ActionBar con el layout por defecto
• landscape: Las vistas se muestran en layout landscape y con la ActionBar con el layout por defecto
• portraitAndOverlay: Las vistas se muestran en layout portrait y con la ActionBar se superpone a la content area
• landscapeAndOverlay: Las vistas se muestran en layout landscape y con la ActionBar se superpone a la content area

Transiciones

Podemos definir transiciones para pasar de una vista a la siguiente. Podemos pasar un objeto de tipo ViewTransition para determinar que transición queremos aplicar.
ViewNavigator tiene dos skin parts opcionales: defaultPushTransition y defaultPopTransition.

Más información y ejempos aquí.