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 infra-estrutura 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 : http://java.sun.com/docs/books/tutorialJWS/uiswing/learn/ex6/CelsiusConverter.jnlp 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 CelsiusConverterSe 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 crier 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 devero ser prenchidos altomaticamentes, 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. Parabns! Voc terminou sua primeira aplicao Swing!

Traduo por Tecno-Java.

Pode copiar e colar, desde que deixe os devidos crditos!

Abraos