Novedades de Adobe Flex 4

Pró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.


0 comentarios to "Novedades de Adobe Flex 4"

Publicar un comentario en la entrada

Blog Archivo

Subscribete via E-Mail

Subscribete via RSS!

Ingresa tu email para:
Recibe actualizaciones del Blog.

Etiquetas

16-bit 2.0 2012 256 colores 2d 3 404 5 8 acelerar Acer Aspire ActionScript ADD-ONS addon adobe adobe air Adsense aerogarden agilidad airbender AJAX alarma alien all your base alta definición Android angulacion answers API APIs aplicacion aplicaciones Apple apps archive Argentina ask atajo atajos de teclado ataque audio avance avatar aventura grafica back background backtweets balsamiq mockups banda bang banners barcelona barra lateral bases de datos Batacazo bateria bbcode bear bebé Biblioteca Virtual big bing BitDefender BitTorrent blekko Blog blogger bloggers blogósfera Blogs bocetos bollywood bordes botánica brickify brush buenos aires buscador búsqueda avanzada cache caja calendario calidad cámara web canciones Canvas carrusel catástrofe ceguera de banners celular CEO charla chpimunk chrome chrome web store chromium chuck norris cine Cisco cita cliente ftp cloud cluster Cms cocina codec código coleccion color colorotate columna comercio commodore 64 compatibilidad Competencia compositio Comscore comunicacion Comunidad comunidad online Conferencia configuración consejos contenido content copia correo correo electrónico cotidiano cpanel Creatividad criminal cross-browser cse CSS CSS3 cubo cuenta cuentos cultivo Curiosidades curso photoshop Cursos daisies date Debian degradé dell desaparecer desarrollo web descarga Descargas descomprimir desfragmentar despertador despertar deviantart DHTML Digg diseñador Diseño Diseño Grafico Diseño Gráfico diseño web Disney dispositivo dispositivos moviles dispositivos táctiles div dominio dramatic dropbox duck go e-book e-commerce e-commerce day e-mail EBE ecología editor educación a distancia educativo Educativos Niños efecto efectos ejemplo emblema emprendimiento emulador emuladores encabezados encuesta enlace episodios error escritura España estadística Estados Unidos estilo estudio etica evento Eventos Excel exportar extensión extensiones extraterrestre Facebook facebook connect garage fc64 feeds Fiberparty film Filosofía Firebug firefinder Firefox firmware fixes Flash flex 4 Flickr fondo fondos font font dragr form formularios foto Fotografía Framework freelance fuente fuentes future FXG g1 gadget gadgets games gaming gazelle geek gestion gestor de contenido gestos gestuales gesture ghajini gm730 Gmail Google google analytics google app Google Calendar Google Chrome Google Docs gradient gradiente gradientes gráfico gran torino gratis groupon guerra guia h.264 habla hack Hackers handle handler hardware herramientas gráficas hitchcock hollywood homepage horizontal hover HP html HTML válido HTML5 HTTP hub huerta IBM icono IE illustrator imagen Imagenes imágenes importar impress inclinacion indio infecciones info-box infografías iniciador Inkscape inspiracion interactivo interfaz Internet Internet Explorer interno invasión investigación iPhone iphone os iPod island istick IT iTunes U jackson JavaScript jerarquía jetpack jQuery jQuery TOOLS jsc64 juego Juegos lanzamiento laptop lego lenguaje Lenovo Lg libre librería libro limpieza Links Linux literatura lógica logo logos logotipo lolcat Lotería love luca lucasarts luces luminoso luz Mac mac book pro mac os x MacBook macro mago Malware manejo mantenimiento manual mapa mapeo maquetación marciano Marketing mascara mascota McBook medicion medio ambiente meme memoria mente menú metafilter metropolis michael microsoft Mobile Learning mockup monkey moonwalker mootools moousture motivacional motor de busqueda motores de búsqueda mouse mouseprobe mov movil mozilla Mozilla Firefox Mozilla Labs mp3 MS Office mujer maravilla multimedia MultiTouch música MXML MySpace MySql N97 napkee navegación Navegador navegadores networking New York nightly nihilogic no ser encontrado nodos Nokia notebook noticias Novedades ochentoso oferta offers oficial online Open Source Open SUSE OpenOffice opera operativo oportunidad optimización orden organizacion orgullo os oscurecer oscuridad oso Outlook oz page speed PageRank pagespeed pageviews panaderia Panda paneles pantalla pantallas táctiles parasitos PDF peekfeed película pencil peoplebrowsr perfil pestaña photoshop photoshop clase 2 PHP php 5 Picasa picker pinceles pingie piratas pirates plagio plantación plantar plantilla plastic logic Plugin plugins pocket yoga podcasts port portal portátil posicionamiento powerpoint ppc prejuicio preparacion presentación Productividad Programación programas promocion protofish prototype proyecto prueba PSD Psicología public Publicidad puerto QEMU quickoffice quicktime quote rafael jimenez rank Recursos Red red social reddit Redes sociales reloj remake reproductor reseña resolución respaldo resultado retro robo rojo RSS rubik Ruby rust Safari Salud sans-serif sclipo script sculpting sdk seleccionador SEO serie serif SERP server servidor servidor web set shadow share sherlock shortcodes shuffle sidebar sidepost simple simpson Sin clasificar sistema sistema operativo sistemas operativos sitios web slideshow smart smooth SMS snow leopard social sociedad Software Software educativo software libre sombra sonido soundmanager2 spam spreadsheet SQL Squeeze startup steps left store streaming subdominio success suckerfish sun microsystems tablas table tabs tactil Taller de Fotografía Digital Taller de Photoshop taller photoshop Talleres Tarjetas de Crédito teaser tecnica Tecnologia teddy telefono television telltale template templates textbox the theme Themes theora thumbnails tienda time tipografía tipografias tips titulares to touchscreen tower defense trailer transform transition tres Troyano Troyanos truco Trucos tutorial photoshop tutoriales TV tweet tweetstats Twitter unplugged Usabilidad USB usuarios Utilidades para PC Utilidades para tu web variables vector vegetales velocidad venta Ventas verde verdura version video videojuego videojuegos videos Videos de Música Peruana viernes Viernes Unplugged VirtualBox Virus Visas VMware voucher w3c wallpaper wallpapers web Web 2.0 web participativa webcam WebKit webm webmaker Wi-Fi widescreen Wikipedia Windows Windows 7 Windows Mobile wiz wizard wolfram wonder woman Word Wordpress WorldBuilder wwdc 09 XHTML yahoo Youtube yui zip