MDI (Multiple Document Interface) ou Interface de Documentos Múltiplos é 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), ou seja é a capacidade de abrir várias janelas dentro de um mesmo aplicativo.
O FlexMDI é um componente muito bacana para a criação de janelas no Flex. Irei mostrar um exemplo bem simples de como utilizá-lo:

Primeiramente baixe o arquivo swc do FlexMDI e descompacte-o para uma pasta qualquer.

1 – Crie um novo projeto no Flex Builder: File > New > Flex Project:

Novo Projeto

2 – Com o projeto criado, vá no menu Project > Properties:

Properties

3 – Selecione “Flex Build Path” e “Add SWC…”, abrirá um popup para inserir o caminho do arquivo swc baixado anteriormente (flexmdi.swc):

properties

4 – FlexMDI.swc adicionado ao projeto:

add_swc

5 – No arquivo FlexMDI.xml, insira o seguinte código:

?View Code MXML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
    xmlns:flexmdi="http://flexmdi.googlecode.com/"
    creationComplete="onCreationComplete()"
    viewSourceURL="srcview/index.html">
 
    <mx:Script>
        <![CDATA[
            import flexmdi.effects.MDIEffectsDescriptorBase;
            import flexmdi.effects.effectsLib.MDILinearEffects;
            import flexmdi.effects.effectsLib.MDIVistaEffects;
            import mx.controls.Alert;    
 
            private function onCreationComplete():void
            {
                mdiCanvas.effectsLib = flexmdi.effects.effectsLib.MDIVistaEffects;
            }
 
            private function AdicionarJanela():void
            {
                var win:MDIWindow = new MDIWindow();
                win.width = 350;
                win.title = "Janela " + String( mdiCanvas.windowManager.windowList.length + 1 );
                mdiCanvas.windowManager.add(win);
            }
 
        ]]>
    </mx:Script>
 
    <mx:ApplicationControlBar width="100%" height="40" dock="true">
        <mx:Button label="Adicionar janela" click="AdicionarJanela()"/>
        <mx:VRule height="30" />
        <mx:Label text="Janelas:" color="#FFFFFF" fontWeight="bold"/>
        <mx:Button label="Lado a lado" click="mdiCanvas.windowManager.tile(true, 10)" />
        <mx:Button label="Cascata" click="mdiCanvas.windowManager.cascade()" />
    </mx:ApplicationControlBar>
 
    <flexmdi:MDICanvas id="mdiCanvas" bottom="2" top="10" left="5" right="5">
 
        <flexmdi:MDIWindow id="win1" title="Janela 1" x="10" y="10"/>
 
        <flexmdi:MDIWindow id="win2" title="Janela 2" x="99" y="84"/>
 
        <flexmdi:MDIWindow id="win3" title="Janela 3" x="217" y="170">
            <mx:Form width="100%" height="100%">
                <mx:FormItem label="Teste"  width="100%">
                    <mx:TextInput width="100%"/>
                </mx:FormItem>
                <mx:FormItem label="Teste" width="100%" height="100%">
                    <mx:TextArea height="100%" width="100%"/>
                    <mx:Button label="Teste" click="Alert.show('teste')"/>
                </mx:FormItem>
            </mx:Form>
        </flexmdi:MDIWindow>
 
    </flexmdi:MDICanvas>
 
</mx:Application>

6 – Compile o arquivo:

Run

Pronto! Simples não é?!

Veja aqui a aplicação rodando (para ver o código fonte é só clicar com o botão direito e “View Source”.