Flex Hero Mobile (IV): List, Scroller, Mobile Splash Screen y Mobile View Menu

En este último post de la serie Flex Hero Mobile, veremos cuatro elementos importantes y necesarios en las aplicaciones Mobile: List, Scroller, Mobile Splash Screen y Mobile View Menu. Daremos una ojeada a vista de pájaro de estos elementos.

List y Scroller

Los componentes List y Scroller de Flex 4 fueron pensados para usar en pcs. El hecho de usar estos componentes en dispositivos mobile, implica modificarlos para adaptarse al modelo de interacción del usuario y conseguir un mejor rendimiento y suavidad del movimiento. Han habido los siguientes refactorings:

• Modificación del componente Scroller para conseguir nuevas funcionalidades a través de una nueva API.
• Modificación de la list de Spark para un mayor rendimiento en cuanto a scrolling e inicialización, y una mejor utilización de los ítem renderers y el rendimiento que saca de éstos.

Eventos de Mouse vs eventos Touch

Flash Player tiene tres tipos de eventos asociados a las pantallas táctiles: mouse events, touch events y gesture events. Los mouse events sobre todo son mantenidos para no perder retro compatibilidad con las versiones anteriores del framework. Son lanzados con el primer toque sobre la pantalla. Los touch events pueden ser lanzados por muchos toques y son asociados mediante un touch id.

Los gesture events son eventos de nivel superior, como el zoom o la rotación. Son, primeramente, lanzados mediante el sistema operativo y después los relanza Flash. No todos los SO soportan estos eventos.

Dependiendo del input que recibe Flash Player, lanza uno de los eventos descritos.

Item Renderers

El rendimiento siempre debe tenerse en cuenta. No hay nada tan pesado como tratar una lista en un dispositivo mobile y que ésta vaya a trompicones. La mayoría de veces se debe a la mala implementación de los item renderers. Es por eso, que se recomienda crear los item renderers mediante ActionScript. Una de las respuestas al “por qué“, que podemos preguntarnos es que la primitiva de texto más ligera, por ejemplo, está disponible solamente en ActionScript y es mucho más rápida y fácil de renderizar que una Label Spark.

MobileItemRenderer

facilita el trabajo que requiere un item renderer. Es el item renderer aplicado por defecto. Extiende a UIComponent e implementa IItemRenderer. Contiene un componente de texto.

MobileIconItemRenderer

este ítem renderer tiene 4 partes opcionales: un icono a la izquierda, una línea sobre el icono, un texto multilínea al lado del icono y un decorador a la derecha.

Mobile Splash Screen

Proporciona una Splash Screen preloader (pantalla de carga de la aplicación) por defecto para las aplicaciones Flex Mobile. Nos permite especificar un recurso embebido, así como aplicar opciones de redimensionado y aplicarse a pantalla completa, si se desea.

Se ha añadido una nueva clase: spark.preloaders.SplashScreen, que proporciona las siguientes propiedades:

• splashScreenImage: permite poner una imagen como child.
• splashScreenScaleMode: controla el tamaño y posición de la imagen.
• splashScreenMinimumDisplayTime: permite especificar el tiempo mínimo que se tiene que mostrar la splash screen. El valor por defecto es 1000 ms.
• Esta clase está pendiente de los cambios de orientación o redimensión.
• No se necesita hacer trabajo extra para hacer que se comporte a full-screen.

Mobile View Menu

ViewMenu es un SkinnableContainer con un layout customizado e incluye interacción con el teclado. Este componente aparece cuando el usuario pulsa el botón de menú.

Un ViewMenu expone un conjunto de acciones para interactuar con la vista activa. Cada vista tiene una propiedad llamada ViewMenuItems que nos permite especificar la lista de elementos que mostrará ViewMenu cuando esta vista esté activa.

El flujo de interacción que sigue el ViewMenu es el siguiente: cuando el usuario pulsa el botón de menú, la MobileApplication crea un ViewMenu, lo popula con la vista activa y lo muestra usando PopUpManager. Cuando el usuario selecciona un ítem, este ViewMenuItem lanza un evento de click y la MobileApplication cierra el ViewMenu.

ViewMenuItem

Es una subclase de ButtonBase. Contiene la propiedad label y un icono.

ViewMenuItemSkin

ViewMenuItemSkin extiende ButtonSkin.

ViewMenuLayout

Extiende LayoutBase. En posición vertical permite hasta un máximo de 3 columnas y en horizontal, un máximo de 6. En cada fila pone elementos del mismo tamaño.

Más info en estos enlaces:
List y Scroller
Mobile Splash Screen
ViewMenu