Flex/ Flex 3 para Flex 4/ Flex 3 SDK/ Flex 4

Flex 3 para Flex 4: Binding

Uma das grandes vantagens de usar o Flex é fazer uso do Databinding, coisa que ele faz muito bem para quem sabe usar. Databinding para quem não sabe é um língua solta. Tudo que acontece na variável que ele está de butuca, ele vai acabar contando para o patrão dele, ou seja o cara que está esperando a resposta da variável que ele está observando.

No Flex 3 você pode fazer binding da seguinte maneira:

1
2
3
4
 
<mx:Binding source="txtB.text" destination="txtA.text"/>
   <mx:TextInput x="154" y="68" id="txtA"/>
   <mx:TextInput x="154" y="122" id="txtB"/>

Ou você pode fazer assim:

1
2
3
4
5
6
7
8
9
10
11
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
 
			[Bindable]public var dados:ArrayCollection;
 
 
		]]>
	</mx:Script>
 
	<mx:List dataProvider="{dados}"/>

E diretamente em Classes, você pode bindar uma classe inteira assim:

1
2
3
4
5
6
7
8
9
10
11
12
package com.igorcosta.migracao.Binding
{
	[Bindable]
	public class BlogPost
	{
		public function BlogPost()
		{
		}
		public var valor:Number;
		public var debito:Number;
	}
}

Até ai tudo bem, lembrando que é sempre bom você ter cuidado ao uso do Binding, vai que você usa em excesso e depois seu aplicativo fica que nem uma carroça. Só que no Flex 3, Binding é possível apenas de um recurso para outro recurso, e não vice-versa nativamente. Você pode até ter alguns truques na manga como esse aqui:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?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 x="154" y="68" id="txtA"/>
	<mx:TextInput x="154" y="122" id="txtB"/>
	<mx:Label x="87" y="70" text="Campo A"/>
	<mx:Label x="87" y="124" text="Campo B"/>
 
 
	<mx:Script>
</mx:Application>

Se você tiver feito isso, é mais um problema para você se preocupar no futuro. Então é ai que vem no Flex 4 uma maneira super simples de fazer isso, chamado de Two-way-databinding, que é mais ou menos assim a sintaxe comparada com o último exemplo do Flex 3 acima:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?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" minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
 
	<s:TextInput id="campoA"/>
	<s:TextInput id="campoB" text="@{campoA.text}"/>
</s:Application>

Através do @ eu consigo amarrar o dedo-duro do Binding tanto indo como vindo, em ambos os campos, independente da ordem que eu os altero, se alterar em 1, irá alterar em outro a propriedade text em ambos os campos.

Então da próxima vez que você for fazer isso do Flex 3 para o Flex 4, lembre-se do Two-way.

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios são marcados com *