Aula 8 - GUI - Colégio Agrícola de Frederico Westphalen

Programação Orientada a Objetos
(DPADF 0063)
Aula 8 – GUI (Graphical User Interface)
Universidade Federal de Santa Maria
Colégio Agrícola de Frederico Westphalen
Curso Superior de Tecnologia em Sistemas para Internet
Prof. Bruno B. Boniati – www.cafw.ufsm.br/~bruno
Interface Gráfica com o Usuário
Uma aplicação precisa de uma GUI?
• A utilização de uma interface gráfica habilita o
aplicativo a fornecer um comportamento e uma
funcionalidade mais amigável ... isso
potencializa o
 Aprendizado
ea
 Produtividade
Componentes GUI
• Uma GUI é uma coleção de componentes GUI;
• Um componente GUI é um objeto com capacidades de
interagir com o utilizador do aplicativo por meio de mouse,
teclado, reconhecimento de voz, etc.
Programar uma GUI
• O aprendizado da construção de GUIs consiste em
conhecer as habilidades de cada componente e técnicas
de organização/disposição dos mesmos na tela.
• Existem excelentes IDEs (Integrated Development
Environment) que facilitam e simplificam a tarefa de
“desenhar” a tela;
• Contudo, cada editor possui diferentes capacidades de
geração de código, muitas vezes incompatíveis;
Construir a GUI a mão ou usar um IDE?
X
Componentes gráficos:
Pacotes awt x swing
• java.awt – Abstract Window Toolkit
Porque swing se chama swing?
http://blogs.oracle.com/thejavatutorials/entry/why_is_swing_called_swing
▫ Antes da versão J2SE 1.2;
▫ Forte dependência do sistema operacional;
▫ A JVM utiliza componentes GUI providos pelo SO (considerando as
capacidades oferecidas por cada SO) – componentes pesados;
• javax.swing
▫ Componentes Java puros (completamente escritos, manipulados e
exibidos em Java) – componentes leves;
▫ Não estão amarrados a componentes GUI reais da plataforma subjacente;
▫ Compõem a JFC (Java Foundation Classes) – bibliotecas do Java para
desenvolvimento de GUI para múltiplas plataformas.
Componentes gráficos:
Pacotes awt x swing
Componentes gráficos
• JLabel
▫
Exibe um texto não editável ou ícones;
• JTextField
▫
Caixa de texto que permite ao usuário inserir dados via teclado;
• JButton
▫
Botão ou ícone que desencadeia um evento ao ser clicado;
• JCheckBox
▫
Especifica uma opção que pode ou não ser selecionada;
• JComboBox
▫
Lista estilo drop-down de itens em que o usuário escolhe um item;
• JList
▫
Lista de itens em que o usuário seleciona clicando sobre um ou vários itens;
• JPanel
▫
Área em que componentes podem ser adicionados e organizados, ou ainda pode
servir como área de desenho.
Hierarquia de Componentes Leves
Component (subclasse de Object) declara
atributos e comportamentos comuns aos
componentes GUI (tanto awt como swing)
Container são componentes GUI que admitem
que outros componentes possam ser adicionados
a eles (janelas são um típico exemplo).
JComponente é a superclasse de todos
os componentes leves Swing e declara
seus atributos e comportamentos comuns
(botões, caixas de texto, listas drop-down
são subclasses de JComponent)
Container vs JComponent
• Um container é um agrupamento ou uma coleção de
JComponents;
• Observe o código abaixo:
Construindo uma GUI
• Existem basicamente três formas de organizar os componentes GUI:
▫ Posicionamento absoluto: as posições dos componentes são
definidas uma a uma de forma absoluta considerando sua
distância em relação ao canto superior esquerdo do container;
▫ Gerenciadores de layout: um gerenciador de layout é um objeto
que organiza os componentes GUI em um container para fins de
apresentação. Sua utilização simplifica bastante a construção das
aplicações gráficas;
▫ Programação visual com IDE: neste caso uma ferramenta (IDE)
é utilizada para desenhar a tela e produzir o código automático.
Posicionamento absoluto
• O gerenciador de layout deve ser ajustado para null
(uma vez que não será utilizado);
▫ Container.setLayout(null);
• Métodos para ajustar o tamanho e a posição devem ser
utilizados. Ex:
comp.setSize(largura, altura); //Ajuste de tamanho
comp.setLocation(coluna, linha); //Ajuste de posicionamento
ou
comp.setBounds(coluna, linha, largura, altura);
//ajuste de tamanho e posicionamento;
Gerenciadores de Layout
FlowLayout
• Os componentes são colocados sequencialmente da
esquerda para direita na ordem em que foram adicionados;
• Admite três opções de alinhamento, através do método
setAlignment():
FlowLayout.CENTER
FlowLayout.LEFT
FlowLayout.RIGHT
• Quando falta espaço no container os componentes caem
para a próxima linha;
Gerenciadores de Layout (cont.)
BorderLayout
• Organização de componentes em cinco áreas de tela: centro
e os pontos cardeais;
• Apenas um componente pode ser adicionado em cada
região;
Gerenciadores de Layout (cont.)
GridLayout
• Organização de componentes em linhas e colunas que
formam uma grade
GridLayout layout = new GridLayout(3,2,3,20);
3 linhas, 2 colunas, 3 pixels de espaçamento entre colunas e 20 pixels entre linhas
• Os componentes são adicionados da esquerda para direita e de cima
para baixo (depois que enche a primeira linha vai para a segunda).
Todos mantém o mesmo tamanho.
Tratamento de Eventos
• As GUIs são baseadas em eventos;
• Evento é a interação que ocorre entre o usuário e o
componente GUI e que indica ao programa que algo deve
ser executado;
▫ São exemplos de eventos: algo ser clicado, algo ser
digitado, algo a receber o foco;
• O código que realiza uma tarefa em resposta a um evento
é conhecido como handler de evento;
• O processo total de responder a eventos é conhecido
como tratamento de eventos.
Tratamento de Eventos (cont.)
• Para fazer o tratamento de um evento são
necessários três passos:
1. Criar uma classe para representar o handler do
evento;
Só isso?
2. Essa classe deve implementar uma ou mais interfaces
apropriadas para “ouvir” cada tipo de evento;
3. Indicar que um objeto da classe que representa o
handler do evento deve ser notificado quando o evento
ocorrer (processo conhecido como registrar o handler
de um evento);
Tratamento de Eventos (cont.)
(um exemplo prático)
Observe que temos uma classe dentro de
outra (uma classe interna ou aninhada)
Este recurso é normalmente utilizado para
implementar handlers de eventos
... continua no próximo slide
Tratamento de Eventos (cont.)
(um exemplo prático)
Modelo de Delegação de Eventos
Componente GUI
Origem do Evento
(Event Source)
Dispara um evento
(objeto EventObject)
Manipulador do
Evento
(Event Listener)
Origem
registra seu
manipulador
Reage ao evento
Interfaces
Ouvintes
Hierarquia de eventos &
interfaces listener
Hierarquia de
Eventos
Algumas interfaces
do pacote
java.awt.event
Algumas classes do
pacote java.awt.event
Classes Internas x Classes Ocultas
Para fazer o tratamento de um evento é necessário uma classe para
manipular o evento (classe handler do evento). Geralmente essa
classe pode ser ...
•
Classe Interna (também conhecida como Classe Aninhada)
▫
▫
▫
•
É uma classe dentro de outra classe;
Pode ser static (neste caso a classe interna pode ser instanciada sem uma
instância da classe de 1º nível) ou não-static (exigindo uma instancia da
classe de 1º nível para ser instanciada);
Um objeto de uma classe interna (não-static) tem implicitamente uma
referência a um objeto de sua classe de 1º nível.
Classe Interna Oculta
▫
▫
É uma classe interna sem nome, geralmente declarada no corpo de um método;
Como ela não tem nome, deve ser instanciada ao mesmo tempo que é criada;
Ex. de
Classe Interna
Ex. de
Classe Interna
Oculta
Janelas de diálogo
GUI Expressas ...
• A classe JOptionPane oferece janelas pré-formatadas e
métodos estáticos para produção de caixas de diálogo:
• Alguns exemplos:
JOptionPane.showMessageDialog(null, "Mensagem", "Titulo",
JOptionPane.ERROR_MESSAGE);
JOptionPane.showConfirmDialog(null, "Deseja sair?", "Titulo",
JOptionPane.YES_NO_OPTION);
Janelas de diálogo (cont.)
• Exemplos (cont.):
Object[] options = { "Ok", "Cancelar" };
JOptionPane.showOptionDialog(null, "Clique Ok para continuar",
"Aviso", JOptionPane.DEFAULT_OPTION, JOptionPane.WARNING_MESSAGE,
null, options, options[0]);
String inputValue = JOptionPane.showInputDialog("Digite um valor");
Object[] possibleValues = { "Grêmio", "Internacional", "Juventude" };
Object selectedValue = JOptionPane.showInputDialog(null, "Escolha uma
opção", "Título", JOptionPane.INFORMATION_MESSAGE, null,
possibleValues, possibleValues[0]);
Janelas de diálogo (cont.)
• Janela para escolha de um arquivo
JFileChooser jfc = new JFileChooser();
//Janela de diálogo para abrir um arq.
int res = jfc.showOpenDialog(null);
//Janela de diálogo para salvar um arq.
// int res = jfc.showSaveDialog(null);
if(res == jfc.APPROVE_OPTION) {
String arquivo =
jfc.getSelectedFile().getAbsolutePath();
}
Classes Adaptadoras
•
Para fazer o tratamento de um evento a classe que implementa
seu manipulador precisa declarar TODOS os métodos da interface;
•
Muitas vezes apenas um dos métodos da interface precisa ser
tratado, mas como é utilizado o conceito de interface, TODOS
precisam pelo menos ser declarados.
•
Uma classe adaptadora implementa uma determinada interface e
fornece uma implementação padrão para cada método (geralmente
vazia).
•
Exemplos: KeyAdapter (implementa KeyListener), MouseAdapter
(implementa MouseListener), WindowAdapter (implementa
WindowListener).
Classes Adaptadoras (cont.)
•
Com a utilização de Classes Adaptadoras a classe que implementa
o manipulador de um evento apenas herda da classe adaptadora e
sobrescreve os métodos que precisar.
•
Ex.
private class JogoListener extends KeyAdapter {
public void keyPressed(KeyEvent e) {
System.out.println("Tecla pressionada");
}
//Não é necessário declarar os outros métodos da
//interface KeyListener (keyReleased e keyTyped)
}
Exercícios para fixação
Cartão de Visitas...
• Implemente e organize uma interface gráfica para exibir uma janela
como um cartão de visita seu ...
• Utilize o máximo de recursos que conseguir;
• Adicione uma foto ou caricatura sua
além de dados básicos como nome,
telefone e endereço de e-mail;