Flex consigue interfaces de usuario ricas en contenidos, vistosidad, efectos y usabilidad, dejando muy atrás las tradicionales páginas web, por mucho JavaScript y muchas hojas de estilo que se apliquen. ¿Y qué ventaja ofrece con respecto a AJAX?. Bueno, AJAX es una tecnología muy importante y extendida, siendo usada por los principales actores de Internet, como Google. Ejemplos de uso de AJAX es Google Calendar, Google Docs (donde tienes un Word y Excel online) o Google Reader. AJAX es una evolución de la tradicional web, pero acarreando los problemas tradicionales. El principal de estos problemas es la incompatibilidad entre navegadores.
Flex utiliza un plugin de Flash que funciona en cualquier navegador: Internet Explorer, Firefox, Opera... Esto también implica que se puede ejecutar en cualquier plataforma: Windows, Linux, MacOS X... No hay que hacer nada especial para cada navegador, ya que el propio plugin lo hace todo.
¿Y qué se puede hacer con Flex?. Pues prácticamente de todo: interfaces ricas y espectaculares, gestión de xml, webservices (a nivel de cliente y de servidor), acceso a bases de datos, elementos multimedia, aplicar gráficos estadísticos profesionales, integración con sistemas Java, .NET, AJAX, etc.
Lo mejor de todo es que el framework ha sido diseñado para optimizar al máximo la velocidad de ejecución, por lo que podrás disfrutar de complejas y espectaculares aplicaciones internet ricas (RIA), sin merma en el proceso, y con un rendimiento extraordinario.
¿Qué se necesita para empezar a desarrollar con Flex?. Bueno, el primer paso es descargarte Flex Builder, desde la página de Adobe (ver enlaces al final de artículo), junto con el SDK. Este es un entorno de desarrollo muy sencillo y versátil, donde podrás empezar a crear tus aplicaciones rápidamente, pues contiene un entorno visual. Esto significa que puedes dibujar tus interfaces arrastrando controles a la ventana de trabajo, y establecer propiedades en tiempo de diseño.
Entorno de Flex Builder
Una primera aplicación en Flex
Flex es un lenguaje que extiende otro lenguaje utilizado en Flash: Action Script (versión 3), lo que significa que tendremos a nuestra disposición también las capacidades de Flash. Además, se añade la posibilidad de combinar este lenguaje con un nuevo lenguaje: MXML. Este lenguaje está basado en tags XML.Cuando uno accede a Flex Builder y comienza a dibujar los controles en la ventana de trabajo, cuando accede a la pestaña de código, observará que todo lo que establece en diseño se está registrando en el código XML que está generando. Por defecto, Flex Builder utiliza el lenguaje MXML.
Para el ejemplo, vamos a pintar una ComboBox que contenga algunos países. Cuando el usuario selecciona un país, visualizará la selección con sus detalles.
El código generado es el siguiente (habría que omitir los tags 'br'):
Como puede apreciarse, es un fichero XML con un lenguaje particular, cuyos tags tienen el prefijo 'mx'.
El tag 'mx:application' define las propiedades del marco de ventana. Es decir, el espacio físico donde se ejecutará la aplicación, y el cual contendrá los componentes y/o controles de la aplicación. Podría decirse que es el contenedor principal de la aplicación. Propiedades a comentar:
- layout: establece el tipo de distribución de los controles en el contenedor. El valor 'absolute' permite colocar los controles en coordenadas x,y absolutas.
- fontfamily: Define el tipo de letra por defecto para todos los controles contenidos.
- fontweight: Define el tipo de grosor de letra por defecto para todos los controles contenidos.
- fontsize: Define el tamaño de letra por defecto para todos los controles contenidos.
Se definen también los detalles de los bordes de los controles, así como los colores de fondo y el tipo de gradiente para el relleno.
El tag 'mx:Script' Define un espacio de código para ActionScript. En este caso se definen dos variables: 'countries' y 'selectedItem'.
La variable 'countries' es un array o matriz que contendrá el texto y el valor de los datos contenidos en el ComboBox.
La variable 'selectedItem' contendrá el objeto seleccionado en la combo.
El tag 'mx:Label' define una etiqueta de texto. En este caso, será la etiqueta 'País:' que aparece junto a la ComboBox.
El tag 'mx:ComboBox' crea una lista desplegable. El atributo 'dataProvider' vincula la variable 'countries', con lo que agrega los elementos de la variable a la combo. El atributo 'close' asocia a este evento (al seleccionar y cerrar la lista desplegable), la capacidad de asignar a la variable 'selectedItem' el elemento seleccionado.
El tag 'mx:VBox' define un contenedor interno, que a su vez contendrá otros controles. En este caso, habrá un texto y dos etiquetas, las cuales visualizarán los detalles del elemento seleccionado en la ComboBox.
Enlaces de interés:
Información: http://www.adobe.com/es/products/flex/?promoid=BINV
Ejemplos: http://www.adobe.com/devnet/flex/?tab:samples=1
Descarga FlexBuilder (previo registro gratuito): https://www.adobe.com/cfusion/tdrc/index.cfm?product=flex
MadeInFlex (Lugar especializado en Flex en castellano): http://www.madeinflex.com
