Two Way Data Binding … que elegante !!!


Viendo algunas preguntas que continuamente se hacen en el grupo de usuarios de madeinflex se me ocurrió hacer un pequeño artículo que mostrara cómo utilizar la elegante técnica “Two Way Data Binding” o enlazado en ambos sentidos. Muy útil cuando manejas listados de objetos y a su vez el formulario típico para su mantenimiento, en otras palabras operaciones CRUD.

Que es Data Binding ?

El término “Binding” proviene del verbo inglés “bind” que significa atar, ligar o unir algo. En términos infomáticos implica atar los datos. Este tipo de prácticas se realiza en las aplicaciones escritorio tradicionales desde hace muchos años, en las aplicaciones web tradicionales funciona normalmente de otra forma. Imaginemos el caso de una página con tecnología HTML en el cliente, el usuario obtiene una primera página con un listado y luego al pulsar en una fila, inmediatamente se realiza otra petición al servidor donde se realizar una búsqueda por ID y se obtienen los datos completos del objeto seleccionado.

Este tipo de acciones son también muy utilizadas cuando hacemos mantenimento básico de una entidad cualquiera, en otras palabras operaciones CRUD.

Binding en Flex

El “binding” en Flex funciona de una forma muy elegante y transparente, hay 2 formas de hacerlo, una con los “curly braces” o llaves y la otra con la clase

Binding, desde MXML y/o desde ActionScript. De esta forma por ejemplo podríamos atar los datos de un DataGrid para que cuando seleccionemos un fila se muestren los datos en un formulario típico.

Two Way Data Binding

Sin embargo una práctica que puede ser muy interesante según que casos, es poder atar también los cambios producidos en el formulario a la fila seleccionada, que aposteriori será el objeto que persistamos en la base de datos através de cualquier servicio de Adobe Flex. A esto lo llamamos “Two Way Data Binding” traducido al perfecto español, unir datos en ambos sentidos (Objeto seleccionado –> Formulario del objeto y Formulario del Objeto –> Objeto seleccionado).

twowaydatabinding.jpg

Paso 1, el modelo

Lo primero es tener claro que datos conforman nuestro modelo. Para este ejemplo voy a crear el objeto Estudiante este tendrá las propiedades:

Nombre (String), Primer apellido (String), Fecha de nacimiento (Date) y Puntaje (Number).

Con estas propiedades veremos que el “binding” funciona con cualquier tipo de dato, incluso con objetos complejos.

[ftf w=”400″ h=”200″]
package vos
{
[Bindable]
public class Estudiante {
public var nombre:String;
public var apellido1:String;
public var fechaNacimiento:Date;
public var puntaje:Number;
}
}
[/ftf]

Paso 2, el listado

Ahora vamos a crear un DataGrid preparado para visualizar las propiedades de un objeto Estudiante.

[ftf w=”400″ h=”200″]









[/ftf]

Paso 3, el formulario

Si pensamos en nuestro ejmemplo con orientación a objetos, tiene sentido que el formulario, sea responsable de actualizar y visualizar los datos del objeto para el cual fue creado. Será entonces el formulario el que contenga el “binding” en ambos sentidos, estará preparado para ver los datos del objeto y además actualizará el objeto si cambian los datos desde el formulario.

[ftf w=”400″ h=”200″]













[/ftf]

Paso 4, todo OK !!!

Ahora juntamos todos estos componentes en una aplicación, simulamos que el DataGrid contenga algunos estudiantes de prueba. Además que al seleccionar una fila pasemos el objeto seleccionado al formulario para ver en plena acción el famoso “Two Way Data Binding”.

[ftf w=”400″ h=”200″]














[/ftf]

Paso 5, probando, probando …

Pues nada, ahora podeis probar a editar los datos de un estudiante, cambiar la fecha de nacimiento o el puntuaje, etc, etc.

Espero que os haya gustado, ahora me despido y aprovecho para recordar a toda la comunidad que ya está abierto el formulario de inscripción para las charlas MIF online II.

Descargas

twowaybinding.zip

Probar el ejemplo aquí

Un saludo

Edgar Rivera

Edgar es un Consultor especializado en el diseño y desarrollo de soluciones bajo la plataforma Java y Flex. Desde el año 2000 trabaja en proyectos para aplicaciones Web orientadas a la empresa, en sectores como la banca, la sanidad y la administración pública. También se desempeña como formador Java/Flex.

Sitio Web:http://

3 Comentarios

  1. Pingback: byGui.blog » Blog Archive » ObjectUtil.copy

  2. byGui

    Según la ayuda de Flex crea una copia de un objeto. Justamente hace lo contrario que el binding, crea un objeto nuevo desde el original. Lo separa.

  3. leonardo moreno

    yo he estado haciendo esto por un tiempo sin embargo tengo problemas con soportar un tipo de sintaxis como la siguiente:

    La idea es:
    var model:BibliosModel;


    y como propiedad de un control X cualquie
    datasource=”{model.Entity[1234].propiedad.datoX}”

    saben uds. como hacer para invocar codigo propio antes del de flex porque lo que deseo hacer es si no existe una propiedad con id 1234 (en este caso), debo hacer una llamada a un servicio web X y popular la data, si ya existe se accesa, y cuando el valor cambia debe levantarse algun evento para salvarlos cambios a la BD.

    cualquier ayuda seria apreciada, gracias.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Acerca de Made In Flex

Made In Flex es una comunidad de desarrolladores de Apache Flex creada en 2006.

Apache Flex, anteriormente conocido como Adobe Flex, es un SDK (kit de desarrollo de software) para crear aplicaciones enriquecidas - multiplataforma basadas en Adobe Flash donado por Adobe a la fundación Apache in 2011 y promocionado a proyecto de primer nivel en Diciembre de 2012.

Actualmente estamos cambiando muchos aspectos del sitio web para ofrecer un sitio útil para toda la comunidad que tenga en cuenta las necesidades actuales.

Últimas Fotos

Instalador de Apache Flex

Entrar o Registrase