Lego

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:

  1. Desenhar um rascunho da tela
  2. Criar a classe que representa sua tela e fazê-la herdar de JFrame
  3. Colocar os componentes como atributos
  4. 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))
  5. 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
  6. Na classe que representa seu programa principal, criar um objeto da sua classe e chamar setVisible(true)

Exemplo

1. Desenhar um rascunho da tela:

Rascunho

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 ideias sobre “Uma “receita de bolo” para criar interfaces gráficas no Java com AWT/Swing

Se você gostou do post, tem alguma dúvida ou encontrou algum erro, por favor, deixe uma mensagem! Seu feedback é muito importante!