Micaela 10 de junio de 2009 a las 12.57
   Imprimir artículo
elWebmaster.com

Novedades de Adobe Flex 4


flex1Pr√≥ximamente se har√° p√ļblico el primer preview de Adobe Flex 4 (tambi√©n llamado Gumbo). Esta beta viene con un n√ļmero significativo de actualizaciones y mejoras a la plataforma.

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.

Button {
skinClass: ClassReference(“spark.skins.default.ButtonSkin”);
}

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.

<s:states>
<mx:State name=”A” />
<mx:State name=”B” />
<mx:State name=”C” />
</s:states>

<s:Button label=”Button” label.B=”State B” includeIn=”A,B” />

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.

<?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”>

<s:Graphic>
<s:Rect width=”100″ height=”100″>
<s:fill>
<mx:SolidColor color=”#ff0000″ />
</s:fill>
</s:Rect>
</s:Graphic>
</s:Application>

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

<?xml version=”1.0″ encoding=”utf-8″ ?>
<Graphic
xmlns=”http://ns.adobe.com/fxg/2008″
xmlns:d=”http://ns.adobe.com/fxg/2008/dt”
xmlns:ai=”http://ns.adobe.com/ai/2008″ version=”1.0″ ai:appVersion=”14.0.0.367″ d:id=”1″
viewHeight=”100″ viewWidth=”100″>
<Library/>
<Group d:id=”2″ d:type=”layer” d:userLabel=”Layer 1″>
<Rect width=”100″ height=”100″ ai:knockout=”0″>
<fill>
<SolidColor color=”#ff0000″/>
</fill>
</Rect>
</Group>
<Private>
…more Illustrator metadata…

</Private>

</Graphic>

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.

Haz clic aqu√≠ para ver m√°s informaci√≥n acerca del Adobe Flex Tour ’09 ¬Ľ


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (2)

  1. Elsa dice:

    Muy interesante el tema. Bastante completo.

  2. Wool Jersey dice:

    Me encanta c√≥mo puedo usar “CSS” en Flex!

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder