Implementando componentes básicos com swing, utilizando NetBeans Autor Kaio Valente (ksmvalente@hotmail.com.br): Graduando em Bacharelado em Sistemas de Informação (UFPA) e Tecnologia em Análise 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 básicos 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 métodos mais importantes para se trabalhar com estes componentes, e como manipular suas propriedades. Introdução Como sabemos, uma das partes mais complicadas e chatas para um programador é desenhar a interface gráfica, ainda mais se tiver que fazê-la na mão, linha por linha, para nos poupar trabalho e tempo o NetBeans possui uma fantástica ferramenta para desenvolvermos nossa interface gráfica no estilo Drag and drop - Arrastar e soltar. Uma paleta com diversos componentes disponíveis, onde você tem apenas que arrasta-la para dentro de seu Jframe e pronto! O NetBeans gera todo código para você automaticamente. No final deste tutorial você será capaz de criar seu próprio projeto fazendo uso de inumeras aplicações possíveis com o construtor de interface do NetBeans. Estou usando neste tutorial o NetBeans 5.5.1 versão em português. Item 1: Criando um JFrame. Após criar um projeto clique com o botão direito do mouse sobre ele, em novo, escolha a opção Formulário JFrame como na imagem abaixo.
Imagem 1. Criando um JFrame. Note que será gerado pra você uma nova tela com uma caixa de edição, onde você irá construir toda sua interface gráfica, pode redimensioná-la a vontade. Na barra de menu, a direita da tela, terá dois botões: Propriedades e Paleta. Em paleta estará todos os componentes que você pode usar para criar sua interface gráfica. 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 opções, 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 usuário insira os dados no programa. - Importante mencionar que todos os dados inseridos em um JTextField são tratados como String. Portanto se for inserir um dado numérico é necessaria a devida conversão. JTextArea: Campo semelhante ao JTextField, normalmente usado para entrada de textos maiores. Como críticas, sugestões, etc. JRadioButton: Botão que permite apenas seleção de uma opção quando relacionado a um ButtonGroup. ButtonGroup: Componente utilizado para criar grupos de JRadioButtons. JCheckBox: Caixas de multiplas seleções, permite o usuario marcar várias opções ao mesmo tempo. JComboBox: Componente semelhante a um vetor, que permite ao usuário escolher apenas uma opção.
JButton: Botão onde serão implementados os eventos. Agora que você já conhece os componentes, monte a interface abaixo: Imagem 2. Construindo a interface gráfica. Item 3: Explicando passo-a-passo No exemplo acima, estamos usando todos os componentes mencionados anteriormente. O JPanel principal apresenta um título Cadastro, para colocarmos borda com título a um JPanel você deve ir até o botão propriedades, a direita da tela, ou clicar com o botão direito do mouse sobre o JPanel e ir até a propriedade border, clique no botão com... várias opções de borda serão exibidas, selecione TitledBorder, e no campo Título escreva o título que desejar para o seu JPanel, no nosso exemplo Cadastro. Para o JPanel que contém 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 opção Estado, você deverá ir na opção model em propriedades, insira o nome do item que você quer que apareça e clique em adicionar. Para inserir uma imagem, coloque um JLabel e na opção icon em propriedades, marque Arquivo, botão Selecionar Arquivo e escolha a imagem que você deseja adicionar a sua interface, de preferência em.gif, em seguida apague o que estiver escrito na opção text para deixar somente a imagem.
- 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 opção nos JRadioButtons, da opção Sexo de nosso cadastro, voce deve adicionar ao projeto o componente ButtonGroup, este componente não 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, opção buttongroup e escolha buttongroup1 (nome padrão para este componente), faça isso para ambos os JRadioButtons. - Para apagar os nomes que vêem dentro dos JTextField, JRadioButtons, JCheckBox e JButtons basta dar duplo clique sobre eles e apagar o que está escrito, ou então na opção text em propriedades. Item 4: Manipulando o código Neste tutorial vou me limitar apenas a implementação dos métodos necessários para a utilização dos componentes inseridos em nosso projeto. Primeiramente, antes de começar a manipular o código, deve-se alterar o nome de variável de todos os componentes que serão utilizados para processar os eventos (entenda eventos, como sendo basicamente a funcionalidade que você dará a um botão), para que nosso código fique mais legível e organizado. Para alterar o nome de variável de um componente, clique sobre ele, como o botão direito do mouse escolha Alterar o nome de variável... e insira o nome que você deseja. Em nosso projeto utilizaremos o seguinte padrão: Para JTextField: camponomedaopção Ex: camponome Para JComboBox: combonomedaopção Ex: comboestado Para JRadioButton: rbnomedaopção Ex: rbmasculino Para JCheckBox: cbnomedaopção Ex: cbmusica Para JTextArea: camponomedaopção Ex: campobiografia Para JButton: btnomedobotão Ex: btsalvar - JLabels e JPanels não necessitam de alteração pois não serão implementados diretamente no tratamento de eventos. Muito bem, vamos implementar um evento no botão Salvar, onde os dados contidos em todos os componentes serão armazenados em um objeto, para isso você deve criar uma classe auxiliar que apresente variáveis para todas as opções do cadastro (Nome, endereço, sexo, etc), e instanciar o objeto, você deverá criar métodos set e get para todas as variáveis (utilizaremos apenas 1 cadastro, mas você pode fazer utilizando vetores ou arquivos), como disse anteriormente, o objetivo é ensinar os métodos necessários a implementação dos componentes. Para inserir um evento de clique a um botão, clique sobre ele, opção Eventos > Action > actionpermormed, veja na imagem abaixo:
Imagem 3. Adicionar evento de clique. Repare que o NetBeans leva você até a área de edição de código e gera pra você o cabeçalho do método que irá tratar o evento: private void btsalvaractionperformed(java.awt.event.actionevent evt) { // TODO adicione seu código de manipulação aqui: } - Todo código com fundo azul o NetBeans gera automaticamente pra você e não pode ser mudado. Instancie fora do método criado pelo NetBeans o seu objeto: ClasseAuxiliar obj = new ClasseAuxiliar(); E começe a implementar o código dentro do método criado pelo NetBeans. Para receber os dados inseridos em um JTextField você deve utilizar o método gettext() da seguinte forma obj.settext( camponome.gettext() ); Faça o mesmo para os campos Endereço, E-Mail e Fone. Para retornar os campos de um JComboBox você deve utilizar o método getselecteditem(). Entretanto para armazenar em uma variável do tipo String você deve converte-lo para String, ficando assim: obj.setestado( (String)comboEstado.getSelectedItem() );
Para retornar o sexo (Masculino ou Feminino) deve ser feita uma verificação de qual JRadioButton foi marcado pelo usuário, o método 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 verificação para cada componente. O método utilizado para isso é o mesmo do JRadioButton, isselected(), vamos adotar que as variáveis 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 método gettext(), assim: obj.setbiografia( campobiografia.gettext() ); Após ser implementado todo os componentes no evento do botão salvar, coloque uma mensagem de confirmação para o usuário utilizando JOptionPane.showMessageDialog(null,"Cadastro realizado com sucesso"); Não esqueça dos imports. Pronto o cadastro está completo, agora vamos para os métodos de exibição. Após os dados serem salvos você deve apaga-los de seus respectivos campos para usar os espaço para exibição (ou se você quiser implementar mais de um cadastro). Para isso pode-se criar um botão Apagar ou simplesmente os dados serão apagados após serem salvos, que é como faremos aqui. Para apagar o JTextField e o JTextArea utilização o método 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 método setselectedindex(int i) que recebe como parâmetro um número 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 método clearselection(), da seguinte forma: if ( rbmasculino.isselected() rbfeminino.isselected() ) buttongroup1.clearselection();
O código assima verifica se algum dos JRadioButtons estão selecionados, se verdadeiro, apaga a seleção. Agora só falta apagar os JCheckBox que foram marcados, para isso basta verificar cada um para ver se estão marcados e então, desmarcar. Utilizando o método setselected( boolean b ), pode-se mudar o estado de um JCheckBox, onde o parâmetro é do tipo boolean e true representa opção 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 serão apagados após 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 são preenchidos os dados (os componentes), caso você esteja implementando mais de um cadastro, utilizando vetor ou arquivos, seria interessante criar dois botões Próximo e Anterior para navegar entre os cadastros, mas isso fica para uma próxima oportunidade, como disse anteriormente o objetivo desde tutorial é familiarizar você com os principais componentes e aprender os métodos necessários para implementá-los. Primeiramente devemos criar um evento para o botão Limpar da mesma forma que foi feito para o botão Salvar. Dentro do método gerado pelo NetBeans vamos implementar nosso código. Para exibir em um JTextField e JTextArea, utiliza-se o método settext() Ex.: camponome.settext( obj.getnome() ); - Repita isso para todos os JTextField e para o JTextArea. Atenção para o nome de variável do componente. Para alterar o estado de um JComboBox usamos o método setselecteditem(), ficando deste jeito: comboestado.setselecteditem( obj.getestado() ); Para selecionar um JRadioButton e JCheckBox, utilizaremos o método setselected(), devemos verificar qual opção sexual foi escolhida no cadastro e quais opções foram marcadas nos Interesses, e então selecioná-las, nosso código ficará assim: if ( obj.getsexo() == "Masculino" ) rbmasculino.setselected(true); else rbfeminino.setselected(true); O trecho acima verifica se a variável sexo é iqual a Masculino (como definimos no evento do botão salvar), então marca o JRadioButton, senão, marca o JRadionButton referente ao sexo feminino.
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 exibição. Bom é isso ai, chegamos no fim... Construimos nossa interface, aprendemos a tratar eventos, e inserimos os métodos mais importantes para manipular os componentes básicos da API swing. Espero que tenham entendido. Até a próxima! Kaio Valente