Flex – Passando valores entre telas (Custom Events)

Essa semana me deparei com um problema em Flex que eu não estava habituado a resolver: enviar valores de uma tela
para outra. Simples, não?! Na verdade é sim. Depois de entender a mecânica por trás dos eventos o negócio fica fácil.
Pretendo que a explicação seja direta e didática ao mesmo tempo. O projeto pode ser baixado >>>aqui<<<.

Estrutura da aplicação

Resumo da aplicação:

  • uma tela que contém um campo com entrada de texto e um botão;
  • uma tela que contém um campo que receberá o valor digitado no campo da primeira tela;
  • um evento personalizado que fará com que o valor seja transportado entre as telas;

Códigos

Tela1.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">

 <mx:Script>
 <![CDATA[
 import mx.managers.PopUpManager;
 import br.com.serjaum.events.EnviarValorEvent;

 private function init():void{
 addEventListener(EnviarValorEvent.ENVIAR, enviarValor);
 }

 private function enviarValor(event:EnviarValorEvent):void {
 var tela2 : Tela2 = new Tela2();
 tela2.valor2 = event.valor;
 PopUpManager.addPopUp(tela2, this, true);
 PopUpManager.centerPopUp(tela2);
 }

 ]]>
 </mx:Script>
 <mx:Panel x="25" y="27" width="346" height="207" layout="absolute" title="Tela1">
 <mx:Button  x="160" y="8" label="Enviar valor para Tela2">
 <mx:click>
 <![CDATA[
 dispatchEvent(new EnviarValorEvent(campo1.text));
 ]]>
 </mx:click>
 </mx:Button>
 <mx:TextInput id="campo1" x="66" y="8" width="86"/>
 <mx:Label x="10" y="10" text="Valor "/>
 </mx:Panel>

</mx:Application>

Tela2.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" x="287" y="191" width="346" height="207" layout="absolute" title="Tela2">

 <mx:Script>
 <![CDATA[
 import br.com.serjaum.events.EnviarValorEvent;

 [Bindable]
 public var valor2:String;

 ]]>
 </mx:Script>

 <mx:TextInput id="campo2" x="83" y="60" text="{valor2}"/>
</mx:Panel>

EnviarValorEvent.as

package br.com.serjaum.events{
 import flash.events.Event;

 public class EnviarValorEvent extends Event{
 public var valor:String;
 public static const ENVIAR:String = "Editar";

 public function EnviarValorEvent(valor:String){
 super(ENVIAR, true, true);
 this.valor = valor;
 }

 override public function clone():Event{
 return new EnviarValorEvent(valor);
 }
 }
}

Explicando o código

O nosso evento customizado EnviarValorEvent precisa estender a classe Event.

public class EnviarValorEvent extends Event{

A variável valor será enviada pra outra tela. Declarei a mesma como String, mas poderia ter definido outro tipo como Object, por exemplo.

public var valor:String;

A constante criada tem a função de nomear o evento. É criada como constante como forma de padronizar os eventos. Por ex: MouseEvent.CLICK

public static const ENVIAR:String = “Editar”;

O construtor herda todo o comportamento da classe Event e atribui à variável valor o valor enviado como argumento.

public function EnviarValorEvent(valor:String){
super(ENVIAR, true, true);
this.valor = valor;
}

O método clone deve estar presente no nosso custom event, caso isso não ocorra você poderá não ter o comportamento esperado na hora de passar os parâmetros e pegar os erros que poderão ocorrer no flash player.

override public function clone():Event{
return new EnviarValorEvent(valor);
}

Na tela1 temos o método responsável por atribuir o valor disparado no clique do botão à variável valor2 que pertence à tela2. A tela2 é exibida em seguida:

private function enviarValor(event:EnviarValorEvent):void {
var tela2 : Tela2 = new Tela2();
tela2.valor2 = event.valor;
PopUpManager.addPopUp(tela2, this, true);
PopUpManager.centerPopUp(tela2);
}

O evento é disparado pelo botão:

<mx:Button  x="160" y="8" label="Enviar valor para Tela2">
 <mx:click>
 <![CDATA[
 dispatchEvent(new EnviarValorEvent(campo1.text));
 ]]>
 </mx:click>
 </mx:Button>

Para que o evento seja “escutado” precisamos registrá-lo com o comando:

addEventListener(EnviarValorEvent.ENVIAR, enviarValor);

Na tela2 temos a váriavel valor2 que receberá o valor disparado pelo evento e exibirá no campo de texto campo2:

<mx:TextInput id=”campo2″ x=”83″ y=”60″ text=”{valor2}”/>

Até o próximo post!


One Comment on “Flex – Passando valores entre telas (Custom Events)”

  1. João Marques disse:

    Boa tarde, gostei muito e tive uma dificuldade parecida.

    Estou tentando passar informação de um Datagrid(onclick) para uma popup onde estaria o detalhamento daquela linha(como mestre detalhe).

    Segui todo a logica do que foi feito…. mas não consegui.

    Teria como me dar uma luz?

    Obrigado.


Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s