Olá amigos
Neste post quero comentar uma nova feature do Flex SDK 4 que é o “two-way data binding”, mas o que é e no que isso pode nos auxiliar no dia a dia?
Mas afinal, o que é o Data Binding? É a ação de passar valores de um objeto para outro de forma automática. Quando um objeto sofre uma alteração em determinada propriedade dele, essa alteração é refletida em algum atributo de um objeto. Esse objeto pode ou não, vir a ser o mesmo objeto que sofreu a primeira alteração.
No Flex 3.x o Data Binding possibilitava o espelhamento de informação de um objeto para outro porém o inverso não ocorria de forma automática, dessa forma, éramos obrigados a criar outro Binding, só que desta vez, fazendo a operação de forma inversa, conforme segue código abaixo:
1 2 3 4 5 6 7 8 9 10 | <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Binding source="campoA.text" destination="campoB.text"/> <mx:Binding source="campoB.text" destination="campoA.text"/> <mx:TextInput id="campoA" x="10" y="10"/> <mx:TextInput id="campoB" x="178" y="10"/> </mx:Application> |
Obviamente que isso dificultava o trabalho do desenvolvedor em seu dia-a-dia, além de aumentar o consumo de memória das aplicações.
No Flex 4.0 a Adobe preparou uma ótima surpresa para auxiliar neste problema – “Two-way Data Binding”.
Mas como ele funciona? Simples, através da declaração adicional twoWay no objeto Binding você pode definir se o binding deve enviar e receber alterações no atributo do objeto de origem.
Veja exemplo abaixo:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <?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:Declarations> </fx:Declarations> <fx:Binding source="campoA.text" destination="campoB.text" twoWay="true"/> <s:TextInput x="10" y="21" id="campoA"/> <s:TextInput x="146" y="21" id="campoB"/> </s:Application> |
Simples, dessa forma já qualquer alteração feita no TextInput “campoB” será refletida no TextInput “campoA” e vice-versa.
Também é possível fazer a declaração conforme exemplo abaixo, utilizando o @ em conjunto com os {}:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <?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:Declarations> </fx:Declarations> <fx:Binding source="campoA.text" destination="campoB.text" twoWay="true"/> <s:TextInput x="10" y="21" id="campoA"/> <s:TextInput x="146" y="21" id="campoB"/> <s:TextInput x="10" y="65" id="campoC" text="@{campoD.text}"/> <s:TextInput x="150" y="65" id="campoD"/> </s:Application> |
Eu prefiro a primeira opção, utilizando a declaração do < fx:Binding > para um melhor entendimento e ordenação do código-fonte.
Um abraço e até a próxima.
excelente dica, mais uma vez o flex facilitando a nossa vida
O Flex 4 SDK está muito legal, tenho feito o download de todas as pre-releases e realmente dá vontade de usar do dia a dia já, porém ainda temos que aguardar por não estar 100% finalizado.
Já comecei a alterar os nossos componentes e o seu tamanho tem diminuído bastante. Flex 4 vai ser muito bom!
Sem dúvida um recurso muito útil. Porém uma coisa ainda não está boa: Não é possível fazer esse data binding em variáveis diferentes.
Ou seja, isso aqui: “” dá “Error: Implicit coercion of a value of type String to an unrelated type int”. Onde produto.id é do tipo int.
Sem dúvida um recurso muito útil. Porém uma coisa ainda não está boa: Não é possível fazer esse data binding em variáveis diferentes.
Ou seja, isso aqui: “<mx:TextInput text=”@{produto.id}” />” dá “Error: Implicit coercion of a value of type String to an unrelated type int”. Onde produto.id é do tipo int.
Hi Stefan,
I recently read your InsideRIA post on Flex 4 New Features: Two-way Data Binding and really liked it.
We’re trying to add more links in our docs so that Flex developers are made aware of the great community content out there. I’m wondering whether you would consider adding a comment with a link to your post to the following page:
* Your page: http://www.insideria.com/2010/02/flex-4-new-features-two-way-da.html
* Our page: http://help.adobe.com/en_US/Flex/4.0/UsingSDK/WS2db454920e96a9e51e63e3d11c0bf69084-7cc0.html
Integration of customer-generated content is a key component in the success of the Flash platform documentation, so we really appreciate your contribution. FYI, here’s a blog post with a little more information about community help contributions: http://blogs.adobe.com/actionscriptdocs/2009/08/developers_and_writers_adobe_w.html. This post specifically mentions Adobe AIR but we’re doing this across the entire Adobe Flash Platform.
Best regards
Randy Nielsen
Flex Documentation Manager
Adobe Systems Incorporated