Binding / No Binding

Binding y no Binding...

Hace un tiempo escribi un post sobre binding y a continuacion muestro un ejemplo del uso del mismo.
Este ejercicio muestra la diferencia a la hora de actualizar objetos que usan binding y no.
Se tiene una clase que se llama Producto, con dos campos nombre y precio. Se cargan dentro de un ArrayCollection (que provee binding por si mismo) y se bindea el array collection a un datagrid. Cada vez que se selecciona un producto de la lista, se rellenan los campos de abajo con un objeto bindeado tambien. Al modificar dichos campos y apretar "Update", modificamos directamente el objeto seleccionado asi:

var prod:Product = products.getItemAt(grid.selectedIndex) as Product;
prod.name = namet.text;
prod.price = Number(price.text);

La aplicacion utilizando binding en la clase Product automaticamente nos refresca los campos modificados en el grid. La aplicacion que no utiliza binding al contrario se queda quieta... Si apretamos "reload" veremos los cambios aplicados.
Si en este mismo ejemplo, en lugar de actualizar el producto que esta dentro de la lista, crearamos una nueva instancia de un objeto Product y actualizaramos en el Array Collection con este nuevo objeto, el grid se modificaria automaticamente ya que el ArrayCollection provee binding por si mismo. Algo asi

var prod:Product = new Product();
prod.name = namet.text;
prod.price = Number(price.text);

products.setItemAt(prod, grid.selectedIndex);

El ejemplo trata de mostrar las diferencias entre ambos casos y la importancia de conocer cuando utilizar binding y cuando no.

Con Binding




Sin Binding





Codigo Aqui

Data Binding

Update (2009-03-28): Una entrada mas reciente con un ejemplo

El data binding es una de las caracteristicas mas agradables que provee Flex.

Que es en realidad?

Es un mecanismo que permite que componentes y/o objetos escuchen a los cambios que ocurran en otra variable, objeto o funcion X.

Que permite?

Bueno, permite actualizar informacion en un objeto que escucha (y mostrar esa actualizacion si es necesario) en el momento en que una variable, objeto o funcion que es escuchada cambia su estado (osea alguna propiedad).

Como funciona?

La forma mas elemental ocupa de lo que se llaman Metadata, que es una sentencia especial reconocida por el compilador, que lo que hace es avisarle como debe tratar una cierta sentencia que sigue despues del tag. En el caso de binding se utiliza [Bindable] antes de una variable que se quiera 'bindear'. Los componentes en MXML bindean muchas de sus propiedades principales por default. Una vez que indicamos que una variable va ser bindeada, osea que otros objetos pueden llegar a escuchar cambios que se realicen en ella, procedemos a definir sus escuchas (que pueden ser cero, uno o muchos) Para reflejar esos cambios en MXML, se utiliza '{ variable_bindeada } '. En actionscript puro (no MXML) se usa otro tipo de forma como por ejemplo la clase BindingUtils que provee el framework de Flex.

Que es lo que pasa en realidad?

En realidad lo que es el binding en flex, es el patron Observer simplificado por el uso de Metadata [Bindable] y de { } o BindingUtils
El observer pattern indica una relacion entre dos objetos, en la cual uno notifica al otro u otros acerca de un cambio en su estado y los actualiza automaticamente.
Entonces explicando la teoria, el observador es la variable u objeto que definimos como Bindable

Ejemplos:

Base:

<Application>
<mx:TextInput id="texto1" x="50" y="20"/>
<mx:Label id="etiqueta1" x="50" y="40"/>
</Application>

MXML:
1. Reemplazo del Label:

<mx:Label id="etiqueta1" x="50" y="40" text="{texto1.text}"/>

2. Etiqueta mx:Binding

<mx:Binding source="ObjetoFuente.propiedadEscuchar" destination="ObjetoDestino.propiedad_actualizar" />

en este caso

<mx:Binding source="texto1.text" destination="etiqueta1.text" />

Actionscript:

 BindingUtils.bindProperty(ObjetoDestino, "propiedad_actualizar", ObjetoFuente, "propiedad_escuchar");

Ejm:

BindingUtils.bindProperty(etiqueta1, "text", texto1, "text");


Notas:

Aunque el codigo se vea tan sencillo, detras de todo esto de binding ocurren una gran cantidad de cosas que nosotros no vemos. El uso de binding genera muchisimos archivos y clases mas de lo que vemos y pueden ser vistas si compilamos la aplicacion con la opcion --keep-generated-actionscript que mantiene todos los archivos generados por el compilador que son abreviados por metadatas por ejemplo. Esto se genera debido a que se crean listeners y handlers de esos listeners para cada propiedad bindeada.