Este é um artigo dedicado àqueles que estão iniciando na linguagem Java, nele veremos alguns conceitos sobre elementos gráficos, gerenciadores de layout e tratamento de eventos.
GUI: Graphical User Interface ou Interface Gráfica do Usuário numa definição simples, são os componentes visuais que vão permitir ao usuário interagir com o programa por meio de dispositivos como mouse ou teclado.
Biblioteca Gráfica: Fornecem um conjunto de objetos, métodos e classes auxiliares para criação de interfaces gráficas.
Existem basicamente três bibliotecas deste tipo:
AWT (Abstract Window Toolkit): foi a primeira biblioteca para interfaces gráficas em Java
Standard Widget Toolkit (SWT): desenvolvido pela IBM e hoje é mantido pela Eclipse Foundation, utiliza outras bibliotecas gráficas nativas do sistema operacional
Swing: desenvolvida pela Sun e independente da plataforma, ou seja, é capaz de renderizar por conta própria todos os componentes.
Componentes
Um componente é uma unidade independente que inclusive pode ser utilizado por outros componentes. Os mais comuns são:
- JLabel: Objeto que exibe um texto uma imagem ou ambos e não é editável.
- JTextField: Recebe e exibe dados que usuário digita e pode ser editável ou não.
- JComboBox: Cria uma lista de opções onde o usuário pode escolher uma delas.
- JList: Cria uma lista de opções onde o usuário pode escolher mais de uma.
- JButton: Área que ao ser clicada aciona um evento.
- JCheckBox: Caia de seleção que pode ser marcada ou desmarcada.
- JFrame: armazena os demais componentes.
- JPanel: Área onde outros componentes podem ser inseridos e que facilita o posicionamento no JFrame.
Numa aplicação esses elementos se inter-relacionam e a raiz é a classe Component do pacote java.awt. Esta classe traz as características comuns a todos os componentes, tais como propriedades que indicam suas dimensões ou métodos para manipular eventos por exemplo. No caso do pacote swing a classe raiz é a JComponent (uma extensão da classe Component).
Uma subclasse da classe Component muito utilizada é a Container, que nada mais é do que um componente capaz de abrigar outros componentes, como veremos mais adiante.
Outras classes comuns são Frame e JFrame (pacote swing), uma extensão da classe Window, confuso? Então veja abaixo a hierarquia:
Interface
Você pode utilizar NetBeans, Eclipse ou qualquer outra IDE com a qual se sinta mais a vontade. Vamos começar criando uma classe chamada TutorialGUI que irá representar a janela do nosso programa:
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
public class TutorialGUI extends JFrame {
public TutorialGUI(){
super("Interface gráfica em Java");
setSize(400,400);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setLocationRelativeTo(null);
setVisible(true);
}
}
O que foi feito:
- linha 1,2 e 3: importamos os pacotes, sub-pacotes e classes que iremos utilizar neste tutorial para lidar com ambiente gráfico e eventos.
- linha 5: declaramos a classe e utilizamos a palavra reservada extends para que ela herde todas as características de JFrame.
- linha 7: método construtor da classe TutorialGUI.
- linha 8: a palavra super indica que estamos chamando o método construtor da classe que está sendo herdada, isto é, chame o método construtor de JFrame passando como parâmetro o título da janela.
- linha 9: especifica as dimensões da janela (largura, altura).
- linha 10: ao clicar no X a janela somente ficará oculta por isso precisamos desse método para encerrar a aplicação, ou seja, ao fechar a janela quero que encerre definitivamente o programa.
- linha 11: este método recebe como parâmetro um componente qualquer, que será tomado como base para centralizar sua janela, caso o parâmetro seja null, a janela será centralizada em relação monitor.
- linha 12: e por último, mas não menos importante, devemos saber que quando criamos um Frame ele não está visível por padrão por isso precisamos do método setVisible.
Quantas informações para uma simples janela, não? Pelo contrário, imagine ter que criar uma janela sem o auxílio de classes já desenvolvidas para essa finalidade, tendo que reinventar a roda 🙄 .
Certo, tudo muito bonito, mas precisamos iniciar nossa aplicação:
public class Main {
public static void main(String[] args){
TutorialGUI gui = new TutorialGUI();
}
}
Nesta nova classe a parte temos o método main, que determina o ponto de início de execução de qualquer aplicação Java e a partir daí criamos um objeto da nossa janela.
Gerenciadores de Layout
Na nossa classe TutorialGUI, vamos acrescentar um Container para adicionar os componentes e para posicioná-los devemos atribuir um gerenciador de layout através do método setLayout, como veremos adiante.
public TutorialGUI() {
super("Interface gráfica em Java");
// Área onde os demais componentes da aplicação estarão dispostos
Container container = getContentPane();
setSize(400, 400);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setLocationRelativeTo(null);
setVisible(true);
}
FlowLayout
É o layout padrão e mais simples. Os componentes são adicionados no Container da esquerda para a direita até atingir a borda do Container, onde continuam na próxima linha. Ainda podemos alinhá-los a esquerda, centralizado e à direita.
Container container = getContentPane();
container.setLayout(new FlowLayout());
container.add(new JButton("Botão 1"));
container.add(new JButton("Botão 2"));
container.add(new JButton("Botão 3"));
container.add(new JButton("Botão 4"));
BorderLayout
É organizado em regiões norte, sul, leste, oeste e centro, ao serem adicionados nas regiões norte ou sul os componentes se expandem-se horizontalmente e nas regiões leste e oeste expandem-se verticalmente. Caso não não seja especificada a região os elementos serão colocados na região central por padrão.
Container container = getContentPane();
container.setLayout(new BorderLayout());
container.add(new JButton("Região Norte"), BorderLayout.NORTH);
container.add(new JButton("Região Sul"), BorderLayout.SOUTH);
container.add(new JButton("Região Central"), BorderLayout.CENTER);
container.add(new JButton("Região Leste"), BorderLayout.EAST);
container.add(new JButton("Região Oeste"), BorderLayout.WEST);
GridLayout
Os elementos são posicionados como se estivessem em uma tabela, ocupando linhas e colunas. Cada célula aceita somente um componente.
Container container = getContentPane();
container.setLayout(new GridLayout(2,2));
container.add(new JButton("Botão 1"));
container.add(new JButton("Botão 2"));
container.add(new JButton("Botão 3"));
container.add(new JButton("Botão 4"));
GridBagLayout
É similar ao GridLayout porém mais flexível e mais complexo, é possível que diferentes linhas e colunas sejam ocupadas pelo mesmo componente e tenham tamanhos variados. Cada componente possui um objeto associado chamado GridBagConstraints para armazenar suas informações.
Container container = getContentPane();
container.setLayout(new GridBagLayout());
GridBagConstraints c = new GridBagConstraints();
// Espaço entre os componentes
// cima, esquerda, inferior e direita
c.insets = new Insets(5, 5, 5, 5);
// Redimensiona horizontalmente
c.fill = GridBagConstraints.HORIZONTAL;
// Peso no redimensionamento das células
c.weightx = 1;
// Posição horizontal e vertical
c.gridx = 0;
c.gridy = 0;
container.add(new JButton("Botão 1"), c);
c.gridx = 1;
c.gridy = 1;
container.add(new JButton("Botão 2"), c);
c.gridx = 2;
c.gridy = 2;
container.add(new JButton("Botão 3"), c);
Look And Feel (L&F)
Ainda é possível alterar a aparência da aplicação, Java já possui alguns estilos por padrão, mas é possível baixar outros na Internet ou desenvolver o seu próprio. Para alterar o L&F só precisamos chamar o método UIManager.setLookAndFeel() passando o nome como parâmetro.
Algumas opções:
- javax.swing.plaf.metal.MetalLookAndFeel;
- com.sun.java.swing.plaf.motif.MotifLookAndFeel;
- javax.swing.plaf.nimbus.NimbusLookAndFeel;
- com.sun.java.swing.plaf.windows.WindowsClassicLookAndFeel;
public TutorialGUI() {
super("Interface gráfica em Java");
Container container = getContentPane();
container.setLayout(new FlowLayout());
container.add(new JLabel("Look And Feel"));
container.add(new JTextField(20));
container.add(new JButton("Click me!"));
try {
UIManager.setLookAndFeel("javax.swing.plaf.metal.MetalLookAndFeel");
SwingUtilities.updateComponentTreeUI(this);
} catch (Exception e) {
e.printStackTrace();
}
setSize(200, 120);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setLocationRelativeTo(null);
setVisible(true);
}
Eventos
Sua aplicação pode lidar com diferentes tipos de eventos de acordo com a interação com o usuário: clique do mouse, pressionar uma tecla, fechar uma janela, etc. Para “ouvir” estes eventos, isto é, saber que eles ocorreram e tratá-los existe a interface ActionListener com apenas um método chamado actionPerformed, acionado cada vez que um evento ocorre.
Primeiramente vamos implementar a interface na nossa classe TutorialGUI e adicionar o novo método:
public class TutorialGUI extends JFrame implements ActionListener {
private JButton btnExibeMsg;
public TutorialGUI() {
super("Interface gráfica em Java");
btnExibeMsg = new JButton("Exibir Mensagem");
container.add(btnExibeMsg);
setSize(400, 400);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setLocationRelativeTo(null);
setVisible(true);
}
public void actionPerformed(ActionEvent evento) {
}
}
O método actionPerformed recebe um objeto do tipo ActionEvent como argumento, este objeto possui o método getSource() que nos diz qual componente acionou o evento. Acrescente mais algumas linhas:
public void actionPerformed(ActionEvent evento) {
if (evento.getSource() == btnExibeMsg)
JOptionPane.showMessageDialog(null, "O evento click foi acionado");
}
Depois disso ainda precisamos informar que aquele componente irá receber um evento que será posteriormente tratado, fazemos isso através do método addActionListener() e como parâmetro passamos a palavra “this”, uma referência a própria classe que implementa a interface ActionListener.
btnExibeMsg = new JButton("Exibir Mensagem");
btnExibeMsg.addActionListener(this);
container.add(btnExibeMsg);
Ao clicar no botão veremos a seguinte caixa de diálogo
compapl.tech.blog 
