Data Binding no Flex 4

Postado por Marcelo Marmol em 01 Jun 2010

Seções

Desenvolvimento

Tópicos

Flex ,

Frameworks Web ,

WOA ,

Adobe ,

Flash ,

Arquitetura ,

RIA

Compartilhar |

Data binding é um recurso do Adobe Flex que permite a cópia de dados em tempo real entre dois objetos. Para fazê-lo, o framework tem eventos que são disparados automaticamente quando uma propriedade de um objeto muda, copiando o dado no outro objeto.

Na versão anterior do Flex SDK 3, o data binding, era possível, mas era em um único sentido, o que o tornava  uma ferramenta muito UTI, porem quando era preciso que o data binding fosse nos dois sentidos os desenvolvedores tinham que realizar um binding duplicado.

Exemplo de data binding nos dois sentido em Flex 3:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
                    <mx:Binding source="txtA.text" destination=" txtB.text"/>
                    <mx:Binding source="txtB.text" destination=" txtA.text"/>
                    <mx:TextInput id="txtA"/>
                    <mx:TextInput id-"txtB"/>
</mx:Application>

Este exemplo é básico e já demonstra como era complicado fazer o databinding nos dois sentidos. O que fica mais complexo ainda, se o objeto que queremos "bindear" é um objeto com dados de negocio, como por exemplo, um usuário e tivermos múltiplos campos ou arrays nele.

Para as pessoas que vem do desenvolvimento J2EE e estão acostumados ou pessoas que utilizam javascript, o binding automático com os campos do formulário HTML, encontravam resistência e justificavam como um problema tedioso para ser resolvido.

Felizmente, na nova versão do Flex SDK 4 o databinding agora pode ser realizado nos dois sentidos mais facilmente.

Um exemplo anterior em Flex 4 ficaria da seguinte maneira:

<?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/mx">
                    <fx:Binding source="txtA.text" destination="txtB.text" twoWay="true"/>
                    <s:TextInput id="txtA"/>
                    <s:TextInput id="txtB"/>
</s:Application>

Ou podemos ainda fazer a mesma tarefa de um jeito mais simples:

<?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/mx">
                    <s:TextInput id="txtA"/>
                    <s:TextInput text="@{txtA.text}"/>
</s:Application>

Esta nova característica facilita o trabalho e diminui o risco de cometer-se erros no desenvolvimento.

Abaixo existem dois links com exemplos mais complexos, que podem ser experimentados para ver as diferenças em um caso mais real. Os códigos fontes estão incluídos, para visualizá-lo basta clicar com o direito e solicitar o View Source.

http://www.trueagile.org/examples/2WayDataBindingF4/

http://www.trueagile.org/examples/2WayDataBindingF3/