1 de 33
Linguagens de Programação Orientadas a Objetos
Pós-Gradução(Lato-Sensu) em Sistemas de Banco de Dados - UFPa
Marco [email protected]
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”