BT

Data Binding no Flex 4

por Marcelo Marmol em 01 Jun 2010 |

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/

Olá visitante

Você precisa cadastrar-se no InfoQ Brasil ou para enviar comentários. Há muitas vantagens em se cadastrar.

Obtenha o máximo da experiência do InfoQ Brasil.

Dê sua opinião

HTML é permitido: a,b,br,blockquote,i,li,pre,u,ul,p

Receber mensagens dessa discussão
Comentários da comunidade

HTML é permitido: a,b,br,blockquote,i,li,pre,u,ul,p

Receber mensagens dessa discussão

HTML é permitido: a,b,br,blockquote,i,li,pre,u,ul,p

Receber mensagens dessa discussão

Dê sua opinião

Conteúdo educacional

Feedback geral
Bugs
Publicidade
Editorial
InfoQ Brasil e todo o seu conteúdo: todos os direitos reservados. © 2006-2014 C4Media Inc.
Política de privacidade
BT