Desde la primera vez que presentamos Flex y Flash Builder, nuestro objetivo ha sido brindar una forma altamente productiva de crear aplicaciones ricas de internet (RIA’s) a través de múltiples plataformas. Comenzando con Flash Player en el explorador y también con Adobe AIR en el escritorio, Flex y Flash Builder han permitido a los desarrolladores construir aplicaciones que corren a través de Windows, Mac OS y Linux.

Flex for Mobile

Con las liberaciones del SDK Adobe Flex 4.5 y Flash Builder 4.5, Adobe está dirigiendo el SDK de Flex y Flash Builder hacia smartphones y tabletas touchscreen. Aprovechando Adobe AIR 2.6 en tiempo de ejecución, tú puedes ahora desarrollar aplicaciones ActionScript y Flex móviles con la misma facilidad y calidad como en plataformas de escritorio.

Usando Flash Builder 4.5, puedes construir aplicaciones Flex móviles para la plataforma Google Android. Además puedes construir aplicaciones ActionScript móviles para Android y Apple iOS. En junio, poco tiempo después de las liberaciones de Flex y Flash Builder 4.5, liberaremos una actualización que permitirá el desarrollo de aplicaciones Flex móviles para iOS, así como aplicaciones ActionsCriot y Flex para la PlayBook de BlackBerry.

Descripción breve del desarrollo móvil con Flex

La versión inicial de desarrollo con Flex consta de tres componentes:

  • Runtime: Adobe AIR 2.6 en dispositivos móviles
  • Framework: El SDK Adobe Flex 4.5
  • Ambiente de desarrollo: Adobe Flash Builder 4.5

Runtime: Adobe AIR 2.6 en dispositivos móviles

Las versiones iniciales de las características de desarrollo móvil en Flex y Flash Builder están dirigidas a crear instaladores independientes usando Adobe AIR para los dispositivos móviles. Pero centrándose en AIR, Flex puede tomar ventaja de la integración que AIR permite con cada plataforma móvil, tales como la capacidad de controlar el hardware y acceso al almacenamiento local.
AIR para dispositivos móviles permite a los desarrolladores crear aplicaciones que pueden ser desplegadas (si se quiere, vendidas) de la misma forma que las aplicaciones nativas de cada plataforma. Por ejemplo, una aplicación construida con AIR para Android puede ser expuesta en el Android Market. Para mas información acerca de AIR para móviles, ve el Centro de desarrollo de Adobe AIR.

El Framework: SDK Adobe Flex 4.5

El SDK Flex brinda un marco de trabajo robusto y productivo para la creación de la interfaz de usuario y conexión a los datos del servidor. Flex incluye un amplio conjunto de componentes integrados de interfaz de usuario, componentes de acceso a datos y datos vinculados, creación de interfaces de usuario a través de MXML, orientación dinámica, y una arquitectura de componentes extensibles.

Las características móviles en el SDK Adobe Flex 4.5 aprovechan estas características principales de Flex de dos formas. La primera, los componentes existentes y sus skins han sido optimizados y ampliados para ser utilizados en dispositivos con pantalla táctil. Segunda, los nuevos componentes han sido agregados y encapsulados para patrones de diseño comunes específicos para smartphones. Estas adiciones al framework son descritas en la sección Desarrollando aplicaciones moviles con el SDK Flex 4.5 debajo.

Ambiente de desarrollo: Adobe Flash Builder 4.5

Finalmente, la liberación 4.5 del IDE Flash Builder brinda un flujo de trabajo diseño/desarrollo/depuración productivo para el desarrollo móvil. Desde que creamos el proyecto, podemos depurar nuestra aplicación directamente en el dispositivo con un solo clic, el objetivo de las características móviles en Flash Builder 4.5 es para que sea igual de fácil desarrollar una aplicación móvil de ActionScript o basada en Flex tanto como desarrollar una aplicación de escritorio. Para mas detalles, ver Racionalización del flujo de trabajo mocil con Flash Builder 4.5 debajo.

Consideraciones para el diseño y desarrollo móvil

Las aplicaciones para dispositivos móviles con pantalla táctil difieren de las aplicaciones de escritorio o web son muy importantes en varias formas:

  • Con el fin de ser fácilmente manipuladas por medio del tacto, los componentes generalmente deben tener zonas sensibles que los componentes de escritorio no. Esto es especialmente porque la densidad de píxeles en las pantallas de los dispositivos móviles son más altos que en los monitores de escritorio.
  • Los patrones de interacción para acciones como scrolling son diferentes en los dispositivos táctiles.
  • Debido al espacio limitado de la pantalla, las aplicaciones en dispositivos más pequeños como smartphones necesitan ser diseñados de forma diferente a las aplicaciones de escritorio, con una pequeña cantidad de la interfaz de usuario en pantalla en un momento dado. Además, los diseños de la interfaz de usuario deben tener en cuenta las diferencias en la resolución de pantalla y la densidad de píxeles de los dispositivos.
  • Mientras que los dispositivos móviles están llegando a ser más y más capaces, el rendimiento de su CPU y GPU es aun más limitado que sus contrapartes de escritorio.
  • Debido a la memoria disponible limitada en dispositivos móviles, las aplicaciones necesitan poner cuidado en el uso de la memoria, y la posibilidad de salir y reiniciarse en cualquier momento por el sistema operativo.

Como resultado, construir aplicaciones para un dispositivo móvil no es tan simple en cuestión de tomar una aplicación de escritorio y “encogerla” a una resolución de pantalla diferente. Nuestro objetivo es hacerlo para que los desarrolladores puedan crear interfaces de usuario fácilmente separadas apropiadamente para cada estado, mientras que comparten el modelo subyacente de acceso a datos entre los proyectos móviles y de escritorio.

Desarrollando aplicaciones móviles con el SDK Flex 4.5

A fin de abordar el diseño y los problemas de desarrollo antes mencionados, las nuevas características móviles de desarrollo en Flex 4.5 aumentan las características fundamentales del SDK de Flex con los skins y los componentes que han sido optimizados para el diseño de patrones de diseño móvil.

Componentes móviles básicos

En Flex 4.5 hemos dado algunos pasos para asegurarnos de que los componentes Flex funcionan bien en componentes con pantalla táctil.

Por componentes simples como Button, CheckBox y TextInput, hemos brindado un tema móvil que contiene skins del tamaño adecuado para la pantalla táctil. Debido a la flexibilidad de la arquitectura de componentes Spark incluidos en Flex 4, hemos sido capaces de hacer esto sin modificar el código del componente principal. Ademas, como describimos en la sección de rendimiento debajo, los skins móviles están construidos en ActionScript para un rendimiento óptimo.

Por supuesto, puedes aprovechar la misma arquitectura Spark, los estilos y skins de los componentes en las aplicaciones móviles con el fin de personalizar el aspecto de los componentes para que se adapten a tu marca y diseño.

Para componentes más complejos, en particular Scroller y List, hemos agregado la funcionalidad al núcleo del componente que te permitirá tocar y arrastrar el scroll, con efectos en los extremos del scroll. El Scrolling por tacto está habilitado definiendo el nuevo estilo interactionMode en el Scroller y List.Si estas usando el tema móvil, este estilo esta automáticamente aplicado de forma que no necesitaras hacer algo mas para permitir esta interacción.

Esta primera versión del tema móvil no tendrá esta función para todos los componentes Spark. A continuación mostramos que componentes ya están listos en su versión móvil para Flex 4.5; haremos mas componentes móviles para las siguientes liberaciones.

Estructura estándar de las aplicaciones móviles

Además del aspecto y la ampliación de los componentes básicos para los dispositivos móviles, Flex 4.5 contiene un conjunto de nuevos componentes específicamente diseñados para hacer fácil el desarrollo de aplicaciones que sigan los estándares de los patrones de diseño para teléfonos táctiles.

Debido al limitado espacio de la pantalla, las aplicaciones para estos dispositivos suelen ser estructuradas en una serie de vistas, cada una de estas se centra en mostrar una simple lista de datos o detalles de un elemento único. El usuario navega a través de estas vistas pulsando los elementos, datos o controles, y vuelve ya sea usando la interfaz de la aplicación o un botón que forme parte del Hardware del dispositivo. Las acciones adicionales se puede proporcionar a través de la interfaz de usuario o un menú incluido.

Hemos agregados los siguientes componentes en Flex que soportan este patrón.

View El componentes View representa una simple pantalla en la interfaz de usuario, puedes crear tus componentes personalizados en MXML o ActionScript basados en View, y agregar cualquier componente que quieras que aparezca dentro del contenido. Por ejemplo, una aplicación de ventas debe tener una vista inicio que muestre una lista de elementos y categorías. Presionando una categoría navegas a una lista de productos que muestre los elementos en dicha categoría, y presionando un producto navegas hacia sus detalles mostrando información acerca del producto.

Cada vista tiene una propiedad data que especifica que datos deben aparecer en esa vista. Las vistas pueden pasar datos a otras como el usuario navega por la aplicación. Además, la propiedad data permite usar los componentes ViewNavigator y ViewNavigatorApplication, descritos debajo, para proporcionar características de persistencia de datos, tanto en la memoria y entre las ejecuciones de la aplicación.

Cuando el usuario rote la pantalla entre las orientaciones portrait y landscape, la vista automáticamente se redimensionara por default. Como resultado, si usas la orientación estándar de Flex3, tu aplicación podrá cambiar de orientación con un poco de trabajo de tu parte. Para un control más preciso, puedes utilizar el mecanismo de estados de Flex para definir los estados portrait y landscape donde especifiques exactamente como debe verse cada vista en cada estado.

ActionBar Es una cabecera estándar que aparece sobre las vistas en la aplicación. Normalmente contiene el título y uno o más botones que llevan a cabo acciones como la actualización de la vista actual o la creación de un nuevo elemento. Puedes llenar la ActionBar con controles que son persistentes en toda la aplicación, o personalizarla para cada vista individualmente. Por ejemplo, en la pantalla Home de una aplicación, puedes poner una caja de búsqueda en el ActionBar.

ViewMenu proporciona un control estándar que aparece en la parte inferior de la pantalla cuando el usuario presiona el botón de menú en un dispositivo. En cualquier vista, puedes agregar la propiedad viewMenuItems que contenga un conjunto de elementos, cada uno especifica un icono, una etiqueta, y un click handler. ViewMenu se preocupa de mostrarse y ocultarse fuera del menú de elementos apropiadamente.

ViewNavigator administra el ActionBar y el conjunto de vistas en tu aplicación usando un historial. Cuando tu aplicación inicia, el ViewNavigator muestra la vista especificada por su propiedad firstView. Después de eso, puedes llamar el método pushView() para navegar a una nueva vista en respuesta a la selección del usuario, como presionar o dar clic en un elemento, y llamar popView() para regresar a la vista previa. Flex proporciona un conjunto de transiciones optimizadas para ayudar al usuario a mantener el contexto al navegar por la aplicación.

Para conservar la memoria, ViewNavigator asegura que solo una vista está en memoria por default. Sin embargo, mantiene los datos de las vistas previas en la cola que ha sido dispuesta, así que cuando el usuario vuelve a la vista anterior, puede ser reinstanciado con los datos adecuados.
Además del ViewNavigator estándar, ofrecemos un TabbedViewNavigator que permite cambiar entre diferentes colas de diferentes vistas presionando en las pestañas de la parte inferior.

ViewNavigatorApplication envuelve toda esta funcionalidad dentro de una clase de aplicación práctica. Basando tu aplicación en ViewNavigatorApplication, puedes automáticamente obtener un ViewNavigator para administrar tus vistas. Para aplicaciones basadas en pestañas, puedes usar la clase de aplicación análoga TabbedViewNavigatorApplciation. ViewNavigatorApplication brinda además un comportamiento por default para el botón back del dispositivo del hardware, asignándole el método popView().

Ademas, proporciona una manera de conservar el estado de la aplicación cuando esta se cierra, de modo que la próxima vez que se inicie, esta pueda ser restaurada en la misma vista y ver el historial. Esto hace que la interrupción de tus aplicaciones sea totalmente transparente para el usuario—especialmente importante en dispositivos móviles, donde el sistema operativo puede interrumpir o terminar una aplicación en cualquier momento.

Por supuesto, eres libre de crear una aplicación desde cero usando la clase estándar de una aplicación Spark, y usar el núcleo de los componentes y sus skins sin usar un patrón de navegación de vistas. Por ejemplo, si estas desarrollando una aplicación para tableta, probablemente la estructuración de tu aplicación no será completamente entorno a estas pequeñas vistas; las tabletas tienen una pantalla más grande de la cual podemos tomar ventaja, y las aplicaciones para tabletas son menos pesadas en su navegación. En ese caso, querrás iniciar de una aplicación Spark estándar en lugar de usar ViewNavigatorApplciation, pero aun así el tema móvil con el fin de obtener beneficio de los componentes móviles optimizados y sus skins.

Optimización de Rendimiento

Debido a que el SDK de Flex soporta ambos casos de uso móvil y de escritorio en el mismo framework, toda la funcionalidad de Flex está disponible cuando estas construyendo aplicaciones Flex. Sin embargo, debido a las limitaciones de rendimiento en dispositivos móviles, deberá tener cuidado en el uso de ciertas características al crear aplicaciones móviles de Flex, y otras características que recomendamos evitar por completo. Aquí están algunas recomendaciones a tener en mente.

  • Usa ActionScript en lugar de MXML para construir ítem renderers. Debido a que el desplazamiento en las listas es muy sensible al rendimiento, es importante crear ítem renderers que sean tan eficientes como sea posible. Para ayudar a la creación de ítem renderers para proyectos móviles, Flex proporciona las clases LabelItemRendered y IconItemRenderer.

    Estos ítem renderers están construidos en ActionScript, y el IconItemRenderer puede ser configurado para mostrar uno o dos elementos de texto, un icono opcional o una imagen a la izquierda, y un decorador opcional a la derecha. Si esto no se ajusta a sus necesidades, puede crear subclases para agregar controles y agregarlos en ActionScript por tu cuenta.

  • Siempre que sea posible, use ActionScript y gráficos compilados en FXG o bitmaps para skins de componentes en lugar de MXML y gráficos de MXML. Similar al ítem renderer, es mejor asegurar que los skins de tus componentes son livianos. Los skins que proporcionamos en el tema móvil de Flex están todos construidos directamente en ActionScript, y puedes crear subclases de estos para sustituirlos con tus propios gráficos FXG o modificar su orientación.

    Dicho esto, los problemas de rendimiento con skins de MXML no son tan notables como con los ítem renderers, así que usar unos cuantos skins de MXML aquí y otros allá a través de tu aplicación no afectara el rendimiento significativamente.

  • Las graficas están soportadas en proyectos móviles, pero otros componentes MX no. No recomendamos usar componentes MX en componentes móviles; usa los componentes Spark. La única excepción es cuando necesites componentes de graficas, debes tener cuidado en animar muchos datos a la vez.
  • En general, usa Spark Label, TextInput y TextArea por texto en lugar de usar RichText y RichTextEditable. Para interfaces de usuario que necesitan texto, recomendamos usar textos basados en TextField para un rendimiento máximo, y los skins móviles que proporciona Flex. Si es posible usar el RichText basado en TLF para casos donde necesitas mostrar contenido rico, pero no recomendamos usarlo para tus elementos de interfaz en tus proyectos móviles.

Adaptando aplicaciones móviles a múltiples densidades de pixeles

Los dispositivos móviles vienen con una amplia gama de diferencias, desde los teléfonos con pantallas pequeñas hasta las tabletas con pantallas más grandes. Variaciones simples en el tamaño de la pantalla y relación al aspecto pueden ser manejados fácilmente con los componentes estándar de diseño dinámico, como Group, VGroup y HGroup, que proporciona Flex. Sin embargo, en los dispositivos también cambia la densidad de pixeles—que es el número de pixeles por pulgada en la pantalla.

Por ejemplo, muchas tabletas y algunos teléfonos tienen una densidad de pixeles de 160 puntos por pulgada (DPI), mientras que otros teléfonos tienen una densidad de pixeles de 240 o 320 DPI. Las variaciones en la densidad de pixeles afectan visualmente e individualmente el tamaño de los elementos en la interfaz: todas las demás cosas seguirán igual, controles con un tamaño específico en pixeles aparecerán físicamente más pequeños en dispositivos con una densidad de pixeles mayor. Esto es especialmente problemático para interfaces táctiles, donde los controles deben ser físicamente más grandes, lo suficiente para que se les seleccione con un dedo.

Flex 4.5 proporciona muchas características nuevas para ayudar a los desarrolladores a hacer que sus aplicaciones trabajen bien a través de diferentes densidades.

Escalando automáticamente. Los desarrolladores pueden escoger entre orientas sus aplicaciones a un DPI en especifico o definir la propiedad applicationDPI en la aplicación. Cuando es definido explícitamente, los desarrolladores deberían ajustar sus skins y orientaciones como si estuvieran ejecutando la aplicación en un dispositivo con ese DPI.

En tiempo de ejecución, si el dispositivo tiene un DPI diferente al especificado, Flex automáticamente escalara la aplicación entera para preservar el tamaño físico aproximado de la aplicación y sus controles. Por ejemplo, si una aplicación está orientada a 160 DPI, la cual se escalara automáticamente por 1.5x en un dispositivo de 240 DPI. Si eliges no usar esta característica, necesitaras asegurarte de que tus skins personalizados y orientaciones se adaptaran apropiadamente a las diferentes densidades.

Bitmaps Multi-DPI. Si tienes algún bitmap artwork en tu aplicación, necesitaras proporcionarle diferentes resoluciones a cada bitmap para las diferentes DPIs. Para hacerlo, puedes tomar ventaja de la clase MultiDPIBitmapSource, la cual te permite especificar diferentes archivos bitmap para ser usados en diferentes DPIs.

Reglas CSS por DPI. Flex 4.5 agrega soporte para la sintaxis @media de CSS que te permite especificar reglas de CSS que deberán ser aplicadas dado un DPI; los skins que construyas tomaran ventaja de esto para adaptar los tamaños de letra y los paddings para diferentes DPIs.

Ejecutándose en AIR

Finalmente, es importante darse cuenta que en adición a todos los componentes listados arriba, puedes además tomar ventaja de todas las APIs disponibles en AIR para usarlas en dispositivos móviles—-geolocalizacion, acelerómetro, cámara, y más. Mientras que algunas de estas características no están expuestas como componentes de Flex, son de fácil acceso usando ActionScript. Para más información acerca de desarrollo usando APIs para AIR en dispositivos móviles, ver documentos móviles de AIR.

Racionalizando el flujo de trabajo en móviles con Flash Builder 4.5

Basándose en las características de desarrollo móvil en Adobe Flex 4.5, Flash Builder 4.5 extiende los flujos de trabajo de ActionScript y Flex para el desarrollo móvil, desde la creación del proyecto hasta el empaquetamiento de la aplicación final.

Administrando proyectos móviles

Flash Builder 4.5 proporciona dos nuevos tipos de proyectos: ActionScript Mobile Project y Flex Mobile Project. Creando un ActionScript Mobile Project te brinda una lista completamente limpia en la cual escribir tu aplicación en puro código ActionScript. Por el contrario, la creación de un proyecto Flex móvil te da acceso a la estructura de Flex, incluyendo las características móviles descritas anteriormente, así como las características relacionadas con Flash Builder, como la vista de diseño y la conectividad de datos introducidas en Flsh Builder 4.

Como ya se menciono, la liberación de Flash Builder 4.5 soporta la construcción de aplicaciones móviles para Android, asi como la construcción de proyectos ActionScript para iOS y Android. Actualizaciones que permitirán el desarrollo para iOS asi como desarrollo Flex y ActionScript para la BlackBerry PlayBook estarán disponibles después de la liberación 4.5

Diseñando vistas

Para proyectos Flex móviles, hemos extendido el modo de diseño en dos formas. La primera, hemos agregado controles a la barra de diseño, que te permiten visualizar el contenido de la aplicación en diferentes tamaños de pantalla y orientaciones. Puedes agregar más configuraciones en Preferences > Flash Builder > Device Configuration.

Segundo, hemos hecho que la vista de diseño trabaje con la navegación estándar descrita arriba. Cuando tu editas una vista en un proyecto basado en ViewNavigationApplication, veras el contenido de la vista en el contexto de la estructura de la aplicación general— por ejemplo, veras el ActionBar encima de la vista, y la barra de acción se llena con el contenido adecuado a la vista. Puedes arrastrar los controles dentro de la ActionBar como cualquier otro contenedor para personalizarla. La siguiente figura muestra cuando se arrastra un Button dentro del área actionContent a la derecha del ActionBar.

Ejecutando y depurando en el escritorio y el dispositivo

Cuando llega el momento de probar o depurar tu aplicación, tienes dos opciones. Puedes ejecutar tu aplicación en el escritorio usando el AIR Debug Launcher (ADL). Para mas fidelidad puedes ejecutar tu aplicación directamente en un dispositivo. En este caso, puedes usar las capacidades de Flash Builder para la depuración, incluyendo el uso de brackpoints y el uso del panel Varialbes and Expresions.
Cuando ejecutas en el dispositivo, hay algunos puntos clave que necesitas tener en mente:

  • Si tu aplicación requiere acceso a datos, debes implementar tus servicios de datos para que puedan ser accesados desde el dispositivo via WiFi; si has estado probando tu aplicación de forma local en el escritorio, no funcionara en el dispositivo, desde que el localhost en el dispositivo es el mismo teléfono.
  • La liberación final de Flash Builder 4.5 soporta depuración directamente en los dispositivos mientras estén conectados via USB al equipo, lo contrario a la liberación de prueba que solo soporta depuración a través de WiFi.
  • Para depurar o implementar un proyecto ActionScript móvil en un dispositivo iOS físico, necesitaras obtener un perfil y certificado de Apple. Además, necesitaras implementar manualmente tu aplicación en tu dispositivo usando iTunes, y ejecutarlo en el dispositivo por sí mismo.
  • Profiling no está soportado actualmente en los dispositivos solo en el escritorio.

Empaquetando aplicaciones para su implementación

Finalmente, cuando tu aplicación está terminada y lista para salir al mundo, puedes usar el Export Release Builder que prepara tus aplicaciones para su implementación web o de escritorio. La diferencia central es que cuando tú exportas un proyecto móvil, Flash Builder lo empaquetara como un instalador nativo, no como un archivo .air. Por ejemplo, en Android, Flash Builder genera un .apk que se ve como un instalador nativo Android. Esto permite que las aplicaciones basadas en AIR sean distribuidas y vendidas de la misma forma que las aplicaciones nativas de cada plataforma. En Android, los usuarios que aun no tienen AIR instalado, deberán descargarlo e instalarlo desde el Android Market la primera vez que ejecuten una aplicación AIR.

Mientras que las características de desarrollo móvil en Flex están inicialmente orientadas en adobe AIR, estamos buscando brindar aplicaciones Flex basadas en el Flash Player y que se ejecuten en los exploradores de los dispositivos móviles para las siguientes liberaciones.

A donde ir desde aquí

Estamos emocionados por brindarte el desarrollo móvil en Flash Builder con el SDK de Flex. Al mismo tiempo, esperamos saltes hacia la construcción de aplicaciones móviles geniales con Flash Builder 4.5 y flex 4.5. Puedes comenzar rápidamente instalando la versión de prueba de Flash Builder 4.5 y siguiendo los siguientes tutoriales:

Este articulo esta publicado en Adobe Developer Connnetion (devnet) bajo licencia Creative Commons, escrito originalmente por Narciso Jaramillo, virtual product manager for Flash Builder, Flash Catalyst, and mobile Flex en Adobe.