Uma “receita de bolo” para criar interfaces gráficas no Java com AWT/Swing

Segue a receita que passei em sala de aula para criar interfaces gráficas simples no Java:

Desenhar um rascunho da tela
Criar a classe que representa sua tela e fazê-la herdar de JFrame
Colocar os componentes como atributos
No construtor:
1. Atribuir um título (setTitle("..."))
2. Criar os objetos dos componentes
3. Configurar os componentes (exemplo: componente.setEditable(false))
4. Criar o painel (JPanel) principal
5. Atribuir um layout para o painel principal (setLayout(...))
6. Adicionar os componentes ao painel principal (painel.add(...))
7. Atribuir o painel principal como painel de conteúdo do JFrame (setContentPane(painel))
8. Atribuir um tamanho para a tela (setSize(w, h) ou setBounds(x, y, w, h)) ou chamar pack()
9. Adicionar a própria tela como listener para os componentes adequados (exemplo: componente.addActionListener(this))
10. Atribuir a operação padrão de fechamento de janela (setDefaultCloseOperation(EXIT_ON_CLOSE))
Fazer sua classe implementar os listeners adequados (exemplo: ActionListener) – não esquecer de criar os métodos que cada interface requer (exemplo: void actionPerformed(ActionEvent ev)) e de eles devem conter o algoritmo que você quer realizar quando o evento ocorrer
Na classe que representa seu programa principal, criar um objeto da sua classe e chamar setVisible(true)

Exemplo

1. Desenhar um rascunho da tela:

2. Criar a classe que representa sua tela e fazê-la herdar de JFrame

public class Tela extends JFrame {

}

3. Colocar os componentes como atributos – neste passo, com a ajuda do rascunho, temos que ver quais os componentes que necessitamos. No exemplo, temos três rótulos (JLabel), três campos de texto (JTextField) e um botão (JButton);

public class Tela extends JFrame {
    private JLabel lblP1, lblP2, lblMedia;
    private JTextField txtP1, txtP2, txtMedia;
    private JButton btnCalcular;
}

4. No construtor:

public class Tela extends JFrame {
    private JLabel lblP1, lblP2, lblMedia;
    private JTextField txtP1, txtP2, txtMedia;
    private JButton btnCalcular;

    public Tela() {
    }
}

a. Atribuir um título

public class Tela extends JFrame {
    private JLabel lblP1, lblP2, lblMedia;
    private JTextField txtP1, txtP2, txtMedia;
    private JButton btnCalcular;

    public Tela() {
        setTitle("Cálculo da Média");
    }
}

b. Criar os objetos dos componentes

public class Tela extends JFrame {
    private JLabel lblP1, lblP2, lblMedia;
    private JTextField txtP1, txtP2, txtMedia;
    private JButton btnCalcular;

    public Tela() {
        setTitle("Cálculo da Média");

        lblP1 = new JLabel("P1:");
        lblP2 = new JLabel("P2:");
        lblMedia = new JLabel("Média:");
        txtP1 = new JTextField("");
        txtP2 = new JTextField("");
        txtMedia = new JTextField("");
        btnCalcular = new JButton("Calcular");
    }
}

c. Configurar os componentes

public class Tela extends JFrame {
    private JLabel lblP1, lblP2, lblMedia;
    private JTextField txtP1, txtP2, txtMedia;
    private JButton btnCalcular;

    public Tela() {
        setTitle("Cálculo da Média");

        lblP1 = new JLabel("P1:");
        lblP2 = new JLabel("P2:");
        lblMedia = new JLabel("Média:");
        txtP1 = new JTextField("");
        txtP2 = new JTextField("");
        txtMedia = new JTextField("");
        btnCalcular = new JButton("Calcular");

        txtMedia.setEditable(false);
    }
}

d. Criar o painel principal

public class Tela extends JFrame {
    private JLabel lblP1, lblP2, lblMedia;
    private JTextField txtP1, txtP2, txtMedia;
    private JButton btnCalcular;

    public Tela() {
        setTitle("Cálculo da Média");

        lblP1 = new JLabel("P1:");
        lblP2 = new JLabel("P2:");
        lblMedia = new JLabel("Média:");
        txtP1 = new JTextField("");
        txtP2 = new JTextField("");
        txtMedia = new JTextField("");
        btnCalcular = new JButton("Calcular");

        txtMedia.setEditable(false);

        JPanel painel = new JPanel();
    }
}

e. Atribuir um layout para o painel principal – aqui, também temos a ajuda do rascunho: como iremos usar um layout do tipo grade, vemos que precisaremos de quatro linhas e duas colunas.

public class Tela extends JFrame {
    private JLabel lblP1, lblP2, lblMedia;
    private JTextField txtP1, txtP2, txtMedia;
    private JButton btnCalcular;

    public Tela() {
        setTitle("Cálculo da Média");

        lblP1 = new JLabel("P1:");
        lblP2 = new JLabel("P2:");
        lblMedia = new JLabel("Média:");
        txtP1 = new JTextField("");
        txtP2 = new JTextField("");
        txtMedia = new JTextField("");
        btnCalcular = new JButton("Calcular");

        txtMedia.setEditable(false);

        JPanel painel = new JPanel();
        painel.setLayout(new GridLayout(4, 2, 5, 5));
    }
}

f. Adicionar os componentes ao painel principal

public class Tela extends JFrame {
    private JLabel lblP1, lblP2, lblMedia;
    private JTextField txtP1, txtP2, txtMedia;
    private JButton btnCalcular;

    public Tela() {
        setTitle("Cálculo da Média");

        lblP1 = new JLabel("P1:");
        lblP2 = new JLabel("P2:");
        lblMedia = new JLabel("Média:");
        txtP1 = new JTextField("");
        txtP2 = new JTextField("");
        txtMedia = new JTextField("");
        btnCalcular = new JButton("Calcular");

        txtMedia.setEditable(false);

        JPanel painel = new JPanel();
        painel.setLayout(new GridLayout(4, 2, 5, 5));

        painel.add(lblP1);
        painel.add(txtP1);
        painel.add(lblP2);
        painel.add(txtP2);
        painel.add(lblMedia);
        painel.add(txtMedia);
        painel.add(btnCalcular);
    }
}

g. Atribuir o painel principal como painel de conteúdo do JFrame

public class Tela extends JFrame {
    private JLabel lblP1, lblP2, lblMedia;
    private JTextField txtP1, txtP2, txtMedia;
    private JButton btnCalcular;

    public Tela() {
        setTitle("Cálculo da Média");

        lblP1 = new JLabel("P1:");
        lblP2 = new JLabel("P2:");
        lblMedia = new JLabel("Média:");
        txtP1 = new JTextField("");
        txtP2 = new JTextField("");
        txtMedia = new JTextField("");
        btnCalcular = new JButton("Calcular");

        txtMedia.setEditable(false);

        JPanel painel = new JPanel();
        painel.setLayout(new GridLayout(4, 2, 5, 5));

        painel.add(lblP1);
        painel.add(txtP1);
        painel.add(lblP2);
        painel.add(txtP2);
        painel.add(lblMedia);
        painel.add(txtMedia);
        painel.add(btnCalcular);

        setContentPane(painel);
    }
}

h. Atribuir um tamanho para a tela ou chamar pack()

public class Tela extends JFrame {
    private JLabel lblP1, lblP2, lblMedia;
    private JTextField txtP1, txtP2, txtMedia;
    private JButton btnCalcular;

    public Tela() {
        setTitle("Cálculo da Média");

        lblP1 = new JLabel("P1:");
        lblP2 = new JLabel("P2:");
        lblMedia = new JLabel("Média:");
        txtP1 = new JTextField("");
        txtP2 = new JTextField("");
        txtMedia = new JTextField("");
        btnCalcular = new JButton("Calcular");

        txtMedia.setEditable(false);

        JPanel painel = new JPanel();
        painel.setLayout(new GridLayout(4, 2, 5, 5));

        painel.add(lblP1);
        painel.add(txtP1);
        painel.add(lblP2);
        painel.add(txtP2);
        painel.add(lblMedia);
        painel.add(txtMedia);
        painel.add(btnCalcular);

        setContentPane(painel);

        pack();
    }
}

i. Adicionar a própria tela como listener para os componentes adequados

public class Tela extends JFrame {
    private JLabel lblP1, lblP2, lblMedia;
    private JTextField txtP1, txtP2, txtMedia;
    private JButton btnCalcular;

    public Tela() {
        setTitle("Cálculo da Média");

        lblP1 = new JLabel("P1:");
        lblP2 = new JLabel("P2:");
        lblMedia = new JLabel("Média:");
        txtP1 = new JTextField("");
        txtP2 = new JTextField("");
        txtMedia = new JTextField("");
        btnCalcular = new JButton("Calcular");

        txtMedia.setEditable(false);

        JPanel painel = new JPanel();
        painel.setLayout(new GridLayout(4, 2, 5, 5));

        painel.add(lblP1);
        painel.add(txtP1);
        painel.add(lblP2);
        painel.add(txtP2);
        painel.add(lblMedia);
        painel.add(txtMedia);
        painel.add(btnCalcular);

        setContentPane(painel);

        pack();

        btnCalcular.addActionListener(this);
    }
}

j. Atribuir a operação padrão de fechamento de janela

public class Tela extends JFrame {
    private JLabel lblP1, lblP2, lblMedia;
    private JTextField txtP1, txtP2, txtMedia;
    private JButton btnCalcular;

    public Tela() {
        setTitle("Cálculo da Média");

        lblP1 = new JLabel("P1:");
        lblP2 = new JLabel("P2:");
        lblMedia = new JLabel("Média:");
        txtP1 = new JTextField("");
        txtP2 = new JTextField("");
        txtMedia = new JTextField("");
        btnCalcular = new JButton("Calcular");

        txtMedia.setEditable(false);

        JPanel painel = new JPanel();
        painel.setLayout(new GridLayout(4, 2, 5, 5));

        painel.add(lblP1);
        painel.add(txtP1);
        painel.add(lblP2);
        painel.add(txtP2);
        painel.add(lblMedia);
        painel.add(txtMedia);
        painel.add(btnCalcular);

        setContentPane(painel);

        pack();

        btnCalcular.addActionListener(this);

        setDefaultCloseOperation(EXIT_ON_CLOSE);
    }
}

5. Fazer sua classe implementar os listeners adequados; não esquecer de criar os métodos que cada interface requer

public class Tela extends JFrame implements ActionListener {
    private JLabel lblP1, lblP2, lblMedia;
    private JTextField txtP1, txtP2, txtMedia;
    private JButton btnCalcular;

    public Tela() {
        setTitle("Cálculo da Média");

        lblP1 = new JLabel("P1:");
        lblP2 = new JLabel("P2:");
        lblMedia = new JLabel("Média:");
        txtP1 = new JTextField("");
        txtP2 = new JTextField("");
        txtMedia = new JTextField("");
        btnCalcular = new JButton("Calcular");

        txtMedia.setEditable(false);

        JPanel painel = new JPanel();
        painel.setLayout(new GridLayout(4, 2, 5, 5));

        painel.add(lblP1);
        painel.add(txtP1);
        painel.add(lblP2);
        painel.add(txtP2);
        painel.add(lblMedia);
        painel.add(txtMedia);
        painel.add(btnCalcular);

        setContentPane(painel);

        pack();

        btnCalcular.addActionListener(this);

        setDefaultCloseOperation(EXIT_ON_CLOSE);
    }

    @Override
    public void actionPerformed(ActionEvent ev) {
    }
}

5. (continuação) … e de eles devem conter o algoritmo que você quer realizar quando o evento ocorrer

    @Override
    public void actionPerformed(ActionEvent ev) {
        // entradas
        double p1 = Double.parseDouble(txtP1.getText());
        double p2 = Double.parseDouble(txtP2.getText());

        // processamento
        double media = (p1 + p2) / 2;

        // saída
        txtMedia.setText(String.valueOf(media));
    }

6. Na classe que representa seu programa principal, criar um objeto da sua classe e chamar setVisible(true)

public class Programa {
    public static void main(String[] args) {
        Tela tela = new Tela();
        tela.setVisible(true);
    }
}

Parece difícil, mas não é! Espero que tenham gostado e que deixem uma mensagem nos comentários com seu elogio, crítica e/ou sugestão! Até o próximo post.

6 pensou em “Uma “receita de bolo” para criar interfaces gráficas no Java com AWT/Swing”

Stephanie 12 de agosto de 2015 às 13:23

Oi professor, gostei, bem detalhado o passo a passo fica bem mais fácil de entender. Thanks

Responder ↓
1. Ramon Chiara Autor do post12 de agosto de 2015 às 13:47
  
  Stephanie,
  
  Fico feliz que tenha gostado!
  Qualquer dúvida estou à disposição.
  
  []s, Ramon
  
  Responder ↓
Adriano 20 de agosto de 2015 às 14:32

Excelente… muito bem explicado e muito bem detalhado… Acho que agora não esqueço mais como montar uma tela. rsrsrsrs.

Responder ↓
1. Ramon Chiara Autor do post25 de agosto de 2015 às 02:26
  
  Isso aí, Adriano!!! 🙂
  
  Responder ↓
Fabio Soares 4 de setembro de 2015 às 10:36

poxa professor ainda nao tinha analisado seu site, muito bom gostei muito, tomara que facilite as aulas para mim agora !!

Responder ↓
1. Ramon Chiara Autor do post20 de setembro de 2015 às 13:36
  
  Oi, Fabio.
  Que bom que gostou!
  Espero que te ajude bastante!
  Abraços
  
  Responder ↓

Prof. Ramon

No meu site você encontra alguns materiais que uso em minhas aulas. Ou não! :-)

Uma “receita de bolo” para criar interfaces gráficas no Java com AWT/Swing

Exemplo

6 pensou em “Uma “receita de bolo” para criar interfaces gráficas no Java com AWT/Swing”

Deixe um comentário Cancelar resposta