Two-way Data Binding – Flex 4

Two-way data binding é uma das novidades do flex 4 e para quem não conhece, vou mostrar como funciona e o que mudou em relação ao Flex 3.

No Flex 3 tinhamos data binding de apenas uma via, como mostra o exemplo abaixo:

Nesse exemplo, caso o valor da caixa de texto do tiValor1 mudasse, o valor da caixa de texto do tiValor2 seria alterado também, porém, se o valor da caixa tiValor2 fosse alterado, nada seria refletido a caixa de texto tiValor1.

No Flex 4 temos data binding de duas vias, como mostra o exemplo:

Nesse exemplo notamos que a anotação “@” foi colocada antes do meu código “{tiValor1.text}”, essa anotação identifica um data binding de duas vias. O resultado desse exemplo é: Caso eu altere o texto da caixa de texto tiValor1, ele será refletido na caixa de texto tiValor2, e vice-versa.

Obviamente esse exemplo da funcionalidade é muito básico e serve apenas para demonstrar a funcionalidade, logo vou apresentar uma situação real que acontece a todo momento em qualquer aplicação.

Para o nosso exemplo real, vou utilizar uma situação comum para qualquer tipo de aplicação, o CRUD. Para todo CRUD precisamos sempre fazer essas 3 operações:
1. Mostrar o objeto carregado do back-end nas caixas de texto. (Famoso método carregaObjeto)
2. Atualizar o objeto com os novos valores das caixas de texto. (Famoso método preencherObjeto)
3. Limpar as caixas de textos. (Famoso método limpar)

No flex 3 teriamos o seguinte cenário.
Para a situação 1:
caixaDeTexto.text = Objeto.valor;
Para a situação 2:
Objeto.valor = caixaDeTexto.text;
Para a situação 3:
caixaDeTexto.text = “”;

Para quem usava o data binding do flex 3 de uma forma correta, conseguia resolver uma das situações com ele, mas nas outras situações sempre acabava escrevendo a linha de código apresentada.

No flex 4 poderiamos resolver da seguinte forma:

Com essa simples mudança, nós evitaríamos todas as situações acima, dispensando os métodos de carregarObjeto, preencherObjeto e limpar objeto.

Veja o exemplo funcional abaixo:

Fonte:

PLAIN TEXT

ACTIONSCRIPT:

1. xml version=“1.0″ encoding=“utf-8″?>
2. “http://ns.adobe.com/mxml/2009″
3. ? ? ? ? ? ?? ? xmlns:s=“library://ns.adobe.com/flex/spark” maxHeight=“400″ maxWidth=“600″
4. ? ? ? ? ? ?? ? xmlns:mx=“library://ns.adobe.com/flex/mx” width=“600″ height=“400″ xmlns:local=“*”>
5. ? ?
6. ? ? ? ? “user”>
7. ? ? ? ? ? ? 1
8. ? ? ? ? ? ? Bruno Sales
9. ? ? ? ? ? ? São Paulo
10. ? ? ? ?
11. ? ?
12. ? ?
13. ? ?
14. ? ? ? ? [CDATA[
15. ? ? ? ? ? ? private function recarregar():void
16. ? ? ? ? ? ? {
17. ? ? ? ? ? ? ? ? user = new User("1", "Bruno Sales", "São Paulo");
18. ? ? ? ? ? ? }
19. ? ? ? ? ]]>
20. ? ?
21. ? ?
22. ? ?
23. ? ? ? ? “middle” horizontalAlign=“center”/>
24. ? ?
25. ? ?
26. ? ? “Form” width=“250″ height=“180″>
27. ? ? ? ?
28. ? ? ? ? ? ? “Id”>
29. ? ? ? ? ? ? ? ? “tiValor1″ text=“@{user.id}” maxChars=“20″/>
30. ? ? ? ? ? ?
31. ? ? ? ? ? ? “Nome”>
32. ? ? ? ? ? ? ? ? “tiValor2″ text=“@{user.nome}” maxChars=“20″/>
33. ? ? ? ? ? ?
34. ? ? ? ? ? ? “Cidade”>
35. ? ? ? ? ? ? ? ? “tiValor3″ text=“@{user.cidade}” maxChars=“20″/>
36. ? ? ? ? ? ?
37. ? ? ? ? ? ? “right”>
38. ? ? ? ? ? ? ? ? Button label=“Limpar” click=“user = new User()”/>
39. ? ? ? ? ? ?
40. ? ? ? ?
41. ? ?
42. ? ?
43. ? ? “Objeto User” width=“300″ height=“180″>
44. ? ? ? ?
45. ? ? ? ? ? ? “middle” horizontalAlign=“center”/>
46. ? ? ? ?
47. ? ? ? ? “label” text=“{user.toString()}”/>
48. ? ? ? ? Button label=“Recarregar Objeto” click=“recarregar()”/>
49. ? ?
50. ?