Olá pessoal, precisei utilizar MDI Window em um software que estou trabalhando atualmente e fiquei surpreso com a qualidade e organização dos documentos em múltiplas janelas, mas o que é MDI mesmo?

"Uma interface de documentos múltiplos (ou MDI, acrônimo para multiple document interface) é um método de organização de aplicações gráficas em janelas que residem em uma única janela, a janela principal da aplicação. A única exceção são possíveis janelas modais da aplicação" – Wikipédia.

Resumindo, você trabalha com documentos (aplicações) abertos em múltiplas janelas ao mesmo tempo, podemos abrir varias e minimizar, maximizar, arrastar, redimensionar, fechar e com as aplicações executando dentro das mesmas, e isso tudo dentro do Flex.

Com o grande uso de Flex em softwares corporativos baseados em web, o assunto de trabalhar com janelas MDI no Flex voltou a toda, confira você mesmo o porque:

MDIWindow

MDIWindow é um componente da biblioteca FlexLib.

O site do projeto MDI é: http://code.google.com/p/flexmdi/

Neste artigo veremos:

• Instalando o componente MDIWindow no flex.
• Usando MDICanvas.
• Criando uma janela dinamicamente em action script.

Para instalar o componente em sua aplicação siga os passos:

Baixe o arquivo .zip http://code.google.com/p/flexmdi/downloads/list/, não se assuste com o tamanho do pacote, iremos usar apenas um arquivo de 411 KB, o restante são exemplos, docs, etc.

Logo depois de extrair o conteúdo, acesse seu projeto dentro do Flex Builder, ‘Projects’, ‘Properties’ , ‘Flex Build Path’, selecione agora ‘Library path’ e Add SWC, procure o arquivo ‘flexmdi.swc ‘ que esta dentro da pasta que acabamos de descompactar ‘flexmdi-1.1\flexmdi-1.1\bin\ flexmdi.swc’ e clique em ok, pronto o componente MDIWindow está instalado, vejam na tela abaixo as bibliotecas instaladas:

Codigo mxml do projeto:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"   applicationComplete="init();" layout="absolute" xmlns:ns1="flexlib.mdi.containers.*"
>

<mx:Script source="funcoes.as"/>

<!-- ns1:MDICanvas podemos chamar de container, onde as janelas sao abertas-->
<ns1:MDICanvas id="MDICanvas" width="100%" horizontalCenter="0" top="0" bottom="0">

</ns1:MDICanvas>
 <mx:Panel layout="absolute" title="Options"  height="213" width="261" right="10" top="10">

 <!-- Combox apenas para mudar a imagem de fundo  -->
 <mx:ComboBox id="seletorBackground"  change="changeEvt(event)"  x="10" y="40" width="221">

 <mx:ArrayCollection>
 <mx:Object label="Change backGround" data=""/>
 <mx:Object label="Dock" data="Dock.jpg"/>
 <mx:Object label="adobe fx" data="FFAir_Black_1900_small.jpg"/>
 <mx:Object label="Green Sea Turtle" data="Green Sea Turtle.jpg"/>
 <mx:Object label="nuvens" data="nuvens1vo2.jpg"/>
 <mx:Object label="wallpaper nuvens" data="wallpaper-nuvens-full.jpg"/>
 </mx:ArrayCollection>

 </mx:ComboBox>

 <mx:Button label="Click to open window" click="addWindow()"  width="221" x="10" y="10"/>
 <mx:TextArea x="10" y="91" width="221" height="72" id="saida"  />
 <mx:Label x="10" y="75" text="Id open"/>

 </mx:Panel>

</mx:Application>
<pre>

Usaremos um arquivo action script separados para as funções. Arquivo funcoes.as, e deve estar dentro da pasta src, junto com o mxml acima

Codigo funcoes.as:

// ActionScript file

 // importamos as classes MDIWindow
 import flexlib.mdi.containers.MDIWindow;

 // efeito MDIVistaEffects (movimento das janelas)
 import flexlib.mdi.effects.effectsLib.MDIVistaEffects;

 import flash.events.Event;
 import mx.controls.Alert;

 // adiciona uma nova janela, podemos definir varias propriedades para a mesma.
 private function addWindow():void
 {

 var win:MDIWindow = new MDIWindow();
 win.width = 350;
 win.name =  String(MDICanvas.windowManager.windowList.length + 1);
 win.title = "Window " + String(MDICanvas.windowManager.windowList.length + 1);

// aqui adicionamos a janela criada ao id MDICanvas, que esta criado no mxml
MDICanvas.windowManager.add(win);

 // apenas mostra quais estao abertas no campo de texto
 saida.text = '';
 var windows:Array = MDICanvas.windowManager.windowList;
 saida.text += windows;

 }

 // troca a imagem de fundo
 private function changeEvt(event:Event):void {

 var imgback:String = event.currentTarget.selectedItem.data;

 if(imgback)
 {
 imgback = 'images/'+imgback;
 Application.application.setStyle( "backgroundImage", imgback);
 }
 else
 {
 Application.application.setStyle( "backgroundImage", '');
 }

 }

 // na funcao init() estamos chamando ao terminar de carregar o documento
 // então é aplicado o efeito e adiciona algumas janelas.
 private function init():void

 {
 // adiciona efeito nas janelas
 MDICanvas.effectsLib = flexlib.mdi.effects.effectsLib.MDIVistaEffects;

 // adiciona janelas iniciais
 addWindow();
 addWindow();
 addWindow();
 addWindow();

 }

Como podem ver o codigo já está comentado e bem explicado.

Me desculpem se estiver faltando algo, mas como podem ver é bem simples e não requer muitas linhas para explicar!