Criando sistemas reais com Flex – Parte 02

No artigo anterior, começamos a falar sobre a criação de sistemas reais em Flex. Hoje iremos comentar melhor sobre a criação de sistemas contratados, ou seja, não é preciso investir muito tempo com design. Apenas criamos um ambiente similar ao “windows” e concentramos nossos esforços na criação de telas que atendem aos requisitos do software.

Resumindo

1. Você pode dividir um sistema pela quantidade de telas (Grande/Pequeno).
2. Você pode definir a quantidade de horas gastas em cada parte do software dependendo de quem banca o software.
3. Você terá que tomar decisões diferentes para cada tipo de necessidade
4. O Gráfico a seguir ilustra (ou tenta, eu não sou o dono da verdade…) o processo

Neste artigo estaremos simulando o seguinte processo:

O Cliente Zé da Couves, que possui uma empresa de caminhões de entrega em todo o país, quer que seus caminhoneiros registrem a passagem dos caminhões pelas mais diversas situações, tais como abastecimento, mecânica, rotas, despesas com alimentação etc. Tudo será registrado. Vamos imaginar que existe um notebook em cada caminhão e um acesso à internet razoável.

Ou seja, temos:

• Sistema médio: 50 telas
• Cadastro de caminhões, produtos, empresas, funcionários
• Cadastro de cidades, rotas, tempo entre as rotas e rotas alternativas
• Cadastro de Postos de gasolina, lojas de conveniência, mecânica
• Cadastro de pedágios, postos policiais
• Embarque de produtos, definição de rotas, definição do custo total
• E muito mais.

Baseado neste exemplo, pode-se definir rapidamente a tela da aplicação principal, como na figura abaixo:

Exemplo básico de uma aplicação MDI, feito com o software Balsamiq Mockups. Ou seja, em sistemas grandes, temos no topo uma área de menu, seguido de uma busca, e no centro uma região MDI, para abrirmos as janelas do sistema.

O que é MDI?

Significa “Multiple Document Interface“. Muito popular nas aplicações Delphi, e odiada por pessoas que acreditam que o Flex deve ser 100% RIA. Lembre-se, você terá que desenvolver dezenas de telas para um cliente. Ele nem sabe o que é MDI. Então vamos facilitar o nosso lado e fazer com que tudo seja criado de forma mais fácil.

Como implementar o MDI no Flex?

Você pode ver diversos exemplos aqui. No próximo artigo irei comentar melhor o MDI, mas certifique-se de instalá-lo para conhecê-lo melhor.

Menus do tipo Windows

Após criar as janelas MDI, temos que criar um menu semelhante ao menu das aplicações do tipo Windows. Geralmente esse menu fica na parte superior esquerda da aplicação.

Para criar um menu, pode-se utilizar o componente MenuBar, na seguinte forma:

<?xml version="1.0" encoding="utf-8"?><br /><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"><br /><br /><mx:MenuBar width="100%" labelField="@label" id="MyMenuBar" itemClick="OnClickMenu(event)"><br /><mx:XMLList><br /><menuitem label="File"><br />    <menuitem label="Open" /><br />    <menuitem label="Save" /><br />    <menuitem label="Exit" /><br /></menuitem><br /><menuitem label="Edit"><br /><menuitem label="Cut"/><br /><menuitem label="Copy"/><br /><menuitem label="Paste"/><br /></menuitem><br /></mx:XMLList><br /></mx:MenuBar><br /><br /><mx:Script><br />    <![CDATA[<br />        import mx.controls.Alert;<br />        import mx.events.MenuEvent;<br />        <br />        private function OnClickMenu(event:MenuEvent):void<br />        {<br />            Alert.show("Voce acessou: " + event.label)<br />            <br />        }<br />        <br />    ]]><br /></mx:Script><br /><br /></mx:Application>

O código acima resulta no seguinte resultado:

Aplicando Temas

Não é porque estamos dedicando todo o tempo de trabalho para construir umas 50 telas de um sistema de médio porte que vamos nos esquecer de colocar um pouco de cor na nossa aplicação. Mas vamos ser rápidos e astutos o suficiente para não perder muito tempo com isso. 

Acesse http://www.scalenine.com e clique na aba “Gallery”. Dê uma olhada no tema que mais lhe agrada e baixe o arquivo com o tema, clicando no link “Get Source”

Após baixar o seu tema predileto, descompacte-o para que possa obter os arquivos necessários para configurar a sua tela.

Para instalar o tema, deve-se:

1. Copiar a pasta src/assets para o seu projeto
2. Copiar o arquivo CSS para o seu projeto (pasta src)
3. Copiar o arquivo lib/SeuTema.swc para a pasta libs do projeto
4. Incluir no seu projeto a chamada ao arquivo CSS

O projeto fica desta forma:

E o resultado é:

Aplicando um skin na nossa aplicação, já temos um efeito mais bonito. Acredito ser o suficiente para um sistema de médio porte.

No próximo artigo, iremos aprender mais sobre as MDI Windows e criar uma forma correta de acesso a elas, através do padrão de projetos Factory.

Até lá!