El principal objetivo de Adobe con Flex 4 es proveer soporte e integración con Adobe Catalyst, una herramienta de diseño interactivo que busca acortar la brecha existente entre desarrolladores y diseñadores. A continuación, más sobre Gumbo.

Qué es Adobe Flex

Adobe Flex es un framework que se utiliza para construir RIAs (Rich Internet Applications, o en español: Aplicaciones de Internet Enriquecidas). El framework de Flex se utiliza para crear archivos SWF que se reproducirán luego con Adobe Flash Player.

Flex fue creado para el uso de los desarrolladores y sigue paradigmas de desarrollo de aplicaciones tradicionales, a diferencia del sistema basado en la línea de tiempo que se usa en Flash.

Qué hay de nuevo con Flex 4

Con la idea de afianzar Catalyst, Adobe está presentando un nuevo set de componentes y, lo que es más importante, una nueva arquitectura de componentes. Además están actualizando el lenguaje MXML, integrando FXG y el Flash Builder 4 (ex-Flex Builder). Con todos estos cambios, las aplicaciones de Flex 4 soportan y requieren de Flash Player 10.

Arquitectura de componentes

Desde su inicio, Flex ofreció una serie de componentes de alto nivel para interfaz de usuario, incluyendo botones, drop downs y editores ricos, posibilitando la creación de interfaces de gran calidad visual. Como los componentes de Flex se implementan en ActionScript 3 -un lenguaje de programación orientado a objetos- siempre fue posible extender y combinar la librería standard de componentes para crear componentes personalizados. Aún así, con Flex 3 este proceso resulta bastante pesado por estar tan ligado al look and feel.

Una gran iniciativa en Gumbo es hacer que los componentes sean más extensibles y más “herramientables”, desarmando los diferentes comportamientos de los componentes: separando la lógica, del maquetado, del diseño. En Gumbo, la arquitectura de los componentes se conoce como Spark, y está construida en base a la arquitectura de componentes de Flex 3, llamada Halo, extendiéndose de la base principal de la clase UIComponent de Halo. Esto permite que los componentes Halo y Spark coexistan, permitiendo a los usuarios que vayan adoptando el nuevo sistema de a poco. Para mayor compatibilidad, los componentes de Halo siguen existiendo tal como lo hacían Flex 3, mientras que la librería de componentes ha sido re-implementada por Flex 4 en el paquete “spark.componentes”. En muchos casos, estos nuevos componentes lucen idénticos a los anteriores, y otros, como Button, incluso tienen el mismo nombre.

Con la re-arquitectura de los componentes de Flex, el foco principal es diseñador y el workflow entre diseñador y desarrollador. Afortunadamente, esto le da mucho empuje a los desarrolladores de Flex, ya que una mejor separación de elementos favorece a un desarrollo más productivo y un código más fácil de mantener.

Ahora vayamos a los detalles, empezando con los cambios en el layout. En Flex 3 el layout fue embebido directamente en la implementación del container. Por ejemplo, uno podía usar el container VBox para diagramar a los hijos de forma vertical o HBox de forma horizontal. En Gumbo, el layout ya no se define por el container, pero se maneja por delegación. Como se ve en el código, esto significa que el layout se define en una sección de layout separada del MXML:


<s:Panel title=”My Panel” width=”320″ height=”200″>
<s:layout>
<s:VerticalLayout paddingTop=”5″ paddingBottom=”5″ gap=”10″ />
</s:layout>
<s:Button label=”Button 1″ click=”myclick(event);” />
<s:Button label=”Button 2″ click=”myclick(event);” />
<s:Button label=”Button 3″ click=”myclick(event);” />
</s:Panel>


Este código tiene 3 Buttons organizados verticalmente dentro de un Panel. Si no se define un layour, el container se posiciona siguiendo la forma predeterminada que se define en BasicLayout, la cual es idéntica al container de canvas de Flex 3. En un layout de posición, cada hijo debe tener especificado sus coordenadas “x” e “y” relativas al container. El desarrollador experimentado de Flex también notará que las propiedades de padding están setteadas en la definición del VerticalLayout y no en la del Panel, como pasada en Flex 3. Como todas las clases de layout, VerticalLayout se extiende desde “spark.layout.LayoutBase.” El framework incluye los siguientes layouts: BasicLayout, ButtonBarHorizontalLayout, HorizontalLayout, TileLayout y VerticalLayout. Se pueden crear layouts personalizados para usar con cualquier contenedor Spark, extendiendo la clase LayoutBase.

Con estos cambios en el layout de Gumbo, los containers de Flex 3 quedaron obsoletos. En el desarrollo de Flex 4, la clase “spark.components.Group” puede ser utilizada para manejar sets visuales de hijos. La clase Group hereda de la clase UIComponent de Halo (Group -> GroupBase Inheritance-> UIComponent) y puede contener UIComponents, Flash DisplayObjects o IGraphicElements (la clase básica de FXG). Estos grupos pueden tener containers como layouts.

La otra clase básica importante de Gumbo que muchos de sus componentes heredan es la clase “spark.components.supportClasses.SkinnableComponent”, cuyo look and feel es totalmente editable, sin cambiar su comportamiento. Esto se logra gracias a que la skin está su propio archivo fuente. El núcleo lógico permanece en la clase con el nombre del componente.

Como Flex es open source, podemos simplemente ver el código para ver cómo encaja todo junto. Por ejemplo, viendo Button, vemos el núcleo lógico en “spark/components/Button.as,” y el skin en “spark/skins/default/ButtonSkin.mxml.” Los skins son aplicados en los componentes por medio de CSS. La Figura 2 muestra un snippet del código CSS del archivo default.css dónde ButtonSkin es aplicado a la clase Button.

Flex 4 también incluye un conjunto de nuevas clases de texto, tales como SimpleText y RichText. Las nuevas clases de texto aprovechan las novedosas capacidades del motor de texto Flash en Flash Player 10. Estas clases solucionan un gran punto flojo en las aplicaciones Flex 3, dado que era difícil manejar grandes cuerpos de texto en versiones anteriores.

MXML 2009

MXML es el lenguaje de mark-up declarativo que provee un alto nivel de abstracción sobre ActionScript para obtener un layout más limpio y sencillo, junto con la incorporación de Flash Builder y Catalyst. En Flex 4, los nuevos namespaces lideran la lista de logros de MXML, dándole a los nuevos componentes Gumbo un lugar donde vivir, mientras mantiene la retrocompatibilidad con los componentes de Flex 3. Así, una aplicación Flex 4 puede incluir tanto los nuevos componentes Spark como los viejos componentes Halo de Flex 3.


<?xml version=”1.0″ encoding=”utf-8″?>
<s:Application
xmlns:fx=”http://ns.adobe.com/mxml/2009″
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/halo”>

<fx:Style>
@namespace s “library://ns.adobe.com/flex/spark”;
@namespace mx “library://ns.adobe.com/flex/halo”;

s|Button {
baseColor: #ff0000;
}
mx|Button {
baseColor: #00ff00;
}
</fx:Style>

<s:Button label=”Spark Button” left=”10″ top=”10″ />
<mx:Button label=”Halo Button” left=”10″ top=”40″ />
</s:Application>


Aquí puede verse un ejemplo resultante del uso conjunto de los componentes Halo y Spark en la misma aplicación. En Flex 4, hay dos nuevos namespaces MXML: fx para MXML 2009 y s para los nuevos componentes Spark. Además, el namespace mx legado de Flex 3 ha sido preservado. Los namespaces son utilizados no sólo en MXML, sino también en CSS, para soportar la completa interoperabilidad entre componentes.

Otra notable novedad en MXML 2009 incluye las etiquetas Declarations, Library, Definitions y Private. La etiqueta “Declarations” es simplemente un placeholder para contener todos los elementos no-visuales como los formateadores y los efectos. La etiqueta “Library” y su etiqueta “Definition” anidada son usadas para crear elementos gráficos re-utilizables o “símbolos”. Finalmente, la etiqueta “Private” es completamente ignorada por el compilador y por eso, es un buen lugar para almacenar metadata estructurada sobre el documento, como el autor y la fecha.

States

Flex 2 introdujo el concepto de estados de vista, permitiendo que diferentes visiones de un componente sean manejadas como cambios de estado. Los estados en Flex están conceptualmente divididos en dos grupos: estados de componentes (”over” o “down” en un Button) y estados de aplicación (”login” o “home”). La sintaxis de estados legados de Flex 3 requería que propiedades y componentes sean modificados dentro del bloque de estado. Esto estaba fuera de contexto y podía tornarse realmente confuso. Flex 4 introduce una completa nueva sintaxis que es tan flexible como concisa.

El código muestra un ejemplo de la nueva sintaxis de línea en un componente Button. El botón será incluido en estados A y B, y su propiedad de etiqueta será modificada en estado B.

FXG

FXG es un nuevo formato de gráficos vectores basado en XML para aplicaciones Flash y Flex. El formato es similar a SVG, el cual ha sido parte de los reproductores Flash durante años. FXG toma como objetivo las características avanzadas de dibujo vectorial de Flash Player 10. El propósito principal de FXG es proveer un formato de gráfico intercambiable que varias herramientas puedan leer y escribir sin tener conocimiento de Flex o ActionScript. Por lo tanto, es un puente importante entre Flex, Catalyst y otras herramientas Adobe como Illustrator CS4.

FXG también ofrece ventajas a los desarrolladores. Primero, porque se trata de un formato basado en XML por lo que es fácil de incluir en el control del código. Segundo, mapea directo a MXML, por lo que puedes tomar un archivo FXG exportado de Illustrator, desechar toda la información meta, e incluirlo integro con tu código MXML. Y por último, tiene sentido. Cualquier desarrollador puede leer código FXG porque son sólo formas, textos y filtros. Las formas primitivas son rectángulos, elipses, líneas y el poderoso elemento Path. Y todavía más, FXG soporta el conjunto completo de transformaciones afines como escalado, rotación, oblicuidad y todos los filtros de Flash Player 10, como brillo, desenfoque y sombra.

En las aplicaciones Flex, FXG es también llamado “gráficos MXML”. Los gráficos FXG y MXML son básicamente lo mismo. La mayor diferencia es que los gráficos MXML pueden ser alterados en el momento que se encuentran corriendo, mientras que los archivos FXG están compuestos por assets estáticos. El código que sigue provee un ejemplo de un cuadrado rojo simple en FXG, escrito como gráfico MXML dentro de una aplicación MXML.

El siguiente código incluye el mismo cuadrado rojo dibujado en Adobe Illustrator CS4 y exportado como un asset FXG.

Flash Builder 4

Flash Builder, anteriormente conocido como Flex Builder, es la herramienta principal que utilizan los desarrolladores para construir aplicaciones Flex y AIR. El ambiente de desarrollo integrado (IDE) basado en Eclipse ofrece editores para MXML, ActionScript y CSS. Además, incluye un debugger, herramientas de diseño visual y un perfilador de memoria y desempeño en su versión profesional.

Junto con su nuevo nombre Flash Builder 4 incluye mejoras significantes en las herramientas para casi todos los aspectos del IDE. Primero, el realzado soporte de generación de código y refabricación hace que las tareas comunes, como escribir un manejador de eventos a un control MXML, sean mucho más sencillas. Segundo, las herramientas de tiempo de ejecución han recibido actualizaciones tanto en el Debugger como en el perfilador, y se ha añadido la nueva herramienta Monitor de Red. Finalmente, la integración del testeo de unidad en Flash Builder, sumado al nuevo lanzamiento de FlexUnit 4, han traído excelente soporte de prueba al IDE.

Conclusión

Los cambios en Flex 4 representan un gran paso al frente para el desarrollo de aplicaciones en la plataforma Flash. La nueva arquitectura de componentes Spark rompe con los mayores problemas que cada componente exhibe, haciendo las tareas más sencillas y simplificando de gran forma el flujo de trabajo entre desarrolladores y diseñadores. Sumado a esto, MXML ha sido actualizado para soportar nuevas propiedades en Flex 4, mientras mantiene compatibilidad de fondo con la versión anterior de Flex. FXG ha sido introducido para añadir un poderoso formato gráfico de intercambio de assets entre las diferentes herramientas Adobe de diseño y desarrollo. Finalmente, el IDE de Flash Builder ha sido también actualizado para satisfacer las demandas de los ingenieros de software empresariales. El amplio rango de actualizaciones en Flex 4 implica otro paso al frente en el, aún madurando, framework Flex.

Fuente: RIA Zone

Si eres desarrollador en Adobe Flex no querrás perderte la edición ‘09 del Adobe Flex Tour que se realizará en Buenos Aires, Argentina.