terça-feira, 10 de fevereiro de 2009

Binding no Flash e no Flex

Olá, vou mostrar algumas diferenças do Flash para Flex.
Como primeiro exemplo, vou ligar dois TextFields, o que você digita no de cima, é copiado para o de baixo em tempo real.

No Flash:
package
{
import fl.controls.Label;
import fl.controls.TextInput;
import flash.display.Sprite;
import flash.events.Event;

public class Flash extends Sprite
{
private var textInput1:TextInput;
private var textInput2:TextInput;
private var labell:Label;
private var label2:Label;

public function Flash()
{
criaLabels();
criarTextInputs();
criaBindable();
}

private function criarTextInputs():void
{
textInput1 = new TextInput();
textInput2 = new TextInput();
textInput1.move(70, 10);
textInput2.move(70, 40);
addChild(textInput1);
addChild(textInput2);
}

private function criaLabels():void
{
labell = new Label();
label2 = new Label();
labell.move(10, 10);
label2.move(10, 40);
labell.text = "Campo 1:";
label2.text = "Campo 2:";
addChild(labell);
addChild(label2);
}

private function criaBindable():void
{
textInput1.addEventListener(Event.CHANGE, binding);
}

private function binding(e:Event):void
{
textInput2.text = textInput1.text;
}

}

}
No Flash tive que criar uma classe para meu SWF, usei o Sprite pois no Flex também não existe "timeline". Importei as classes necessárias para eu trabalhar com TextFields e Labels. Criei, configurei e adicionei no palco os componentes que queria usar.
Depois tive que fazer o "binding", criei um "listener" para ouvir quando o valor do campo de cima fosse alterado e um "callBack" para pegar o valor do campo de cima e atribuir ao de baixo.
Pronto, só isso... UFA!

Agora vamos ao Flex:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:TextInput id="campo1" x="79" y="10"/>
<mx:TextInput x="79" y="40" text="{campo1.text}"/>
<mx:Label x="10" y="12" text="Campo 1:"/>
<mx:Label x="10" y="42" text="Campo 2:"/>
</mx:Application>
Fiz tudo denovo, com excessão dos "imports" e que no Flash eu tive que arrastar os componetes na mão para a biblioteca. No Flex, por se tratar de um framework, ele já entende o que você está fazendo e importa os componentes e classes que serão necessários.
O "binding" são os "{" e "}", isso diz ao framework que quando o valor do "campo1" for atualizado, o valor do "campo2" será atualizado também.

Outra forma de fazer é programar actionscript 3 direto Flex, mas isso é assunto para outro post...

Download do arquivos: