Aplicaciones Ricas de Internet 1 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 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.
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.
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.
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
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.
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
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.
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.
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.
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.
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.
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.
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.
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, o ; componentes que constituyen la capa modelo como o ; y componentes que funcionan como controlador conectando con servicios remotos como o. 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.
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. 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:. 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.