Aplicaciones Ricas de Internet 1

Flex 4.5 - Carrizo, Firtman Alfaomega

Mundo Flex
1
Aplicaciones Ricas de Internet
La Web 2.0 nos ha traido nuevo trabajo a los desarrolladores Web, entre ellos,
el reemplazo de las clsicas pginas estticas por un nuevo concepto conocido
como Aplicaciones Ricas de Internet o RIA (del ingls, Rich Internet Applications).
Flex es uno de los frameworks que generan este tipo de aplicaciones, por ello,
primero denamos qu son estas aplicaciones y qu las diferencian de las clsi-
cas aplicaciones Web.
Qu son?
Las Aplicaciones Ricas de Internet pueden ser el trmino ms fuerte de la Web
2.0 para los diseadores y desarrolladores. Sin embargo, es slo uno de los con-
ceptos de la Web 2.0 y no debe confundirse como su sinnimo.
Entonces, una Aplicacin 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 slo en casos necesarios. Adems, 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 trmino lo design en 2002 la empresa Macromedia, en la actualidad
Adobe, creadora de la herramienta Flash. En ese momento, Macromedia anun-
ciaba 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 aos antes de que realmente se em-
pezaran a utilizar estos conceptos y su plataforma Flex apareciera en el mercado.
1- Mundo Flex 2
Alfaomega Flex 4.5 - Carrizo, Firtman
Si se engloban las caractersticas 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.
Caractersticas
De esta forma, las RIA, como se las suele conocer en forma abreviada,
engloban las siguientes caractersticas:
Experiencia rica del usuario: implica hacer uso de nuevos conceptos
en la Web, como controles ricos de ingreso (selectores de fecha, des-
lizadores, ingreso de texto con formato), servicios de drag and drop y
evitar demoras al usuario en la utilizacin del sitio Web.
Capacidad ofine: permite que una aplicacin 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 conexin
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 aplicacin de escritorio. Tendremos
capacidades drag and drop, desarrollo rpido de aplicaciones, capa-
cidad de debugging, refactoring y otras soluciones que permitirn el
desarrollo de sitios Web de manera ms eciente.
Respuesta: se acabaron las esperas para el usuario. Las aplicaciones
Web responden con rapidez y es posible interactuar con la aplicacin,
aun cuando se espera una respuesta del servidor.
Flexibilidad: los nuevos sitios Web permiten una interfaz exible con
la posibilidad de modicar la apariencia, el contenido y los servicios
disponibles de una manera sencilla y rpida.
Fcil de distribuir y actualizar: actualizar una RIA es tan simple como
publicar los nuevos archivos en el servidor. Incluso, hasta se podra ac-
tualizar con cientos de usuarios conectados.
Fcil de administrar: no hay metodologas de instalacin complejas,
DLL ni instaladores; asimismo, la complejidad de las metodologas de
instalacin no es mucho mayor que la de cualquier aplicacin Web
normal.
Aplicaciones Ricas de Internet 3
Flex 4.5 - Carrizo, Firtman Alfaomega
En una RIA, el cliente adquiere un uso ms intensivo, no slo para pequeas
validaciones. El browser tambin administrar el ujo de la aplicacin, los mdu-
los y la interaccin con el servidor. Todas las comunicaciones al servidor no sern
invocadas en forma directa por el clic del usuario, sino por el cdigo de cliente.
Estas peticiones al servidor se harn detrs de escena, o sea, el usuario no ser
consciente de la peticin, a no ser que se active de manera explcita un cartel que
indica Cargando.
Tipos de aplicacin
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 clsico concepto de pgina Web, para conver-
tirse en aplicacin Web.
Las RIA embebidas, en realidad, son una mezcla entre las aplicaciones
clsicas y las Web 2.0. Siguen comportndose como pginas Web normales,
con hipervnculos interconectados, hasta llegar a un punto en el que, por fun-
cionalidad, 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 ms im-
portante es la posibilidad de ofrecerle al usuario una experiencia ms rica con
el sitio Web. Es factible ofrecer controles de trabajo y servicios nuevos, como
la posibilidad de autoguardar la informacin. Quin no escribi alguna vez un
e-mail durante 20 minutos para que se cierre la pgina, se apague el equipo o, al
enviarlo, el servidor indique que se cerr la sesin y se debe empezar de nuevo?
En el presente, con las Aplicaciones Ricas de Internet, se puede ofrecer el servi-
cio que hizo famoso a Microsoft Word: la posibilidad de autoguardar lo que se va
escribiendo cada algunos segundos.
Tambin se puede elegir la manera en que se desea realizar una accin en
el sitio Web, mediante un clic en un vnculo, presionando un atajo de teclado o
arrastrando y soltando un objeto.
Adems, se redujo la transferencia de datos desde el servidor hacia el clien-
te, lo que ahorra tiempo de carga de la pgina, cantidad de bytes transferidos y
tiempo de navegacin total.
1- Mundo Flex 4
Alfaomega Flex 4.5 - Carrizo, Firtman
Es as que est comprobado que la tasa de conversin aumenta en grado
notable cuando se trabaja con aplicaciones ricas. A qu se llama tasa de con-
versin? Se trata de una accin del usuario que implica un hito en el sitio Web,
por ejemplo, una suscripcin, 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 im-
portante tenerlas presentes.
Capacidad de uso
El usuario hace, por lo menos, 10 aos que navega por Internet y eso implica que
sabe cmo utilizar un sitio Web 1.0 sin problemas. Sabe que debe ir haciendo clic
en hipervnculos, que debe esperar cada recarga, sabe completar un formulario
con campos de texto y listas de seleccin y est acostumbrado al famoso botn
Enviar. Ahora bien, sabr utilizar el nuevo sitio Web 2.0 enriquecido?
Es necesario hacer un estudio de capacidad de uso mucho ms extensivo
que antes o, incluso, educar al usuario acerca de cmo utilizar la aplicacin.
El botn Atrs del navegador
Todos conocemos el concepto de historial del navegador. Con cada clic en el bo-
tn correspondiente se puede retroceder y volver de a una pgina. Sin embargo,
ahora ya no existe el concepto de pgina, sino que cada clic, en realidad, puede
conllevar cualquier tipo de accin en el sitio o la aplicacin Web, como abrir un
men o borrar una foto, y siempre nos encontramos en la misma pgina o URL (si
lo pensamos con el viejo sistema de trabajo).
Es as que en los primeros sitios RIA el botn Atrs haca salir al usuario de
la aplicacin, a pesar de que hubiera realizado 100 clics o ms en la misma URL.
Favoritos o marcadores
El uso de favoritos y marcadores se hizo muy comn entre los usuarios y nos
permite agregar cualquier informacin que vemos a nuestra lista. Ahora bien,
cuando ingresamos de nuevo en ese favorito, pretendemos ver la misma infor-
macin que tenamos en pantalla cuando lo agregamos. Pero si siempre es la
misma URL fsica?
Este problema tambin tiene consecuencias cuando queremos enviarle la
direccin de lo que vemos a un amigo por e-mail, mensajera instantnea o red
Entonces, qu es Flex? 5
Flex 4.5 - Carrizo, Firtman Alfaomega
social. Nuestra intuicin de usuarios Web 1.0 indica que alcanza con copiar y
pegar la direccin 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 pgina no existe,
500 cuando el servidor tiene un problema interno, etctera. No obstante, si ahora
las peticiones al servidor se hacen detrs de escena y los usuarios no ven su re-
sultado directamente, cmo 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 poda-
mos manejar.
Qu no es Flex?
Para comprender mejor qu es Flex, primero listemos todas aquellas cosas que
no es y que normalmente generan confusin en el mercado.
Flex no es un lenguaje de programacin.
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 cdigo 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 contro-
les y prcticas por utilizar.
Una aplicacin desarrollada con este framework puede ejecutarse en un
navegador Web a partir del Adobe Flash Player, o como aplicacin de escritorio
utilizando la plataforma AIR (Adobe Integrated Runtime).
El formato SWF (Shockwave Flash) es un formato binario creado por
Macromedia, quien era entonces duea de la herramienta Flash y el Flash Player,
quien dio pie al surgimiento de las Aplicaciones Ricas de Internet y permiti du-
rante muchos aos sobrepasar las limitaciones del HTML en el navegador Web.
1- Mundo Flex 6
Alfaomega Flex 4.5 - Carrizo, Firtman
Podemos decir que Flex es una forma alternativa de crear contenidos en for-
mato SWF para usar en nuestras aplicaciones Web, ya que hasta su aparicin esto
slo era posible utilizando el entorno de desarrollo comercial Flash Professional.
Flex no es un lenguaje de programacin, aunque las aplicaciones que de-
sarrollemos s debern ser compiladas, proceso en el cual el cdigo que utilice
este framework se traduce al lenguaje ActionScript para luego formar un archivo
binario de extensin SWF que puede ser reproducido con Flash Player. Esto hace
posible ejecutar el mismo archivo en Windows, Mac o Linux sin mayores com-
plicaciones, 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
ms adelante) permite que la aplicacin sea instalable y pueda acceder a deter-
minados recursos adicionales del sistema.
El concepto de framework dene una arquitectura que provee un nivel ms
abstracto para trabajar sobre algn lenguaje de programacin. En este caso,
ActionScript simplica la creacin de aplicaciones robustas y de cierto nivel de
complejidad. Al ser de cdigo abierto, el cdigo fuente de Flex est disponible
de forma gratuita para adaptarlo o mejorarlo segn los requerimientos, as como
tambin existen muchas comunidades de usuarios alrededor del mundo que co-
laboran corrigiendo errores y aadiendo funcionalidades que, posteriormente,
pueden formar parte de las prximas versiones del framework, previa aprobacin
por parte de Adobe.
El Framework
El Kit de Desarrollo de Flex (o SDK por sus siglas en ingls) est compuesto por
un conjunto de clases del lenguaje ActionScript 3.0: una librera de componentes
visuales como botones, grillas de datos y paneles, entre otros, que pueden ser
manipulados mediante un lenguaje de marcado, denominado MXML; el compi-
lador necesario para exportar las aplicaciones desarrolladas con Flex a formato
SWF; y un depurador que nos permite probar y detectar errores en el cdigo
mientras estamos desarrollando la aplicacin.
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 maque-
tado de los elementos visuales.
ActionScript 3: Lenguaje de programacin orientado a objetos, muy si-
milar a JavaScript, ya que se basa en el mismo estndar (ECMAScript).
Para crear aplicaciones Flex no es necesario comprar ninguna licencia ni
herramienta; lo podemos hacer de forma gratuita, ya que el cdigo MXML y
ActionScript pueden ser editados utilizando cualquier editor de texto, como el
Historia de Flex 7
Flex 4.5 - Carrizo, Firtman Alfaomega
Bloc de Notas de Windows, y compilados con las herramientas incluidas en el
SDK gratuito de cdigo abierto.
No obstante, algunos entornos de desarrollo disponibles simplican estos
procesos, los cuales analizaremos ms adelante.
Historia de Flex
Flex 1.0
Flex fue lanzado por la empresa Macromedia en marzo de 2004 como una biblio-
teca de etiquetas para J2EE (Java Enterprise Edition) que compilaban los tags de
Flex en el cdigo JSP, dando como resultados contenidos Flash generados on
the y, durante la ejecucin de la pgina.
En las versiones 1.0 y 1.5 el framework distaba bastante de lo que tenemos
disponible hoy en da: el cdigo se compilaba en el servidor, para lo cual era
necesario comprar licencias especiales de costos muy elevados, lo que haca a
Flex una tecnologa exclusiva para las grandes aplicaciones de negocios. Cada
licencia de servidor, inclua cinco licencias para Flex Builder, el entorno de de-
sarrollo exclusivo de Flex, basado en ese entonces en el motor de Macromedia
Dreamweaver.
Flex 2.0
Con la adquisicin de Macromedia por parte de Adobe, en octubre de 2005,
se lanza la primera versin Alpha de Flex 2.0, siendo ste el primer producto
de Macromedia que surga bajo la marca de Adobe. La versin nal de Flex 2.0
fue lanzada en junio de 2006 acompaando la salida de una nueva versin de
ActionScript, la versin 3.0, y el reproductor Flash Player 9, requerido para ejecu-
tar las aplicaciones generadas con el nuevo lenguaje.
A partir de esta versin, Adobe cambi radicalmente la forma de trabajar
con Flex. Surge el concepto de Flex Framework y se pone a disposicin del
pblico el SDK gratuito, que incluye un compilador, que permite generar archi-
vos estticos en formato SWF en nuestro equipo de desarrollo sin necesidad de
procesamiento en el servidor, y las libreras 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 tecnologa de servidor.
1- Mundo Flex 8
Alfaomega Flex 4.5 - Carrizo, Firtman
Se lanza tambin una nueva versin del entorno de desarrollo Flex Builder,
basada en Eclipse y separada en dos versiones: Estndar y Profesional, inclu-
yendo en el segundo caso una librera de componentes de grcos. Eclipse es
un entorno popular en el mbito del desarrollo y cuenta con un gran nmero de
plugins, componentes adicionales que permiten aadir funcionalidades, como
soporte para otros lenguajes, clientes FTP, integracin 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 tecnolo-
ga de servidor pasaron a formar parte de nuevos productos llamados Flex Data
Services, que permitan crear servicios de sincronizacin y manejo de datos entre
el servidor y la aplicacin Flex. Sin embargo, estas tecnologas ya no son reque-
rimiento para utilizar el framework.
Flex 3.0
En junio de 2007 surge la primera beta pblica de Flex Framework 3, acompaa-
do de una nueva versin del entorno de desarrollo Flex Builder 3. A partir de esta
versin, el framework pas a formar parte del proyecto open source de Adobe.
El cdigo fuente y toda la documentacin del SDK pueden ser descargados para
realizar adaptaciones o corregir errores que pueden ser reportados a Adobe me-
diante un sistema de seguimiento que tambin se puso a disposicin del pblico.
En comparacin con la versin 2, Flex 3 no introdujo cambios signicativos
en el framework. Ms bien, las mejoras fueron notorias en el compilador, ya que
se redujo el tiempo de compilacin y se optimiz el peso de los archivos reuni-
dos utilizando una propiedad llamada Persistent Framework Caching (cach
persistente de framework). ste se encarga de guardar las libreras de Flex en un
nico archivo externo que puede ser almacenado en la memoria cach del nave-
gador al ingresar por primera vez a la aplicacin, 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 versin avanzada de la grilla de datos ya existente en Flex.
Esta versin tambin 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 tambin incluye un asistente para la
creacin y exportacin de proyectos AIR.
En cuanto a la integracin 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 diseo de interfaces.
La versin nal de Flex 3 no se vio hasta febrero de 2008.
Historia de Flex 9
Flex 4.5 - Carrizo, Firtman Alfaomega
Flex 4
A diferencia de sus antecesores, Flex 4 (denominado por su nombre en cdigo
Gumbo) fue creado teniendo en cuenta tres objetivos principales que surgieron
de investigaciones y anlisis de casos a n de mejorar la productividad:
Diseo en mente: es comn encontrar una similitud entre las diversas
aplicaciones Flex que existen actualmente en la Web. Esto se debe a que mu-
chos desarrolladores preeren utilizar el estilo base de las anteriores versiones
de Flex, denominado Halo, a la hora de personalizar el look & feel de sus apli-
caciones. Segn estudios realizados por Adobe, slo el 22% de quienes utili-
zan Flex estilizan realmente sus aplicaciones, mientras que el 46% slo hacen
algunos ajustes.
Flex 4.x permite una mejor integracin entre el diseador y el desarrollador,
incorporando la posibilidad de importar el diseo, mientras que el desarrollador
se encarga de la lgica. Algunos de los aspectos que se tienen en cuenta para
este punto son:
Proveer una arquitectura de componentes y skinning (estilizacin) fcil
de implementar.
Mejorar el manejo de estados, efectos y modelado de la aplicacin.
Los componentes de Flex 3 deben poder coexistir con los componen-
tes 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 aplicacin y facilitan
su utilizacin.
Productividad para el desarrollador: Flex debe brindar caractersticas si-
milares a las de otros lenguajes, cumpliendo los requisitos solicitados por la ma-
yora de los programadores. Se debe optimizar la performance del compilador.
Se mejora la vinculacin interna de datos, aadiendo la vinculacin de 2-vas
(ms conocido como 2-way data binding) que permite el intercambio mutuo de
informacin entre componentes.
Evolucin del framework: Flash Player 10 introduce importantes mejoras
que deben ser contempladas en el framework de Flex para optimizar los com-
ponentes. Flex 4.x incorpora componentes mejorados de texto con soporte bi-
direccional, requerido para algunos idiomas, y uno nuevo de video. No obstante,
tambin soporta las nuevas caractersticas de AIR 2.
Teniendo en cuenta estos pilares, en los prximos captulos repasaremos
cada una de las caractersticas del framework.
1- Mundo Flex 10
Alfaomega Flex 4.5 - Carrizo, Firtman
Dnde encaja Flex en la arquitectura de un
sitio Web?
La aplicacin Flex
En un modelo multicapa Flex representa la capa de presentacin, encargndose
de dar formato y mostrar en pantalla la informacin generada por la lgica de su
programacin. Como cualquier aplicacin que est basada en Flash, es posible
crear contenidos que interacten con el servidor de manera asincrnica, sin ne-
cesidad de recargar el contenido de la pgina, enviando y recibiendo informacin
a travs de diversos protocolos que lo sitan como una mejor alternativa ante
tecnologas HTML como PHP, ASP.NET o Java ya que reduce, en muchos casos,
el trco 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 aplicacin.
Publicacin de contenidos
En el proceso de compilacin de una aplicacin Flex, el cdigo MXML se tradu-
ce en clases de ActionScript que, mediante ese proceso, se convierten en uno
o ms archivos binarios de extensin 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).
Dnde encaja Flex en la tarea de un
diseador?
Flex es una tecnologa destinada principalmente a la parte lgica del desarrollo.
Podramos denirlo como un esqueleto sobre el cual se colocarn los diferentes
recursos que componen la aplicacin hasta darle la forma estipulada. En las RIA
es crtico el diseo de la interfaz y la interactividad, y es el punto donde entra en
juego el rol de los diseadores.
El diseador es una parte vital en la creacin de RIA. Debe interpretar el
trabajo solicitado por el cliente aplicando reglas de usabilidad e interaccin, de-
niendo el comportamiento de cada pxel de la pantalla frente a los usuarios. Estas
decisiones deben ser trasladadas al equipo de desarrollo, por lo que el ujo de
trabajo en un equipo interdisciplinario es constante.
Dnde encaja Flex en la tarea de un diseador? 11
Flex 4.5 - Carrizo, Firtman Alfaomega
En el ujo de trabajo clsico el diseador crea la interfaz grca de la apli-
cacin utilizando las herramientas de diseo como Photoshop, Illustrator o
Fireworks, deniendo cada estado posible y su comportamiento ante la interac-
cin de los usuarios. Una vez nalizado su trabajo, la composicin es desglosada
en pequeos recursos visuales y enviados al equipo de programacin, donde se
aplicar la lgica necesaria para nalizar el proyecto. Si bien parece sencillo y
rpido, esta tarea a veces puede ser un poco tediosa si surgen modicaciones en
el transcurso del trabajo, debiendo retroceder en el ujo, creando tareas cclicas
que se repiten una y otra vez hasta nalizar. La gura 1.2 muestra el ujo de tra-
bajo entre diseador y programador.
El diseador debe conocer los limites y posibilidades de Flex para poder
establecer las interacciones que se van a utilizar durante la aplicacin. Debe con-
sultar con los desarrolladores la posibilidad y restricciones para alcanzar los ob-
jetivos, ya que una aplicacin excesivamente compleja en interactividad puede
complicar las cosas para el equipo de desarrollo.
Fig. 1-1. Proceso de compilacin y publicacin de una aplicacin Flex.
1- Mundo Flex 12
Alfaomega Flex 4.5 - Carrizo, Firtman
Fig. 1-2. Flujo de trabajo diseador-programador.
Cundo utilizar Flex en un proyecto?
Al surgir el concepto de aplicaciones Web (a diferencia de la clsica pgina
Web), los desarrolladores se enfrentaron con el desafo de crear sitios que ade-
ms de mostrar informacin en pantalla, lo hagan mediante una interfaz de usua-
rio (comnmente llamada UI, del ingls User Interface). Ante este desafo, las apli-
caciones basadas en Flash son una buena alternativa, permitiendo crear diseos
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 me-
diante 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, evi-
tando a los programadores la necesidad de codicar decenas, cientos o miles de
lneas, dejndoles a cargo la lgica de la aplicacin que se encargar de obtener,
modicar o transportar los datos.
Para qu se utiliza?
Flex se utiliza para crear sitios Web altamente interactivos, aplicaciones Web ex-
presivas y en las que deben publicarse datos provenientes de alguna fuente de
informacin.
Arquitectura de una aplicacin Flex 13
Flex 4.5 - Carrizo, Firtman Alfaomega
Podemos hacer una breve enumeracin de los casos de uso tpicos de apli-
caciones Flex:
Visualizacin de datos: aplicaciones que obtienen datos de una o ms
fuentes de informacin y los dispone en una interfaz interactiva.
Conguracin de catlogos: permiten personalizar un producto publi-
cado mediante un asistente que indica los pasos que se han de seguir.
Autoservicio: de la misma forma que un catlogo, pero orientado a la
informacin que el usuario puede modicar y guardar.
Recoleccin de datos: formularios de ingreso de datos interactivos,
que incluyen validaciones sosticadas y estructuras que rompen la dis-
posicin normal de un formulario Web.
Esta enumeracin no es excluyente, puede haber muchos otros casos en
los que Flex represente una buena alternativa.
Arquitectura de una aplicacin Flex
Las aplicaciones Flex estn constituidas por un conjunto de archivos de diver-
sos formatos que se conjugan en un nico archivo SWF durante el proceso de
compilacin del proyecto. Antes de comenzar con un nuevo proyecto Flex debe-
mos 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 aplicacin.
En la primera etapa del desarrollo de una nueva aplicacin debemos tener
en cuenta los patrones de diseo que podemos emplear segn la estructura que
vamos a utilizar. Los patrones de diseo son modelos de organizacin que plan-
tean soluciones ante problemas tpicos de programacin. Haciendo uso de los
patrones podemos facilitar el proceso de montaje de nuestra aplicacin.
Dentro de los patrones de diseo, uno de los modelos ms utilizados con
Flex es el MVC (Model-View-Controller) que separa las capas de contenidos,
vista y controlador en contextos claramente denidos. Este patrn permite
crear componentes reutilizables, ya que modicando nicamente la capa de
elementos visuales podremos cambiar el aspecto manteniendo la lgica (pro-
gramacin) intacta.
En un modelo MVC las capas se componen de la siguiente manera:
Modelo: representa los datos que sern utilizados por la aplicacin.
Pueden estar almacenados en archivos o bases de datos indistintamen-
te. Todos los datos representan al modelo.
1- Mundo Flex 14
Alfaomega Flex 4.5 - Carrizo, Firtman
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 mo-
delo, formateados segn el diseo. Flex facilita la creacin de la capa
de vista con una variedad de componentes visuales.
Controlador: se encarga de la lgica de negocios de la aplicacin. No
necesariamente tiene que conocer la existencia del modelo y de la vista,
sin embargo, ambas se ejecutarn 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 DataGrid, TreeView o List; componentes
que constituyen la capa modelo como Model o ArrayCollection; y com-
ponentes que funcionan como controlador conectando con servicios remotos
como HTTPService o RemoteObject.
Aplicaciones modulares
Una aplicacin Flex puede ser fragmentada en diversos archivos SWF llamados
mdulos que pueden ser utilizados nicamente dentro de una o ms aplicacio-
nes Flex. Curiosamente no pueden ser ejecutados de forma independiente.
La utilizacin de mdulos en la aplicacin tiene una serie de benecios en
el producto nal:
Reduce el tiempo de carga inicial: los mdulos no se descargan hasta
su utilizacin. Si durante el ciclo de vida de la aplicacin no son reque-
ridos tampoco sern descargados.
Reduce el peso del archivo SWF: adems del tiempo de carga, la ex-
clusin de los mdulos del archivo principal tambin reducen el peso.
Encapsulacin de componentes: los diferentes fragmentos de la apli-
cacin pueden ser separados en distintos mdulos; adems, pueden
ser reutilizados en diferentes proyectos.
En el captulo 2 nos introduciremos por completo en el framework y los ele-
mentos que componen una aplicacin Flex, mientras que en el captulo 3 vere-
mos los componentes que ofrece para crear la interfaz visual.
Productos, entornos y herramientas
Los archivos que componen una aplicacin Flex pueden ser generados utilizando
cualquier editor de texto plano, como el Bloc de Notas en Windows; sin embargo,
es comn manejar entornos de desarrollo integrados (tambin denominados IDE)
para ayudar a nuestro trabajo.
Productos, entornos y herramientas 15
Flex 4.5 - Carrizo, Firtman Alfaomega
En la actualidad existen numerosas aplicaciones para la creacin y manipu-
lacin de proyectos Flex aunque, por obvias razones, las soluciones de Adobe,
como Adobe Flash Builder, son las que ms soporte brindan sobre cada aspecto
del desarrollo sobre Flex.
Amethyst
Al momento de escribir este libro, el proyecto Amethyst se encuen-
tra en la beta. Se trata de un plugin gratuito para el entorno Visual
Studio, de Microsoft, que aade soporte para la creacin de pro-
yectos Flex y AIR. Para quienes programan en ASP.NET o estn
familiarizados con este entorno puede resultar interesante dispo-
ner del soporte de cdigo IntelliSense para ActionScript, as como
opciones de refactoring, que permiten realizar cambios de forma
automatizada en el cdigo fuente de nuestra aplicacin.
En comparacin con el resto de los entornos alternativos a los de Adobe,
Amethyst es el nico, hasta el momento, que provee una vista en modo diseo,
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 caractersticas similares. No obstante, este plugin ofrece soporte me-
jorado para el trabajo con cdigo ActionScript y Flex, grcos de dependencias
de clases, y vistas de paquetes de clases. Tambin incluye un potente depurador
propio para detectar y corregir los errores.
Este entorno es comercial, sin embargo, desde el sitio Web se puede descar-
gar la ltima versin para probarla por 30 das: goo.gl/JCHag .
FlashDevelop
Si bien es un entorno pensado primeramente para Flash, de a poco se incorpo-
raron plugins que permiten trabajar con cdigo MXML de Flex, hasta que en la
versin 3 se incorpor nalmente el soporte integrado para cdigo Flex. Se trata
de uno de los entornos ms utilizados por los programadores de ActionScript,
aunque no dispone de una vista en modo diseo, FlashDevelop brinda un am-
plio soporte de cdigo y depuracin, y se integra automticamente con Flash
Professional. Tambin ofrece soporte para cdigo XML, HTML, PHP, JavaScript
y CSS.
Amethyst puede ser
descargado desde el
sitio Web de la empresa
goo.gl/I3GlP .