Anderson Straube

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:

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

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

4 – FlexMDI.swc adicionado ao projeto:

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

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:

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”.

Escrever um código legível é extremamente importante, principalmente quando se trabalha em equipe e/ou com softwares que estejam em constante evolução, pois muitas vezes é necessário alterar partes do código que outras pessoas escreveram. Um código legível facilita o entendimento de um programa tornando-o mais claro e fácil de interpretá-lo.

Há várias técnicas para se ter um código legível, porém neste post irei me ater a algo tão simples que parece tolo, mas que facilita muito a vida de nós desenvolvedores, além de aumentar a produtividade no desenvolvimento e na inspeção de código: Fonte.

Oras, o que uma simples fonte tem a ver com a legibilidade e produtividade?
Eu diria que tem tudo a ver, pois algo muito comum com principiantes na área é quando a aplicação apresenta um erro de sintaxe e este não consegue identificar sua origem, o código é lido e relido várias vezes até descobrir qual é o trecho de código que está gerando tal erro, muitos deles são causados simplesmente porque o desenvolvedor confundiu os caracteres “(“ por “{“, “[“ por “(“, “1” por “l” … entre outros, justamente porque a fonte não favorecia para essa diferenciação.

A primeira vista parece tão óbvio, mas se levarmos em conta o tempo perdido para entender onde está o erro ou confusões bem típicas (confundir caracteres) onde um olhar menos apurado não consegue detectar à primeira vista, veremos que uma fonte tem papel importante na legibilidade do código e, conseqüentemente uma produtividade melhor!

Na maioria das IDEs a fonte padrão de programação é a Courier New, sendo esta originada a mais de meio século. Será que na criação desta foi pensado em uma fonte que não cansasse a vista bem como proporcionasse legibilidade e leiturabilidade, ou melhor será que não houve nenhuma evolução da ciência nesse sentido?

Para amenizar o problema, no site ProggyFonts você encontra algumas fontes bem interessantes para utilizar na sua IDE, tal como a ProggyFontSZBP, onde o “SZBP” indica slashed zero and bold punctuation, ou seja o zero é cortado e alguns caracteres: ({}[]()’””!,.;;) são escritos em negritos para facilitar a leitura e clareza do código.
Venho utilizando há um bom tempo a fonte “Dina” (figura abaixo) que tem me auxiliado bastante no desenvolvimento.

Não encontrei nenhuma referência que comprovasse cientificamente a porcentagem de melhora (da produtividade) se deixar-mos de usar a fonte padrão que vem na IDE e substituí-la por outra mais adequada! Em todo o caso, desde que mudei a fonte padrão percebi que meu rendimento melhorou bastante, principalmente na inspeção e na manutenção de códigos existentes. Pode ser até efeito psicológico, mas o que importa realmente é sentir-se melhor e mais confortável, o resto é lucro… =)