1 de 33

Linguagens de Programação Orientadas a Objetos

Pós-Gradução(Lato-Sensu) em Sistemas de Banco de Dados - UFPa

Marco Fagundesmafm@cin.ufpe.br

Aula 04 e 5 - Construção de GUI

http://www.ufpa.br/sampaio/bd2003/lpoo Marco Fagundes

2 de 33

Roteiro

Introdução GUI em Delphi GUI em Java

3 de 33

Introdução

Interface Gráfica com o Usuário (Graphical User Interface - GUI)

• Dá ao programa a característica “look” and “feel”• Fornece ao usuário um nível básico de familiaridade• Construída a partir de componentes (e.g., controles)

– O usuário interage com componentes GUI via mouse, teclado, etc.

4 de 33

GUI em Delphi

5 de 33

GUI em Delphi

Form Designer

6 de 33

GUI em Delphi

Terminologia Design vs Run time; Formulários; Componentes;

Propriedades; Métodos e Eventos

Terminologia (Formulários)

Propriedades: Name, Caption, Position, BorderStyle, BorderSingle

Eventos: OnActivate, OnClose

Métodos Show, ShowModal

7 de 33

GUI em Delphi

Terminologia (Componentes) Alguns componentes básicos

Componente Descrição

TLabel Uma área onde texto não editáveis são exibidos

Uma área onde o usuário entra com informação. Esta áreapode ser usada para exibir informações

TButton Uma área que dispara um evento quando clicada

TPanel Um container no qual componentes podem ser colocados

TEdit

8 de 33

GUI em Delphi

Terminologia (Componentes)

Propriedades: Name, Text, PasswordChar, Enabled, Visible

Eventos: OnChange, OnKeyPress

Métodos: Clear

Terminologia (Propriedades)

Propriedades: Name, Caption

Propriedades: Name, Caption, Enabled, Visible

Eventos: OnClique

Propriedades: Name, Caption, Enabled, Visible, Align

9 de 33

GUI em Delphi

Terminologia(Eventos)

10 de 33

GUI em Delphi

Exercício• Construir uma GUI conforme mostrado na figura abaixo

TEdits

TButtons

TLabels

11 de 33

GUI em Java

12 de 33

GUI em Java

AWT• AWT (Abstract Windowing ToolKit) pacote java.awt• Associados com as capacidades de GUI da plataforma

local• Aparência e, às vezes, interações diferentes

executando em plataformas distintas Swing GUI components

• Pacote javax.swing• Componentes originados da AWT (pacote java.awt)• Contém look and feel

– Aparência e como o usuário interage com o programa• Componentes leves

– Escritos completamente em Java

13 de 33

GUI em Java

Class Component• Contém o método paint para desenhar componentes na

tela Class Container

• Coleação de componentes relacionados• Contém o método add para adicionar componentes

Class JComponent• Customização de look and feel• Capacidade de manipulação de eventos

14 de 33

GUI em Java

Superclasses de alguns componentes Swing

java.lang.Object

java.awt.Component

java.awt.Container

javax.swing.JComponent

15 de 33

GUI em Java

Alguns componentes básicos do Swing

Componente Descrição

JLabel Uma área onde texto não editáveis são exibidos

JButton Uma área que dispara um evento quando clicada

JPanel Um container no qual componentes podem ser colocados

JEditUma área onde o usuário entra com informação. Esta áreapode ser usada para exibir informações

16 de 33

GUI em Java

JLabelMostra um texto somente de leitura

JTextFieldTexto que o usuário digita em uma única linha

JPasswordFieldEstende JTextField. Esconde os caracteres que o usuário digita

JButtonDispara uma ação específica quando clicado

Componentes Básicos Swing

17 de 33

GUI em Java

Layout Managers Permite organizar componente GUI Fornece capacidades básicas de layout Processa detalhes de layout Programador pode concentrar no básico “look and feel” Interface LayoutManager

18 de 33

GUI em Java

Gerenciadores de Layout

Gerenciador Descrição

FlowLayout Default para java.awt.Applet, java.awt.Panel e javax.swing.Jpanel.

BorderLayout

GridLayout

Coloca componente sequencialmente (esquerda ou direita) no ordem em que eles são adicionados. Também é possível especificar a ordem dos componentes usando o método addque recebe como argumentos um Component e um inteiro que representa sua posição.Default para o painel de conteúdo JFrame e Japplet. Distribui os componentes em cinco posições: North, South, East, West and Center

Organiza os componentes em linhas e colunas

19 de 33

GUI em Java

O GridLayout exibe os componentes em linhas e colunas (como uma tabela) deixa-os do mesmo tamanho

Gerenciadores de Layout O FlowLayout coloca os componentes conforme a ordem em

que são adicionados ao cointainer

20 de 33

GUI em Java

O Gerenciador BorderLayout Ele é o gerenciador de layout padrão para todas as janelas

(Frames e Dialogs) Distribui os componentes em cinco regiões

• NORTH (topo do container)• SOUTH (base do container)• EAST (esquerda do container)• WEST (direita do container)• CENTER (centro do container)

A área que tem a maior quantidade de espaço disponível é o centro

21 de 33

GUI em Java

As classes do Swing estão no pacote javax.swing Cria-se uma Sub-classe de JFrame Método setTitle() define o nome da janela Método setSize() define o tamanho da janela Método setLocation() define a posição da janela na tela

22 de 33

GUI em Java

Exemplo: Construindo uma Janelaimport javax.swing.*;public class Janela extends Jframe { public Janela() { setTitle("Exemplo de Janela"); setSize(300, 200); } public static void main(String arguments[]) { Janela j = new Janela(); j.show(); }}

23 de 33

GUI em Java

Para centralizarmos uma janela na tela, deve-se saber o tamanho da tela em pixels

Através da Classe Toolkit é possível obter diversas informações do sistema

O método getScreenSize() retorna um objeto Dimension contendo o tamanho da tela

Através da Classe Toolkit também podemos carregar um ícone para ser usado na aplicação

O método setResizable() pode ser desabilitar o redimensionamento da janela

Toolkit tk = Toolkit.getDefaultToolkit();

Dimension d = tk.getScreenSize();

int alturaTela = d.height;

int larguraTela = d.width;

setLocation(larguraTela / 4, alturaTela / 4);

setResizable(false);

24 de 33

GUI em Java

Adicionando componentes à Janela Deve-se criar uma instância das classes dos componentes

selecionados no projeto da GUI. Por exemplo: JLabel e JTextField.JLabel lblValor1 = new JLabel("Valor 01:");

JTextField txtValor1 = new JTextField("0");

Em seguida defini-se um instância da classe Container que receberá os componentes a serem inseridos à Janela.

Container c = getContentPane();

Após a definição do container prossegue-se com a definição do gerenciador de layout a ser utilizado.

GridLayout gl = new GridLayout(3,2);

c.setLayout(gl);

Finalmente, os componentes podem ser adicionados ao container através do método add().

c.add(lblValor1);

c.add(txtValor);

25 de 33

GUI em Java

Adicionando componentes à Janela O método pack() pode ser utilizado para redimensionamento dos

componentes conforme área disponível na janela Um exemplo de GUI é mostrado na figura abaixo

26 de 33

Manipulação de Eventos em Java

27 de 33

Manipulação de Eventos

GUIs são direcionadas por eventos• Eventos são gerados quando o usuário interage com a

GUI– e.g., movimento do mouse, pressionamento de

botão, digitação em um textfield, etc.– Class java.awt.AWTEvent

28 de 33

Manipulação de Eventos

Algumas Classes do pacote java.awt.event

Class name

Key

java.lang.Object

java.awt.AWTEvent

ActionEvent

ItemEvent

AdjustmentEvent

ComponentEvent

java.util.EventObject

ContainerEvent

PaintEvent

FocusEvent

WindowEvent

InputEvent

KeyEvent MouseEventInterface name

29 de 33

Manipulação de Eventos

Modelo de Manipulação de Eventos• Três partes

– Origem do Evento– Componente GUI com o qual o usuário interage

– Objeto Evento– Informação encapsulada sobre o evento ocorrido

– Listener do Evento– Recebe o objeto evento quando notificado,

respondendo-o• O Programador deve executar duas tarefas

– Registrar o listener do evento para o fonte do evento

– Implementar um método que trate o evento (event handler)

30 de 33

Manipulação de Eventos

Interfaces Event-listener do pacote java.awt.event

java.util.EventListener

ActionListener

ComponentListener

AdjustmentListener

ContainerListener

MouseListener

TextListener

ItemListener

FocusListener

KeyListener

MouseMotionListener

WindowListener

C lass name

Key

Interface name

31 de 33

Manipulação de Eventos

Duas questões em aberto:

• Como o manipulador de eventos é registrado?

– R:– Através do método do componente

addActionListener

• Como o componente sabe chamar actionPerformed?

– R:

– O evento é somente disparado para o listeners do tipo apropriado

– Cada tipo de evento tem uma interfaace event-listener correspondente

» Event ID especifica o tipo do evento que ocorreu

32 de 33

Manipulação de Eventos

Registrando um manipulador de evento para um botãobtnSomar.addActionListener

(new ActionListener()

{

public void actionPerformed(ActionEvent e)

{somar();}

}

);

Registrando um manipulador de evento para encerramento da aplicação

addWindowListener (new WindowAdapter() {

public void windowClosing(WindowEvent e)

{System.exit(0);}

}

);

33 de 33

Manipulação de Eventos

Exercício para entrega no dia 23/04/2003• Detalhamento no site - link “exercícios/Projetos”