Fx4 II: Diferencias entre Fx3 y Fx4

Gumbo se ha centrado en mejorar Fx3, a partir de la experiencia de la última versión. En este post veremos algunos de los conceptos más importantes que diferencian a Fx4 de Fx3 y algunas de las características más relevantes que nos trae Gumbo. Este post no quiere entrar a explicar en profundidad los diferentes apartados, sólo quiere dar una pincelada de lo que se explicará con más detenimiento en posts futuros.

Language tags

Flex 4 introduce nuevos tags para usar en los ficheros MXML. Vamos a ver los más relevantes:

Declarations
Con el tag Declarations podemos definir nuevas propiedades de un elemento. Para entenderlo mejor veamos un ejemplo:

Creamos un nuevo componente (MyButton) con una propiedad de tipo String, que podemos utilizar como nueva propiedad del botón, por ejemplo:

Tags Library y Definition
Con el tag Definition usado dentro del tag Library, se nos proporciona la manera de definir elementos gráficos que podremos usar en otras partes de la aplicación. El elemento definido dentro del tag Definition debe definir el atributo name. Este atributo se usa como nombre para instanciar el elemento declarado.
El scope de estas declaraciones es el documento donde se han definido, se trata como si fuera una clase privada.

A continuación se muestra un ejemplo, en el que declaramos los elementos MyCircle y MySquare para usarlos a posteriori:

El resultado sería el siguiente:

Private

Este tag nos permite introducir meta información sobre un fichero MXML o FXG. Este tag debe ser hijo de algún tag de tipo root y debe de ser el último tag en el fichero. El compilador ignora el contenido de este tag.

Reparent

Este tag nos permite especificar un padre alternativo para un determinado nodo en un contexto específico.

Gumbonents

Flex 4 incorpora un Nuevo conjunto de componentes para sacar provecho de las características de spark. Estos componentes se conocen como Gumbonents.

En algunos casos, las diferencias entre los Gumbonents y los componentes Halo son invisibles para el programador, conciernen a aspectos de los nuevos layouts o aspectos arquitecturales de Flex 4. En otros casos, los Gumbonents se diferencian de los Halo components: por ejemplo, hay diferencias entre Application de Spark y Application de Halo, como pueden ser el color de background o el layout por defecto.

Los Gumbonents tienen asociadas unas skins, por ejemplo, para la clase Button tenemos ButtonSkin. Las skins de los Gumbonents se localizan normalmente en el package mx.skins.spark.

Podemos usar Gumbonents y Halo components indistintamente en nuestras aplicaciones Flex. Los componentes Halo no han sido eliminados del framework Flex 4 framework.
Se debe tener clara una cosa: los Gumbonents necesitan Flash Player 10. Los Gumbonents se basan en la nueva arquitectura de componentes de Flex 4.

La nueva arquitectura de componentes
En Flex 4 se han refactorizado los componentes para separar los diferentes aspectos: una clase define el comportamiento (events, data, herencia de componentes, states, …) y otra clase para el skin (Look and Feel), que controla todo lo relacionado con la apariencia del component (gráficos, layout, states, transitions y la representación de los datos).
La clase skin se asocia al componento mediante CSS, o mediante el atributo skinClass de éste.

Advanced CSS

Han habido bastantes mejoras en cuanto a CSS para permitir un mayor grado de skining de componentes.

Por ejemplo, ahora la sintaxis se ha ampliado para soportar selectores adicionales, como por ejemplo, selector por id (aplicación de estilo según el id de los componentes), selector descendiente (aplicación de estilo según el tipo de sus predecesores), etc…

A continuación mostramos algunos ejemplos:

Este último bolque de código es interesante porque definimos un estilo para los botones que estén dentro de un Box, por lo que todo botón que esté dentro de un VBox o de un HBox recibirá este estilo.

Layouts

Flex 4 también ha cambiado la manera de asignar layouts con el fin de conseguir que los contenedores sean más flexibles. En la nueva arquetectura de Fx4, si queremos especificar el layout deberemos usar el elemento layout. Dentro de este tag deberemos especificar alguna de las clases del package spark.layouts.*: BasicLayout, HorizontalLayout, VerticalLayout, …

El siguiente código muestra como definir un layout a una aplicación Fx4:

Scrollers

En la arquitectura Halo, las scrollbars eran intrínsecas a los componentes, teniendo su propio estado y lógica interna, lo que añadía complejidad a los containers Halo.

En Gumbo se ha refactorizado todo lo referente a scrollbars, para resumirlo, se ha creado un componente skineable que controla la lógica de las scrollbars, el componente Scroller. Es por esto que si un elemento necesita scrollbars, deberá estar contenido por el componente Scroller. Veamos un ejemplo:

La imagen que sigue nos muestra una captura del resultado:

Substitución de clases

En gumbo se han substituido algunas clases. Por ejemplo, el caso del Canvas de Halo, ya no existe en Gumbo; en su lugar deberemos usar Group, por ejemplo. un par de ejemplos más serían los contenedores VBox y HBox, que han sido substituidas por VGroup y HGroup respectivamente.

Bidirectional Data Binding

Gumbo hace posible el bidirectional data binding o también llamado two-way data binding, es decir que dos componentes se referencien y los dos actuen como source y destination en un binding. En Fx3 se podía conseguir combinando dos tags Binding o mediante mx.binding.utils.BindingUtils.bindProperty(). En Gumbo es mucho más fácil. Veamos una comparación entre Fx3 y Fx4:

Fx3

Fx4

También lo podemos definir con sintaxis inline, usando @{bindable_property}. Un ejemplo sería:

Primitivas de texto más potentes

Mediante el Flash Text Engine (FTE) y el nuevo Text Layout Framework, que proporciona un set de clases en una capa por encima del FTE, Flash Player 10 tiene unas primitivas de texto mucho más potentes. FTE y TLF nos permitirán cosas como rotaciones, múltiples líneas y párrafos, span elements y mucho más.

Espero que este post os haya dejado con ganas de ver más en profundidad lo que significa Fx4; os iremos explicando en los siguientes posts.