Artigo Java Magazine 25 - Um Sistema Java Completo - parte 1

Java Livre

Um Sistema Java Completo

Criando Aplicações Gráficas com o NetBeans

Parte 1:  Prototipação da interface com o usuário

Aprenda a criar aplicações com aparência profissional, desenvolvendo um exemplo completo no NetBeans, começando com menus, janelas e componentes principais

O NetBeans é hoje o melhor IDE livre para iniciantes em Java, sem no entanto dever nada em recursos voltados para o profissional mais experiente. A versão 4.0 foi apresentada na edição anterior, com foco no novo modelo de projetos, que oferece flexibilidade para os projetos mais complexos. Nesta série de artigos, o enfoque será demonstrar como construir aplicações gráficas com a biblioteca padrão de componentes visuais do J2SE, o Swing, usando os recursos do NetBeans.

Para desenvolvedores acostumados ao desenvolvimento com ferramentas RAD como Delphi ou Visual Basic, haverá certo esforço de adaptação à filosofia de trabalho diferente do Java visual. Isso inclui a forma de desenhar formulários usando gerenciadores de layout; o tratamento de eventos baseado em listeners; e a forma de utilização de componentes mais sofisticados (como tabelas e árvores), que exigem customização baseada na extensão de classes ou implementação de interfaces.

Nesta parte apresentamos o desenvolvimento da interface gráfica de uma aplicação de "Lista de Tarefas", ilustrando boas práticas do desenvolvimento Swing e mostrando como o NetBeans pode auxiliar na implementação dessas práticas.

Se você está começando com o desenvolvimento Swing, não deixe de consultar os quadros “Conceitos essenciais do Swing” e "Gerenciadores de Layout e o NetBeans". E leitores atentos ao lançamento recente do NetBeans 4.1 podem consultar o quadro “NetBeans 3.6, 4.0 e 4.1” para informações sobre as diferenças entre as versões. No contexto deste artigo, as versões 4.1 e 4.0 são praticamente idênticas, e pouco mudou desde a versão 3.6 no que se refere ao desenvolvimento visual.

A aplicação de exemplo

A Lista de Tarefas ou “todo list” é um componente comum de aplicações de produtividade pessoal, que permite cadastrar tarefas com prioridades e datas de conclusão associadas.

A interface gráfica inclui uma janela principal, que lista as tarefas ordenadas por prioridade ou por data de conclusão, e um diálogo para edição ou inclusão de uma tarefa. A janela principal é típica de aplicações desktop, contendo uma barras de menus e de ferramentas, e uma área central para a visualização das tarefas; essa janela deve também ser capaz de adaptar-se à resolução de vídeo do sistema ou ao tamanho determinado pelo usuário. Já o diálogo é um típico formulário de entrada de dados, com caixas de edição, checkboxes e outros controles posicionados em uma ordem natural de preenchimento, com os usuais botões Ok e Cancelar na parte inferior.

O termo "formulário" é utilizado de forma genérica para referenciar janelas, diálogos e painéis, ou seja, qualquer classe que possa ser editada visualmente pela adição de componentes visuais.

Outras janelas da aplicação, como uma caixa “Sobre”, e um diálogo para exibição de alertas sobre tarefas próximas de suas datas de conclusão serão construídas nas próximas partes desta série.

Antes de iniciar a construção de uma interface visual, é sempre bom desenhar um esboço contendo os principais componentes e sua disposição nas janelas. Papel e caneta ou um programa de desenho são geralmente melhores para isso do que o seu IDE favorito, pois permitem que as idéias fluam sem serem “viciadas” pela estrutura e componentes padrões do IDE. A idéia aqui é fazer brainstorming sobre como deve ser a interface com o usuário, e não obter uma definição precisa da aparência de cada formulário. Também há o benefício de se poder focar nos componentes realmente essenciais para o usuário, antes de entrar em detalhes de implementação, como ícones ou atalhos. Veja na Figura 1 um esboço das duas janelas aplicação de exemplo deste artigo.

Design: por favor, ajustem as cores para deixar o fundo azulado o mais branco possível:

Arquitetura da aplicação

É um padrão em desenvolvimento orientado a objetos utilizar a arquitetura MVC como base de uma aplicação interativa. Dessa forma, o código da nossa aplicação será organizado em classes de modelo, visão e controlador, utilizando para tal uma estrutura de pacotes.

Neste artigo será realizada apenas a primeira etapa do desenvolvimento da aplicação, que é a prototipação da interface com o usuário, utilizando os recursos de desenho de interfaces Swing do NetBeans. Vamos limitar o código ao mínimo que possibilite a navegação e exibição de informações; assim poderemos validar a usabilidade e a adequação da interface às necessidades da aplicação. Nas próximas edições, além de novos formulários, vamos criar as classes de negócios, contendo a lógica de validação e persistência.

Criação do projeto

Para a aplicação de exemplo, vamos usar o modelo Java Application do NetBeans (selecione File|New Project, escolha a categoria General e depois Java Application). Forneça “Todo” como nome do projeto e aceite os padrões, criando assim a classe todo.Main. Deixaremos esta classe vazia; mas adiante ela será modificada para instanciar a janela principal da aplicação. Crie também os pacotes todo.modelo, todo.visao e todo.controle.

Em uma aplicação de produção, o prefixo para os nomes dos pacotes da aplicação deveria incluir o nome DNS da empresa, por exemplo, "br.com.javamagazine.todo.modelo", de modo a evitar conflitos com bibliotecas e componentes de terceiros.

A janela principal

Para criar a janela principal, usamos o modelo JFrame form: selecione File|New File, depois Java GUI Forms e JFrame Form (veja a Figura 2). Utilize como nome "ListaTarefas" e modifique o nome do pacote para "todo.visao".

Será aberto o editor visual de classes do NetBeans (veja a Figura 3). Nos lados esquerdo e direito são exibidas várias visões (ou visualizações) relacionadas com o editor visual do IDE. À direita temos a paleta (Pallete), onde podem ser encontrados os componentes visuais do Swing e AWT. Abaixo da paleta, a área de propriedades (Properties) apresenta as propriedades do objeto selecionado, permitindo sua customização.

À esquerda, logo abaixo da área que exibe as visões de projeto, arquivos e ambiente de execução (Projects, File e Runtime) temos o inspetor (Inspector), que apresenta a estrutura hierárquica de objetos visuais. O inspetor é muito útil quando um componente está sobreposto por outro, ou quando não está visível na área de desenho por algum outro motivo. O componente selecionado na área de desenho é sempre selecionado no inspetor, e vice-versa; e as propriedades sempre refletem o componente selecionado. É possível ainda selecionar vários componentes na área de desenho (ou no inspetor) e modificar propriedades em todos eles ao mesmo tempo na janela de propriedades.

Há algumas diferenças no posicionamento e configurações padrões dessas partes do IDE entre as versões 4.1 e 4.0 do NetBeans, entretanto é possível arrastar qualquer visão para outra posição na janela principal do IDE, além de customizar a aparência da paleta. Pessoalmente prefiro uma mistura dos padrões das duas versões, configurando a paleta para uma aparência mais compacta (como na versão 4.0) e colocando o inspetor no lado esquerdo (como no NetBeans 4.1), de modo a deixar mais espaço para a janela de propriedades. Para reposicionar o inspetor, basta arrastá-lo pela sua barra de título; para deixar a paleta mais compacta, clique nela com o botão direito e escolha Hide component names.

Outra dica de customização do NetBeans é colocar a visão de saída (output) no modo de "auto-esconder", para que ela não reduza o espaço disponível para o inspetor e a paleta; ela fica como apenas um botão na parte inferior da janela do IDE. Note que a Figura 3 já apresenta a visão de saída nesta configuração. Basta clicar no ícone  da janela de saída, quando ela for ativada pela próxima compilação ou execução do projeto. "