Repassando valores entre popups

Este é um artigo sugerido pelo leitor Pierre Barbosa. Como repassar valores entre janelas popup? Existem diversas formas para que se possa realizar esta tarefa, como por exemplo:

• O próprio “popup1” pode criar o “popup2” e repassar o valor
• Pode-se utilizar parentApplication para chamar um método da aplicação, e assim abrir e repassar o valor
• Podemos usar singleton para manter um “PopupManager” sempre ativo, chamando-o e repassando o valor
• Utilizar eventos

Dos quatro itens acima, o mais correto seria a utilização do padrão singleton, já discutido neste artigo. O quarto método também é bastante aceito, inclusive existem frameworks flex que são especialistas em gerenciar eventos. Mas neste artigo iremos ver o básico da passagem de valores entre formulários, utilizando eventos.

Eventos

O básico que precisamos saber sobre eventos é:

• Eles podem ser disparados em qualquer lugar
• Eles podem ser capturados nos containers pai
• Eles podem “carregar” dados
• Podemos criar classes que herdam de eventos (“Event”) e aproveitar todas as suas funcionalidades
• Mais informações na API oficial: flash.events

Supondo que queremos repassar informações do “Formulario1” para o “Formulario2”, podemos adotar o seguinte fluxo:

Os arquivos criados nesse projeto são:

• Aplicacao.mxml: Arquivo principal, que tem a responsabilidade de abrir ou popups e registrar os eventos
• Form1.mxml: Um componente (MXML Component) que herda de TitleWindow e dispara o evento repassando algum valor
• Form2.mxml: Um componente (MXML Component) que herda de TitleWindow e recebe o valor da aplicação principal
• AbreForm2: O evento (Crie um “Actionscript Class”, de acordo com a figura abaixo) que o Form1 dispara e a aplicação principal captura, repassando o valor ao Form2

Após criar os quatro arquivos, vamos inicialmente programar o evento “AbreForm2”. Para criar um evento personalizado temos que criar uma classe que herda de event. Nesta classe podemos incluir uma variável que será repassada entre os popups. O código é exibido a seguir:

package<br />{<br />import flash.events.Event;<br /><br />public class AbreForm2 extends Event<br />  {<br /><br />	//Usamos esta constante ao invés de digitar ABreForm2, no momento de registro do evento<br />	public static const AbreForm2EventName:String = "AbreForm2";<br /><br />	public var Valor:String;<br /><br />	public function AbreForm2(Valor:String)<br />	{<br />		//Bubbles significa propagar o evento para os containers superioes<br />		super(AbreForm2EventName,true,true);<br /><br />		//Preenche a variavel Valor, que conterá os dados que serão propagados no evento		<br />		this.Valor = Valor;<br />	}<br /><br />  }<br />}

O evento “AbreForm2” possui uma constante que é o próprio nome do evento. Esta constante será usada para referenciarmos o nome do evento em outros arquivos. Também criamos uma variável chamada “Valor”, que será preenchido no momento em que formos disparar o evento.

Agora vamos programar o formulário “Form1.mxml”. Ele irá disparar o evento que criamos acima.

<mx:titlewindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" title="Form 1" showclosebutton="true" close="{PopUpManager.removePopUp(this)}"><br />	<mx:textinput><br />	<mx:button label="Abrir Popup 2"><br />		<mx:click><br />			<!--[cdata[<br />				dispatchevent(new AbreForm2(txtDados.text));<br />			]]--><br />		</mx:click><br />	</mx:button><br /><br /></mx:textinput><br /></mx:titlewindow>

Agora criamos o formulário “Form2.mxml”. Ele terá uma variável pública chamada “Valor” que será acessada pelo formulário principal.

<?xml version="1.0" encoding="utf-8"?><br /><mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="400" height="300"<br />	title="Form 2" showCloseButton="true" close="{PopUpManager.removePopUp(this)}"<br />	><br />	<mx:Script><br />		<![CDATA[<br />			import mx.managers.PopUpManager;<br /><br />			[Bindable]<br />			public var Valor:String;<br /><br />		]]><br />	</mx:Script><br />	<mx:Label text="{Valor}" fontSize="20"/><br /></mx:TitleWindow>

Para finalizar o pequeno teste de passagem de valores entre popups, iremos criar agora o formulário principal, responsável em abrir o Form1, capturar o seu evento, abrir e repassar o valor para o Form2.

<?xml version="1.0" encoding="utf-8"?><br /><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"<br />	creationComplete="OnCreationComplete()"><br /><br /><mx:Script><br />	<![CDATA[<br />		import mx.managers.PopUpManager;<br />		import mx.containers.Form;<br /><br />		private function OnCreationComplete():void<br />		{<br />			this.systemManager.addEventListener(AbreForm2.AbreForm2EventName,OnAbreForm2);<br />		}<br /><br />		private function OnAbreForm2(event:AbreForm2):void<br />		{<br />			var frm2:Form2 = new Form2();<br />			frm2.Valor = event.Valor;<br />			PopUpManager.addPopUp(frm2,this,true);<br />			PopUpManager.centerPopUp(frm2);<br />		}<br /><br />	]]><br /></mx:Script><br /><br /><br /><mx:Button id="abreForm1" label="Abre Form 1"><br />	<mx:click><br />		<![CDATA[<br /><br />			var frm1:Form1 = new Form1();<br />			PopUpManager.addPopUp(frm1,this,true);<br />			PopUpManager.centerPopUp(frm1);<br /><br />		]]><br />	</mx:click>	<br /></mx:Button><br /><br /></mx:Application>

Dica importante!

Para conseguir capturar os eventos de popups, você deve fazer systemManager.addEventListener e não somente addEventListener.

O código fonte para download está aqui! No zip, também incluí a volta do Form2 para o Form1.

E por último…

Após finalizar o artigo eu percebi que o nome do evento “AbreForm2Event” estava péssimo. Por quê? Porque o nome do evento já dizia a ação a ser realizada. Na verdade um evento deve ser relacionado a um objeto em si e não à sua ação.

O melhor nome para eventos do Form2 seria “Form2Evento”. Então eu teria a seguinte constante dentro do evento: “Open”. Isso faz com que o meu addEventLisntener fica mais coerente, por exemplo:

addEventListener(Form2Event.Open,......

Ficou muito melhor, não acham?