quinta-feira, 25 de setembro de 2014

Entendendo o [Bindable] Flex. Porque não me atualizas de forma automática?




Salve salve galera! Primeiramente quero pedir desculpas pelo meu sumiço, pois estou a uns meses com um milhão de coisas à fazer na empresa. Fora eventos, congressos etc. Mas hoje, vim aqui com algo diferente. Como estou sofrendo um pouco com desenvolvimento em Flex, venho aqui repassar um conhecimento adquirido em um momento de dificuldade com a API. Afinal, como faço para atualizar campos e variáveis de forma automática? Essa resposta você terá agora! Lets go!


O Binding é uma forma de linkar propriedades entre objetos e componentes visuais (que não deixam de ser objetos). A concepção é simples, quando fazemos esse binding, a atualização das informações são centralizadas um único local.
Por exemplo, se tivermos um objeto Pessoa e uma interface que vai receber as informações de uma pessoa. Se os dados já existirem em algum lugar, queremos que esses dados seja mostrados na interface. Com o Binding referenciamos os atributos do objeto Pessoa para cada entrada de dados na interface, então quando os dados do objeto Pessoa forem alterados, os dados na interface também o serão.

Vamos a um exemplo simples:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
[Bindable]
public var yourname : String = “Bob”;
private function buttonHandler():void{
this.yourname = ti.text;
}
]]>
</mx:Script>
<mx:HBox bottom=”0” top=”0” left=”50” right=”50” horizontalAlign=”center” verticalAlign=”middle>
<mx:FormItem label=”Your Name:>
<mx:TextInput id=”ti/>
</mx:FormItem>
<mx:FormItem label=”Your Name atualizado:>
<mx:TextInput text=”{this.yourname}” id=”tibinded/>
</mx:FormItem>
<mx:Button click=”buttonHandler()” label=”Update Binding/>
</mx:HBox>
</mx:Application>

Verificamos então que temos um atributo “yourname” marcado como Bindable. E podemos ver também que existe um componente TextInput denominado tibinded que recebe em sua propriedade text o valor do atributo yourname. Então sabemos que quando o programa for executado, a caixa tibinded virá com o valor “Bod” – você vai falar “Lógico que sim! Onde esse cara quer chegar?”. E isso acontece mesmo. Porém quando digitamos algo na caixa “ti” e clicamos no botão “Update Binding”, a função que é executada atualiza apenas o atributo “yourname”, mas, ora essa a caixa tibinded também foi atualizada. É UM MILAGRE!

Bom, também podemos fazer ao contrário. Ao digitar algo na caixa de texto, atualizar automaticamente o atributo “yourname”. Mas agora vamos fazer de forma diferente, utilizando a classe utilitária BindingUtils.

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute
creationComplete=”startup()”>
<mx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
import mx.controls.Alert;
[Bindable]
public var yourname : String = “”;
private function startup():void{
BindingUtils.bindProperty(this, “yourname”, ti, “text”);
}
private function buttonHandler():void{
Alert.show(“Valor de yourname: “+yourname);
}
]]>
</mx:Script>
<mx:HBox bottom=”0” top=”0” left=”50” right=”50” horizontalAlign=”center” verticalAlign=”middle>
<mx:FormItem label=”Your Name:>
<mx:TextInput id=”ti/>
</mx:FormItem>
<mx:FormItem label=”Your Name atualizado:>
<mx:TextInput text=”{this.yourname}” id=”tibinded/>
</mx:FormItem>
<mx:Button click=”buttonHandler()” label=”Update Binding/>
</mx:HBox>
</mx:Application>

Bom, agora quando digitamos o texto na caixa ti, ele é automaticamente atualizado no atributo yourname, que, por fim, repassa as informações para a caixa tibinded. Agora quando clicamos no botão “Update Binding” ele informa, através de um Alert, o valor de “yourname”.

É isso ai!

Admin: Bruno

Olá Galera! muito grato por estarem acessando nosso blog. Espero que seja possível transmitir de forma compreensível um pouco de meus conhecimentos em programação, para esta comunidade de desenvolvedores que cresce cada vez mais! Espero que Gostem! Abraço! E meu enorme obrigado à Renato Simões, Átila Soares,Wanderson Quinto, Emerson e a toda galera que sempre ajudou meu sincero obrigado....
Especialmente a Natalia Failache e Rita de Cassia que sempre apoiaram este sonho....

De seu amigo Bruno Rafael.