h#p://www.guj.com.

br

Implementando componentes bsicos com swing, utilizando NetBeans

Autor Kaio Valente (ksmvalente@hotmail.com.br): Graduando em Bacharelado em Sistemas de Informao (UFPA) e Tecnologia em Anlise e Desenvolvimento de Software (CEFET-PA) 3 semestre ambos

Gravata
Neste tutorial iremos implementar um sistema simples de cadastro com o objetivo de explicar como funciona os componentes bsicos do framework swing (JTextField, JTextArea, JRadioButton, ButtonGroup, JCheckBox, JComboBox, etc), para isso utilizaremos a IDE NetBeans 5.5.1 para construir nossa interface, aprenderemos como manipular os mtodos mais importantes para se trabalhar com estes componentes, e como manipular suas propriedades.
Introduo

Como sabemos, uma das partes mais complicadas e chatas para um programador desenhar a interface grfica, ainda mais se tiver que faz-la na mo, linha por linha, para nos poupar trabalho e tempo o NetBeans possui uma fantstica ferramenta para desenvolvermos nossa interface grfica no estilo Drag and drop - Arrastar e soltar. Uma paleta com diversos componentes disponveis, onde voc tem apenas que arrasta-la para dentro de seu Jframe e pronto! O NetBeans gera todo cdigo para voc automaticamente. No final deste tutorial voc ser capaz de criar seu prprio projeto fazendo uso de inumeras aplicaes possveis com o construtor de interface do NetBeans. Estou usando neste tutorial o NetBeans 5.5.1 verso em portugus. Item 1:Criando um JFrame. Aps criar um projeto clique com o boto direito do mouse sobre ele, em novo, escolha a opo Formulrio JFrame como na imagem abaixo.

 h#p://www.guj.com.br

Imagem 1. Criando um JFrame.

Note que ser gerado pra voc uma nova tela com uma caixa de edio, onde voc ir construir toda sua interface grfica, pode redimension-la a vontade. Na barra de menu, a direita da tela, ter dois botes: Propriedades e Paleta. Em paleta estar todos os componentes que voc pode usar para criar sua interface grfica. Item 2: Construindo a Interface Como vamos fazer um sistema simples de cadastro, utilizaremos os seguintes componentes: JPanel: Painel criado em cima do JFrame que permite entre outras opes, adicionar cor de fundo e borda. utilizado para organizar melhor sua interface. JLabel: Permite inserir textos e imagens. JTextField: Caixa de texto para que o usurio insira os dados no programa. - Importante mencionar que todos os dados inseridos em um JTextField so tratados como String. Portanto se for inserir um dado numrico necessaria a devida converso. JTextArea: Campo semelhante ao JTextField, normalmente usado para entrada de textos maiores. Como crticas, sugestes, etc. JRadioButton: Boto que permite apenas seleo de uma opo quando relacionado a um ButtonGroup. ButtonGroup: Componente utilizado para criar grupos de JRadioButtons. JCheckBox: Caixas de multiplas selees, permite o usuario marcar vrias opes ao mesmo tempo. JComboBox: Componente semelhante a um vetor, que permite ao usurio escolher apenas uma opo.

 h#p://www.guj.com.br
JButton: Boto onde sero implementados os eventos. Agora que voc j conhece os componentes, monte a interface abaixo:

Imagem 2. Construindo a interface grfica.

Item 3: Explicando passo-a-passo No exemplo acima, estamos usando todos os componentes mencionados anteriormente. O JPanel principal apresenta um ttulo Cadastro, para colocarmos borda com ttulo a um JPanel voc deve ir at o boto propriedades, a direita da tela, ou clicar com o boto direito do mouse sobre o JPanel e ir at a propriedade border, clique no boto com ... vrias opes de borda sero exibidas, selecione TitledBorder, e no campo Ttulo escreva o ttulo que desejar para o seu JPanel, no nosso exemplo Cadastro. Para o JPanel que contm os JCheckBox o tipo de borda EtchedBorder. - Para inserir qualquer componente dentro de um JPanel, voc deve primeiro inserir o JPanel, em seguida os componentes sobre ele. Outra maneira arrastando os componentes de fora para dentro do JPanel. Para inserir itens no JComboBox da opo Estado, voc dever ir na opo model em propriedades, insira o nome do item que voc quer que aparea e clique em adicionar. Para inserir uma imagem, coloque um JLabel e na opo icon em propriedades, marque Arquivo, boto Selecionar Arquivo e escolha a imagem que voc deseja adicionar a sua interface, de preferncia em .gif, em seguida apague o que estiver escrito na opo text para deixar somente a imagem.

 h#p://www.guj.com.br
- Ao transferir seu projeto de um computador para outro, certifique-se de que o caminho da imagem seja o mesmo neste computador. Para permitir que seja marcada apenas uma opo nos JRadioButtons, da opo Sexo de nosso cadastro, voce deve adicionar ao projeto o componente ButtonGroup, este componente no apresenta nenhum tipo de interface, ao inseri-lo note que ele ser adicionado no inspetor de componentes a esquerda da tela. Em seguida v at as propriedades dos JRadioButtons, opo buttonGroup e escolha buttonGroup1 (nome padro para este componente), faa isso para ambos os JRadioButtons. - Para apagar os nomes que vem dentro dos JTextField, JRadioButtons, JCheckBox e JButtons basta dar duplo clique sobre eles e apagar o que est escrito, ou ento na opo text em propriedades. Item 4: Manipulando o cdigo Neste tutorial vou me limitar apenas a implementao dos mtodos necessrios para a utilizao dos componentes inseridos em nosso projeto. Primeiramente, antes de comear a manipular o cdigo, deve-se alterar o nome de varivel de todos os componentes que sero utilizados para processar os eventos (entenda eventos, como sendo basicamente a funcionalidade que voc dar a um boto), para que nosso cdigo fique mais legvel e organizado. Para alterar o nome de varivel de um componente, clique sobre ele, como o boto direito do mouse escolha Alterar o nome de varivel... e insira o nome que voc deseja. Em nosso projeto utilizaremos o seguinte padro: Para JTextField: campoNomeDaOpo Ex: campoNome Para JComboBox: comboNomeDaOpo Ex: comboEstado Para JRadioButton: rbNomeDaOpo Ex: rbMasculino Para JCheckBox: cbNomeDaOpo Ex: cbMusica Para JTextArea: campoNomeDaOpo Ex: campoBiografia Para JButton: btNomeDoBoto Ex: btSalvar - JLabels e JPanels no necessitam de alterao pois no sero implementados diretamente no tratamento de eventos. Muito bem, vamos implementar um evento no boto Salvar, onde os dados contidos em todos os componentes sero armazenados em um objeto, para isso voc deve criar uma classe auxiliar que apresente variveis para todas as opes do cadastro (Nome, endereo, sexo, etc), e instanciar o objeto, voc dever criar mtodos set e get para todas as variveis (utilizaremos apenas 1 cadastro, mas voc pode fazer utilizando vetores ou arquivos), como disse anteriormente, o objetivo ensinar os mtodos necessrios a implementao dos componentes. Para inserir um evento de clique a um boto, clique sobre ele, opo Eventos > Action > actionPermormed, veja na imagem abaixo:

 h#p://www.guj.com.br

Imagem 3. Adicionar evento de clique.

Repare que o NetBeans leva voc at a rea de edio de cdigo e gera pra voc o cabealho do mtodo que ir tratar o evento: private void btSalvarActionPerformed(java.awt.event.ActionEvent evt) { // TODO adicione seu cdigo de manipulao aqui: }

- Todo cdigo com fundo azul o NetBeans gera automaticamente pra voc e no pode ser mudado. Instancie fora do mtodo criado pelo NetBeans o seu objeto: ClasseAuxiliar obj = new ClasseAuxiliar();

E comee a implementar o cdigo dentro do mtodo criado pelo NetBeans. Para receber os dados inseridos em um JTextField voc deve utilizar o mtodo getText() da seguinte forma obj.setText( campoNome.getText() ); Faa o mesmo para os campos Endereo, E-Mail e Fone. Para retornar os campos de um JComboBox voc deve utilizar o mtodo getSelectedItem(). Entretanto para armazenar em uma varivel do tipo String voc deve converte-lo para String, ficando assim: obj.setEstado( (String)comboEstado.getSelectedItem() );

 h#p://www.guj.com.br
Para retornar o sexo (Masculino ou Feminino) deve ser feita uma verificao de qual JRadioButton foi marcado pelo usurio, o mtodo utilizado para isso isSelected(), desta forma: if ( rbMasculino.isSelected() ) obj.setSexo( "Masculino" ); else obj.setSexo( "Feminino" ); Vamos agora para os JCheckBox, para saber quais foram marcados, voc deve fazer uma verificao para cada componente. O mtodo utilizado para isso o mesmo do JRadioButton, isSelected(), vamos adotar que as variveis de interesses foram declaradas do tipo boolean em sua classe auxiliar, ficando desta maneira: if ( cbMusica.isSelected() ) obj.setMusica( true ); if ( cbCinema.isSelected() ) obj.setCinema( true ); if ( cbEsporte.isSelected() ) obj.setEsporte( true ); if ( cbInformatica.isSelected() ) obj.setInformatica( true ); Muito bem, agora falta apenas o JTextArea, que implementado igualmente ao JTextField usando o mtodo getText(), assim: obj.setBiografia( campoBiografia.getText() );

Aps ser implementado todo os componentes no evento do boto salvar, coloque uma mensagem de confirmao para o usurio utilizando JOptionPane.showMessageDialog(null,"Cadastro realizado com sucesso"); No esquea dos imports. Pronto o cadastro est completo, agora vamos para os mtodos de exibio. Aps os dados serem salvos voc deve apaga-los de seus respectivos campos para usar os espao para exibio (ou se voc quiser implementar mais de um cadastro). Para isso pode-se criar um boto Apagar ou simplesmente os dados sero apagados aps serem salvos, que como faremos aqui. Para apagar o JTextField e o JTextArea utilizao o mtodo setText(), ficando desta forma: campoNome.setText( ); comboEstado.setText( ); Um JComboBox funciona como se fosse um vetor, onde cada item fica em um ndice, para desmarcar um JComboBox utiliza-se o mtodo setSelectedIndex(int i) que recebe como parmetro um nmero inteiro que representa o ndice deste JComboBox. Para desmacar usa-se: comboEstado.setSelectedIndex(-1); O -1 indica que nenhum item est selecionado. Para apagar o JRadioButton selecionado, deve-se apagar o grupo inteiro, ou seja o ButtonGroup, para isso utilizamos o mtodo clearSelection(), da seguinte forma: if ( rbMasculino.isSelected() || rbFeminino.isSelected() ) buttonGroup1.clearSelection();

 h#p://www.guj.com.br
O cdigo assima verifica se algum dos JRadioButtons esto selecionados, se verdadeiro, apaga a seleo. Agora s falta apagar os JCheckBox que foram marcados, para isso basta verificar cada um para ver se esto marcados e ento, desmarcar. Utilizando o mtodo setSelected( boolean b ), pode-se mudar o estado de um JCheckBox, onde o parmetro do tipo boolean e true representa opo marcada, e false desmarcada. If ( cbMusica.isSelected() ) cbMusica.setSelected( false ); If ( cbCinema.isSelected() ) cbMusica.setSelected( false ); If ( cbEsporte.isSelected() ) cbMusica.setSelected( false ); If ( cbInformatica.isSelected() ) cbMusica.setSelected( false ); Pronto! Todos os campos sero apagados aps serem salvos, e agora podemos exibir os dados armazenados. Item 5: Exibindo Dados Para exibir os dados que foram armazenados usaremos os mesmos campos onde so preenchidos os dados (os componentes), caso voc esteja implementando mais de um cadastro, utilizando vetor ou arquivos, seria interessante criar dois botes Prximo e Anterior para navegar entre os cadastros, mas isso fica para uma prxima oportunidade, como disse anteriormente o objetivo desde tutorial familiarizar voc com os principais componentes e aprender os mtodos necessrios para implement-los. Primeiramente devemos criar um evento para o boto Limpar da mesma forma que foi feito para o boto Salvar. Dentro do mtodo gerado pelo NetBeans vamos implementar nosso cdigo. Para exibir em um JTextField e JTextArea, utiliza-se o mtodo setText() Ex.: campoNome.setText( obj.getNome() ); - Repita isso para todos os JTextField e para o JTextArea. Ateno para o nome de varivel do componente. Para alterar o estado de um JComboBox usamos o mtodo setSelectedItem(), ficando deste jeito: comboEstado.setSelectedItem( obj.getEstado() ); Para selecionar um JRadioButton e JCheckBox, utilizaremos o mtodo setSelected(), devemos verificar qual opo sexual foi escolhida no cadastro e quais opes foram marcadas nos Interesses, e ento selecion-las, nosso cdigo ficar assim: if ( obj.getSexo() == "Masculino" ) rbMasculino.setSelected(true); else rbFeminino.setSelected(true);

O trecho acima verifica se a varivel sexo iqual a Masculino (como definimos no evento do boto salvar) , ento marca o JRadioButton, seno, marca o JRadionButton referente ao sexo feminino.

 h#p://www.guj.com.br
Para os JCheckBoxs: If ( obj.getMusica == true ) cbMusica.setSelected(true); If ( obj.getCinema == true ) cbCinema.setSelected(true); If ( obj.getEsporte == true ) cbEsporte.setSelected(true); If ( obj.getInformatica == true ) cbInformatica.setSelected(true); Verificamos qual dos interesses foram salvos no cadastro e marcamos para exibio. Bom isso ai, chegamos no fim... Construimos nossa interface, aprendemos a tratar eventos, e inserimos os mtodos mais importantes para manipular os componentes bsicos da API swing. Espero que tenham entendido. At a prxima! Kaio Valente