Criando PopUp - Enviando e Obtendo Parâmetros do PopUp

Nessa coluna, vocês irão aprender a criar PopUp, enviando parâmetros para ele e obter valores do mesmo quando fechá-lo.

Por | @oficinadanet Programação
Fala Galera !!!!
Mais uma de Flex ai em galera !!!!!!
Resolvi escrever essa coluna que irei demonstrar:
  • Criação de PopUp
  • Passagem de parâmetro para o PopUp
  • Obter valores do PopUp quando fechá-lo


Bom, desenvolvi um pequeno software, que irá realizar algumas operações matemática (+,-,*,/). Na tela principal iremos
escolher o tipo de operação. Esse tipo de operação será passado para o nosso PopUp. Dentro desse PopUp, serão inseridos os dois valores para realizar o cálculo e quando clicado no botão "Realizar a operação e retornar o valor". A partir disso, o PopUp será fechado e o nossa tela principal irá pegar os valores do nosso PopUp!

Coloquei todos os comentários dentro do código =) !

Bom, primeiramente criem um novo projeto em Flex e coloquem o nome de "OperacoesMatematicas".
Após vamos criar o nosso objeto que será o nosso PopUp, para isso cliquem com o botão direito em cima da pasta
source e clique em New - MXML Component, na tela que irá se abrir altere a propriedade FileName para "PopUpRealizaOperacoes", de dois cliques nele e coloque o seu conteúdo:





     width="292" height="154" showCloseButton="true"
     close="removerPopUp(event)" layout="absolute"
     title="Realização do Cálculo">
    
                          import mx.controls.Text;
               import mx.managers.PopUpManager;
               import mx.events.CloseEvent;

               /*Essa variável (Atributo) irá armazenar o resutado de
               operação que iremos realizar*/
               private var _resultado:Number

               /*Aqui estamos criando uma propriedade Resultado (Get),
               ou seja, quando for criado um objeto desse
               popUp, conseguiremos obter o valor do
               atributo _resultado, atraves dessa propriedade.
               Reparem que não criei uma propriedade Set, pois
               não quero que essa varável seja alterada, por
               fora dessa classe*/
              
               public function get Resultado():Number
               {
                     return _resultado;
               }

               /*Essa variável (Atributo) irá armazenar o tipo de
                 operação que iremos realizar*/
               private var _operacao:String = "";
              
               /*Aqui estamos criando uma propriedade Operacao (Get),
                 ou seja, quando for criado um objeto desse
                 popUp, conseguiremos obter o valor do
                 atributo _operacao, atraves dessa propriedade*/
               public function get Operacao():String
               {
                   return _operacao;
               }
              
               /*Aqui estamos criando uma propriedade Operacao (Set),
                 ou seja, quando for criado um objeto desse
                 popUp, conseguiremos alterar o valor do
                 atributo _operacao, atravez dessa propriedade.
                 Reparem que quadno a propriedade Operacao é
                 alterada, é realizado um Switch, setando o valor
                 do label "lblOperacao", setando no Text dele
                 o símbolo da operação desejada*/              
               public function set Operacao(value:String):void
               {
                   _operacao = value;
              
                   switch(_operacao)
                   {
                       case "adicao":
                       {
                              lblOperacao.text = "+";
                              break;
                       }
               case "subtracao":
                       {
                              lblOperacao.text = "-";
                              break;
                       }
                       case "multiplicacao":
                       {
                              lblOperacao.text = "X";
                              break;
                       }                                                                          
                       case "divisao":
                       {
                              lblOperacao.text = "/"
                              break;
                       }
                   }
              
               }
              
               /*Essa função será executada no click do botão, responsável
               por executar o cálculo, reparem que ele seta a nosso
               atributo _resultado, o qual iremos pegar quando fecharmos
               o PopUp. Após realizar o cálculo, estou chamando a funçao
               "removePopUp", passando Null como parametro (pois a função
               espera um parâmetro)*/
               private function executaOperacao ():void
               {
                   switch(_operacao)
                   {
                       case "adicao":
                       {
                              _resultado =parseFloat(txtPrimeiroNumero.text) + parseFloat(txtSegundoNumero.text);
                              break;
                       }
                       case "subtracao":
                       {
                              _resultado = parseFloat(txtPrimeiroNumero.text) - parseFloat(txtSegundoNumero.text);
                              break;
                       }
                       case "multiplicacao":
                       {
                              _resultado = parseFloat(txtPrimeiroNumero.text) * parseFloat(txtSegundoNumero.text);
                              break;
                       }                                                                          
                       case "divisao":
                       {
                              _resultado = parseFloat(txtPrimeiroNumero.text) / parseFloat(txtSegundoNumero.text);
                              break;
                       }
                   }
                   removerPopUp(null);              
               }              
              
              
               /*Essa função, é chamada em duas, ocasiões.
               1-> Quando o nosso PopUp é fechado através
               do "X" do PopUp.
               2-> Logo após a realização do cálculo.
              
               Reparem que dentro dessa função existe um
               tratamento , se o evt for igual a Null, isso
               existe porque somente será disparado o evento (PopUpFechou)
               se o parametro recebido como entrada (evt) for
               igual null. Portanto será disparado o evento PopUpFechou
               somente quando essa função for chamada pela função
               "executaOperacao" e quanfo for fechado pelo "X",
               somente irá fechar o PopUp*/
               private function removerPopUp(evt:CloseEvent):void
               {
                   if(evt == null)
                   {
                       var e:Event = new Event("PopUpFechou");
                       dispatchEvent(e);
                   }
                   PopUpManager.removePopUp(this);
                }
]]>






















Bom aqui temos o PopUp. Agora deem dois cliques em cima da aplicacção "OperacoesMatematicas" e coloquem o seguinte código:





import mx.events.FlexEvent;
import mx.managers.PopUpManager;
private function exibePopUp(evt:MouseEvent):void
{
/*Irá armezenar a operacao desejada, para
passar como parametro para o Pop Up*/
var opcao:String;

/*Esse objeto será o nosso PopUp, portanto
crio um objeto do tipo do nosso pop Up, no
nosso caso um objeto do tipo PopUpRealizaOperacoes,
ou seja o componente que criamos anteriormente*/
var popUp:PopUpRealizaOperacoes;


/*Esse switch realiza o tratamneto da botao
clicado para passar a operação para o nosso
PopUp*/
switch(evt.target.id)
{
             case "btnAdicao":
    {
    opcao = "adicao";
    break;
}
case "btnSubtracao":
{
    opcao = "subtracao";
    break;
}
case "btnMultiplicacao":
{
opcao = "multiplicacao";
break;
}
case "btnDivisao":
{
opcao = "divisao";
break;
}
}

/*No flex temos uma classe chamada PopUpManager,
que é responsavel por realizar operacoes com PopUp/

/*Aqui criamos o Pop atraves do metodo createPopUp.
Como esse metofo retorna um objeto do tipo IFlexDisplayObject,
temos que fazer um casting para o tipo do nosso PopUp*/
popUp = PopUpManager.createPopUp(this,PopUpRealizaOperacoes,true) as PopUpRealizaOperacoes;

/*Aqui adicionamos um ouvinte ao evento PopUpFechou,
que será disparado pelo nosso PopUp.
Quando esse evento for ouvido a função obtemValores
irá ser chamada*/
popUp.addEventListener("PopUpFechou",obtemValores);

/*Aqui estamos passando um parametro para o nosso PopUp,
ou seja, estamos passando para ele o tipo de operação
que irá realizar no PopUp*/
popUp.Operacao = opcao;

/*Essa função exibe o PopUp Centralizado na tela*/
PopUpManager.centerPopUp(popUp);

}

/*Essa função será a responsável por pegar os valores do nosso PopUp*/
private function obtemValores(evt:Event):void
{
/*Algo extremamente importante aqui é o target.
  Estamos recebendo como parametro dessa função
  um evento, e todo evento possui um objeto chamado
  target, ou seja, é o objeto que disparou o evento,
  No nosso caso o PopUp. A partir disso, fazemos um
  casting para o tipo do objeto PopUpRealizaOperacoes
  e aí conseguimos acessar todas as propriedades permitidas
  do target =), ou seja, pegamos tudo que queremos da forma
  (evt.target as PopUpRealizaOperacoes).O_que_queremos*/
  
/*Aqui estamos pegando o valor do TextInput do primeiro valor*/  
var valorUm:String = (evt.target as PopUpRealizaOperacoes).txtPrimeiroNumero.text;

/*Aqui estamos pegando o valor do TextInput do Segundo valor*/
var valorDois:String = (evt.target as PopUpRealizaOperacoes).txtSegundoNumero.text;

/*Aqui estamos pegando a propriedade Resultado do nosso objeto*/
var vlresultado:String = (evt.target as PopUpRealizaOperacoes).Resultado.toString();

/*Aqui estamos pegando o tipo de caracter da operação*/
var tpOperacao:String = (evt.target as PopUpRealizaOperacoes).lblOperacao.text;

/*Aqui estamos montando o label do resultado, concatenando
as informações obtidas pelo retorno PopUp*/
lblresultado.text = valorUm + " " + tpOperacao + " " + valorDois + " = " + vlresultado;
}
]]>



verticalAlign="middle" horizontalAlign="center">




















Bom galera ai esta o nosso exemplo com Popup, espero que seja util para vocês, agora é só usar a criatividade ...
Abraços

Caio Acca

Mais sobre: Flex PopUp Parametro
Share Tweet
Recomendado
Comentários
Carregar comentários
Destaquesver tudo

Siga nossas contas no Twitter