EXTRACTO DEL LIBRO_FLEX

Aplicaciones Ricas de Internet
Mundo Flex
1
1
Aplicaciones Ricas de Internet
La Web 2.0 nos ha traido nuevo trabajo a los desarrolladores Web, entre ellos,
el reemplazo de las clásicas páginas estáticas por un nuevo concepto conocido
como Aplicaciones Ricas de Internet o RIA (del inglés, Rich Internet Applications).
Flex es uno de los frameworks que generan este tipo de aplicaciones, por ello,
primero definamos qué son estas aplicaciones y qué las diferencian de las clásicas aplicaciones Web.
¿Qué son?
Las Aplicaciones Ricas de Internet pueden ser el término más fuerte de la Web
2.0 para los diseñadores y desarrolladores. Sin embargo, es sólo uno de los conceptos de la Web 2.0 y no debe confundirse como su sinónimo.
Entonces, una Aplicación Rica de Internet es un cruce entre las aplicaciones
Web y las de escritorio, que deriva en cierto comportamiento hacia el cliente, que
se comunica con el servidor sólo en casos necesarios. Además, implica superar
las limitaciones de HTML 4, por lo que se puede ofrecer todo tipo de controles
ricos y una nueva experiencia al usuario.
El término lo designó en 2002 la empresa Macromedia, en la actualidad
Adobe, creadora de la herramienta Flash. En ese momento, Macromedia anunciaba que con su plataforma Flash era posible crear una nueva experiencia de
uso en los sitios Web que no era posible con HTML y promovió el uso de este
nuevo concepto. Tuvieron que pasar varios años antes de que realmente se empezaran a utilizar estos conceptos y su plataforma Flex apareciera en el mercado.
Flex 4.5 - Carrizo, Firtman
Alfaomega
2
1- Mundo Flex
Si se engloban las características de los conocidos como clientes ricos
(aplicaciones de escritorio, como Microsoft Excel o Adobe Photoshop) y las de
los denominados clientes livianos (aplicaciones Web tradicionales) quedan dos
conjuntos.
El objetivo de las Aplicaciones Ricas de Internet es tomar las ventajas de los
clientes ricos y los clientes livianos para formar un conjunto nuevo que las englobe.
Características
De esta forma, las RIA, como se las suele conocer en forma abreviada,
engloban las siguientes características:
฀
Experiencia rica del usuario: implica hacer uso de nuevos conceptos
en la Web, como controles ricos de ingreso (selectores de fecha, deslizadores, ingreso de texto con formato), servicios de drag and drop y
evitar demoras al usuario en la utilización del sitio Web.
฀
Capacidad offline: permite que una aplicación Web siga funcionando
aunque se haya perdido conectividad con el servidor o con Internet. Por
supuesto, esto será posible en algunos casos; asimismo, si la conexión
se retoma, seguirá su uso normal.
฀
Productividad alta del desarrollador: ¡enhorabuena! Se acordaron de
nosotros, y los entornos de trabajo y las herramientas para desarrollar
aplicaciones Web evolucionaron hasta encontrarse, en la actualidad,
cercanas a la productividad en una aplicación de escritorio. Tendremos
capacidades drag and drop, desarrollo rápido de aplicaciones, capacidad de debugging, refactoring y otras soluciones que permitirán el
desarrollo de sitios Web de manera más eficiente.
฀
Respuesta: se acabaron las esperas para el usuario. Las aplicaciones
Web responden con rapidez y es posible interactuar con la aplicación,
aun cuando se espera una respuesta del servidor.
฀
Flexibilidad: los nuevos sitios Web permiten una interfaz flexible con
la posibilidad de modificar la apariencia, el contenido y los servicios
disponibles de una manera sencilla y rápida.
฀
Fácil de distribuir y actualizar: actualizar una RIA es tan simple como
publicar los nuevos archivos en el servidor. Incluso, hasta se podría actualizar con cientos de usuarios conectados.
฀
Fácil de administrar: no hay metodologías de instalación complejas,
DLL ni instaladores; asimismo, la complejidad de las metodologías de
instalación no es mucho mayor que la de cualquier aplicación Web
normal.
Alfaomega
Flex 4.5 - Carrizo, Firtman
Aplicaciones Ricas de Internet
3
En una RIA, el cliente adquiere un uso más intensivo, no sólo para pequeñas
validaciones. El browser también administrará el flujo de la aplicación, los módulos y la interacción con el servidor. Todas las comunicaciones al servidor no serán
invocadas en forma directa por el clic del usuario, sino por el código de cliente.
Estas peticiones al servidor se harán detrás de escena, o sea, el usuario no será
consciente de la petición, a no ser que se active de manera explícita un cartel que
indica !"#!$%&.
Tipos de aplicación
Hay dos tipos de Aplicaciones Ricas de Internet: las RIA completas y las RIA
embebidas.
Las primeras son aplicaciones en las que se utiliza por completo el nuevo
modelo RIA. Manejan una o dos direcciones (URL o Unique Resource Location)
para todo el sitio Web. Escapan al clásico concepto de página Web, para convertirse en aplicación Web.
Las RIA embebidas, en realidad, son una mezcla entre las aplicaciones
clásicas y las Web 2.0. Siguen comportándose como páginas Web normales,
con hipervínculos interconectados, hasta llegar a un punto en el que, por funcionalidad, se convierten en una RIA, mejorando la experiencia del usuario en
ese punto.
Ventajas
Las ventajas son muchas y algunas de ellas ya se mencionaron. La más importante es la posibilidad de ofrecerle al usuario una experiencia más rica con
el sitio Web. Es factible ofrecer controles de trabajo y servicios nuevos, como
la posibilidad de autoguardar la información. ¿Quién no escribió alguna vez un
e-mail durante 20 minutos para que se cierre la página, se apague el equipo o, al
enviarlo, el servidor indique que se cerró la sesión y se debe empezar de nuevo?
En el presente, con las Aplicaciones Ricas de Internet, se puede ofrecer el servicio que hizo famoso a Microsoft Word: la posibilidad de autoguardar lo que se va
escribiendo cada algunos segundos.
También se puede elegir la manera en que se desea realizar una acción en
el sitio Web, mediante un clic en un vínculo, presionando un atajo de teclado o
arrastrando y soltando un objeto.
Además, se redujo la transferencia de datos desde el servidor hacia el cliente, lo que ahorra tiempo de carga de la página, cantidad de bytes transferidos y
tiempo de navegación total.
Flex 4.5 - Carrizo, Firtman
Alfaomega
4
1- Mundo Flex
Es así que está comprobado que la tasa de conversión aumenta en grado
notable cuando se trabaja con aplicaciones ricas. ¿A qué se llama tasa de conversión? Se trata de una acción del usuario que implica un hito en el sitio Web,
por ejemplo, una suscripción, una compra o el registro del usuario en el sitio.
Hasta se comenta a modo de chiste (con su parte de verdad) que el usuario ahora
tiene menos tiempo para arrepentirse.
Desventajas
Las desventajas de las RIA son menos conocidas que las ventajas, pero es importante tenerlas presentes.
Capacidad de uso
El usuario hace, por lo menos, 10 años que navega por Internet y eso implica que
sabe cómo utilizar un sitio Web 1.0 sin problemas. Sabe que debe ir haciendo clic
en hipervínculos, que debe esperar cada recarga, sabe completar un formulario
con campos de texto y listas de selección y está acostumbrado al famoso botón
'$()!". Ahora bien, ¿sabrá utilizar el nuevo sitio Web 2.0 enriquecido?
Es necesario hacer un estudio de capacidad de uso mucho más extensivo
que antes o, incluso, educar al usuario acerca de cómo utilizar la aplicación.
El botón Atrás del navegador
Todos conocemos el concepto de historial del navegador. Con cada clic en el botón correspondiente se puede retroceder y volver de a una página. Sin embargo,
ahora ya no existe el concepto de página, sino que cada clic, en realidad, puede
conllevar cualquier tipo de acción en el sitio o la aplicación Web, como abrir un
menú o borrar una foto, y siempre nos encontramos en la misma página o URL (si
lo pensamos con el viejo sistema de trabajo).
Es así que en los primeros sitios RIA el botón *+",- hacía salir al usuario de
la aplicación, a pesar de que hubiera realizado 100 clics o más en la misma URL.
Favoritos o marcadores
El uso de favoritos y marcadores se hizo muy común entre los usuarios y nos
permite agregar cualquier información que vemos a nuestra lista. Ahora bien,
cuando ingresamos de nuevo en ese favorito, pretendemos ver la misma información que teníamos en pantalla cuando lo agregamos. ¿Pero si siempre es la
misma URL física?
Este problema también tiene consecuencias cuando queremos enviarle la
dirección de lo que vemos a un amigo por e-mail, mensajería instantánea o red
Alfaomega
Flex 4.5 - Carrizo, Firtman
Entonces, ¿qué es Flex?
5
social. Nuestra intuición de usuarios Web 1.0 indica que alcanza con copiar y
pegar la dirección que vemos en el navegador. En Web 2.0 parece que no, o por
lo menos no al principio.
Manejo de errores
Otra de las costumbres (malas, por cierto) que trajo la Web 1.0 fue que el usuario
perciba directamente los errores del servidor: 404 cuando la página no existe,
500 cuando el servidor tiene un problema interno, etcétera. No obstante, si ahora
las peticiones al servidor se hacen detrás de escena y los usuarios no ven su resultado directamente, ¿cómo se enteran de que se produjo un error?
Ahí viene nuestro trabajo como programadores para capturar y actuar ante
errores que surjan en el servidor, que antes, feliz y lamentablemente, no podíamos manejar.
¿Qué no es Flex?
Para comprender mejor qué es Flex, primero listemos todas aquellas cosas que
no es y que normalmente generan confusión en el mercado.
฀
Flex no es un lenguaje de programación.
฀
Flex no es un entorno de trabajo (IDE).
฀
Flex no es un lenguaje de marcado.
฀
Flex no es una plataforma de servidor.
฀
Flex no es una competencia para Flash.
Entonces, ¿qué es Flex?
Adobe Flex es un framework de código abierto (open source) que permite crear
Aplicaciones Ricas de Internet (RIA) basadas en el formato Adobe Flash. Con
framework hablaremos de un conjunto de utilidades, conjunto de clases y controles y prácticas por utilizar.
Una aplicación desarrollada con este framework puede ejecutarse en un
navegador Web a partir del Adobe Flash Player, o como aplicación de escritorio
utilizando la plataforma AIR (Adobe Integrated Runtime).
El formato SWF (Shockwave Flash) es un formato binario creado por
Macromedia, quien era entonces dueña de la herramienta Flash y el Flash Player,
quien dio pie al surgimiento de las Aplicaciones Ricas de Internet y permitió durante muchos años sobrepasar las limitaciones del HTML en el navegador Web.
Flex 4.5 - Carrizo, Firtman
Alfaomega
6
1- Mundo Flex
Podemos decir que Flex es una forma alternativa de crear contenidos en formato SWF para usar en nuestras aplicaciones Web, ya que hasta su aparición esto
sólo era posible utilizando el entorno de desarrollo comercial Flash Professional.
Flex no es un lenguaje de programación, aunque las aplicaciones que desarrollemos sí deberán ser compiladas, proceso en el cual el código que utilice
este framework se traduce al lenguaje ActionScript para luego formar un archivo
binario de extensión SWF que puede ser reproducido con Flash Player. Esto hace
posible ejecutar el mismo archivo en Windows, Mac o Linux sin mayores complicaciones, ya que el reproductor es quien se encarga de la compatibilidad para
cada una de las plataformas. De la misma forma, Adobe AIR (del cual hablaremos
más adelante) permite que la aplicación sea instalable y pueda acceder a determinados recursos adicionales del sistema.
El concepto de framework define una arquitectura que provee un nivel más
abstracto para trabajar sobre algún lenguaje de programación. En este caso,
ActionScript simplifica la creación de aplicaciones robustas y de cierto nivel de
complejidad. Al ser de código abierto, el código fuente de Flex está disponible
de forma gratuita para adaptarlo o mejorarlo según los requerimientos, así como
también existen muchas comunidades de usuarios alrededor del mundo que colaboran corrigiendo errores y añadiendo funcionalidades que, posteriormente,
pueden formar parte de las próximas versiones del framework, previa aprobación
por parte de Adobe.
El Framework
El Kit de Desarrollo de Flex (o SDK por sus siglas en inglés) está compuesto por
un conjunto de clases del lenguaje ActionScript 3.0: una librería de componentes
visuales como botones, grillas de datos y paneles, entre otros, que pueden ser
manipulados mediante un lenguaje de marcado, denominado MXML; el compilador necesario para exportar las aplicaciones desarrolladas con Flex a formato
SWF; y un depurador que nos permite probar y detectar errores en el código
mientras estamos desarrollando la aplicación.
Para desarrollar aplicaciones Flex podemos utilizar dos lenguajes:
฀
MXML: es un lenguaje de marcado declarativo basado en XML, similar
al HTML en algunos aspectos, utilizado principalmente para el maquetado de los elementos visuales.
฀
ActionScript 3: Lenguaje de programación orientado a objetos, muy similar a JavaScript, ya que se basa en el mismo estándar (ECMAScript).
Para crear aplicaciones Flex no es necesario comprar ninguna licencia ni
herramienta; lo podemos hacer de forma gratuita, ya que el código MXML y
ActionScript pueden ser editados utilizando cualquier editor de texto, como el
Alfaomega
Flex 4.5 - Carrizo, Firtman
Historia de Flex
7
Bloc de Notas de Windows, y compilados con las herramientas incluidas en el
SDK gratuito de código abierto.
No obstante, algunos entornos de desarrollo disponibles simplifican estos
procesos, los cuales analizaremos más adelante.
Historia de Flex
Flex 1.0
Flex fue lanzado por la empresa Macromedia en marzo de 2004 como una biblioteca de etiquetas para J2EE (Java Enterprise Edition) que compilaban los tags de
Flex en el código JSP, dando como resultados contenidos Flash generados on
the fly, durante la ejecución de la página.
En las versiones 1.0 y 1.5 el framework distaba bastante de lo que tenemos
disponible hoy en día: el código se compilaba en el servidor, para lo cual era
necesario comprar licencias especiales de costos muy elevados, lo que hacía a
Flex una tecnología exclusiva para las grandes aplicaciones de negocios. Cada
licencia de servidor, incluía cinco licencias para Flex Builder, el entorno de desarrollo exclusivo de Flex, basado en ese entonces en el motor de Macromedia
Dreamweaver.
Flex 2.0
Con la adquisición de Macromedia por parte de Adobe, en octubre de 2005,
se lanza la primera versión Alpha de Flex 2.0, siendo éste el primer producto
de Macromedia que surgía bajo la marca de Adobe. La versión final de Flex 2.0
fue lanzada en junio de 2006 acompañando la salida de una nueva versión de
ActionScript, la versión 3.0, y el reproductor Flash Player 9, requerido para ejecutar las aplicaciones generadas con el nuevo lenguaje.
A partir de esta versión, Adobe cambió radicalmente la forma de trabajar
con Flex. Surge el concepto de Flex Framework y se pone a disposición del
público el SDK gratuito, que incluye un compilador, que permite generar archivos estáticos en formato SWF en nuestro equipo de desarrollo sin necesidad de
procesamiento en el servidor, y las librerías de componentes de Flex. A partir
de este momento es posible crear aplicaciones basadas en Flex sin necesidad
de comprar ninguna licencia y se quita a Java como plataforma exclusiva para
trabajar en el servidor. Ahora es posible trabajar con PHP, Java, .NET o cualquier
otra tecnología de servidor.
Flex 4.5 - Carrizo, Firtman
Alfaomega
8
1- Mundo Flex
Se lanza también una nueva versión del entorno de desarrollo Flex Builder,
basada en Eclipse y separada en dos versiones: Estándar y Profesional, incluyendo en el segundo caso una librería de componentes de gráficos. Eclipse es
un entorno popular en el ámbito del desarrollo y cuenta con un gran número de
plugins, componentes adicionales que permiten añadir funcionalidades, como
soporte para otros lenguajes, clientes FTP, integración con sistemas de control de
versiones o gestor de base de datos, entre otras tantas herramientas. De hecho,
Flex Builder puede ser incorporado al entorno Eclipse como un plugin.
Los servicios que se encontraban disponibles en 1.X utilizando la tecnología de servidor pasaron a formar parte de nuevos productos llamados Flex Data
Services, que permitían crear servicios de sincronización y manejo de datos entre
el servidor y la aplicación Flex. Sin embargo, estas tecnologías ya no son requerimiento para utilizar el framework.
Flex 3.0
En junio de 2007 surge la primera beta pública de Flex Framework 3, acompañado de una nueva versión del entorno de desarrollo Flex Builder 3. A partir de esta
versión, el framework pasó a formar parte del proyecto open source de Adobe.
El código fuente y toda la documentación del SDK pueden ser descargados para
realizar adaptaciones o corregir errores que pueden ser reportados a Adobe mediante un sistema de seguimiento que también se puso a disposición del público.
En comparación con la versión 2, Flex 3 no introdujo cambios significativos
en el framework. Más bien, las mejoras fueron notorias en el compilador, ya que
se redujo el tiempo de compilación y se optimizó el peso de los archivos reunidos utilizando una propiedad llamada Persistent Framework Caching (caché
persistente de framework). Éste se encarga de guardar las librerías de Flex en un
único archivo externo que puede ser almacenado en la memoria caché del navegador al ingresar por primera vez a la aplicación, por lo que en futuros accesos
no es necesario volver a descargarlo. Si bien se realizaron algunas mejoras en
los componentes, se incluye uno nuevo denominado Advanced DataGrid, que
ofrece una versión avanzada de la grilla de datos ya existente en Flex.
Esta versión también incorpora soporte nativo para trabajar con AIR (Adobe
Integrated Runtime), la plataforma de Adobe que permite exportar aplicaciones
RIA como las de escritorio. Flex Builder 3 también incluye un asistente para la
creación y exportación de proyectos AIR.
En cuanto a la integración con otros programas, aparece Flash CS3
Components Kit, un agregado para Flash que permite exportar componentes
personalizados para utilizar en Flex. Asimismo, Flex Builder 3 ofrece un asistente
para importar contenidos generados en Flash para facilitar el diseño de interfaces.
La versión final de Flex 3 no se vio hasta febrero de 2008.
Alfaomega
Flex 4.5 - Carrizo, Firtman
Historia de Flex
9
Flex 4
A diferencia de sus antecesores, Flex 4 (denominado por su nombre en código
Gumbo) fue creado teniendo en cuenta tres objetivos principales que surgieron
de investigaciones y análisis de casos a fin de mejorar la productividad:
Diseño en mente: es común encontrar una similitud entre las diversas
aplicaciones Flex que existen actualmente en la Web. Esto se debe a que muchos desarrolladores prefieren utilizar el estilo base de las anteriores versiones
de Flex, denominado Halo, a la hora de personalizar el look & feel de sus aplicaciones. Según estudios realizados por Adobe, sólo el 22% de quienes utilizan Flex estilizan realmente sus aplicaciones, mientras que el 46% sólo hacen
algunos ajustes.
Flex 4.x permite una mejor integración entre el diseñador y el desarrollador,
incorporando la posibilidad de “importar” el diseño, mientras que el desarrollador
se encarga de la lógica. Algunos de los aspectos que se tienen en cuenta para
este punto son:
฀
Proveer una arquitectura de componentes y skinning (estilización) fácil
de implementar.
฀
Mejorar el manejo de estados, efectos y modelado de la aplicación.
฀
Los componentes de Flex 3 deben poder coexistir con los componentes de Flex 4.x.
Por lo cual, Flex 4.x ofrece un nuevo modelo de estados, componentes,
efectos y transiciones que se adaptan a la arquitectura de la aplicación y facilitan
su utilización.
Productividad para el desarrollador: Flex debe brindar características similares a las de otros lenguajes, cumpliendo los requisitos solicitados por la mayoría de los programadores. Se debe optimizar la performance del compilador.
Se mejora la vinculación interna de datos, añadiendo la vinculación de 2-vías
(más conocido como 2-way data binding) que permite el intercambio mutuo de
información entre componentes.
Evolución del framework: Flash Player 10 introduce importantes mejoras
que deben ser contempladas en el framework de Flex para optimizar los componentes. Flex 4.x incorpora componentes mejorados de texto con soporte bidireccional, requerido para algunos idiomas, y uno nuevo de video. No obstante,
también soporta las nuevas características de AIR 2.
Teniendo en cuenta estos pilares, en los próximos capítulos repasaremos
cada una de las características del framework.
Flex 4.5 - Carrizo, Firtman
Alfaomega
10
1- Mundo Flex
¿Dónde encaja Flex en la arquitectura de un
sitio Web?
La aplicación Flex
En un modelo multicapa Flex representa la capa de presentación, encargándose
de dar formato y mostrar en pantalla la información generada por la lógica de su
programación. Como cualquier aplicación que está basada en Flash, es posible
crear contenidos que interactúen con el servidor de manera asincrónica, sin necesidad de recargar el contenido de la página, enviando y recibiendo información
a través de diversos protocolos que lo sitúan como una mejor alternativa ante
tecnologías HTML como PHP, ASP.NET o Java ya que reduce, en muchos casos,
el tráfico requerido para la transferencia de datos. El archivo SWF se almacena en
la memoria caché del navegador, evitando su descarga cada vez que el usuario
accede a la aplicación.
Publicación de contenidos
En el proceso de compilación de una aplicación Flex, el código MXML se traduce en clases de ActionScript que, mediante ese proceso, se convierten en uno
o más archivos binarios de extensión SWF que se alojan en el servidor Web, y
son embebidos en archivos HTML que el usuario accede mediante su navegador
Web, donde al detectar contenidos en formato SWF los reproducirá utilizando el
plugin Adobe Flash Player (Fig. 1-1).
¿Dónde encaja Flex en la tarea de un
diseñador?
Flex es una tecnología destinada principalmente a la parte lógica del desarrollo.
Podríamos definirlo como un esqueleto sobre el cual se colocarán los diferentes
recursos que componen la aplicación hasta darle la forma estipulada. En las RIA
es crítico el diseño de la interfaz y la interactividad, y es el punto donde entra en
juego el rol de los diseñadores.
El diseñador es una parte vital en la creación de RIA. Debe interpretar el
trabajo solicitado por el cliente aplicando reglas de usabilidad e interacción, definiendo el comportamiento de cada píxel de la pantalla frente a los usuarios. Estas
decisiones deben ser trasladadas al equipo de desarrollo, por lo que el flujo de
trabajo en un equipo interdisciplinario es constante.
Alfaomega
Flex 4.5 - Carrizo, Firtman
¿Dónde encaja Flex en la tarea de un diseñador?
11
En el flujo de trabajo clásico el diseñador crea la interfaz gráfica de la aplicación utilizando las herramientas de diseño como Photoshop, Illustrator o
Fireworks, definiendo cada estado posible y su comportamiento ante la interacción de los usuarios. Una vez finalizado su trabajo, la composición es desglosada
en pequeños recursos visuales y enviados al equipo de programación, donde se
aplicará la lógica necesaria para finalizar el proyecto. Si bien parece sencillo y
rápido, esta tarea a veces puede ser un poco tediosa si surgen modificaciones en
el transcurso del trabajo, debiendo retroceder en el flujo, creando tareas cíclicas
que se repiten una y otra vez hasta finalizar. La figura 1.2 muestra el flujo de trabajo entre diseñador y programador.
El diseñador debe conocer los limites y posibilidades de Flex para poder
establecer las interacciones que se van a utilizar durante la aplicación. Debe consultar con los desarrolladores la posibilidad y restricciones para alcanzar los objetivos, ya que una aplicación excesivamente compleja en interactividad puede
complicar las cosas para el equipo de desarrollo.
Fig. 1-1. Proceso de compilación y publicación de una aplicación Flex.
Flex 4.5 - Carrizo, Firtman
Alfaomega
12
1- Mundo Flex
Fig. 1-2. Flujo de trabajo diseñador-programador.
¿Cuándo utilizar Flex en un proyecto?
Al surgir el concepto de aplicaciones Web (a diferencia de la clásica página
Web), los desarrolladores se enfrentaron con el desafío de crear sitios que además de mostrar información en pantalla, lo hagan mediante una interfaz de usuario (comúnmente llamada UI, del inglés User Interface). Ante este desafío, las aplicaciones basadas en Flash son una buena alternativa, permitiendo crear diseños
abstractos e interactuando con servicios Web del lado del servidor con todo el
potencial de ActionScript 3.
Flex fue concebido para desarrollar aplicaciones orientadas a datos mediante componentes preestablecidos como grillas de datos, listas o calendarios
que pueden ser personalizados para ser utilizados en diversos contextos. Los
componentes de Flex reducen considerablemente los tiempos de desarrollo, evitando a los programadores la necesidad de codificar decenas, cientos o miles de
líneas, dejándoles a cargo la lógica de la aplicación que se encargará de obtener,
modificar o transportar los datos.
¿Para qué se utiliza?
Flex se utiliza para crear sitios Web altamente interactivos, aplicaciones Web expresivas y en las que deben publicarse datos provenientes de alguna fuente de
información.
Alfaomega
Flex 4.5 - Carrizo, Firtman
Arquitectura de una aplicación Flex
13
Podemos hacer una breve enumeración de los casos de uso típicos de aplicaciones Flex:
฀
Visualización de datos: aplicaciones que obtienen datos de una o más
fuentes de información y los dispone en una interfaz interactiva.
฀
Configuración de catálogos: permiten personalizar un producto publicado mediante un asistente que indica los pasos que se han de seguir.
฀
Autoservicio: de la misma forma que un catálogo, pero orientado a la
información que el usuario puede modificar y guardar.
฀
Recolección de datos: formularios de ingreso de datos interactivos,
que incluyen validaciones sofisticadas y estructuras que rompen la disposición normal de un formulario Web.
Esta enumeración no es excluyente, puede haber muchos otros casos en
los que Flex represente una buena alternativa.
Arquitectura de una aplicación Flex
Las aplicaciones Flex están constituidas por un conjunto de archivos de diversos formatos que se conjugan en un único archivo SWF durante el proceso de
compilación del proyecto. Antes de comenzar con un nuevo proyecto Flex debemos sentar las bases sobre las cuales vamos a trabajar con los archivos que la
componen, creando una estructura modular y escalable que se pueda adaptar al
futuro crecimiento de la aplicación.
En la primera etapa del desarrollo de una nueva aplicación debemos tener
en cuenta los patrones de diseño que podemos emplear según la estructura que
vamos a utilizar. Los patrones de diseño son modelos de organización que plantean soluciones ante problemas típicos de programación. Haciendo uso de los
patrones podemos facilitar el proceso de montaje de nuestra aplicación.
Dentro de los patrones de diseño, uno de los modelos más utilizados con
Flex es el MVC (Model-View-Controller) que separa las capas de contenidos,
vista y controlador en contextos claramente definidos. Este patrón permite
crear componentes reutilizables, ya que modificando únicamente la capa de
elementos visuales podremos cambiar el aspecto manteniendo la lógica (programación) intacta.
En un modelo MVC las capas se componen de la siguiente manera:
฀
Modelo: representa los datos que serán utilizados por la aplicación.
Pueden estar almacenados en archivos o bases de datos indistintamente. Todos los datos representan al modelo.
Flex 4.5 - Carrizo, Firtman
Alfaomega
14
1- Mundo Flex
฀
Vista: es la capa visible por el usuario; la que compone la interfaz de
usuario. En la capa visual se muestran los datos almacenados en el modelo, formateados según el diseño. Flex facilita la creación de la capa
de vista con una variedad de componentes visuales.
฀
Controlador: se encarga de la lógica de negocios de la aplicación. No
necesariamente tiene que conocer la existencia del modelo y de la vista,
sin embargo, ambas se ejecutarán sobre el controlador.
De forma nativa, Flex cuenta con distintos componentes que representan
cada una de las capas del modelo MVC: componentes visuales que permiten
mostrar datos en pantalla, como .!+!/")%, 0"112)13 o 4)-+; componentes
que constituyen la capa modelo como 5&%16 o *""!7 &6618+)&$; y componentes que funcionan como controlador conectando con servicios remotos
como 900:;1"()81 o <1=&+1>?@18+.
Aplicaciones modulares
Una aplicación Flex puede ser fragmentada en diversos archivos SWF llamados
módulos que pueden ser utilizados únicamente dentro de una o más aplicaciones Flex. Curiosamente no pueden ser ejecutados de forma independiente.
La utilización de módulos en la aplicación tiene una serie de beneficios en
el producto final:
฀
Reduce el tiempo de carga inicial: los módulos no se descargan hasta
su utilización. Si durante el ciclo de vida de la aplicación no son requeridos tampoco serán descargados.
฀
Reduce el peso del archivo SWF: además del tiempo de carga, la exclusión de los módulos del archivo principal también reducen el peso.
฀
Encapsulación de componentes: los diferentes fragmentos de la aplicación pueden ser separados en distintos módulos; además, pueden
ser reutilizados en diferentes proyectos.
En el capítulo 2 nos introduciremos por completo en el framework y los elementos que componen una aplicación Flex, mientras que en el capítulo 3 veremos los componentes que ofrece para crear la interfaz visual.
Productos, entornos y herramientas
Los archivos que componen una aplicación Flex pueden ser generados utilizando
cualquier editor de texto plano, como el Bloc de Notas en Windows; sin embargo,
es común manejar entornos de desarrollo integrados (también denominados IDE)
para ayudar a nuestro trabajo.
Alfaomega
Flex 4.5 - Carrizo, Firtman
Productos, entornos y herramientas
15
En la actualidad existen numerosas aplicaciones para la creación y manipulación de proyectos Flex aunque, por obvias razones, las soluciones de Adobe,
como Adobe Flash Builder, son las que más soporte brindan sobre cada aspecto
del desarrollo sobre Flex.
Amethyst
Al momento de escribir este libro, el proyecto Amethyst se encuentra en la beta. Se trata de un plugin gratuito para el entorno Visual
Studio, de Microsoft, que añade soporte para la creación de proyectos Flex y AIR. Para quienes programan en ASP.NET o están
familiarizados con este entorno puede resultar interesante disponer del soporte de código IntelliSense para ActionScript, así como
opciones de refactoring, que permiten realizar cambios de forma
automatizada en el código fuente de nuestra aplicación.
Amethyst puede ser
descargado desde el
sitio Web de la empresa
#&&A#6BDE/6:F.
En comparación con el resto de los entornos alternativos a los de Adobe,
Amethyst es el único, hasta el momento, que provee una vista en modo diseño,
logrando ser una buena alternativa para quienes desean tener una perspectiva
aproximada del resultado a la hora de desarrollar.
FDT
Al igual que Flash Builder, FDT está basado en el entorno Eclipse, lo que hace
que tenga características similares. No obstante, este plugin ofrece soporte mejorado para el trabajo con código ActionScript y Flex, gráficos de dependencias
de clases, y vistas de paquetes de clases. También incluye un potente depurador
propio para detectar y corregir los errores.
Este entorno es comercial, sin embargo, desde el sitio Web se puede descargar la última versión para probarla por 30 días: #&&A#6BC 9!# .
FlashDevelop
Si bien es un entorno pensado primeramente para Flash, de a poco se incorporaron plugins que permiten trabajar con código MXML de Flex, hasta que en la
versión 3 se incorporó finalmente el soporte integrado para código Flex. Se trata
de uno de los entornos más utilizados por los programadores de ActionScript,
aunque no dispone de una vista en modo diseño, FlashDevelop brinda un amplio soporte de código y depuración, y se integra automáticamente con Flash
Professional. También ofrece soporte para código XML, HTML, PHP, JavaScript
y CSS.
Flex 4.5 - Carrizo, Firtman
Alfaomega