View
255
Download
0
Category
Preview:
Citation preview
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
Linguagem de Programação II
GUI Interface Gráfica com o Usuário
Prof. Alessandro Borges
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
Tópicos
Introdução
Visão Geral dos Componentes Swing
Criação de interface no Netbeans
Componentes Swing mais comuns
Tipos comuns de eventos GUI
2
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
Introdução3
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI - Graphical User Interface
Interface Gráfica com o Usuário
Mecanismo amigável para interação do
usuário com o aplicativo
Criada a partir de componentes GUI visuais
com os quais o usuário pode interagir.
GUI
Introdução
4
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
Dois pacotes para o desenvolvimento
AWT (Abstract Window Toolkit)
Bastante limitado
Apresenta aparência diferente dependendo do SO, acompanhando o estilo do SO
Swing
Componentes originários do pacote AWT
Aparência idêntica independentemente de plataforma
GUI
Introdução
5
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
Componentes leves x componentes pesados
Componentes leves
Não dependem diretamente de componentes GUI
suportados pela plataforma de base.
Componentes pesados
Dependentes diretamente da plataforma local
(SO)
Componentes AWT
Alguns componentes Swing
GUI
Introdução
6
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
Visão Geral dos Componentes Swing7
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
O pacote Swing fornece componentes intuitivos para interação com o usuário
Componentes possuem, basicamente:
Propriedades
Características dos componentes (ex: cor)
Eventos
Ações/operações e interações que o componente realiza no programa (ex: clique do mouse)
GUI
Visão Geral dos Componentes Swing
8
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
Hierarquia de Componentes Swing
GUI
Visão Geral dos Componentes Swing
9
java.lang.Object
java.awt.Component
java.awt.Container
javax.swing.Component
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
Hierarquia de Componentes Swing
GUI
Visão Geral dos Componentes Swing
10
java.lang.Object
java.awt.Component
java.awt.Container
javax.swing.Component
Subclasse de Object - declara muitos dos atributos
e comportamentos comuns aos componentes GUI
em pacotes java.awt e javax.swing
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
Hierarquia de Componentes Swing
GUI
Visão Geral dos Componentes Swing
11
java.lang.Object
java.awt.Component
java.awt.Container
javax.swing.Component
A maioria dos componentes GUI estende a classe Component
direta ou indiretamente.
Subclasse de Object - declara muitos dos atributos
e comportamentos comuns aos componentes GUI
em pacotes java.awt e javax.swing
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
Hierarquia de Componentes Swing
GUI
Visão Geral dos Componentes Swing
12
java.lang.Object
java.awt.Component
java.awt.Container
javax.swing.Component
Subclasse de Component. Components são anexados a Containers (como janelas), de modo que possam ser
organizados e exibidos na tela.
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
Hierarquia de Componentes Swing
GUI
Visão Geral dos Componentes Swing
13
java.lang.Object
java.awt.Component
java.awt.Container
javax.swing.Component
Como Container é um
Component, pode ser colocado
em outro Container
Subclasse de Component. Components são anexados a Containers (como janelas), de modo que possam ser
organizados e exibidos na tela.
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
Hierarquia de Componentes Swing
GUI
Visão Geral dos Componentes Swing
14
java.lang.Object
java.awt.Component
java.awt.Container
javax.swing.Component
Subclasse de Container. Superclasse dos
componentes Swing leves.
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
Hierarquia de Componentes Swing
GUI
Visão Geral dos Componentes S
15
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
Componente Descrição
JFrame
A tela (formulário) de uma aplicação de interface gráfica.
É a janela com barra de título, botões de controle e pode ter barra
de menus.
JPanelÁrea em que os componentes podem ser colocados e organizados.
Área de desenho para imagens gráficas
JLabel Exibe texto não editável e ícones.
JTextFieldInserção de dados via teclado.
Exibição de texto editável ou não editável.
JButton Desencadeia um evento ao ser clicado com o mouse.
JCheckBox Especifica opção que pode ser ou não selecionada.
JComboBoxLista drop-down escamoteável de itens para seleção clicando em
um item ou digitando na caixa.
GUI
Visão Geral dos Componentes Swing
16
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Visão Geral dos Componentes Swing
17
A maioria das janelas com componentes Swing são instâncias
JFrame ou de uma subclasse de JFrame
JFrame é uma subclasse indireta da classe java.awt.Window
Fornece atributos e componentes básicos de uma janela
Barra de títulos e botões para minimizar, maximizar e fechar a janela
Componente Descrição
JListLista de itens para seleção clicando em qualquer item.
Permite seleção de múltiplos elementos.
JRadioButton Botão tipo radio
JTextArea Área para apresentação de texto
JTable Tabela para apresentação de elementos
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
Criação de Interfaces no Netbeans18
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Criação de interface no Netbeans
19
Suporte para criação de interface com janelas
(Swing)
Interface drag-and-drop (arrastar e soltar) com
geração automática de código
Cria-se um ‘Forms GUI Swing’ tipo ‘Form Jframe’
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Criação de interface no Netbeans
20
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Criação de interface no Netbeans
21
JFrame
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Criação de interface no Netbeans
22
Basta, então, arrastar os componentes desejados
(apresentados na paleta) e dispô-los conforme
pretende-se que seja a interface do aplicativo
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Criação de interface no Netbeans
23
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Criação de interface no Netbeans
24
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Criação de interface no Netbeans
25
Clicando com o botão
direito sobre o
componente e escolhendo ‘Editar
texto’
No item ‘text’ da aba
Propriedades
Teclando F2
Edita-se o texto dos componentes:
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Criação de interface no Netbeans
26
Devido à grande quantidade de componentes, nomes originais das variáveis podem deixar o código bastante confuso
JButton1, JButton2, JButton3, JButton4, etc.
Dê nomes descritivos aos componentes
Dica: use prefixos para identificar o tipo do componente
lblTitulo
btnCadastrar
btnConsultar
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Criação de interface no Netbeans
27
Dê nomes descritivos aos componentes
Clicando com o botão direito do mouse sobre o componente e escolhendo ‘Alterar o nome da
variável’
Na aba Código editando o conteúdo em ‘Nome
da variável’
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Criação de interface no Netbeans
28
Cada componente possui muitas propriedades
que podem ser ajustadas.
Ex:
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Criação de interface no Netbeans
29
O código é gerado automaticamente, e pode
ser visto na aba ‘Código-fonte’
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Criação de interface no Netbeans
30
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Criação de interface no Netbeans
31
Exibe o
código fonte
Exibe o
projeto
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Criação de interface no Netbeans
32
Evento dos botões
Botão direito do mouse sobre o botão
Duplo clique sobre o botão
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Criação de interface no Netbeans
33
Evento dos botões
Deve-se inserir manualmente o código a ser
executado no pressionar do botão
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
Componentes Swing mais comuns34
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
35
JFrame
É a janela principal, onde os componentes
estarão dispostos.
Por padrão tem uma borda, um título e botões para
minimizar, maximizar e fechar a janela
Para que seja exibida, deve-se:
Criar um objeto da classe
Alterar a propriedade ‘visible’ usando o método
‘setVisible(true)’
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
36
JFrame
Clicar no ‘X’ originalmente oculta a janela, mas não finaliza o programa
Para fechar, efetivamente, a aplicação e liberar RAM:
No NetBeans, altera-se a propriedade ‘defaultCloseOperation’ para ‘EXIT_ON_CLOSE’
No código do programa, na classe que chama o frame, usa-se o método ‘setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE)’
Para sair somente da janela atual
‘DISPOSE_ON_CLOSE’
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
37
JFrame
Originalmente aparece no canto superior
esquerdo da tela
Para centralizar pode-se usar o método ‘setLocationRelativeTo(null)’
O parâmetro é uma janela sobre a qual a nova
janela deve estar concêntrica.
Caso o atributo seja ‘null’, a janela fica
centralizada em relação à tela
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
38
JFrame
A janela, por padrão, pode
ser redimensionada
Prejudica a interface
Para evitar:
No Netbeans
Propriedade ‘resizable’ – não selecionada
No código
setResizable(false)
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
39
JFrame
A janela, por padrão, não
apresenta título
No NetBeans
Propriedade ‘title’
No código da classe que
chama o frame
setTitle(“texto de título”)
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
40
JFrame
Cor de fundo
A cor de fundo padrão é o cinza
Para alterar
No NetBeans
Propriedade ‘background’
No código da classe que chama o frame
getContentPane().setBackground(Color.CYAN);
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
41
JPanel
Componente invisível que
serve como um container
Ajuda a organizar os
componentes
Várias propriedades
passíveis de alteração
Ex:Cor de fundo: background
Borda: border
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
42
JLabel
Também chamado de rótulo
Inserção de texto não editável
e/ou imagem
Texto:
propriedade ‘text’
Imagem:
propriedade ‘icon’
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
43
JButton
Botão de comando
Ao ser clicado aciona uma ação específica
Gera um ActionEvent
Ex:
JButton btnCad = new JButton(“Cadastrar”);
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
44
JButton
Suporta a exibição de ícones
Imagens no mesmo diretório do aplicativo
Formatos GIF, PNG e JPG
Ex:
btnCad = new JButton(“Cadastrar”, “ícone.gif”);
rolloverIcon
Ícone diferente exibido com mouse sobre o botão
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
45
JButton
Texto de dica
Aparece ao manter o cursor sobre o botão
Propriedade ‘toolTipText’
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
46
Prática 1
Criar aplicativo de cadastro de sócios de uma
instituição esportiva, contemplando:
Sócio (classe)
Código: int
Nome: String
CPF: String
RG: String
Nro dependentes: int
Sexo: char
Sócio Proprietário: boolean
Data de nascimento: Data*
Endereço: Endereco*
Dependentes: ArrayList*
Hobby: String*Classes
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
47
Prática 1
Como apoio à classe Sócio:
Data (classe)
Dia: int
Mês: int
Ano: int
Dependente (classe)
Código: int
Nome: String
Data Nascimento: Data*
*Classes
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
48
Prática 1
Como apoio à classe Sócio:
Endereço (classe)
Logradouro: String
Número: int
Complemento: String
Bairro: String
Cidade: String
Estado: String
CEP: String
*Classes
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
49
Prática 1
Criar a seguinte interface
Projeto Execução
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
50
JTextField
Caixa de entrada de dados
Para pegar o valor do campo
nomeVariável.getText();
Retorna uma String
Para atribuir valor ao campo
nomeVariável.setText(“Novo valor”);
Aceita apenas String
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
51
JTextField
Exemplos de propriedades
editable – elemento editável ou não
columns – número de colunas visíveis
horizontalAlignment – Alinhamento horizontal do texto
Exemplo de método
selectAll() – seleciona todos os caracteres do texto
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
52
JTextField
Conversões:
int inteiro = Integer.parseInt(string);
float real = Float.parseFloat(string);
double real2 = Double.parseDouble(string);
String texto = String.valueOf(número);
String texto = Integer.toString(número);
String texto = Float.toString(número);
String texto = Double.toString(número);
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
53
JPasswordField
Campo de texto no formato senha
Mostra que está havendo entrada, sem mostrar os caracteres digitados
Para pegar o valor do campo
nomeVariável.getText();
Retorna uma String
Para atribuir valor ao campo
nomeVariável.setText(“Novo valor”);
Aceita apenas String
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
54
Prática 2
Criar a seguinte interface
Projeto Execução
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
55
Prática 2
Ao clicar no botão ‘Submit’:
Se login e senha forem válidos:
Tornar o formulário de login invisível
Criar o formulário base do aplicativo e torná-lo visível
Caso contrário
Apagar os campos de usuário e senha
Ao clicar no botão ‘Sair’
Encerrar o programa
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
56
JFormatedTextField
Texto formatado onde pode-se definir máscaras
Propriedade formatterFactory
Número #,##0.###
Data dd/MM/yyyy
Hora HH:mm:ss
Porcentagem #,##0%
Moeda ¤ #,##0.00
Máscara ###-#### ou personalizado
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
57
JFormatedTextField
Exemplos de máscaras que podemos formar:
Telefone internacional +##(##)####-####
Telefone nacional (##)#####-####
CEP #####-###
CPF ###.###.###-##
CNPJ ##.###.###/####-##
Placa de automóvel UUU-####
Título de eleitor #########/##
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
58
JFormatedTextField
Caracteres para a montagem da máscara:
# qualquer número (0-9)
U qualquer letra (a-z) – converte p/ maiúscula
L qualquer letra (a-z) – converte p/ minúscula
? qualquer letra (a-z) – mantém como inserida
A qualquer letra (a-z) ou número (0-9)
H qualquer caracter hexadecimal (0-9 e a-f)
* qualquer caracter, inclusive especiais
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
59
JCheckBox
Botão de opção (um dos botões de estado)
Mantém valores
Selecionado / Não selecionado (Verdadeiro/Falso)
Quando usado em conjunto, geralmente mais de
um podem estar selecionados simultaneamente
Exemplos:
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
60
JCheckBox
Para identificar situação:
nomeVariável.isSelected()
Para alterar a situação
nomeVariável.setSelected(true/false)
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
61
JRadioButton
Botão de alternância (outro botão de estado)
Mantém o valor (selecionado / não selecionado)
Normalmente agrupa-se opções mutuamente
exclusivas
Aloca-se as opções
Cria-se um grupo de botões
Associa-se os RadioButtons ao grupo de botões
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
62
JRadioButton
Para identificar situação:
nomeVariável.isSelected()
Para alterar a situação
nomeVariável.setSelected(true/false)
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
63
JInternalFrame
Trata-se de um container – um quadro interno
Ajuda a organizar componentes
Dá destaque diferenciado
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
64
Prática 3 – parte 1
Criar a interface
parcial
Atenção aos
campos de texto
formatados
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
65
JComboBox
Lista drop-down
Selecionar um item em uma lista
No NetBeans Caixa de combinação
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
66
JComboBox
Para definir os itens da caixa
Propriedade model
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
67
JComboBox
Para saber o item selecionado:
nomeVariável.getSelectedItem()
Para saber o índice do item
nomeVariável.getSelectedIndex()
Para selecionar um item
nomeVariável.setSelectedIndex()
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
68
JComboBox
Para realizar alguma ação quando
item alterado
nomeVariável.ItemStateChanged
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
69
JComboBox
Para adicionar um item
nomeVariável.addItem(item)
Retornar o i-ésimo elemento
nomeVariável.getItemAt(i)
Retornar a quantidade de elementos
nomeVariável.getItemCount()
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
70
JComboBox
Para remover um item
nomeVariável.removeItem(item)
Remover o i-ésimo elemento
nomeVariável.removeItemAt(i)
Remover todos os elementos
nomeVariável.removeAllItems()
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
71
JList
Lista de itens
No NetBeans Listar
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
72
JList
Para definir os itens da lista
Propriedade model
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
73
JList
Lista de itens
Pode ser:
Seleção única
selectionMode - SINGLE
Apenas um item pode ser selecionado
Seleção múltipla
selectionMode – SINGLE_INTERVAL/MULTIPLE_INTERVAL
Pode-se selecionar um ou mais itens
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
74
JList
Pegar o primeiro item selecionado
nomeVariável.getSelectedIndex()
Seleção única usa somente este
Pegar todos os itens selecionados em um vetor
nomeVariável.getSelectedValues()
Pegar os índices de itens selecionados em um vetor
nomeVariável.getSelectedIndices()
Selecionar um determinado item (índice i)
nomeVariável.setSelectedIndex(i)
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
75
JTable
Tabela simples
No NetBeans Tabela
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
76
JTable
Para definir os itens
da tabela
Propriedade model
Título
Tipo
Editável ou não
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
77
Prática 3 – parte 2
Completar a
interface da
Prática 3
OBS:
Botão ‘Cadastrar
Dependentes’
inicialmente
desabilitado
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
78
Prática 4
Montar janela para cadastro de dependente
Jogar o dependente cadastrado para o JTable
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
GUI
Componentes Swing mais comuns
79
Roteiro de checagem
Janelas
defaultCloseOperation
Frame principal – EXIT_ON_CLOSE
Frames secundários – DISPOSE
resizable – desmarcado
title – conforme cada janela
Objetos em geral
Nome da variável ajustado conforme objeto
Linguagem de Programação II / Java – Interface Gráfica com o Usuário
Linguagem de Programação II
GUI
Prof. Alessandro Borges
Recommended