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:
- Atribuir um título (
setTitle("...")
) - Criar os objetos dos componentes
- Configurar os componentes (exemplo:
componente.setEditable(false)
) - Criar o painel (
JPanel
) principal - Atribuir um layout para o painel principal (
setLayout(...)
) - Adicionar os componentes ao painel principal (
painel.add(...)
) - Atribuir o painel principal como painel de conteúdo do
JFrame
(setContentPane(painel)
) - Atribuir um tamanho para a tela (
setSize(w, h)
ousetBounds(x, y, w, h)
) ou chamarpack()
- Adicionar a própria tela como listener para os componentes adequados (exemplo:
componente.addActionListener(this)
) - Atribuir a operação padrão de fechamento de janela (
setDefaultCloseOperation(EXIT_ON_CLOSE)
)
- Atribuir um título (
- 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
[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.
Oi professor, gostei, bem detalhado o passo a passo fica bem mais fácil de entender. Thanks
Stephanie,
Fico feliz que tenha gostado!
Qualquer dúvida estou à disposição.
[]s, Ramon
Excelente… muito bem explicado e muito bem detalhado… Acho que agora não esqueço mais como montar uma tela. rsrsrsrs.
Isso aí, Adriano!!! 🙂
poxa professor ainda nao tinha analisado seu site, muito bom gostei muito, tomara que facilite as aulas para mim agora !!
Oi, Fabio.
Que bom que gostou!
Espero que te ajude bastante!
Abraços