Programao Orientada a Objetos (DPADF 0063)

Aula 8 GUI (Graphical User Interface)

Universidade Federal de Santa Maria Colgio Agrcola de Frederico Westphalen Curso Superior de Tecnologia em Sistemas para Internet
Prof. Bruno B. Boniati www.cafw.ufsm.br/~bruno

Interface Grfica com o Usurio

Uma aplicao precisa de uma GUI?

A utilizao de uma interface grfica habilita o aplicativo a fornecer um comportamento e uma funcionalidade mais amigvel ... isso potencializa o Aprendizado
ea

Produtividade

Componentes GUI
Uma GUI uma coleo 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 construo de GUIs consiste em conhecer as habilidade de cada componente e tcnicas de organizao/disposio dos mesmos na tela. Existe excelentes IDEs (Integrated Development Environment) que facilitam e simplifica a tarefa de desenhar a tela; Contudo, cada editor possui diferentes capacidades de gerao de cdigo, muitas vezes incompatveis;

Construir a GUI a mo ou usar um IDE?

X

Componentes grficos: Pacotes awt x swing

java.awt Abstract Window Toolkit
Porque swing se chama swing? http://blogs.sun.com/thejavatutorials/entry/why_is_swing_called_swing

Antes da verso J2SE 1.2; Forte dependncia 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; No esto amarrados a componentes GUI reais da plataforma subjacente; Compem a JFC (Java Foundation Classes) bibliotecas do Java para desenvolvimento de GUI para mltiplas plataformas.

Componentes grficos: Pacotes awt x swing

Componentes grficos
JLabel
Exibe um texto no editvel ou cones; Caixa de texto que permite ao usurio inserir dados via teclado; Boto ou cone que desencadeia um evento ao ser clicado;

JTextField JButton JCheckBox

Especifica uma opo que pode ou no ser selecionada;

Lista estilo drop-down de itens em que o usurio escolhe um item; Lista de itens em que o usurio seleciona clicando sobre um ou vrios itens; rea em que componentes podem ser adicionados e organizados, ou ainda pode servir como rea de desenho.

JComboBox JList JPanel

Hierarquia de Componentes Leves

Component (subclasse de Object) declara atributos e comportamentos comuns aos componentes GUI (tanto awt como swing) Container so componentes GUI que admitem que outros componentes possam ser adicionados a eles (janelas so um tpico exemplo).

JComponente a superclasse de todos os componentes leves Swing e declara seus atributos e comportamentos comuns (botes, caixas de texto, listas drop-down so subclasses de JComponent)

Container vs JComponent
Um container um agrupamento ou uma coleo de JComponents;
Observe o cdigo abaixo:

Construindo uma GUI

Existe basicamente trs forma de organizar os componentes GUI: Posicionamento absoluto: as posies dos componentes so definidas uma a uma de forma absoluta considerando sua distncia em relao 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 apresentao. Sua utilizao simplifica bastante a construo das aplicaes grficas; Programao visual com IDE: neste caso uma ferramenta (IDE) utilizada para desenhar a tela e produzir o cdigo automtico.

Posicionamento absoluto
O gerenciador de layout deve ser ajustado para null (uma vez que no ser utilizado);
Container.setLayout(null);

Mtodos para ajustar o tamanho e a posio 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 (cont.)

FlowLayout
Os componentes so colocados sequencialmente da esquerda para direita na ordem em que foram adicionados; Admite trs opes de alinhamento, atravs do mtodo setAlignment():

FlowLayout.CENTER

FlowLayout.LEFT

FlowLayout.RIGHT

Quando falta espao no container os componentes caem para a prxima linha;

Gerenciadores de Layout (cont.)

BorderLayout
Organizao de componentes em cinco reas de tela: centro e os pontos cardeais;

Apenas um componente pode ser adicionado em cada regio;

Gerenciadores de Layout (cont.)

GridLayout
Organizao 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 espaamento entre colunas e 20 pixels entre linhas

Os componentes so adicionados da esquerda para direita e de cima para baixo (depois que enche a primeira linha vai para a segunda). Todos mantm o mesmo tamanho.

Tratamento de Eventos
As GUIs so baseadas em eventos; Evento a interao que ocorre entre o usurio e o componente GUI e que indica ao programa que algo deve ser executado;
So exemplos de eventos: algo ser clicado, algo ser digitado, algo a receber o foco;

O cdigo 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 so necessrios trs 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 prtico)
Observe que temos uma classe dentro de outra (uma classe interna ou aninhada) Este recurso normalmente utilizado para implementar handlers de eventos

... continua no prximo slide

Tratamento de Eventos (cont.)

(um exemplo prtico)

Modelo de Delegao de Eventos

Componente GUI

Origem do Evento
(Event Source) Dispara um evento (objeto EventObject) Origem registra seu manipulador

Manipulador do Evento
(Event Listener)

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 necessrio uma classe para manipular o evento (classe handler do evento). Geralmente essa classe pode ser ...

Classe Interna (tambm conhecida como Classe Aninhada)

uma classe dentro de outra classe; Pode ser static (neste caso a classe interna pode ser instanciada sem uma instncia da classe de 1 nvel) ou no-static (exigindo uma instancia da classe de 1 nvel para ser instanciada); Um objeto de uma classe interna (no-static) tem implicitamente uma referncia a um objeto de sua classe de 1 nvel.

Classe Interna Oculta

uma classe interna sem nome, geralmente declarada no corpo de um mtodo; Como ela no tem nome, deve ser instanciada ao mesmo tempo que criada;

Ex. de Classe Interna

Ex. de Classe Interna Oculta

Janelas de dilogo
GUI Expressas ...
A classe JOptionPane oferece janelas pr-formatadas e mtodos estticos para produo de caixas de dilogo: Alguns exemplos:
JOptionPane.showMessageDialog(null, "Mensagem", "Titulo", JOptionPane.ERROR_MESSAGE);

JOptionPane.showConfirmDialog(null, "Deseja sair?", "Titulo", JOptionPane.YES_NO_OPTION);

Janelas de dilogo (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 = { "Grmio", "Internacional", "Juventude" }; Object selectedValue = JOptionPane.showInputDialog(null, "Escolha uma opo", "Ttulo", JOptionPane.INFORMATION_MESSAGE, null, possibleValues, possibleValues[0]);

Janelas de dilogo (cont.)

Janela para escolha de um arquivo
JFileChooser jfc = new JFileChooser(); //Janela de dilogo para abrir um arq. int res = jfc.showOpenDialog(null); //Janela de dilogo 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 mtodos da interface; Muitas vezes apenas um dos mtodos 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 implementao padro para cada mtodo (geralmente vazia). Exemplos: KeyAdapter (implementa KeyListener), MouseAdapter (implementa MouseListener), WindowAdapter (implementa WindowListener).

Classes Adaptadoras (cont.)

Com a utilizao de Classes Adaptadoras a classe que implementa o manipulador de um evento apenas herda da classe adaptadora e sobrescreve os mtodos que precisar. Ex.
private class JogoListener extends KeyAdapter { public void keyPressed(KeyEvent e) { System.out.println("Tecla pressionada"); } //No necessrio declarar os outros mtodos da //interface KeyListener (keyReleased e keyTyped) }

Exerccios para fixao

Carto de Visitas...
Implemente e organize uma interface grfica para exibir uma janela como um carto de visita seu ...
Utilize o mximo de recursos que conseguir; Adicione uma foto ou caricatura sua alm de dados bsicos como nome, telefone e endereo de e-mail;