Como eu to programando muito em Flex 2 ultimamente, por causa do meu projeto final da faculdade, estarei escrevendo vários artigos sobre Flex 2, principalmente sobre XML.

Antes de começarmos com a parte prática, você precisa entender alguns conceitos:

1º – No Flex, como nas outras linguagens para desktop, temos um arquivo main, que é o executável principal. Ele é o arquivo onde serão adicionadas as variáveis e objetos globais da aplicação.

2º – Não confunda criar janelas com States. Eu estarei explicando em outro artigo sobre a criação de aplicações usando States.

3º – Você pode criar variáveis e objetos globais no executável principal para otimizar a aplicação, como se fossem threads.

Vamos para a parte prática no Flex Builder 2:

1) Vamos criar um projeto básico.

2) Coloque o nome do projeto de Artigo criando janelas.

3) O painel navigator ficará assim após a criação do projeto.

Diretório bin: composto por código-fonte compilado (os mxml viram swf) e arquivos utilizados na aplicação, como xml, imagens, css.
Diretório html-template: são a partir destes modelos que o Flex Builder cria os arquivos html que chamam a sua aplicação. Eles possuem alguns recursos como a verificação automática do flash player.

4) Vamos criar os pacotes para organizar a nossa aplicação. Crie assim: renanfretta/tutoriais/janelas. Explico abaixo como criar os pacotes:

É só clicar com o botão direito do mouse onde você quiser criar o pacote (neste caso é na raíz, ou seja, clique no nome do projeto) e escolher a opção new e depois folder. O painel navigator ficará assim:

5) Agora com o botão direito em cima do pacote janelas. Selecione a opção new e depois MXML Component.

6) Escolha o componente TitleWindow (que é a janela no Flex) com o nome de JanelaTeste.

7) No arquivo JanelaTeste.mxml escolha o modo visual do Flex adicione algum texto dentro da janela. Se quiser também coloque o título da janela. Minha janela e o código fonte-ficou assim:

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:TitleWindow
xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”horizontal”
width=”400″
height=”300″
title=”Janela de Teste”
verticalAlign=”middle”
horizontalAlign=”center”>

<mx:Label
x=”121″
y=”109″
text=”Bem vindo a Janela de Teste”/>

</mx:TitleWindow>

Agora vá ao arquivo main.mxml e adicione um botão, que chamará a janela.

9) No modo visual, clique no botão e localize no painel Flex Properties a categoria de eventos e adicione a função abrirJanelaTeste no evento click.

10) Agora vamos para o modo do código-fonte para implementarmos a função que criará a janela de teste.

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application
xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”horizontal”
verticalAlign=”middle”
horizontalAlign=”center”>

<mx:Button
label=”Abrir janela de teste”
click=”abrirJanelaTeste()”/>

<mx:Script>
<![CDATA[
// importa a janela do pacote
import renanfretta.tutoriais.janelas.JanelaTeste;

// Importa a classe responsavel pela manipulação de janelas
import mx.managers.PopUpManager;

// Nossa objeto janelaTeste
private var janelaTeste:JanelaTeste;

// Nossa função que cria e abre a janela
private function abrirJanelaTeste():void
{
// Instância a janelaTeste
this.janelaTeste = new JanelaTeste();

// Adiciona a janelaTeste na aplicação main
// o this é o pai, ou seja, onde será adicionada a janela
// o true é o tipo de janela modal = true ou não modal = false
PopUpManager.addPopUp(janelaTeste, this, true);

// Centralizamos a janela na aplicação main
PopUpManager.centerPopUp(janelaTeste);
}
]]>
</mx:Script>

</mx:Application>

11) Agora você pode compilar a sua aplicação e executá-la, mas perceberá que há um problema: não é possível fechar a janela. Então vamos implementar este recurso. No componente JanelaTeste, adicione a propriedade showCloseButton para true. Na aplicação main devemos adicionar um ouvinte ao evento de fechar janela que dispara uma função para fechá-la.
Implemente assim:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application
xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”horizontal”
verticalAlign=”middle”
horizontalAlign=”center”>

<mx:Button
label=”Abrir janela de teste”
click=”abrirJanelaTeste()”/>

<mx:Script>
<![CDATA[
// importa evento de fechar
import mx.events.CloseEvent;
// importa a janela do pacote
import renanfretta.tutoriais.janelas.JanelaTeste;

// Importa a classe responsavel pela manipulação de janelas
import mx.managers.PopUpManager;

// Nossa objeto janelaTeste
private var janelaTeste:JanelaTeste;

// Nossa função que cria e abre a janela
private function abrirJanelaTeste():void
{
// Instância a janelaTeste
this.janelaTeste = new JanelaTeste();

// Adiciona a janelaTeste na aplicação main
// o this é o pai, ou seja, onde será adicionada a janela
// o true é o tipo de janela modal = true ou não modal = false
PopUpManager.addPopUp(janelaTeste, this, true);

// Centralizamos a janela na aplicação main
PopUpManager.centerPopUp(janelaTeste);

// adiciona o evento na janelaTeste
janelaTeste.addEventListener(CloseEvent.CLOSE,
function():void
{
PopUpManager.removePopUp(janelaTeste);
}
);
}

]]>
</mx:Script>

</mx:Application>
12) Finalmente a janela está funcionando corretamente, observe o resultado final:

Baixe aqui o projeto: Artigo criando janelas

Caso tenha alguma dúvida utilize o fórum.
Abraços, Renan Fretta – renan@mxstudio.com.br