POO 23 gui

Prévia do material em texto

INTERFACE GRÁFICA DO 
USUÁRIO (GUI)
Thaís Alves Burity Rocha
Agenda
 Introdução
 JDialog e JOptionPane
 Pacote Swing
 Passos para criar GUI com Swing
 Componentes
 Containers
 Gerenciadores de layout
Importante:
São mostrados fragmentos
de código apenas
Introdução
 Até o momento estamos usando o console para 
entrada e saída de dados no sistema bancário…
System.out.println(“Nome: ”);
String nome = scanner.nextLine();
System.out.println(“CPF: ”);
String cpf = scanner.nextLine();
Cliente cliente = new Cliente(cpf, nome);
System.out.println(“Numero da conta: ”);
String numero = scanner.nextLine();
ContaAbstrata conta = new Conta(cliente, numero, 0);
try {
repContas.adicionar(conta);
} catch (ContaJaExisteException ex) {
System.out.println(ex.getMessage());
}
IRepositorioContas repContas = 
new RepositorioContasArrayList();
Interface Gráfica do Usuário (GUI)
 Programas de linha de comando são pouco
amigáveis
 No mundo real, criamos programas para alguém
usar
 Por isso, precisamos de Graphic User Interface
 Usamos janelas, com botões, imagens, caixas de 
texto, seletores, barra de menu, etc…
JOptionPane: GUI Mais Básica
 Caixas de diálogo são janelas com propósito 
específico
 Entrada de poucos dados
 Exibição de mensagens de alerta, por exemplo
 A mais simples de usar é JOptionPane
(javax.swing.JOptionPane)
 Contém métodos static para geração de caixas de 
diálogo
 Pode estar vinculado ou não à outras janelas
JOptionPane: Diálogo de Entrada
String nome = JOptionPane.showInputDialog("Nome:");
System.out.println("O nome do cliente é " + nome);
Sempre retorna String
Quando o usuário clica no botão OK, o conteúdo
da caixa de texto é atribuído à variável nome
JOptionPane: Diálogo de Mensagem
 A saída sempre é uma String
String nome = JOptionPane.showInputDialog("Nome:");
JOptionPane.showMessageDialog(null,
"O nome do cliente é "+nome);
JOptionPane: Personalização
 Ícones ajudam a entender o conteúdo da mensagem
 Também é possível configurar o título da janela
TIPO DE MENSAGEM ÍCONE
ERROR_MESSAGE
INFORMATION_MESSAGE
WARNING_MESSAGE
QUESTION_MESSAGE
PLAIN_MESSAGE sem
String nome = JOptionPane.showInputDialog(null, "Nome:",
"Cadastro de cliente", JOptionPane.PLAIN_MESSAGE);
JOptionPane: Visão Geral
 Baixa complexidade: Não precisamos tratar 
eventos
 Pouca flexibilidade
 No sistema bancário, o cadastro do cliente requer 
vários dados…
String nome = JOptionPane.showInputDialog("Nome:");
String cpf = JOptionPane.showInputDialog("CPF:");
String cep = JOptionPane.showInputDialog("CEP:");
String num = JOptionPane.showInputDialog("Número:");
String compl = JOptionPane.showInputDialog("Complemento:");
Endereco endereco = new Endereco(cep,num,compl);
Cliente cliente = new Cliente(cpf,nome,endereco);
Uma caixa de diálogo para cada campo?!
Pacote swing
 Conjunto de pacotes e classes para projeto de GUI 
mais elaborada em Java
 Diversidade de componentes de GUI
 Janelas, botões, caixas de texto, seletores, ...
 A aparência dos elementos não depende de 
Sistema Operacional (SO)
Passos para Criar GUI com Swing
 Criar e configurar componentes
 Acrescentar os componentes a um container
 Tipo especial de componente que serve para gerenciar 
outros componentes
 Necessário para ser possível exibir os componentes
 Posicionar os componentes
 A posição default nem sempre atende
 Utiliza-se gerenciadores de layout
 Tratar os eventos gerados pelos componentes 
JLabel Exibe texto não editável ou ícones.
JTextField
Permite inserir dados através do teclado.
Também exibe texto, editável ou não.
Ocupa apenas uma linha.
JTextArea
Mesmo que o JTextField.
Pode ocupar mais de uma linha.
JButton Dispara um evento ao ser clicado.
Exemplos de Componente
 Outros muito usados:
 JPassword
 JCheckBox
 JComboBox
JLabel JTextField
JTextArea
JButton
Criação de Componentes: Exemplo
JLabel nomeLabel = new JLabel("Nome:");
JTextField nomeField = new JTextField(20);
JLabel cpfLabel = new JLabel("CPF:");
JTextField cpfField = new JTextField("Informe seu cpf",20);
JLabel compLabel = new JLabel("Complemento:");
JTextArea compTextArea = new JTextArea(5,20);
JButton bSalvar = new JButton("Salvar");
/* Usar dados de entrada */
Endereco endereco = new Endereco(
cepField.getText(),
numeroField.getText(),
compTextArea.getText());
Esse código ainda
não cria essa tela!
JLabel
JTextField
JTextArea
JButton
Configuração de Componentes
 Alguns métodos (existem muitos outros)
 get/setPreferredSize
 get/setSize(int,int)
 get/setLocation(int,int)
 getLength/Width
 setBackground(Color)
 setFont(Font)
 isEnabled / setEnabled(boolean)
 isVisible / setVisible(boolean)
Todo componente tem um 
tamanho preferido (em pixels), 
cujo valor pode ser configurado
Um componente habilitado
pode responder às entradas 
do usuário e gerar eventos
Containers de Alto Nível
 Container: Componente que pode conter outros 
componentes
 Todo programa deve ter ao menos um container de 
alto nível
 Usado como ponto de partida
 Os componentes vistos são containers, mas não de alto nível
 Até o momento, a tela de cadastro de clientes ainda 
não existe porque esse elemento não foi criado!
 Cada componente só pode ser contido uma vez
 Mesmo que ele seja adicionado à vários containers 
(prevalece a última adição)
Containers de Alto Nível
 Vamos usar 2 containers de alto nível
 JFrame: Janela principal do programa
 JDialog: Caixas de diálogo mais flexíveis que 
JOptionPane
 Todo container de alto nível possui um container 
intermediário para guardar os componentes
 Painel de conteúdo (content painel)
 Quando esse painel não é explicitamente criado, é 
usado o default
Criação de Janela: JFrame
JFrame janela = new JFrame();
janela.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
janela.setSize(300,100); //largura (x), altura (y)
janela.setTitle(“Sistema Bancário");
janela.setVisible(true);
Faz o programa encerrar
quando a janela é fechada
A janela já inclui botões de 
minimizar, maximizar e fecharNecessário para 
a janela aparecer
Inserção de Componente em JFrame
/* Criação do componente */
JLabel nomeLabel = new JLabel("Nome:");
...
/* Criação do container */
JFrame janela = new JFrame();
janela.setTitle("Sistema Bancário");
janela.setVisible(true);
janela.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
/* Inserção do componente */
janela.add(nomeLabel);
...
Adiciona o componente no centro
da janela, a posição default
Os componentes não
ficam organizados
desse jeito!
Containers de Alto Nível: Outras 
Possibilidades
 É possível adicionar uma barra de menu
 Objeto JMenuBar
 Também é possível adicionar painéis de conteúdo
 Objetivo de agrupar componentes e melhorar a 
organização da tela
 Objeto JPanel
Criação de Barra de Menu: JMenuBar
JMenuBar barraMenu = new JMenuBar();
JMenu menuCliente = new JMenu("Cliente");
JMenu menuConta = new JMenu("Conta");
JMenuItem opCadastrar = new JMenuItem("Cadastrar");
JMenuItem opEditar = new JMenuItem("Editar");
JMenuItem opRemover = new JMenuItem("Remover");
menuCliente.add(opCadastrar);
menuCliente.add(opEditar);
menuCliente.add(opRemover);
barraMenu.add(menuCliente);
barraMenu.add(menuConta);
JFrame janela = new JFrame();
janela.setJMenuBar(barraMenu);
janela.setTitle("Sistema Bancário");
janela.setVisible(true);
janela.setSize(300,200);
janela.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);Criação de Painel de Conteúdo: 
JPainel
//Criar componentes para dados pessoais
JPanel painel1 = new JPanel();
painel1.setBackground(Color.BLUE);
painel1.setVisible(true);
//Incluir componentes em painel1
painel1.add(nomeLabel);
//Criar componentes para endereço
JPanel painel2 = new JPanel();
painel2.setBackground(Color.RED);
painel2.setVisible(true);
//Incluir componentes em painel2
painel2.add(cepLabel);
//Criar janela principal (JFrame)
janela.add(painel1);
janela.add(painel2);
Os componentes não
ficam organizados
desse jeito!
JDialog
 Caixa de diálogo “flexível”
 Pode ser instanciada e manipulada de maneira 
muito parecida com JFrame
 É comum estruturar uma aplicação com uma barra 
de menu e cada item de menu faz aparecer uma 
caixa de diálogo
Posicionamento de Componentes
 Posicionar os componentes na tela é trabalhoso
 Existem objetos para ajudar: Gerenciadores de 
layout
 Exemplo: Uma janela que contém um painel que 
contém um botão
 O gerenciador de layout do painel controla o 
tamanho e a posição do botão
 O gerenciador de layout da janela controla o 
tamanho e a posição do painel
Gerenciadores de Layout
 Há vários, cada um adota diferentes políticas
 O componente pode influenciar, indicando seu tamanho 
preferido
 O gerenciador decide se vai atender às preferências
do componente com base em suas políticas
 Veremos os mais simples
 BorderLayout
 FlowLayout
 BoxLayout
O programador não pode inserir os
elementos onde quiser, simplesmente?
Sim, pode! Apenas precisará chamar o 
método setLayout(null) para cada
componente individualmente.
BorderLayout
 É o gerenciador default para JFrame
 Divide o componente de plano de fundo em 5 regiões
 Norte, sul, leste, oeste, centro
 Só é possível adicionar 1 componente por região
 Um componente pode ser um painel que contém mais 3 
componentes…
 Os componentes geralmente não possuem o tamanho
preferido
 Norte e sul: Altura preferida
 Leste e oeste: Largura preferida
 Centro: Não tem preferência em altura e largura, depende
da ocupação das demais regiões
BorderLayout: Exemplo
JButton bn = new JButton("norte");
JButton bs = new JButton("sul");
JButton bl = new JButton("leste");
JButton bo = new JButton("oeste");
JButton bc = new JButton("centro");
JFrame janela = new JFrame();
janela.setLayout(new BorderLayout());
janela.add(bn, BorderLayout.NORTH);
janela.add(bs, BorderLayout.SOUTH);
janela.add(bl, BorderLayout.EAST);
janela.add(bo, BorderLayout.WEST);
janela.add(bc, BorderLayout.CENTER);
janela.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
janela.setVisible(true);
janela.setSize(300,300);
janela.setTitle("Minha janela");
Se a posição não for 
especificada, adiciona no centro
FlowLayout
 É o gerenciador default para JPainel
 Componentes são dispostos da esquerda para a 
direita, de cima para baixo, na ordem em que
foram adicionados
 Os componentes fluem de acordo com o tamanho da 
janela
 Cada componente recebe o tamanho que deseja, 
em ambas as dimensões (altura e largura)
JPanel painel = new JPanel();
painel.setBackground(Color.BLUE);
painel.setLayout(new FlowLayout());
janela.add(painel, BorderLayout.EAST);
JButton bn = new JButton("norte");
painel.add(bn);
JButton bs = new JButton("sul");
painel.add(bs);
//janela é um JFrame (tamanho 300x100)
FlowLayout: Exemplo
BoxLayout
 Empilha os componentes (vertical ou horizontal)
 Cada componente recebe o tamanho que deseja, 
em ambas as dimensões (altura e largura)
JPanel painel = new JPanel();
painel.add(new JButton("aa"));
painel.add(new JButton("aaaaaaaaaa"));
painel.add(new JButton("aaaa"));
painel.add(new JButton("aaaaaa"));
painel.add(new JButton("a"));
painel.setBackground(Color.BLUE);
painel.setLayout(new BoxLayout(painel, BoxLayout.Y_AXIS));
//janela é um JFrame (tamanho 300x200) Eixo vertical