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!
Comentários
Postar um comentário