BT

A sua opinião é importante! Por favor preencha a pesquisa do InfoQ!

Data Binding no Flex 4

| por Marcelo Marmol Seguir 0 Seguidores em 01 jun 2010. Tempo estimado de leitura: 2 minutos |

Para melhorar a experiência das pessoas que acessam o InfoQ Brasil, nós criamos uma série de funcionalidades que te permitem ficar pode dentro das últimas tendências e das novidades de seu interesse, sem que você seja incomodado por coisas irrelevantes. Receba e-mails periódicos e notificações sobre seus tópicos favoritos!

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/

Avalie esse artigo

Relevância
Estilo/Redação

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

Faça seu login para melhorar sua experiência com o InfoQ e ter acesso a funcionalidades exclusivas


Esqueci minha senha

Follow

Siga seus tópicos e editores favoritos

Acompanhe e seja notificados sobre as mais importantes novidades do mundo do desenvolvimento de software.

Like

Mais interação, mais personalização

Crie seu próprio feed de novidades escolhendo os tópicos e pessoas que você gostaria de acompanhar.

Notifications

Fique por dentro das novidades!

Configure as notificações e acompanhe as novidades relacionada a tópicos, conteúdos e pessoas de seu interesse

BT