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

e a

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 ▫ 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.

Porque swing se chama swing?

http://blogs.oracle.com/thejavatutorials/entry/why_is_swing_called_swing

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():

• Quando falta espaço no container os componentes caem

para a próxima linha;

FlowLayout.CENTER FlowLayout.LEFT FlowLayout.RIGHT

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;

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

Só isso?

Tratamento de Eventos (cont.) (um exemplo prático)

... continua no próximo slide

Observe que temos uma classe dentro de

outra (uma classe interna ou aninhada)

Este recurso é normalmente utilizado para

implementar handlers de eventos

Tratamento de Eventos (cont.) (um exemplo prático)

Modelo de Delegação de Eventos

Manipulador do

Evento (Event Listener)

Componente GUI

Origem do Evento (Event Source) Origem

registra seu

manipulador Dispara um evento

(objeto EventObject)

Reage ao evento

Algumas classes do pacote java.awt.event

Hierarquia de

Eventos

Algumas interfaces

do pacote java.awt.event

Hierarquia de eventos &

interfaces listener Interfaces

Ouvintes

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;