Introdução à Interface Gráfica com Swing no NetBeans

Porsu-pet-si

Introdução à Interface Gráfica com Swing no NetBeans

         Swing é uma das bibliotecas gráficas suportadas pelo Java extremamente útil e que apresenta grande portabilidade nos sistemas em que roda, apresentando o mínimo possível de variações no comportamento dos seus elementos nos diferentes sistemas em que é executada, seja Linux, Windows, etc. É buscada a manutenção dos elementos para que se tenha um comportamento semelhante e adaptado de maneira eficaz nas mais variadas plataformas. É uma biblioteca que possui componentes gráficos como botões, estilos, janelas, dentre outros componentes, facilitando, assim, o desenvolvimento de uma interface para o usuário.


         Para aprendermos como usar o Swing, criaremos um programa que efetue login. Para tanto, usaremos o NetBeans IDE 8.2. Primeiramente, criamos o nosso projeto, acessamos a aba arquivo, novo projeto e selecionamos a categoria Java.

 

A seguir, criamos um novo pacote Java, como na imagem a seguir:

         Agora, clicamos com o botão direito sobre o nosso pacote e selecionamos, em novo, “Form JFrame”. Vamos clicar no ícone visualizar – que aparece ao lado do histórico para testar o que está acontecendo (o ícone de seta verde que aparece na parte superior da tela – (Ícone de executar) – serve para executar o programa completo, enquanto o (Ícone de visualizar) ,  para ver como ficará a tela).

         Observação: Lembre-se de selecionar a classe principal (no caso, a “tela inicial” do seu programa. Isso será solicitado na primeira vez que o executar.

         Temos agora, uma tela cinza que aparece no canto superior esquerdo. Vamos deixá-la mais com cara de tela inicial? Uma de login, por exemplo. Primeiramente, é possível notar que o programa se inicia no canto superior esquerdo da tela, correto? Para modificar isso, clicamos com o botão direito do mouse sobre o nosso painel e em propriedades. Na aba “código”, marque “gerar centralizado” para executá-la no centro da tela. Nessa aba também é possível fazer outras alterações, como modificar o tamanho padrão do programa, por exemplo.

         Para adicionarmos um plano de fundo, colocamos um contêiner “Painel”, na paleta que aparece na parte esquerda da nossa tela (note que todos nossos botões, janelas, labels, etc. aparecem nessa região) e, depois de adicionado, selecionamos, em propriedades, o plano de fundo. Os demais componentes colocamos em cima desse contêiner. É possível adicionar outras características a esse painel, como uma borda, por exemplo.

         Feito isso, adicionaremos um “Label” sinalizado como um controle Swing na paleta.  Podemos, assim, adicionar texto à nossa tela. Clique no label e a seguir no local que deseja colocá-lo. Clique “F2” para editar o texto ou selecione essa opção clicando com o botão direito do mouse. Vá às propriedades do label para editar o tamanho, a cor, a fonte, o alinhamento, a borda, o ícone, etc.

         Para adicionarmos uma imagem, colocamos ela na pasta do nosso projeto e então, no programa, no label que desejamos inserir, vamos em propriedades, na opção “icon” selecionamos a imagem que queremos. Na imagem a seguir, foram adicionados o contêiner e os outros itens citados. Os retângulos cinzas que aparecem representam os espaços entre as bordas e cada item e os limites da janela. É possível ajustá-los clicando duas vezes sobre eles.

         Para permitir que o usuário insira dados não é possível usar o label, pois ele apenas mostra ao mesmo algo que nós definimos. Para permitir que o usuário insira alguma informação, usamos o campo de texto (para o user) e o campo de senha. O que diferencia o campo de senha para o de texto, é que no de senha não será mostrado o que está sendo digitado. Isso se dá pela propriedade “echoChar” do campo, que está definida para “\u25cf” – indicando que os caracteres digitados não sejam mostrados na tela –, enquanto que o campo de texto está para “\u0000” – padrão que define a exibição dos caracteres.

         Agora adicionamos um botão para fazer o login – no caso, o que será feito é a verificação dos dados e a troca para a próxima tela. Estamos até o momento, com uma tela mais ou menos assim (lembrando que a personalização de cores, design ficam ao seu critério): 

         Agora começa a parte séria. Para receber do usuário os dados inseridos, vamos ao código do nosso programa. Inserimos nas propriedades do nosso botão, na aba eventos, em “actionPerformed” a opção “jButton1ActionPerformed” – JButton1 é o nome padrão que veio com o nosso botão (lembrando que isso pode ser alterado).  Isso indica que quando o botão for pressionado, executará alguma ação.

         Podemos adicionar um campo de opção: se o usuário deseja que a senha fique visível ou não. Para tanto, após inserir uma caixa de seleção no projeto, vá em propriedades, na aba eventos, e selecione actionPerformed. Em seguida, vá à aba Código-Fonte, ao lado de Projeto, procure por essa classe que foi criada (ou clique duas vezes sobre o item na aba do projeto) e adicione na mesma uma verificação –  se a caixa de seleção está marcada ou não:

if(jCheckBox1.isSelected())  {

         jPasswordField1.setEchoChar(‘\u0000’);

}

else  {

         jPasswordField1.setEchoChar(‘\u25cf’);

}

         Lembrando que jCheckBox1 é o nome padrão criado pelo programa para nossa caixa de seleção e que é possível alterá-lo nas suas propriedades.

         Como citado anteriormente, o que diferencia o campo de senha do campo de texto, é que seu “echoChar”, por padrão é “\u25cf”. Se o colocarmos para “\u0000”, o que está sendo digitado será mostrado (de texto). Logo, se a opção “mostrar senha” estiver selecionada, usaremos “\u0000”, do contrário, usaremos “\u25cf” (ocultar senha).

         Agora, vamos criar uma classe Login. Aqui, vamos fazer a verificação dos dados inseridos, ver se estão corretos e direcionar à próxima tela ou indicar que os dados não são válidos ou falta alguma informação. Na classe jButton1ActionPerformed chamemos então login. Criamos nossas propriedades usuário e senha para guardar os valores inseridos. Para guardar o usuário utilizamos: nomeDoCampo.getText(); Para o campo de senha, usamos nomeDoCampo.getPassword(); Segue na imagem a seguir:

         Nesta ocasião, inserimos em “usuário” o que estiver escrito no contêiner jTextField1 e em senha, passamos para string o conteúdo do campo jPasswordField1 – que é uma senha – para “senha”. A seguir, estamos fazendo verificação se os campos estão vazios, solicitando ao usuário que preencha os campos correspondentes. Isso está sendo feito usando JOptionPane – que deve ser importado: import javax.swing.JOptionPane; – ou digite e selecione na lanterninha do lado esquerdo da tela a opção:

         Para fazer com que nosso programa execute isso, quando ele clicar no nosso botão, retornemos a nossa classe “jButton1ActionPerformed” e chamemos nela nossa classe Login – que é onde estão os passos a serem realizados pelo nosso programa. Assim, quando o usuário clicar no botão, se faltar algum dado, estará criando uma janela externa que será mostrada ao usuário da seguinte maneira:

         O JOptionPane nos permite adicionar vários outros tipos de janela. Para identificar quais são, basta clicar ctrl + barra de espaço depois de JOptionPane. para visualizar as opções:

         Ao mover a seleção até o item desejado, é possível ver os parâmetros necessários e o que é possível ser feito com mais detalhes.

         Criemos agora, para simulação, um login (usuário e senha) para verificação. Adicionamos, por exemplo, o usuarioValido = “pet_redaçao” e  a senhaValida = “123456”. Aqui estamos usando esse método apenas para exemplificação. Em um projeto real, utilizar-se-ia uma lista de usuários, com dados protegidos, ou um banco de dados.

         Na imagem abaixo, seguem novas verificações – agora, se o usuário é válido. No campo onde verificamos se “usuário” equivale ao “usuarioValido”, este seria o item x da lista. Deveria ser feita uma verificação até o final da lista – ou banco – para identificar se foi encontrado ou não e, no final exibir a mensagem correspondente. Para simplificar, usaremos os dados criados anteriormente.

         Agora, se o usuário for válido, apenas prosseguimos para a próxima tela usando, naquele “if” que está comentado “próxima tela” (onde a verificação indica que todos campos conferem) os seguintes comandos:

nomeDaProximaTela nomeVariavel = new nomeDaProximaTela();

nomeVariavel.setVisible(true);

this.dispose();

         Aqui, usamos o “dispose” para fechar a tela atual e o “setVisible” para “abrir” a nova janela – a próxima, no caso. No nosso exemplo ficou assim:

         E essa foi a introdução ao Swing! A partir disso, é possível ir experimentando as diversas funções fornecidas por essa biblioteca para aprimorar seus conhecimentos e elaborar um programa completo!

Referências

http://www.caelum.com.br/apostila-java-testes-xml-design-patterns/interfaces-graficas-com-swing/#5-3-look-and-feel

Feedback e publicações anteriores:

Caso você tenha interesse em ler as edições anteriores do PET Redação ou conhecer um pouco mais sobre o trabalho desenvolvido pelo PET-SI não deixe de conferir nossa página. Antes de você partir gostaríamos também de pedir que você nos ajude, respondendo o formulário de avaliação abaixo. Esse formulário nos ajuda a moldar nossas atividades para melhor atender os nossos leitores.

 

Comentários não são aceitos para este Post!!!