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 DelphiTerminologia 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 DelphiTerminologia (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çõesTButton Uma área que dispara um evento quando clicada

TPanel Um container no qual componentes podem ser colocados

TEdit

8 de 33

GUI em DelphiTerminologia (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 DelphiTerminologia(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 JavaLayout 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 JavaGerenciadores 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 JavaO 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 JavaExemplo: 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 JavaAdicionando 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 JavaAdicionando 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 nameKey

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 nameKey

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”