Aprendendo Swing com a IDE NetBeans

Posted julho 19, 2009

Filed under: Java |
Ola a todos. Sou o Tecno-Java e trago paraa vocs este tutorial retirado do site da sun em
ingls e traduzido para o portugus por mim.
Caso deseje copiar este tutorial para outro local, por favor, coloque como guia de referencia
ao tradutor meu blog:
www.tecnojava.wordpress.com
Espero que aprendam muito com este tutorial. Ele ser de grande ajuda para os iniciantes.
Aprendendo Swing com a IDE NetBeans
Esta lio fornece uma introduo para Interface de Usurio Grfica ( GUI ) programando com
Swing e a IDE NetBeans. Como voc aprender na lio Hello World, o Netbeans grtis,
open-source, ambiente de desenvolvimento integrado (IDE) multi-plataforma com construo
suportado para programao na linguagem Java. Isto oferece muitas vantagens sobre o cdigo
com um editor de texto, nos recomendamos seu uso sempre que possvel. Se voc ainda no
leu a lio acima, tome um momento para l-la agora. Ele fornece valiosas informaes sobre
download e instalao do JDK e NetBeans.
A meta desta lio introduzir a API Swing projetando uma aplicao simples que converte
tempetura de Celsius para Fahrenheit. Nossa GUI ser bsica, enfocando apenas um
subconjunto de Componentes Swing disponvel. Nos usaremos o construtor de GUI da IDE
NetBeans, a qual faz a criao de interface de usurio um assunto simples de arrastar e
soltar. Sua caracterstica de gerao de cdigo automtico simplifica o processo de
desenvolvimento de GUI, deixando voc enfocar na lgica da aplicao ao invs infraestrutura subjacente.
Visto que esta lio uma lista passo a passo de se fazer, nos recomendamos que voc
execute o NetBeans e apresente cada passo de acordo como for lendo. Isto ser o modo mais
fcil e rpido de comear programando com Swing. Se voc for incapaz de fazer,
simplesmente leia junto para poder ainda ser til, desde que cada passo ilustrado com
screenshots.
Se voc preferir uma abordagem tradicional de programao cada componente manualmente
(sem a assistncia de uma IDE), pensa nesta leo como um ponto de entrada nas discusses
de nvel mais baixo que j provem em outros tutoriais. Hyperlinks em cada discusso levara
voc para lies relacionadas, onde voc poder aprender cada detalha de nvel mais baixo.
A GUI terminada para esta aplicao ser vista como segue:

Para baixar clique aqui

Da perspectiva de um usurio final, o uso simples: entra com uma temperatura (em Celsius)
na baixa de texto, clique no boto Convert, e assistira a temperatura convertida (em
Fahrenheit) aparecera na tela. Os botes minimizar, maximizar e fechar comportaro como
esperado, e a aplicao tambm ter um titulo que aparecera junto ao topo da janela.
Da perspectiva de um programador, nos escreveremos a aplicao em dois estgios principais.
Primeiro, nos povoaremos a GUI com vrios componentes Swing e organizaremos eles como
mostrado acima. Ento, nos adicionaremos a aplicao lgica, assim que o programa
apresentar atualmente a converso quando o usurio pressionar no boto Convert.
Instalando o projeto CelsiusConverter
Se voce tem trabalhado com o NetBeans no passado, muito dessas sees sera familiar, desde
os passos iniciais sao similar para a maioria dos projetos. Ainda, os passos seguintes
descrevem a instalao que especifica para esta aplicao, entao tome cuidado em seguir
elas de perto.
Passo 1 Criando um novo Projeto
Para criar um novo projeto, abra o IDE NetBeans e escolha New Project do File Menu:

Passo 2 Escolha General Java application

Prximo, selecione General da coluna Categories e depois Java application da coluna
Projects.

Passo 3 Estabelecer um nome para o projeto

Agora entre como nome de projeto CelsiusConverterProject. Voce podera deixar o Projeto
Local e a Pasta de Projetos com os valores default ou clicar no botao para escolher um local
alternative no seu sistema.

Tenha certeza de desabilitar o checkbox Create Main Class; deixando esta opo
selecionada ser gerada uma nova classe principal como ponto de entrada da aplicao, mas
nossa janela GUI principal (criada no prximo passo) servira para aquele propsito, assim
marcar esta caixa no necessria. Clique em Finish quando voc estiver acabado.

Quando a IDE acabar de carregar, voc vera uma screen similar acima. Todos painis esto
varias exceto para o painel Projects no canto esquerdo superior, o qual mostrara o projeto
criado recentemente.
Passo 4 Adicionando um JFrame

Agora clique no nome CelsiusConverterProject e escolha New JFrame Form (JFrame a

classe Swing responsavel pela moldura principal de nossa aplicao). Voce aprendera como
designar esta classe como aplicao de ponto de entrada depois nesta lio.
Passo 5 Nome da Classe GUI
Proximo, digite CelsiusConverterGUI como nome da classe, e aprenda como o nome do
pacote. Voce pode renomear este pacote para qualquer coisa que voce queira, mas aqui nos
estamos seguindo a convero de renomear o pacote depois da lio a qual esta pertencendo.

O restante dos campos dever ser preenchido automaticamente, como mostra acima. Clica no
boto Finish quando voc estiver acabado.

Quando a IDE acabar de carregar, o painel direito mostrada um tempo de projeto, uma viso
grfica do CelsiusConverterGUI. Isto esta nesta screen que voc visualizara arrastando,
soltando e manipulando os vrios componentes Swing.
Bsico da IDE NetBeans
No necessrio aprender cada caractersticas da IDE NetBeans antes de explorar suas
capacidades de criao GUI. De fato, apenas caractersticas que voc realmente necessita
para entender a Palette, o Design Aream o Property Editor, e o Inspector. Nos discutiremos
estas caractersticas abaixo:

A Palheta
A Palheta contem todos compoentenes oferecidos pela API Swing. Voc pode provavelmente
j adivinhar para que so muito desses componentes, ainda que seja a primeira vez que
esteja usando deles (JLabel um etiqueta de texto, JList uma lista arrastar-abaixo, etc)

Desta lista, nossa aplicao usara apenas JLabel(uma etiqueta bsica de texto),
JTextField(para o usurio entrar com a temperatura) e JButton(para converter a temperatura
de Celsius para Fahrenheit.)
A rea de Projeto
A rea de projeto onde voc constri visivelmente sua GUI. Isto tem duas vistas: vista de
cdigo, e vista de projeto. Vista de projeto o padro, como mostra abaixo. Voc pode
alternar entre as vistas em qualquer hora clicando em suas respectivas abas.

A figura acima mostra um simples objeto JFrame, como representou pelo retngulo
sombreado grande com borda azul. Comportamentos comumente esperados (tal como fechar
quando o usurio clicar no boto close) auto-gerado pela IDE e aparece na vista de cdigo
entre as sees azuis no editveis que o cdigo conhece como guarded blocks ( espao
defendido );

Uma rpida olhada no cdigo mostra que a IDE tem criado um mtodo private chamado
initComponents, a qual inicializa os vrios componentes do GUI. Isto tambm chama a
aplicao para EXIT_ON_CLOSE, apresenta algumas tarefas de planos especificas, ento
empacota os (logo que for adicionado) componentes juntos na tela.
No sinta que voc necessita entender este cdigo em qualquer detalhe; nos mencionamos
que isto aqui simplesmente para explorar a aba cdigo. Para mais informaes sobre estes
componentes, veja:

How to Make Frames (Main Windows) e Laying Out Components Within a Container.
O Editor de Propriedade
O Editor de Propriedade faz o que seu nome implica: ele permite que voc edite as
propriedades de cada componente. O Editor de Propriedade intuitivo para usar; nele voc
vera uma serie de filas uma fila por propriedade que voc pode clicar e editar sem
entrar no cdigo fonte diretamente. A seguinte figura mostra o Editor de Propriedades para o
objeto JFrame adicionado recentemente:

A imagem acima mostra as varias propriedades deste objeto, tal como background color,
foreground color, fonte and cursor.
O Inspector
O ultimo componente do NetBeans que nos usaremos nesta lio o Inspector.

O Inspector fornece uma representao grfica de seus componentes das aplicaes. Ns

usaremos o Inspector apenas uma vez, para mudar alguns nomes para algo diferente do
padro.
Criando o GUI CelsiusConverter
Esta seo explora como usar a IDE NetBeans para criar uma aplicao GUI. Como voc
arrasta cada componente de Paleta para a rea de Projeto, a IDE auto-criara o cdigo fonte
apropriado.
Passo 1 Colocar um Titulo
Primeiro, coloque um Titulo da aplicao JFrame como Celsius Converter, por
simplesmente clicando em JFrame no Inspector:

Ento, coloque seu titulo com o Property Editor:

Voc pode colocar o titulo por outro jeito, clicando no titulo da propriedade e entrando o
novo texto diretamente, ou por clicando no boto e entrando com o titulo no campo
fornecido. Ou, como um atalho voc pode simplesmente clicar no JFrame do Inspector e
entrar com seu novo texto diretamente sem usar o Property Editor.
Passo 2 Adicionando um TextField
Prximo, arraste um JTextField da Paleta para canto esquerdo superior da rea de Projeto.
Como voc aborda o canto esquerdo superior, o construtor GUI fornece sugestes visuais que
sugere o espaamento apropriado. Usando estas sugestes como um guia, solte o JTextField
no canto esquerdo superior da janela como mostrado abaixo:

Voc pode ser tentado para apagar o texto padro JTextField1, mas s deixe ele no lugar
por enquanto. Ns substituiremos ele depois nesta lio como ns faremos os ajustes gerais
para cada componente. Para mais informaes sobre este componente, veja How to Use Text
Fields.
Passo 3 Adicionar um JLabel
Prximo, arraste a JLabel dentro da rea de Projeto. Coloque ele no direito do JTextField,
novamente assistindo para as sugestes visuais que sugerem uma quantia apropriada de
espaamento. Faz claramente que o texto base para este componente esta alinhado com o
JTextField. A sugesto visual fornecida pela IDE poderia fazer isto fcil para determinar.

Para mais informaes sobre este componente, How to Use Labels.

Passo 4 Adicionar JButton
Prximo, arrasta um JButton da Paleta e posicione ele na direita e abaixo de JTextField.
Novamente, a sugesto visual ajuda a guiar ele no lugar.

Voc pode ser tentando manualmente ajustando a largura do JButton e JTextField, mas
apenas deixando eles como eles esto no momento. Voc aprendera como ajudar
corretamente estes componentes depois nesta lio. Para mais informaes sobre este
componente, veja How to Use Buttons.
Passo 5 Adicionando o segundo JLabel

Finalmente, adicione um segundo JLabel, repetindo o processo no passo 2. Coloque este

segundo label a direita do JButton, como mostra acima.
Ajustando a GUI CelsiusConverter
Com os componentes GUI agora no lugar, este a hora para fazer os ajustamentos finais.
Existem alguns modos diferentes para fazer isto; a ordem sugerida aqui apenas uma
abordagem possvel.
Passo 1 Estabelecendo o Texto do Componente
Primeiro, clique duas vezes em JTextField e JButton para mudar o texto padro que foi
inserido pelo NetBeans. Quando voc apagar o texto do JTextField, isto encolhera o tamanho
como mostra abaixo. Mude o texto do JButton de JButton para Convert. Tambm mude o
Texto do JLabel do topo para Celsius e o boto para Fahrenheit.

Passo 2 Estabelecendo o Tamanho do Componente

Prximo, clique nos componentes JTextField e JButton. Eles destacaram a cada vez que eles
forem selecionados. Clique com o direito (control-click para usurios mac), Same Size ->
Same Width. O componente agora tero a mesma largura como mostrado abaixo. Quando
voc apresentar este passo, tenha certeza que JFrame tambm no esteja selecionado. Se ele
estiver, o menu Same Size no ser ativado.

Passo 3 Remover espao extra

Finalmente, agarre o borda la em baixo do JFrame e ajuste seu tamanho para eliminar
qualquer espao extra. Note que se voc elimitar tudo o espao extra, (como mostrada
abaixo) o titulo (o qual apenas aparece tem de execuo ) pode no aparecer
completamente. O usurio final esta livre para redimensionar o tamanho da aplicao que
desejar, mas voc pode querer deixar algum espao extra ao lado direito para ter certeza que
tudo ocorra corretamente. Experimente, e use o screenshot da GUI terminada como um guia.

A parte GUI desta aplicao esta agora completa! Se o NetBeans tivesse acabado o seu
trabalho, voc sentiria que criar esta GUI foi um simples, se no uma tarefa trivial. Mas tome
um minuto clicando na aba do cdigo; voc poderia ficar surpreendido na quantia de cdigo
que foi gerado.

Para ver o cdigo todo, role de cima para baixo dentro da IDE quando for necessrio. Voc
pode expandir ou desmoronar certos pedaos de cdigo (tal como o corpo dos mtodos) por
clicar no simbolo + ou ao lado esquerdo do editor de cdigo.
Adicionando a Lgica na Aplicao
Agora a hora de adicionarmos a lgica na aplicao.
Passo 1 : Mudar o nome padro das variveis
Agora imagem abaixo mostra os nomes das variveis padro que atualmente aparecem dentro
do Inspector. Para cada componente, a varivel nome aparece primeiro, seguida pelo tipo de
objeto nos colchetes. Por exemplo, jTextField1 [JTextField] significa que jTextField1 o nome
da varivel e JTextField seu tipo.

Os nomes padro no so relevante no contexto desta aplicao, assim faz sentido mudar eles
de seus padres para algo que mais significante. Clique com o direito em cada varivel e
escolha Change variable name. Quando voc estiver terminado, o nome da varivel devera
aparecer como segue:

Os novos nomes de varivel so tempTextField, celsiusLabel, convertButton e

fahrenheitLabel. Cada mudana que voc faz no Inspector automaticamente propagara seu
modo dentro do cdigo fonte. Voc pode ficar seguro que a compilao no falhara devido aos
tipos ou enganos mais naturais enganos que so comum quando editado na mo.
Passo 2 : Registrando os Event Listeners
Quando um usurio final interage com um componente GUI Swing (como clicando no boto
Convert), este componente gerara um tipo especial de objeto chamado um evento de objeto
o qual ele ento transmitira para qualquer outro objeto que tem previamente registrados
como listeners para aquele evento. O NetBeans registra extremamente simples do event
listener:

Na rea de projeto, clique no boto Convert para selecionar ele. Tenha certeza que apenas o
boto Convert esta selecionado (se o JFrame tambm estiver selecionado, este passo no
funcionara). Clique com o botao direito no boto Convert e escolha Events -> Action ->
ActionPerformed. Este gerara o cdigo do event-handling requerido, deixando voc com o
corpo do mtodo vazio o qual adiciona sua prpria funcionalidade:

Existem muitos tipos diferentes de eventos representando os vrios tipos de aes que o
usurio final pode fazer (clicando com o mouse um evento, pressionando uma tecla outro,
movendo o mouse ainda outro, e assim por diante) nossa aplicao esta apenas interessada
com o ActionEvent; para mais informaes sobre event handling, veja Writing Event Listeners.
Passo 3 : Adicionando o Cdigo de Converso de Temperatura
O passo final simplesmente colocar o cdigo de converso de temperatura no corpo do
mtodo vazio. O cdigo seguinte tudo que necessrio para converter a temperatura de
Celsius para Fahrenheit.
//Parse degrees Celsius as a double and convert to Fahrenheit.
int tempFahr = (int)((Double.parseDouble(tempTextField.getText()))
* 1.8 + 32);
fahrenheitLabel.setText(tempFahr + " Fahrenheit");
Simplesmente copie este cdigo e cole dentro do mtodo
convertButtonActionPerformed como mostrado abaixo:

Com o cdigo de converso no lugar, a aplicao esta agora completa.

Passo 4 Executar a Aplicao
Executar a aplicao simplesmente escolher Run -> Run Main Project dentro da IDE
NetBeans. A primeira vez que voc executar esta aplicao, voc ser lembrado com um
resposta de dialogo CelsiusConvertGUI como a classe principal para este projeto. Clique no
boto OK, e quando o programa terminar de compilar, voc poder ver sua aplicao
executando na sua prpria Janela.