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

[code language=”java”]
public class Tela extends JFrame {

}
[/code]

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);

[code language=”java” highlight=”2,3,4″]
public class Tela extends JFrame {
private JLabel lblP1, lblP2, lblMedia;
private JTextField txtP1, txtP2, txtMedia;
private JButton btnCalcular;
}
[/code]

4. No construtor:

[code language=”java” highlight=”6,7″]
public class Tela extends JFrame {
private JLabel lblP1, lblP2, lblMedia;
private JTextField txtP1, txtP2, txtMedia;
private JButton btnCalcular;

public Tela() {
}
}
[/code]

a. Atribuir um título

[code language=”java” highlight=”7″]
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");
}
}
[/code]

b. Criar os objetos dos componentes

[code language=”java” highlight=”9,10,11,12,13,14,15″]
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");
}
}
[/code]

c. Configurar os componentes

[code language=”java” highlight=”17″]
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);
}
}
[/code]

d. Criar o painel principal

[code language=”java” highlight=”19″]
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();
}
}
[/code]

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.

[code language=”java” highlight=”20″]
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));
}
}
[/code]

f. Adicionar os componentes ao painel principal

[code language=”java” highlight=”22,23,24,25,26,27,28″]
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);
}
}
[/code]

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

[code language=”java” highlight=”30″]
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);
}
}
[/code]

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

[code language=”java” highlight=”32″]
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();
}
}
[/code]

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

[code language=”java” highlight=”34″]
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);
}
}
[/code]

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

[code language=”java” highlight=”36″]
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);
}
}
[/code]

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

[code language=”java” highlight=”1,39,40,41″]
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) {
}
}
[/code]

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

[code language=”java”]
@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));
}
[/code]

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

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

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

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *