Flex – Trabalhando com PopUps

Neste post irei ensinar como trabalhar com popups de uma maneiras bem simples. Teremos uma aplicação principal com um botão, ao clicarmos no botão o popup será exibido.

Criando a aplicação

Crie uma nova aplicação: File –> New –> MXML application e nomei o arquivo de principal.mxml. Apague seu conteúdo e cole o seguinte código no arquivo:

<?xml version="1.0" encoding="utf-8" ?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="1024" height="768"> 

 <mx:Button click="invocarPopupSerjaum();" x="90" y="97" label="Invocar Popup!" width="295" height="64"/>

 <mx:Script>
 <![CDATA[
  import mx.managers.PopUpManager;
      private function invocarPopupSerjaum() : void {
         var popup : popupSerjaum = new popupSerjaum();
         PopUpManager.addPopUp(popup, this, true );
         PopUpManager.centerPopUp(popup);
     }
  ]]>
 </mx:Script>
</mx:Application>

Criando o popup

Crie um novo componente: File –> New –> MXML component no mesmo diretório onde foi criado o arquivo principal e nomeie o arquivo de popupSerjaum.mxml.

popup

Apague seu conteúdo e cole o seguinte código no arquivo:

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="536" height="440" showCloseButton="true" close="fecharPopup();">
 <mx:Label x="126.5" y="63" text="Popup Serjaum invocado!" fontSize="20" textAlign="center"/>

 <mx:Script>
 <![CDATA[
     import mx.managers.PopUpManager;

     private function fecharPopup() : void {
         PopUpManager.removePopUp(this);
     }
 ]]>
 </mx:Script>

 <mx:ControlBar width="100%">
     <mx:Label text="Componente ControlBar"/>
     <mx:Spacer width="100%"/>
     <mx:Button click="fecharPopup();" label="Fechar"/>
 </mx:ControlBar>

</mx:TitleWindow>

Explicando o código

No código principal destaco as linhas mais importantes:

 PopUpManager.addPopUp(popup, this, true );
 PopUpManager.centerPopUp(popup);

…onde a primeira linha adiciona uma instância de popupSerjaum no gerenciador de popups PopUpManager. Tudo acontece quando o botão é clicado: click=invocarPopupSerjaum()”;

A segunda linha apenas faz com que o popup seja exibido no centro da tela.

No popup exibo o x no canto superior direito com o atributo showCloseButton=”true” e se o mesmo for clicado invocará o método fecharPopup(); que removerá o nosso popup do PopUpManager:

 PopUpManager.removePopUp(this);

Resultado

popupSerjaum

Até o próximo post!



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