sábado, 25 de abril de 2009

Como utilizar o PopUpManager

O PopUpManager é uma classe Singleton - padrão de projeto que garante que vai existir apenas uma única instância da classe a qualquer instante e em qualquer ponto de um sistema. Ela é responsável por mostrar janelas "pop-ups" na camada mais superior da aplicação, sobre todos os outros componentes visuais. Essas janelas podem ser, por exemplo, alertas, menus de contexto, pequenos formulários para inserção de dados, ou até a lista mostrada ao clicar em um combobox.

O PopUpManager também possui a capacidade de deixar a janela mostrada como sendo do tipo modal, ou seja, os componentes visuais que se encontram abaixo do pop-up não poderão receber eventos de mouse. De qualquer forma, ainda será possível detectar eventos de clique fora do pop-up - dessa forma o desenvolvedor pode optar, por exemplo, por fechar a janela popup ou mostrar algum alerta pro usuário quando isso ocorrer.

Bom, mas vamos a um exemplo simples, onde é mostrada e centralizada uma janela pop-up após o clique no botão "Mostrar Pop-up". A janela pop-up, representada pela classe PopUpPanel.as e que pode ser visualizada abaixo, nada mais é do que um Panel comum, que será aberto pela classe PopUpManager através do método estático "addPopUp" (ver linha 14 da classe Main.mxml) e centralizado através do método estático "centerPopUp" (ver linha 15 da classe Main.mxml).


  • Se não conseguir visualizar a aplicação, clique aqui.


Seguem os códigos-fonte:

Main.mxml
<mx:application mx="http://www.adobe.com/2006/mxml" layout="absolute" creationcomplete="createPopUpWindow()">
 <mx:script>
  <!--[CDATA[
   import flexao.popups.PopUpPanel;
   import mx.managers.PopUpManager;

   private var _popUpWindow: PopUpPanel;
   
   private function createPopUpWindow(): void{
    _popUpWindow = new PopUpPanel();
   }

   private function showPopUp(event: MouseEvent): void{
    PopUpManager.addPopUp(_popUpWindow, this, true);
    PopUpManager.centerPopUp(_popUpWindow);
   }
  ]]-->
 </mx:script>

 <mx:button label="Mostrar Pop-Up" click="showPopUp(event)" horizontalcenter="0" verticalcenter="0"/>
</mx:application>

Como pode-se observar, foram passados três parâmetros para o método "addPopUp":
 PopUpManager.addPopUp(_popUpWindow, this, true);
  1. No primeiro, que é do tipo IFlexDisplayObject, deve-se passar a referência do container que representa a janela pop-up (no exemplo, foi utilizada a variável _popUpWindow);
  2. No segundo, que é do tipo IFlexDisplayObject, deve-se passar a referência do container que representa o contaner que será o pai ("parent") da janela pop-up, servindo como referência para a sua centralização (no exemplo, foi passado "this", representando a própria aplicação);
  3. O terceiro, que é do tipo booleano, definirá se a janela pop-up será modal ou não (passar "true" ou "false", respectivamente) - esse argumento é opcional e se não for passado nada, terá o valor "false" como padrão.

PopUpPanel.as
package flexao.popups{
 import flash.events.MouseEvent;

 import mx.containers.Canvas;
 import mx.containers.ControlBar;
 import mx.containers.Panel;
 import mx.controls.Button;
 import mx.controls.Label;
 import mx.controls.Spacer;
 import mx.controls.TextInput;
 import mx.managers.PopUpManager;

 public class PopUpPanel extends Panel{

  public function PopUpPanel(){
   super();
  }

  protected override function createChildren(): void{
   super.createChildren();

   var contMain: Canvas = new Canvas();
   contMain.percentWidth = 100;
   contMain.percentHeight = 100;

   var label: Label = new Label();
   label.text = "Digite a palavra-secreta:";
   label.setStyle("top", 5);
   label.setStyle("left", 5);
   var txtSecretWord: TextInput = new TextInput();
   txtSecretWord.setStyle("top", 25);
   txtSecretWord.setStyle("left", 5);

   var controlBar: ControlBar = new ControlBar();

   var btnOK: Button = new Button();
   btnOK.label = "OK";
   btnOK.addEventListener(MouseEvent.CLICK, closePopUp);
   controlBar.addChild(btnOK);

   var btnCancel: Button = new Button();
   btnCancel.label = "Cancelar";
   btnCancel.addEventListener(MouseEvent.CLICK, closePopUp);
   controlBar.addChild(btnCancel);

   contMain.addChild(label);
   contMain.addChild(txtSecretWord);

   this.title = "Janela Pop-up";
   this.width = 250;
   this.height = 200;
   this.addChild(contMain);

   this.addChild(controlBar);
  }

  private function closePopUp(event: MouseEvent): void{
   PopUpManager.removePopUp(this);
  }
 }
}

Para fechar a janela, basta utilizar o método estático "removePopUp", passando como parâmetro a referência da instância do container que representa a janela pop-up (ver linha 58 da classe PopUpPanel.as) - no exemplo, foi passado "this", pois o método foi chamado da própria janela pop-up.

Um comentário:

Thiago Ribeiro disse...

seu post me ajudou muito, era exatamente o que eu precisava. Obrigado mesmo e parabens pelo blog.