Linguagem de Programação II GUI Interface Gráfica com o Usuário

(1)

Linguagem de Programação II

GUI

Interface Gráfica com o Usuário

(2)

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

(3)

Introdução

(4)



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

(5)



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

(6)



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

(7)

Visão Geral dos Componentes Swing

(8)



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

(9)



Hierarquia de Componentes Swing

GUI

Visão Geral dos Componentes Swing

9

java.lang.Object

java.awt.Component

java.awt.Container

(10)



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

(11)



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

(12)



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

(13)



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

(14)



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.

(15)



Hierarquia de Componentes Swing

GUI

Visão Geral dos Componentes S

15

(16)

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.

JTextField

Inserçã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.

JComboBox

Lista 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

(17)

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

Componente

Descrição

JList

Lista 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

(18)

Criação de Interfaces no Netbeans

(19)

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

(20)

GUI

Criação de interface no Netbeans

20

(21)

GUI

Criação de interface no Netbeans

21

(22)

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

(23)

GUI

Criação de interface no Netbeans

23

(24)

GUI

Criação de interface no Netbeans

24

(25)

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

(26)

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

(27)

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’

(28)

GUI

Criação de interface no Netbeans

28



Cada componente possui muitas propriedades

que podem ser ajustadas.

(29)

GUI

Criação de interface no Netbeans

29



O código é gerado automaticamente, e pode

ser visto na aba ‘Código-fonte’

(30)

GUI

Criação de interface no Netbeans

30

(31)

GUI

Criação de interface no Netbeans

31

Exibe o

código fonte

Exibe o

projeto

(32)

GUI

Criação de interface no Netbeans

32



Evento dos botões



Botão direito do mouse sobre o botão

(33)

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

(34)

Componentes Swing mais comuns

(35)

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

(36)

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’

(37)

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

(38)

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

(39)

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

(40)

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

(41)

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:

(42)

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:

(43)

GUI

Componentes Swing mais comuns

43



JButton



Botão de comando



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



Gera um ActionEvent

(44)

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

(45)

GUI

Componentes Swing mais comuns

45



JButton



Texto de dica

Aparece ao manter o cursor sobre o botão

Propriedade ‘toolTipText’

(46)

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

(47)

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

(48)

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

(49)

GUI

Componentes Swing mais comuns

49



Prática 1



Criar a seguinte interface

(50)

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

(51)

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

(52)

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

(53)

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

(54)

GUI

Componentes Swing mais comuns

54



Prática 2



Criar a seguinte interface

(55)

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

(56)

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

(57)

GUI

Componentes Swing mais comuns

57



JFormatedTextField



Exemplos de máscaras que podemos formar:



Telefone internacional



+##(##)####-####



Telefone nacional



(##)#####-####



CEP



#####-###



CPF



###.###.###-##



CNPJ



##.###.###/####-##

(58)

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)

(59)

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

(60)

GUI

Componentes Swing mais comuns

60



JCheckBox



Para identificar situação:



nomeVariável.isSelected()



Para alterar a situação

(61)

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

(62)

GUI

Componentes Swing mais comuns

62



JRadioButton



Para identificar situação:



nomeVariável.isSelected()



Para alterar a situação

(63)

GUI

Componentes Swing mais comuns

63



JInternalFrame



Trata-se de um container – um quadro interno



Ajuda a organizar componentes

(64)

GUI

Componentes Swing mais comuns

64



Prática 3 – parte 1



Criar a interface

parcial



Atenção aos

campos de texto

formatados

(65)

GUI

Componentes Swing mais comuns

65



JComboBox



Lista drop-down



Selecionar um item em uma lista

(66)

GUI

Componentes Swing mais comuns

66



JComboBox



Para definir os itens da caixa

(67)

GUI

Componentes Swing mais comuns

67



JComboBox



Para saber o item selecionado:



nomeVariável.getSelectedItem()



Para saber o índice do item



nomeVariável.getSelectedIndex()

(68)

GUI

Componentes Swing mais comuns

68



JComboBox



Para realizar alguma ação quando

item alterado

(69)

GUI

Componentes Swing mais comuns

69



JComboBox



Para adicionar um item



nomeVariável.addItem(item)



Retornar o i-ésimo elemento



nomeVariável.getItemAt(i)

(70)

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

(71)

GUI

Componentes Swing mais comuns

71



JList



Lista de itens

(72)

GUI

Componentes Swing mais comuns

72



JList



Para definir os itens da lista

(73)

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

(74)

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)

(75)

GUI

Componentes Swing mais comuns

75



JTable



Tabela simples

(76)

GUI

Componentes Swing mais comuns

76



JTable



Para definir os itens

da tabela

Propriedade model



Título



Tipo

(77)

GUI

Componentes Swing mais comuns

77



Prática 3 – parte 2



Completar a

interface da

Prática 3



OBS:



Botão ‘Cadastrar

Dependentes’

inicialmente

(78)

GUI

Componentes Swing mais comuns

78



Prática 4



Montar janela para cadastro de dependente

(79)

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

(80)

Linguagem de Programação II

GUI