um sistema java completo - criando aplicações gráficas com o netbeans

Download Um Sistema Java Completo - Criando Aplicações Gráficas com o NetBeans

Post on 02-Aug-2015

4.441 views

Category:

Documents

22 download

Embed Size (px)

TRANSCRIPT

Um Sistema Java Completo - Criando Aplicaes Grficas com o NetBeansParte 1: Prototipao da interface com o usurio Aprenda a criar aplicaes com aparncia profissional, desenvolvendo um exemplo completo no NetBeans, comeando 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 verso 4.0 foi apresentada na edio anterior, com foco no novo modelo de projetos, que oferece flexibilidade para os projetos mais complexos. Nesta srie de artigos, o enfoque ser demonstrar como construir aplicaes grficas com a biblioteca padro 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 esforo de adaptao filosofia de trabalho diferente do Java visual. Isso inclui a forma de desenhar formulrios usando gerenciadores de layout; o tratamento de eventos baseado em listeners; e a forma de utilizao de componentes mais sofisticados (como tabelas e rvores), que exigem customizao baseada na extenso de classes ou implementao de interfaces. Nesta parte apresentamos o desenvolvimento da interface grfica de uma aplicao de "Lista de Tarefas", ilustrando boas prticas do desenvolvimento Swing e mostrando como o NetBeans pode auxiliar na implementao dessas prticas. Se voc est comeando com o desenvolvimento Swing, no deixe de consultar os quadros Conceitos essenciais do Swing e "Gerenciadores de Layout e o NetBeans". E leitores atentos ao lanamento recente do NetBeans 4.1 podem consultar o quadro NetBeans 3.6, 4.0 e 4.1 para informaes sobre as diferenas entre as verses. No contexto deste artigo, as verses 4.1 e 4.0 so praticamente idnticas, e pouco mudou desde a verso 3.6 no que se refere ao desenvolvimento visual. A aplicao de exemplo A Lista de Tarefas ou todo list um componente comum de aplicaes de produtividade pessoal, que permite cadastrar tarefas com prioridades e datas de concluso associadas. A interface grfica inclui uma janela principal, que lista as tarefas ordenadas por prioridade ou por data de concluso, e um dilogo para edio ou incluso de uma tarefa. A janela principal tpica de aplicaes desktop, contendo uma barras de menus e de ferramentas, e uma rea central para a visualizao das tarefas; essa janela deve tambm ser capaz de adaptar-se resoluo de vdeo do sistema ou ao tamanho determinado pelo usurio. J o dilogo um tpico formulrio de entrada de dados, com caixas de edio, checkboxes e outros controles posicionados em uma ordem natural de preenchimento, com os usuais botes Ok e Cancelar na parte inferior. O termo "formulrio" utilizado de forma genrica para referenciar janelas, dilogos e painis, ou seja, qualquer classe que possa ser editada visualmente pela adio de componentes visuais. Outras janelas da aplicao, como uma caixa Sobre, e um dilogo para exibio de alertas sobre tarefas prximas de suas datas de concluso sero construdas nas prximas partes desta srie. Antes de iniciar a construo de uma interface visual, sempre bom desenhar um esboo contendo os principais componentes e sua disposio nas janelas. Papel e caneta ou um programa de desenho so geralmente melhores para isso do que o seu IDE favorito, pois permitem que as idias fluam sem serem viciadas pela estrutura e componentes padres do IDE. A idia aqui fazer brainstorming sobre como deve ser a interface com o usurio, e no obter uma definio precisa da aparncia de cada formulrio. Tambm h o benefcio de se poder focar nos componentes realmente essenciais para o usurio, antes de

1

entrar em detalhes de implementao, como cones ou atalhos. Veja na Figura 1 um esboo das duas janelas aplicao de exemplo deste artigo. Design: por favor, ajustem as cores para deixar o fundo azulado o mais branco possvel: Arquitetura da aplicao um padro em desenvolvimento orientado a objetos utilizar a arquitetura MVC como base de uma aplicao interativa. Dessa forma, o cdigo da nossa aplicao ser organizado em classes de modelo, viso e controlador, utilizando para tal uma estrutura de pacotes. Neste artigo ser realizada apenas a primeira etapa do desenvolvimento da aplicao, que a prototipao da interface com o usurio, utilizando os recursos de desenho de interfaces Swing do NetBeans. Vamos limitar o cdigo ao mnimo que possibilite a navegao e exibio de informaes; assim poderemos validar a usabilidade e a adequao da interface s necessidades da aplicao. Nas prximas edies, alm de novos formulrios, vamos criar as classes de negcios, contendo a lgica de validao e persistncia. Criao do projeto Para a aplicao de exemplo, vamos usar o modelo Java Application do NetBeans (selecione File|New Project, escolha a categoria General e depois Java Application). Fornea Todo como nome do projeto e aceite os padres, criando assim a classe todo.Main. Deixaremos esta classe vazia; mas adiante ela ser modificada para instanciar a janela principal da aplicao. Crie tambm os pacotes todo.modelo, todo.visao e todo.controle. Em uma aplicao de produo, o prefixo para os nomes dos pacotes da aplicao 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 so exibidas vrias vises (ou visualizaes) 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 customizao. esquerda, logo abaixo da rea que exibe as vises de projeto, arquivos e ambiente de execuo (Projects, File e Runtime) temos o inspetor (Inspector), que apresenta a estrutura hierrquica de objetos visuais. O inspetor muito til quando um componente est sobreposto por outro, ou quando no est visvel 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. possvel ainda selecionar vrios componentes na rea de desenho (ou no inspetor) e modificar propriedades em todos eles ao mesmo tempo na janela de propriedades. H algumas diferenas no posicionamento e configuraes padres dessas partes do IDE entre as verses 4.1 e 4.0 do NetBeans, entretanto possvel arrastar qualquer viso para outra posio na janela principal do IDE, alm de customizar a aparncia da paleta. Pessoalmente prefiro uma mistura dos padres das duas verses, configurando a paleta para uma aparncia mais compacta (como na verso 4.0) e colocando o inspetor no lado esquerdo (como no NetBeans 4.1), de modo a deixar mais espao para a janela de propriedades. Para reposicionar o inspetor, basta arrast-lo pela sua barra de ttulo; para deixar a paleta mais compacta, clique nela com o boto direito e escolha Hide component names.

2

Outra dica de customizao do NetBeans colocar a viso de sada (output) no modo de "auto-esconder", para que ela no reduza o espao disponvel para o inspetor e a paleta; ela fica como apenas um boto na parte inferior da janela do IDE. Note que a Figura 3 j apresenta a viso de sada nesta configurao. Basta clicar no cone da janela de sada, quando ela for ativada pela prxima compilao ou execuo do projeto. O nosso esboo indica a presena de uma barra de menus e uma de ferramentas na parte de cima da janela, e com uma tabela ocupando toda a sua rea interna. Iniciamos pela adio da barra de menus: clique no cone do JMenuBar ( ) na paleta e clique em qualquer parte da rea de desenho. Por enquanto, deixe a barra de menus como est; mais adiante iremos inserir os demais menus. Agora selecione o componente JToolbar ( ) e clique logo abaixo da barra de menus. O resultado a colocao do JToolbar na posio "norte" do BorderLayout (veja mais sobre este e outros gerenciadores no quadro "Gerenciadores de layout e o NetBeans"). Observe que a barra aparece bem estreita, por no conter ainda nenhum componente. Selecione o JButton ( ) e clique em seguida no JToolbar (na rea de desenho). Ele ir automaticamente se ajustar ao tamanho do boto. Repita o procedimento algumas vezes, para inserir os botes de adicionar, editar, excluir e marcar tarefas. Utilize smbolos como + e "*" para o texto dos componentes (altere a propriedade text), enquanto no criamos os cones apropriados para cada um. Selecione o JToogleButton (prximo ao JButton na paleta, com cone igual) e acrescente dois botes desse tipo ao JToolbar. Eles correspondem s opes de ordenao das tarefas por prioridade ou por data de concluso, e para exibir ou no as tarefas j concludas. Por fim, acrescente mais um JButton para a operao de visualizao de alertas. Continue utilizando smbolos como ! no texto dos botes, como substitutos provisrios para os cones que ainda no foram acrescentados. Para obter o agrupamento e separao visual entre os grupos de botes de uma JToolbar no ir funcionar o uso de um JSeparator, como faremos mais adiante para os menus. O problema que o JSeparator sempre se expande para ocupar toda a largura do container. Utilize em seu lugar um JLabel contendo como texto apenas um espao em branco. Para criar uma barra de status, insira um JLabel ( ) na parte inferior da janela principal, de modo que ele seja colocado na posio "sul" do BorderLayout. Finalmente, insira um JScrollPane ( ) na parte central do JFrame, e dentro dele insira um JTable ( ). Sempre que o contedo de um componente puder ser maior do que a sua rea ocupada na janela, o componente deve ser colocado dentro de um JScrollPane; componentes Swing precisa