24/03/12

Me opole Digi al

Selecione madisciplina

Desenvolvimento Desktop
Reviso dos C onceitos de Orientao a Objetos Introduo ao NetBeans 6.9 Introduo ao Swing C omponentes viso geral C omponentes: campo de texto, rtulo e boto C omponentes Radio Button, Button Group e C ombo Box TextArea, ListBox e C heckBox Password Fields, Formatted Text Fields, Tables Menu, Panels e Tabbed Panes C omponentes: Editor Panes, Text Panes e Scroll Panes Progress Bar, Scroll Bar, Slider e Spinner Janelas de dilogo Frame e Internal Frame Tree e File C hooser Mtodos Gerenciadores de layout viso geral Gerenciadores de Layout C onstruindo uma aplicao Gerenciadores de layout construindo uma aplicao (continuao) Gerenciadores de layout construindo uma aplicao (continuao) Eventos e listeners Eventos e listeners (continuao) Eventos e listeners (continuao) Excees Exemplos Arquivos Streams de entrada e sada Operaes com arquivos a classe Path Operaes com arquivos leitura e escrita Expresses regulares Reviso da disciplina

Aula 3 Introduo ao Swing

Professores autores Marcio Kreutz (kreutz@dimap.ufrn.br) Diego Rodrigo Cabral Silva (diegorcsilva@yahoo.com.br)

Esta aula dar a voc uma breve introduo sobre o que e como usar a JFC (Java Foudation Classes ) e o Swing. Na aula anterior ns j vimos como instalar o NetBeans, que o software necessrio para compilar e rodar um aplicativo que usa os pacotes do Swing. Vimos, tambm, como ele funciona utilizando um exemplo simples (apenas com linhas de cdigo). Nessa aula veremos como o NetBeans funciona utilizando o ambiente grfico e como pode ser simples e fcil desenvolver um aplicativo com uma interface visualmente agradvel para o usurio.

Voltar

Imprimir

Topo

.me opoledigi al. f n.b /a la _a ancado/ eb/di ciplina /de k op/a la_03.h ml

1/12

24/03/12
Voltar Imprimir Topo

Me opole Digi al

Aps esta aula voc ser capaz de: Definir o que JFC e Swing; Entender por que utilizar o Swing no desenvolvimento de aplicativos; Compreender o que uma GUI; Aprender como utilizar alguns componentes para compor uma interface; Inserir comandos simples no cdigo-fonte gerado automaticamente pelo aplicativo; Executar e visualizar o aplicativo desenvolvido.

JFC
JFC ou Java Foundation Classes um conjunto de componentes e servios que simplificam desenvolvimento e a implantao de aplicativos para desktop e para a internet. Ela engloba um grupo de recursos para a construo de interfaces grficas, alm de adicionar interatividade e funcionalidades com qualidade profissional aos aplicativos desenvolvidos em Java. A JFC composta pelos seguintes componentes: Componentes Grficos Swing incluem os botes, caixas de texto, painis, rtulos e todos os outros componentes grficos que compem um aplicativo de Desktop. Suporte a Look-and-Feel um termo utilizado na apresentao da interface grfica do usurio e compreende os aspectos da sua concepo, incluindo elementos como cores, formas, disposio e tipos de caracteres (o "Look"), bem como o comportamento de elementos dinmicos tais como botes, caixas e menus (o "Feel"). API (Interface de Programao de Aplicativos) de Acessibilidade aplicativos com interfaces que disponibilizam tecnologia de auxlio que facilitam o uso do sistema por pessoas deficientes. API Java 2D interfaces de aplicativos desenvolvidos em Java, em duas dimenses. Internacionalizao significa adaptao de determinado software lngua e cultura de determinado pas. Esta disciplina se concentrar principalmente nos componentes grficos Swing e em outras funcionalidades Java que no esto entre os componentes JFC, como tratamento de erros e manipulao de arquivos.

Aprendendo Swing com o NetBeans IDE

Conforme visto na aula anterior, o NetBeans IDE oferece muitas vantagens quando comparado a um editor de textos comum. Dessa forma, recomendamos o seu uso sempre que possvel. Ainda na aula anterior voc pde obter informaes sobre como consegui-lo e como instal-lo no seu computador. Nesta aula introduziremos o Swing atravs da construo, passo a passo, de uma aplicao que converte velocidade de milhas por hora (mph) para quilmetros por hora (km/h). Essa aplicao utiliza um pequeno subconjunto dos componentes do Swing e, medida que voc for lendo as prximas aulas, vai se deparar com mais componentes. Para a construo de aplicativos grficos, iremos utilizar o construtor de interfaces grficas do NetBeans IDE, que torna a construo de interfaces com o usurio uma simples tarefa de arrastar e soltar. gerao automtica de cdigo simplifica bastante o processo de desenvolvimento das GUIs (Graphical User Interface ou Interface Grfica com o Usurio), permitindo que o foco do programador esteja na lgica da aplicao, e no na infraestrutura necessria ao aplicativo. Como esta aula um passo a passo, ns recomendamos que voc abra o NetBeans IDE e execute cada etapa na medida em que l o material. Esta ser a maneira mais rpida e fcil de aprender a programar com Swing. Cada passo est ilustrado com a tela que voc vai encontrar durante a construo do aplicativo, facilitando a leitura, caso no esteja em frente a um computador com o NetBeans IDE instalado. A interface Grfica final deste aplicativo vai se parecer com a Figura 1 mostrada a seguir.

.me opoledigi al. f n.b /a la _a ancado/ eb/di ciplina /de k op/a la_03.h ml

2/12

24/03/12

Me opole Digi al

Figura 1 Janela final do aplicativo a ser desenvolvido Fonte: NetBeans IDE 6.9

Vamos aos passos para a construo do nosso aplicativo: Passo 1: 1. Para iniciar, abra o NetBeans IDE e crie um novo projeto a partir do menu Arquivo. Veja a Figura 2 . Perceba que os atalhos do teclado para cada comando aparecem direita de cada opo do menu.

Figura 2 C riando um novo projeto Fonte: NetBeans IDE 6.9

2. Os atalhos do teclado para cada comando aparecem direita de cada opo do menu. Passo 2: 1. Uma nova janela vai apresentar as opes disponveis. Selecione Java na coluna Categoria Aplicativo Java na coluna Projetos, conforme mostra a Figura 3 :

Figura 3 Especificando o novo projeto Fonte: NetBeans IDE 6.9

.me opoledigi al. f n.b /a la _a ancado/ eb/di ciplina /de k op/a la_03.h ml

3/12

24/03/12

Me opole Digi al
2. A caixa de texto inferior descreve cada opo selecionada. Nesse primeiro exemplo utilizaremos a Categoria Java e o Projeto Aplicativo Java. Com essas opes selecionadas, clique no boto Prximo para continuar. Passo 3: 1. Defina o nome do projeto: ConverterVelocidade . Voc tambm pode alterar a localizao do projeto e sua pasta, conforme mostra a Figura 4 a seguir.

Figura 4 Finalizando o novo projeto Fonte: NetBeans IDE 6.9

2. Certifique-se de que a opo (check bo ) Criar classe principal esteja desmarcada. 3. Clique no boto Finalizar para concluir a criao do novo projeto. Quando o carregamento for finalizado, aparecer uma tela similar da Figura 5 .

Figura 5 Ambiente inicial aps a criao do novo projeto Fonte: NetBeans IDE 6.9

4. A guia Projetos, no canto superior esquerdo, mostra o projeto recentemente criado. Passo 4: 1. Adicione um novo formulrio JFrame clicando com o boto direito do mouse sobre o nome do projeto (ConverterVelocidade) e seguindo o caminho, como apresentado na Figura 6 .

.me opoledigi al. f n.b /a la _a ancado/ eb/di ciplina /de k op/a la_03.h ml

4/12

24/03/12

Me opole Digi al

Figura 6 Inserindo um JFrame Fonte: NetBeans IDE 6.9

2. O JFrame a classe principal responsvel pelo seu projeto e a partir dela que estruturaremos todo esse projeto. Passo 5: 1. Em seguida, defina o nome da classe NewFrame e o nome do pacote ConverterVelocidade Voc pode definir os nomes como quiser, mas seguiremos com a sugesto proposta pelo sistema. Veja a Figura 7 a seguir.

Figura 7 Especificando detalhes do JFrame Fonte: NetBeans IDE 6.9

2. Os campos so automaticamente sugeridos. Clique no boto Finalizar quando estiver pronto. Quando a IDE terminar de carregar, direita, aparecer a rea grfica onde visualmente manipularemos os vrios componentes do Swing.

Figura 8 Tela aps a criao do JFrame Fonte: NetBeans IDE 6.9

Passo 6: Inicialmente apenas demonstraremos como desenvolver esse pequeno projeto de converso de velocidades. medida que formos progredindo, entraremos em detalhes em relao aos componentes e

.me opoledigi al. f n.b /a la _a ancado/ eb/di ciplina /de k op/a la_03.h ml

5/12

24/03/12

Me opole Digi al
velocidades. medida que formos progredindo, entraremos em detalhes em relao aos componentes e suas propriedades. rea do projeto: onde iniciaremos a construo de forma grfica do nosso GUI. O NetBeans disponibiliza duas opes de visualizao: a vista grfica do projeto (mostrada na figura anterior) e a vista do cdigo fonte (apresentada na Figura 9 a seguir).

Figura 9 Visualizao do cdigo fonte do projeto Fonte: NetBeans IDE 6.9

Podemos alternar a visualizao facilmente manipulando as guias em destaque na figura acima. Entretanto, vamos trabalhar com a visualizao grfica; ento, clique na guia Projeto. Voc estar visualizando o nico objeto JFrame representado pelo grande retngulo delimitado por uma linha laranja (Figura 8 ). medida que formos acrescentando outros componentes e alteraes, automaticamente o cdigo gerado pela IDE aparecer na guia cdigo fonte. Vejamos, ento, como fazer isso: 1. Clicando no componente JFrame aparecer, no canto inferior direito, o painel de propriedades com vrias caractersticas do componente que podero ser alteradas facilmente. Localize o campo name e altere o nome do JFrame para convertermilhas , conforme mostra a Figura 10 a seguir.

Figura 10 Painel de propriedades Fonte: NetBeans IDE 6.9

2. Em seguida, na janela direita, clique e arraste um campo de texto (JTextField) para dentro da rea do JFrame. Ao localizar o JTextField dentro do JFrame o construtor do GUI fornece as linhas tracejadas para auxiliar no ajuste de localizao do objeto. Usando as linhas-guia, localize o objeto no canto superior esquerdo, como mostrado na Figura 11 a seguir.

.me opoledigi al. f n.b /a la _a ancado/ eb/di ciplina /de k op/a la_03.h ml

6/12

24/03/12

Me opole Digi al

Figura 11 Inserindo um campo de texto Fonte: NetBeans IDE 6.9

3. No se preocupe em fazer os ajustes agora. Faremos isso mais tarde, quando estivermos com todos os componentes no JFrame. 4. Agora adicione o rtulo (JLabel) seguindo as linhas-guia, posicionando-o ao lado do JTextField como mostra a Figura 12 .

Figura 12 Inserindo um rtulo Fonte: NetBeans IDE 6.9

5. As linhas de ajuste auxiliam no alinhamento, facilitando a melhor distribuio dos componentes. 6. Agora, adicione um boto (JButton) logo abaixo do JTextField. Lembre-se de utilizar as linhas guia para alinhar os componentes. Veja a Figura 13 .

Figura 13 Inserindo um boto Fonte: NetBeans IDE 6.9

7. No tente alterar qualquer propriedade ainda. Faremos as alteraes de nomes e dimenses mais tarde. 8. Agora adicione um segundo JLabel ao lado do boto, conforme mostra a Figura 14 a seguir.

.me opoledigi al. f n.b /a la _a ancado/ eb/di ciplina /de k op/a la_03.h ml

7/12

24/03/12

Me opole Digi al

Figura 14 Inserindo um segundo rtulo Fonte: NetBeans IDE 6.9

9. Pronto. Agora temos todos os componentes que precisaremos para concluir o exemplo proposto: converter velocidade de milhas/hora em quilmetros/hora. S faltam os ajustes. Ajustando os componentes: 1. Repare que logo acima do JFrame aparece uma pequena janela com algumas dicas que podem lhe auxiliar. Caso queira fechar estas dicas, basta clicar no pequeno quadrado (com um X ) direita. 2. Para alterar o texto do JTextField, clique no componente e procure no painel de propriedades o campo text. Ao apagar o texto padro JTextField1 , que constava anteriormente, as dimenses so alteradas automaticamente, como mostra a Figura 15 a seguir.

Figura 15 Alterando a propriedade text Fonte: NetBeans IDE 6.9

3. Como no queremos nenhum texto inicial no JTextField, manteremos esse campo vazio. Agora, de forma similar, altere o campo text dos outros componentes adicionando os nomes sugeridos como na Figura 16 (JLabel1 milhas/h , JButton Converter e JLabel2 Km/h ).

Figura 16 C omponentes com a propriedade text alterada Fonte: NetBeans IDE 6.9

.me opoledigi al. f n.b /a la _a ancado/ eb/di ciplina /de k op/a la_03.h ml

8/12

24/03/12

Me opole Digi al
Fonte: NetBeans IDE 6.9

4. Agora sim vamos ajustar as dimenses dos componentes. Clique no JTextField. Repare nos pequenos quadrados que aparecem no contorno do componente. 5. Clique no pequeno quadrado do lado direito do componente. Segure o boto do mouse e arraste o cursor para ajustar no tamanho desejado, sem se preocupar em ocultar outros componentes que estejam prximos. Veja a Figura 17 a seguir:

Figura 17 Alterando as dimenses do JTextFiled Fonte: NetBeans IDE 6.9

6. Ao soltar o boto do mouse, os outros componentes se ajustam automaticamente s novas posies. Veja Figura 18 a seguir:

Figura 18 C omponentes com posicionamento ajustado Fonte: NetBeans IDE 6.9

7. Por fim, ajuste o tamanho do JFrame. Posicione o cursor no canto extremo inferior direito e arraste at obter as dimenses desejadas, eliminando todo o espao extra. Veja a Figura 19 a seguir:

.me opoledigi al. f n.b /a la _a ancado/ eb/di ciplina /de k op/a la_03.h ml

9/12

24/03/12

Me opole Digi al

Figura 19 Ajustando as dimenses do JFrame Fonte: NetBeans IDE 6.9

8. A parte realizada na GUI est completa. Vamos, agora, concluir o aplicativo inserindo os comandos de converso ao boto. 9. Clique no boto Converter com o boto direito do mouse. Siga a sequncia de opes conforme mostra a Figura 20 a seguir:

Figura 20 Inserindo um evento no boto Fonte: NetBeans IDE 6.9

10. Aparecer na tela a rea onde dever ser includo o cdigo que ser executado quando o boto for apertado. 11. Insira a linha de comando especificada abaixo int tempFahr = (int)((Double.parseDouble(jTextField1.getText())) * 1.609344); jLabel2.setText(tempFahr + " Km/h"); 12. No se preocupe, agora, em entender o cdigo. Posteriormente vamos detalhar exemplos similares. O cdigo fonte deve ficar conforme mostrado na Figura 21 a seguir:

.me opoledigi al. f n.b /a la _a ancado/ eb/di ciplina /de k op/a la_03.h ml

10/12

24/03/12

Me opole Digi al

Figura 21 Inserindo a linha de cdigo no boto Fonte: NetBeans IDE 6.9

13. Pronto, finalizamos o aplicativo. Agora vamos executar o que construmos. Na barra de tarefas superior, clique no cone indicado na Figura 22 ou utilize a tecla de atalho F6 .

Figura 22 Visualizao final do cdigo fonte Fonte: NetBeans IDE 6.9

14. A janela do aplicativo aparecer no canto superior esquerdo, como apresentado l no incio, antes de comearmos a construir o aplicativo (veja a Figura 1 ).

Figura 23 Janela final do aplicativo

15. Teste o aplicativo e confira se o resultado est de acordo com o esperado, conforme mostra a Figura 23 . Veja que o resultado da converso aparece No JLabel2 , e que o resultado aparece juntamente com o texto " km/h", substituindo o texto anterior. Agora, exercite o que aprendemos nessa aula fazendo a atividade proposta.

1. Desenvolva um aplicativo que converta um valor qualquer em real para dlar. Alm dos componentes utilizados no exemplo dessa aula, use mais um JTextField para a informao da taxa do dlar.

.me opoledigi al. f n.b /a la _a ancado/ eb/di ciplina /de k op/a la_03.h ml

11/12

24/03/12

Me opole Digi al

Bem, chegamos ao final de nossa terceira aula. Esperamos que voc tenha aprendido as facilidades que o uso de uma ferramenta grfica pode proporcionar, entendendo o quanto o NetBeans e o Swing podem auxiliar no desenvolvimento de quaisquer aplicativos, dos mais simples aos mais complexos. prximas aulas exploraremos outros componentes, apresentando com mais detalhes as funcionalidades que o Swing disponibiliza.

Resumo
Nessa aula vimos como explorar o ambiente grfico do NetBeans IDE 6.9, utilizando alguns componentes de controle do Swing. Voc aprendeu a construir um aplicativo simples de converso de unidades usando a facilidade do ambiente grfico e linhas de cdigo para definir a ao dos componentes utilizados. A partir das prximas aulas, veremos outros componentes e como podemos utiliz-los para criar aplicativos mais complexos.

1. Explique o que JFC. 2. Que componentes do JFC foram utilizados no exemplo desenvolvido nessa aula? 3. Quais as facilidades que o Swing pode proporcionar no desenvolvimento de aplicativos? 4. Qual o resultado da execuo de um projeto desenvolvido no ambiente grfico?

Referencias
THE JAVA TUTORIALS. Lesson: Learning swing with the NetBeans IDE. Disponvel

<http://download.oracle.com/docs/cd/E17409_01/javase/tutorial/uiswing/learn/index.html>. Acesso em: 15 jul. 2010.

Voltar

Imprimir

Topo

.me opoledigi al. f n.b /a la _a ancado/ eb/di ciplina /de k op/a la_03.h ml

12/12