Linguagem de Programação II · 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

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


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


Introdução3


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


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


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


Visão Geral dos Componentes Swing7


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


8


Hierarquia de Componentes Swing

GUI


9

java.lang.Object

java.awt.Component

java.awt.Container

javax.swing.Component



GUI


10

java.lang.Object

java.awt.Component

java.awt.Container


Subclasse de Object - declara muitos dos atributos

e comportamentos comuns aos componentes GUI

em pacotes java.awt e javax.swing



GUI


11

java.lang.Object

java.awt.Component

java.awt.Container


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



GUI


12

java.lang.Object

java.awt.Component

java.awt.Container


Subclasse de Component. Components são anexados a Containers (como janelas), de modo que possam ser

organizados e exibidos na tela.



GUI


13

java.lang.Object

java.awt.Component

java.awt.Container


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.



GUI


14

java.lang.Object

java.awt.Component

java.awt.Container


Subclasse de Container. Superclasse dos

componentes Swing leves.



GUI

Visão Geral dos Componentes S

15


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


16


GUI


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


Criação de Interfaces no Netbeans18


GUI


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’


GUI


20


GUI


21

JFrame


GUI


22

Basta, então, arrastar os componentes desejados

(apresentados na paleta) e dispô-los conforme

pretende-se que seja a interface do aplicativo


GUI


23


GUI


24


GUI


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:


GUI


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


GUI


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’


GUI


28

Cada componente possui muitas propriedades

que podem ser ajustadas.

Ex:


GUI


29

O código é gerado automaticamente, e pode

ser visto na aba ‘Código-fonte’


GUI


30


GUI


31

Exibe o

código fonte

Exibe o

projeto


GUI


32

Evento dos botões

Botão direito do mouse sobre o botão

Duplo clique sobre o botão


GUI


33

Evento dos botões

Deve-se inserir manualmente o código a ser

executado no pressionar do botão


Componentes Swing mais comuns34


GUI


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)’


GUI


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’


GUI


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


GUI


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)


GUI


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”)


GUI


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);


GUI


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


GUI


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’


GUI


43

JButton

Botão de comando

Ao ser clicado aciona uma ação específica

Gera um ActionEvent

Ex:

JButton btnCad = new JButton(“Cadastrar”);


GUI


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


GUI


45

JButton

Texto de dica

Aparece ao manter o cursor sobre o botão

Propriedade ‘toolTipText’


GUI


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


GUI


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


GUI


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


GUI


49

Prática 1

Criar a seguinte interface

Projeto Execução


GUI


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


GUI


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


GUI


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);


GUI


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


GUI


54

Prática 2

Criar a seguinte interface

Projeto Execução


GUI


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


GUI


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


GUI


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 #########/##


GUI


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


GUI


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:


GUI


60

JCheckBox

Para identificar situação:

nomeVariável.isSelected()

Para alterar a situação

nomeVariável.setSelected(true/false)


GUI


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


GUI


62

JRadioButton

Para identificar situação:

nomeVariável.isSelected()

Para alterar a situação

nomeVariável.setSelected(true/false)


GUI


63

JInternalFrame

Trata-se de um container – um quadro interno

Ajuda a organizar componentes

Dá destaque diferenciado


GUI


64

Prática 3 – parte 1

Criar a interface

parcial

Atenção aos

campos de texto

formatados


GUI


65

JComboBox

Lista drop-down

Selecionar um item em uma lista

No NetBeans Caixa de combinação


GUI


66

JComboBox

Para definir os itens da caixa

Propriedade model


GUI


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()


GUI


68

JComboBox

Para realizar alguma ação quando

item alterado

nomeVariável.ItemStateChanged


GUI


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()


GUI


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()


GUI


71

JList

Lista de itens

No NetBeans Listar


GUI


72

JList

Para definir os itens da lista

Propriedade model


GUI


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


GUI


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)


GUI


75

JTable

Tabela simples

No NetBeans Tabela


GUI


76

JTable

Para definir os itens

da tabela

Propriedade model

Título

Tipo

Editável ou não


GUI


77

Prática 3 – parte 2

Completar a

interface da

Prática 3

OBS:

Botão ‘Cadastrar

Dependentes’

inicialmente

desabilitado


GUI


78

Prática 4

Montar janela para cadastro de dependente

Jogar o dependente cadastrado para o JTable


GUI


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

GUI

Prof. Alessandro Borges

Documents

Linguagem de Programação II · 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