Flex está listo para dar un gran salto hacia adelante con esta siguiente liberación, Flex 4.5. Esta versión del SDK entrega muchos componentes nuevos y características excitantes, junto con soporte integrado en Flash Builder 4.5 y Flash Catalyst CS5.5. Con esta entrega del SDK Adobe Flex 4.5, estamos presentando tres iniciativas principales:

  • Permitir que los desarrolladores usen Flex para el desarrollo de aplicaciones multiscreen
  • Arquitectura madura de Spark y un set de componentes que fueron introducidos en Flex 4
  • Hacer mejoras incrementales al núcleo de la infraestructura de Flex para facilitar el desarrollo de aplicaciones robustas

Flex 4.5

Este artículo tiene como objetivo presentarte la variedad de nuevas características disponibles en la liberación del SDK Flex 4.5 y brindarte recursos y documentación adicionales de tal forma que puedas comenzar a construir aplicaciones aprovechando el framework Flex 4.5

Desarrollo Multiscreen con el SDK Flex 4.5

El desarrollo en Flex da un gran salto hacia adelante con esta liberación, Flex 4.5 introduce el desarrollo de aplicaciones multiscreen dentro del núcleo del framework Flex. Usando el SDK Adobe Flex 4.5, tú puedes aprovechar tus conocimientos en Flex y tus habilidades para desarrollar aplicaciones móviles utilizando componentes móviles optimizados (los cuales están basados en Spark) y el nivel de la aplicación móvil de construcciones que encapsulan los patrones de diseño más comunes. Para aprender más acerca de las nuevas características móviles agregadas al framework de Flex así como también los nuevos flujos de trabajo móviles agregados a Flash Builder, por favor lee el articulo Desarrollo Móvil usando el SDK Flex 4.5 y Flash Builder 4.5

Nuevos componentes Spark en el SDK Flex 4.5

Flex 4.5 agrega componentes Spark populares que no están dentro de Flex 4. Los nuevos componentes Spark agregados en Flex 4.5 tienen como objetivo aligerar los escenarios más comunes que causan la mezcla de componentes MX y Spark. La lista de nuevos componentes Spark incluye: DataGrid, Form, Image, Module, Busy Indicator, SkinnablePopUpContainer, Date/Time, Number y Currency Formatter así como Number y Currency Validators. A continuación se presentan estos nuevos componentes y sus características con más detalle.

DataGrid de Spark

Uno de los nuevos componentes más excitantes es el DataGrid. El DataGrid de Spark tiene dos objetivos principales:

  • Asegurar una personalización visual fácil y directa a través de una declaración rica de skinning Spark
  • Mejorar la presentación, el desplazamiento y un rendimiento interactivo comparado con el DataGrid MX

Las características sobresalientes del DataGrid Spark incluyen: una declaración de skinning que permite personalizar los subelementos mediante su declaración en el archivo del skin del DataGrid, incluyendo las cabeceras de las columnas y las filas, soporte completo para un dataProvider dinámico junto con un tamaño fijo o variable para las filas, comunicación avanzada entre las cabeceras de las columnas y la tabla, incluyendo ordenamiento de columnas, formateo del valor de los datos y cambiar el tamaño de las columnas así como un soporte para selección completa.

Como el DataGrid MX, está habilitada la selección de múltiples filas (sean contiguas o no). Adicionalmente, el DaraGrid Spark permite a los usuarios seleccionar celdas individuales o múltiples celdas como parte del comportamiento de selección por default. También permite la navegación básica a través del teclado o el mouse y es completamente accesible. Algunas de las características avanzadas del DataGrid Spark incluyen soporte completo para la edición de celdas así como optimización de rendimiento de forma que el DataGrid Spark supera al DataGrid MX con respecto al tiempo de inicio, navegación horizontal y vertical.

Para aprender más detalles acerca del nuevo DataGrid y todas sus facilidades, por favor lee la especificación del DataGrid Spark. La naturaleza accesible del DataGrid Spark está cubierta en una especificación separada.

Spark Form

El contenedor Form Spark permite muchas de la funcionalidad del Form MX mientras que también agrega varias mejoras que se adaptan a los diseños modernos de forma. La mejora más grande del Form Spark sobre la MX es la maduración de su orientación (layout). Form Spark usa una restricción basada en red para el posicionamiento de cada elemento FormItem. Además, el layout permite que las columnas y las filas sean muy dinámicas. Sus filas y columnas pueden crecer o reducirse en tiempo de ejecución para apoyar los diseños modernos de forma donde información, como texto de ayuda o validación de errores, pueden ser vistos bajo demanda. Form Spark tiene dos layouts, por defecto es horizontal y de esta forma acomoda los elementos y el segundo layout que es vertical, donde los elementos son posicionados verticalmente. Ambos layouts soportan columnas mientras sean definidas en pixeles así como también en porcentajes.

Form Spark permite configurar las opciones que pueden ser usadas para alinear un elemento a lo lardo de una línea base común, para marcar un elemento como requerido y listar elementos secuencialmente. Todas estas configuraciones son personalizables a través de la definición del skin. De esta forma, el estado del Form donde un elemento ha sido omitido o cuando está en un estado invalido puede ser personalizado mediante la modificación de la declaración del skin del Form o del FormItem. Puedes leer acerca del nuevo contenedor Form Spark y acerca de sus detalles leyendo la especificación de características en el sitio Open Source de Flex.

Para aprender más acerca del contenedor Form y sus API, por favor lee la especificación del Form Spark aquí.

Mejoras en Spark Image y BitmapImage

Flex 4 introduce el elemento grafico BitmapImage. Este es un elemento más ligero no skineable que puede ser usado para visualizar imágenes. En Flex 4.5 hemos mejorado el elemento grafico BitmapImage y agregamos el nuevo componente Image Spark.

Mejoras en BitmapImage

Ha sido mejorado para permitir la carga y presentación de imágenes remotas que son cargadas desde un sitio que puede ser o no de confianza (las restricciones normales de seguridad del Flash Player se aplican cuando se cargan recursos desde sitios que no son de confianza). Además, BitmapImage introduce nuevo soporte escalable. La propiedad recientemente introducida “scaleMode” puede ser configurada para estirar la imagen y llenar el área contenedora o mostrarla como en el modo de buzón. El modo de buzón permite que la imagen sea visualizada con el mismo aspecto que el original, sin escalar la imagen. BitmapImage también agrega una nueva propiedad “smoothingQuality” la cual puede ser usada para configurar el algoritmo de suavizado para la imagen usado cuando la propiedad “smooth” está habilitada. Por defecto, las imágenes son escaladas a la calidad del escenario. Cuando “smoothQuality” está establecida en un valor muy alto, un algoritmo de escala de varios pasos es usado resultando en una calidad de visualización más alta que la que podamos obtener con la calidad por default del escenario.

Y finalmente, BitmapImage en Flex 4.5 introduce una memoria cache de contenido que puede ser configurada para soportar el almacenamiento y cache de archivos de imagen remotos. Este tipo de cache es conveniente para presentar imágenes sin parpadeo en los escenarios donde las imágenes son rápidamente visualizadas, como cuando imágenes miniatura comienzan a ser navegadas a través de un componente List. Un cache de contenido puede ser asociado con una instancia de BitmapImage y configurado para administrar el tamaño del cache y controlar el comportamiento del cache en cuanto a la invalidación y el almacenamiento. La opción de configuración puede ser modificada para la carga de imágenes en cola y priorizar el orden. La adición del cache de contenido y el mecanismo de cola permite un mejor rendimiento de los archivos de imagen en aplicaciones construidas con Flex 4.5.

Presentando Spark Image

El nuevo componente skineable Image Spark está construido sobre la mejora del componente BitmapImage. Como tal, todas las mejoras del elemento BitmapImage como la escala, el smoothing, el cache, y el mecanismo de cola están disponibles en este componente también. La definición del skin de Image Spark permite la personalización de la presentación de los archivos de imagen cuando se estén cargando, cuando se ha terminado esta descarga, cuando es invalida o el archivo no ha sido encontrado y el imagen esta en un estado roto. Puedes leer más acerca de las mejoras de BitmapImage y el nuevo componente personalizable Image leyendo la especificación de características aquí.

Spark Formatters

El Flash Player 10.1 presento un nuevo set de nuevas API’s de globalización que brindan formato de la configuración regional de fecha y hora, números y moneda. Construido con estas API’s, Flex 4.5 agrega al namespace Spark un conjunto de formateadores nuevos. Estos Formatters formatearan los datos basados en la definición local del sistema operativo, por lo tanto proporciona de forma nativa el comportamiento de la configuración regional para el contenido de la aplicación.

La funcionalidad que brindan las API’S del Flash Player 10.1 están conducidas por la especificación local tal como se define por el sistema operativo. La liberación de Flex 4.5 brinda 3 Formatters que aprovechan la información local para formatear correctamente. Esto incluye CurrencyFormatter, NumberFormatter y DateFormatter. Puedes leer la especificación de los Spark Formatters en el sitio Open Source de Flex y aprender más acerca de sus propiedades, métodos y eventos utilizados por los Formatters recientemente agregados.

Además, han sido agregadas nuevas clases Sort y SortField. Bajo la capa, estas nuevas clases toman ventaja del Flash Player 10.1 para la comparación regional de Strings, números y el análisis y conversión de la moneda, así como de mayúsculas y minúsculas para manejar los caracteres y el filtrado de nueros de acuerdo a las reglas del lenguaje definidos por la configuración regional. Para aprender más acerca de las características de filtrado y ordenamiento recientemente introducidas en Flex 4.5, por favor lee esta especificación.

Spark Validators

Así como los Spark Formatters, Number y Currency Valodators han sido agregados y los cuales utilizan las API’s de globalización del Flash Player 10.1. Las nuevas clases NumberValidator y CurrencyValidator ahora validan de acuerdo a la configuración local definida por el sistema operativo. Este comportamiento es benéfico por múltiples razones incluyendo la inclusión de formatos de validación para números positivos y negativos, aceptando dígitos no europeos y actualizaciones de cambios en la configuración regional que se integran automáticamente en la aplicación. Para mas información sobre los Spark Validators, lee esta especificación.

Otros componentes y características de los nuevos componentes Spark

Aparte de los componentes Spark listados arriba, agregamos otros nuevos componentes y características en Flex 4.5

Esto incluye ha habilidad de especificar indicaciones textuales en el Spark TextInput, TextArea y ComboBox para usarlos en aplicaciones móviles y de escritorio. Esta mini-especificación sobre todos los detalles acerca de las indicaciones en Spark.
También, fue agregado un nuevo componente llamado Busy Indicator para su uso en aplicaciones móviles donde el componente puede ser usado para dar una indicación visual acerca de que la aplicación se encuentra en medio de una operación como una llamada de red o un cálculo de gran duración. Para leer más acerca del Busy Indicator, lee esta especificación.

Dos componentes skineables nuevos y que vale la pena mencionar son el Spark Module y el Spark SkinnablePopUpContainer. El Spark Module, se usa con frecuencia con el nuevo Spark ModuleLoader, y es un contenedor personalizable para crear un modulo. Los módulos son usados frecuentemente cuando se crean vistas de navegación o para traer módulos de interfaz de usuario separados. Para aprender más acerca del Spark Module y ModuleLoader lee la especificación aquí.

El Spark SkinnablePopUpContainer es un nuevo control que puede ser usado para personalizar la animación pop-up, desmontar y presentar datos de una ventana pop-up como una alerta o una ventana de dialogo para su uso en aplicaciones que pueden o no ser móviles. Los estados son usados como guía cuando la pop-up ha sido abierta o cerrada y el skin puede actualizar visualmente de acuerdo al estado en que se encuentre. Para información acerca de cómo declarar un skin y un SkinnablePopUpContainer, revisa la especificación.

Mejoras de texto y video en el SDK Flex 4.5

El framework Flex integra el Open Source Media Framework (OSFM) como el componente base para el Spark VideoPlayer. Así como Flex 4 integro el Text Layout Framework (TLF) como la librería de texto base utilizada en todos los componentes Spark de texto.

OSFM y el SDK Flex 4.5

La librería OSFM en Flex 4.5 ha sido actualizada para soportar OSFM 1.0. El OSFM media player esta en uso en el VideoPlayer de Flex 4.5. La integración de OSFM 1.0 provee el arreglo de errores así como agrega soporte para streaming por medio de HTTP. Tomando ventaja de esto en el VideoPlayer basta pasar como el valor de la propiedad “source” una dirección url que soporte transmisión por HTTP. Tú puedes aprender más acerca de la inclusión de OSFM 1.0 en Flex 4.5 leyendo esta especificación.

TLF y el SDK Flex 4.5

La liberación de Flex 4,5 soporta la siguiente versión de la librería TLF, TLF 2.0. Es la base del siguiente motor usado por todos los componentes de texto Spark, incluyendo TextInput, TextArea, RichText y RichEditableText. La siguiente liberación de TLF se enfoca en mejorar el rendimiento del texto en las aplicaciones Flex así como agregar algunas nuevas características como listas con viñetas, números y floats. Es importante notar que TLF 2.0 incorpora la reparación de rendimiento clave como la visualización de texto, desplazamiento e interactividad con grandes cantidades de texto. Algunos problemas de rendimiento los cuales ya han sido abordados para la visualización, desplazamiento e interactividad con grandes cantidades de texto. Para más información acerca de la integración de TLF 2.0 dentro de Flex 4.5, por favor leer esta especificación.

Mejoras en el compilador del SDK Flex 4.5

Seguir mejorando el compilador de Flex ha sido una gran parte de esta liberación. En el plazo de Flex 4.5 nos enfocamos en tres mejoras:

  • Reducir el consumo de memoria para todos los desarrollos
  • Reducir el tiempo de compilación para desarrollos completos e incrementales
  • Mejorar la vinculación lógica del RSL del compilador

La liberación de Flex 4.5 muestra mejoras en estas tres áreas. Con las optimizaciones recientes, proyectos medianos y grandes permitirán la reducción del consumo de memoria en hasta 20% durante la compilación completa y hasta una reducción de 20% en compilaciones incrementales.

Mejoras RSL

El paquete de RSLs (runtime shared libraries) del framework Flex dentro de librerías que están enlazadas y cargadas durante el arranque de la aplicación. Flex 4 convirtió las RSLs del framework Flex de modo que el compilador Flex las enlazara para su uso en aplicaciones Flex.

La liberación de Flex 4.5 agrega varias mejoras excitantes a la infraestructura de las RSL en Flex. Con el compilador de Flex 4.5, solo las RSLs que tienen verdaderas dependencias hacia el código de la aplicación serán enlazadas dentro de tu aplicación. Esto significa por ejemplo, que aplicaciones que no utilicen OSFM no incluirán enlaces ni descargaran la RSL de OSFM. De esta forma, proyectos de componentes Spark o MX garantizan solo enlazar los componentes y piezas de la arquitectura necesarios para ciertas partes del proyecto. Las mejoras del compilador Flex y su enlace de RSLs son cubiertos en esta especificación.

Además, en Flex 4.5 los módulos y su enlace RSL lógico han sido mejorados. Ahora, los módulos comprenderán cuando la aplicación padre o un modulo hermano ya ha sido cargado en RSLs de las cuales dependen. Es situaciones como esta, los módulos evitaran re-enlazar y cargar estas RSL requeridas. Hay opciones de configuración que el desarrollador puede usar para forzar un enlace a ciertos módulos si no quiere que el compilador cree estas dependencias por sí mismo. Como tal, Flex 4.5 introduce la habilidad para una aplicación, con la ayuda de sub-aplicaciones y módulos, para cargar un conjunto de RSLs que se necesiten en lugar de que la aplicación principal las cargue para todos.

Para aprender más acerca de esta característica, checa esta especificación.

A donde ir desde aquí

Con la adición de nueva funcionalidad móvil al framework así como mejoras en su núcleo, Flex ha madurado e incluye todas las piezas necesarias para desarrollar aplicaciones expresivas para web, escritorio o dispositivos móviles.

Este articulo esta publicado en Adobe Developer Connnetion (devnet) bajo licencia Creative Commons, escrito originalmente por Deepa Subramaniam, Product Manager en el equipo de Flex enfocada principalmente en el SDK Flex.