AULA 3 - PROGRAMAÇÃO ORIENTADA A OBJETOS

Prévia do material em texto

Interface Gráfica com Swing
Aula 3
Professora: Jane
Programação Orientada a Objetos Professora : Jane2
Hierarquia de classes 
java.lang.Object
+--java.awt.Component
+--java.awt.Container
+--javax.swing.JComponent
| +--javax.swing.JButton
| +--javax.swing.JLabel
| +--javax.swing.JMenuBar
| +--javax.swing.JOptionPane
| +--javax.swing.JPanel
| +--javax.swing.JTextField
|
+--java.awt.Window
+--java.awt.Frame
+--javax.swing.JFrame
Programação Orientada a Objetos Professora : Jane3
Continuando com gerenciadores de layout ... 
Agora : BorderLayout
• Default do frame  BorderLayout 
EASTWEST
SOUTH
NORTH
Programação Orientada a Objetos Professora : Jane4
Código usando BorderLayout
import javax.swing.*;
import java.awt.*;
public class Main {
public static void main(String args[]) {
JFrame f = new JFrame();
f.setLayout(new BorderLayout()); //Precisa desta linha ?
f.add(new JButton ("Botão 1 "), BorderLayout.NORTH);
f.add( new JTextField ("TEXTO 2" ) , BorderLayout.EAST);
f.add( new JTextField ("TEXTO 1" ) , BorderLayout.WEST);
f.add(new JButton("Botão 2") , BorderLayout.CENTER);
f.add( new JButton ("Botão 3"), BorderLayout.SOUTH);
f.setSize(300,400);
f.setVisible(true);
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
} 
} Antes da versão 1.5 era possível adicionar ao frame com getContentPane.
Teste o 
projeto da 
pasta da 
profa. ! 
Programação Orientada a Objetos Professora : Jane5
Observação :
• Note que add foi usado com dois argumentos. Revendo trecho do exemplo 
anterior :
f.add(new JButton ("Botão 1 "), BorderLayout.NORTH);
Componente a ser 
adicionado, que 
no caso é um 
botão com rótulo
Botão 1
Posição de 
inserção
Programação Orientada a Objetos Professora : Jane6
Mais comentários sobre JFrame
Fonte : http://docs.oracle.com/javase/7/docs/api/
• Cada container top-level, como JFrame, possui um painel de conteúdo (content 
pane). Uma barra de menu é, por convenção, posicionada dentro do objeto de 
JFrame, mas fora do seu painel de conteúdo (content pane). No painel de 
conteúdo podemos adicionar botões, textfields, labels …
• Veja a figura de um frame criado para uma aplicação. O frame contém uma
barra de menu verde e, no painel de conteúdo do frame, possui uma grande área
amarela . 
Programação Orientada a Objetos Professora : Jane7
Camadas
• Veja :
• A “layered pane” contém a barra de menu e o content pane. A “glass pane” é 
frequentemente usada, por exemplo, para interceptar eventos que ocorram no 
frame. Veremos eventos em uma aula mais adiante.
• A partir da versão 1.5 do Java não é mais preciso usar o método getContentPane
para obter o painel de conteúdo do frame e assim, adicionar componentes ao
frame. 
Programação Orientada a Objetos Professora : Jane8
Exercício:
• Faça uma aplicação em Java para construir a interface abaixo com o layout de 
borda
Em alguma outra aula : GridBagLayout
Programação Orientada a Objetos Professora : Jane9
Layouts compostos
• Para trabalhar com mais de um layout, dividimos a interface em partes e 
aplicamos a cada uma delas um container com um layout
manager (gerenciador de layout). Assim, cada container abrigará os 
componentes conforme o desejado.
• Recordando .... 
– para colocar mais de um componente em fluxo dentro de uma área de um 
container, devemos usar o gerenciador de layout FlowLayout,
– se quisermos dividir uma área em células, usaremos o GridLayout,
– e para dividir um container em Norte, Sul, Leste, Oeste e Centro, usaremos o 
BorderLayout.
Programação Orientada a Objetos Professora : Jane10
Exemplo de layout composto
• Os layouts aqui usados são :
 FlowLayout
 BorderLayout
Programação Orientada a Objetos Professora : Jane11
Código
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.FlowLayout;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
public class Main {
public static void main(String[] args) {
JFrame j = new JFrame("Teste");
JPanel p1 = new JPanel(new FlowLayout());
JPanel p2 = new JPanel(new BorderLayout());
Programação Orientada a Objetos Professora : Jane12
p1.add(new JButton("B1 - painel 1"));
p1.add(new JButton("B2 - painel 1"));
p1.setBackground(Color.BLUE); //define cor de fundo
p2.add(new JButton("B1 - painel 2"), BorderLayout.WEST);
p2.add(new JButton("B2 - painel 2"), BorderLayout.EAST);
p2.setBackground(Color.YELLOW); //define cor de fundo 
j.add(p1, BorderLayout.NORTH);
j.getContentPane().add(new JButton("Botão central"),
BorderLayout.CENTER);
j.add(p2,BorderLayout.SOUTH);
j.setVisible(true);
j.setSize(300,300);
j.setLocation(200,200); // continua .... } }
Programação Orientada a Objetos Professora : Jane13
Exercício com layout composto
• Escreva uma aplicação em Java com botões e campo de texto para construir uma 
calculadora semelhante à dada abaixo. Use, obrigatoriamente, os layout(s) 
visto(s). Veja a sugestão abaixo.
Painel com 
FlowLayout
Painel com 
GridLayout
Painel com 
GridLayout
Programação Orientada a Objetos Professora : Jane14
Exercício com layout composto
• Crie uma aplicação em Java para criar a interface dada abaixo. Note que há um 
objeto novo, um objeto da classe JTextArea. Vamos discutir o layout e no final, 
saber mais sobre a classe JTextArea e a classe Date.
Área de 
texto
BRST : Brasilia Summer Time
Programação Orientada a Objetos Professora : Jane15
Use na janela o BorderLayout
Painel 
botoes
(usa FlowLayout)
Painel 
barraStatus
(usa FlowLayout)
Painel botoes está 
ao norte e o painel 
barraStatus está ao sul.
Como o painel botoes ficará ao norte da janela, a área de texto ao centro 
da janela e a barraStatus ao sul, trabalharemos com o BorderLayout para 
dispor os 3 painéis sobre o frame. 
Programação Orientada a Objetos Professora : Jane16
O que há de novo neste exercício ?
• Classe JTextArea (pertence ao pacote javax.swing)
Exemplo que cria o objeto areaTexto da classe JTextArea :
JTextArea areaTexto = new JTextArea("Digite seu texto aqui: ", 20, 50);
Note : Este construtor recebe o texto que aparece na área, o número de linhas e
o número de colunas. Em outra aula, estudaremos mais a classe JTextArea.
• Trecho que define a cor de fundo da área de texto (text area) :
areaTexto.setBackground(Color.yellow);
Programação Orientada a Objetos Professora : Jane17
• Classe Date (importar pacote java.util)
//Teste e veja que fornece dia, mês, ano, hora, minuto, segundo e ... Veja !!
Exemplo :
Date agora = new Date(); 
JLabel relogio = new JLabel("Data/Hora: " + agora);
Exemplo : De outro jeito
JLabel relogio = new JLabel("Data/Hora: " + new Date() );
Exemplo : Ou ainda ... Veja o toString !
JLabel relogio = new JLabel(new Date().toString()); 
// É obrigatório o toString aqui, pois new Date() me fornece uma referência.
Programação Orientada a Objetos Professora : Jane18
Exercício : 
Treinando painéis compostos
• Monte o layout abaixo, depois de acompanhar as orientações que aparecem nos 
próximos slides. Escolha uma cor de fundo para cada área.
Programação Orientada a Objetos Professora : Jane19
 Novamente, para montar um layout mais complexo, 
podemos dividir em dois passos:
1. Combinar vários painéis usando o BorderLayout ;
2. Acrescentar os componentes aos painéis.
Programação Orientada a Objetos Professora : Jane20
 Temos que criar alguns painéis estruturantes (P2, P23) e, dentro desses, os 
painéis de conteúdo (em azul).
 Os painéis estruturantes, nesse exemplo, usam BorderLayout.
 Lembre-sede que, no BorderLayout, a área é dividida em 5 regiões e só 
podemos colocar um elemento em cada região.
P1
P21
P231
P22
P232
P2
P23
P3
Programação Orientada a Objetos Professora : Jane21
Observe 
• P1:norte
• P2: centro
– P21: norte
– P22: oeste
– P23: centro
• P231: norte
• P232: centro
• P3: sul
P1
P21
P231
P22
P232
P2
P23
P3
Programação Orientada a Objetos Professora : Jane22
Após compor o layout ...
• Pede-se :
– Em P1 : formulário para nome e sobrenome, em textfields diferentes. 
– Em P21 : formulário para telefone e email.
– Em P22 : um ou mais labels com mensagens a sua escolha
– Em P231 : Data/hora : seguido da data e hora correntes.
– Em P232 : Uma área de texto com 3 linhas e 30 colunas.
– Em P3 : três botões, por exemplo : Inserir Remover Sair
Veja a tela a seguir ....
Programação Orientada a Objetos Professora : Jane23
P1
P21
P231
P22
P232
P2
P23
P3