José Fernando Carvalho

Pessoal, acabou de sair do forno um exemplo de PopUP no Flex. So não parei pra dar uma otimizada. Para fazer essa belezinha funcionar utilizei:

mx.managers.PopUpManager
mx.effects.Parallel
mx.effects.easing.Bounce
mx.effects.Blur

Exemplo

obs. Coloquem o < antes de inicio de tags.

Passo-a-Passo

No Adobe Flex Builder, File > New Flex Project. Digite um nome para o projeto, seu tipo como Web application (runs in Flash Player) e Finish.

Abra o arquivo que se encontra na pasta src do seu projeto. No meu caso FishBlog.mxml.

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

Note que inseri um Listener “creationComplete=”Join()””. Isso me garante, que ao iniciar a aplicação, a funcão “Join()” será executada automaticamente. Vamos agora inserir o Action Script com os imports necessários para a aplicação, juntamente com a pasta COMP. Mais afrente explicarei o porquê dessa pasta.

< ?xml version="1.0" encoding="utf-8"?>
mx:Application  creationComplete="Join()" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >
mx:Script>
< ![CDATA[
import comp.test
import mx.managers.PopUpManager
import mx.effects.easing.Bounce
]]>
/mx:Script>
/mx:Application>

Agora, criaremos a função do Listener, citada acima. Observe que utilizei a variável COMPONENTE, do tipo TEST. A variavel COMPONETE será instanciada como um PopUP(PopUpManager.createPopUp) do tipo TEST.

< ?xml version="1.0" encoding="utf-8"?>
mx:Application creationComplete="Join()" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
mx:Script>
< ![CDATA[
import comp.test
import mx.managers.PopUpManager
import mx.effects.easing.Bounce
public function Join():void{
var componente : test = test(PopUpManager.createPopUp(this, comp.test , true));
componente.setFocus();
PopUpManager.centerPopUp(componente);
efeitos.target=componente;
efeitos.play();
}
]]>
/mx:Script>
/mx:Application>

A Pasta COMP, possui uma classe chamada test. Essa classe será o tipo de objeto que iremos apresentar no PopUP. Nesse caso um TitleWindow. No trecho abaixo, eu configurei o foco do sistema para o objeto componete e centralizei o PopUP.

componente.setFocus();
PopUpManager.centerPopUp(componente);

O objeto “efeitos” é do tipo Parallel e contem outro elemento, o Sequence. O objeto Parallel contém efeitos que vão funcionar em determinado “alvo”, no nosso caso, “componete”. Ja o Sequence, irá executar os efeitos, de acordo com a disposição, em linha, no código. Ou seja, eles serão executados, um após o outro.

efeitos.target=componente;
efeitos.play();
}
 
]]>
/mx:Script>
mx:Parallel id="efeitos">
mx:WipeDown moveEasingFunction="Bounce.easeOut" duration="1500"/>
mx:Sequence>
mx:Blur duration="300" blurYFrom="1.0" blurYTo="20.0" />
mx:Blur duration="300" blurYFrom="20.0" blurYTo="1" />
/mx:Sequence>
/mx:Parallel>
/mx:Application>

Então, dentro do Parallel teremos o WipeDown(efeito de uma cortina caindo) e dentro do Sequence, o Blur(efeito de um terremoto no popup). No trecho moveEasingFunction=”Bounce.easeOut”, teremos aquele Bump(quando o WipeDown chegar ao fim do TileWindow, dará ums pulinhos). Coloquei valores altos para os efeitos fazerem a diferença.

Dentro da pasta SRC, no seu projeto, crie outra pasta com o nome comp. Nela adicione um MXML Component do tipo TitleWindow, com o nome test. Abaixo, o código do componente. Simplesmente adicionei um Button. Ao clicar no Button, a função fecharPopUp() será “chamada”. Nela teremos o metodo PopUpManager.removePopUp().

< ?xml version="1.0" encoding="utf-8"?>
mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="168" title="PopUp">
mx:Script>
< ![CDATA[
import mx.managers.PopUpManager
public function fecharPopUp():void{
PopUpManager.removePopUp(this);
}
]]>
/mx:Script>
mx:Button x="157" y="96" label="Fechar" id="TestButton" click="fecharPopUp()"/&gt;
/mx:TitleWindow>

Ok galera, espero ter dado uma luz. Deus abençoe vocês.

Escrito por Fernando Carvalho \\ tags: Flex