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

Transcrição

1 Linguagem de Programação II Interface Gráfica com o Usuário Prof. Alessandro Borges

2 2 Tópicos Introdução Visão Geral dos Componentes Swing Criação de interface no Netbeans Tipos comuns de eventos

3 3 Introdução

4 4 Introdução - 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 visuais com os quais o usuário pode interagir.

5 5 Introdução 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

6 6 Introdução Componentes leves x componentes pesados Componentes leves Não dependem diretamente de componentes suportados pela plataforma de base. Componentes pesados Dependentes diretamente da plataforma local (SO) Componentes AWT Alguns componentes Swing

7 7 Visão Geral dos Componentes Swing

8 8 Visão Geral dos Componentes Swing 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)

9 9 Visão Geral dos Componentes Swing Hierarquia de Componentes Swing java.lang.object java.awt.component java.awt.container javax.swing.component

10 10 Visão Geral dos Componentes Swing Hierarquia de Componentes Swing java.lang.object java.awt.component java.awt.container javax.swing.component Subclasse de Object - declara muitos dos atributos e comportamentos comuns aos componentes em pacotes java.awt e javax.swing

11 11 Visão Geral dos Componentes Swing Hierarquia de Componentes Swing java.lang.object java.awt.component A maioria dos componentes estende a classe Component direta ou indiretamente. java.awt.container javax.swing.component Subclasse de Object - declara muitos dos atributos e comportamentos comuns aos componentes em pacotes java.awt e javax.swing

12 12 Visão Geral dos Componentes Swing Hierarquia de Componentes Swing 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.

13 13 Visão Geral dos Componentes Swing Hierarquia de Componentes Swing java.lang.object java.awt.component Como Container é um Component, pode ser colocado em outro Container 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.

14 14 Visão Geral dos Componentes Swing Hierarquia de Componentes Swing java.lang.object java.awt.component java.awt.container javax.swing.component Subclasse de Container. Superclasse dos componentes Swing leves.

15 15 Visão Geral dos Componentes S Hierarquia de Componentes Swing

16 16 Visão Geral dos Componentes Swing Componente JFrame JPanel JLabel JTextField JButton JCheckBox JComboBox Descrição 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. Área em que os componentes podem ser colocados e organizados. Área de desenho para imagens gráficas Exibe texto não editável e ícones. Inserção de dados via teclado. Exibição de texto editável ou não editável. Desencadeia um evento ao ser clicado com o mouse. Especifica opção que pode ser ou não selecionada. Lista drop-down escamoteável de itens para seleção clicando em um item ou digitando na caixa.

17 17 Visão Geral dos Componentes Swing Componente JList JRadioButton JTextArea JTable Descrição Lista de itens para seleção clicando em qualquer item. Permite seleção de múltiplos elementos. Botão tipo radio Área para apresentação de texto Tabela para apresentação de elementos 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

18 18 Criação de Interfaces no Netbeans

19 19 Criação de interface no Netbeans 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 Swing tipo Form Jframe

20 20 Criação de interface no Netbeans

21 21 Criação de interface no Netbeans JFrame

22 22 Criação de interface no Netbeans Basta, então, arrastar os componentes desejados (apresentados na paleta) e dispô-los conforme pretende-se que seja a interface do aplicativo

23 23 Criação de interface no Netbeans

24 24 Criação de interface no Netbeans

25 25 Criação de interface no Netbeans Edita-se o texto dos componentes: Clicando com o botão direito sobre o componente e escolhendo Editar texto No item text da aba Propriedades Teclando F2

26 26 Criação de interface no Netbeans 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 27 Criação de interface no Netbeans 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 28 Criação de interface no Netbeans Cada componente possui muitas propriedades que podem ser ajustadas. Ex:

29 29 Criação de interface no Netbeans O código é gerado automaticamente, e pode ser visto na aba Código-fonte

30 30 Criação de interface no Netbeans

31 31 Exibe o código fonte Criação de interface no Netbeans Exibe o projeto

32 32 Criação de interface no Netbeans Evento dos botões Botão direito do mouse sobre o botão Duplo clique sobre o botão

33 33 Criação de interface no Netbeans Evento dos botões Deve-se inserir manualmente o código a ser executado no pressionar do botão

34 34

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

36 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 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

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

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

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

41 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

42 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

43 43 JButton Botão de comando Ao ser clicado aciona uma ação específica Ex: Gera um ActionEvent JButton btncad = new JButton( Cadastrar );

44 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

45 45 JButton Texto de dica Aparece ao manter o cursor sobre o botão Propriedade tooltiptext

46 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

47 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

48 48 Prática 1 Como apoio à classe Sócio: Endereço (classe) Logradouro: String Cidade: String Número: int Estado: String Complemento: String CEP: String Bairro: String *Classes

49 49 Prática 1 Criar a seguinte interface Projeto Execução

50 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 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

52 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 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

54 54 Prática 2 Criar a seguinte interface Projeto Execução

55 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

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

58 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

59 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:

60 60 JCheckBox Para identificar situação: nomevariável.isselected() Para alterar a situação nomevariável.setselected(true/false)

61 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

62 62 JRadioButton Para identificar situação: nomevariável.isselected() Para alterar a situação nomevariável.setselected(true/false)

63 63 JInternalFrame Trata-se de um container um quadro interno Ajuda a organizar componentes Dá destaque diferenciado

64 64 Prática 3 parte 1 Criar a interface parcial Atenção aos campos de texto formatados

65 65 JComboBox Lista drop-down Selecionar um item em uma lista No NetBeans Caixa de combinação

66 66 JComboBox Para definir os itens da caixa Propriedade model

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

68 68 JComboBox Para realizar alguma ação quando item alterado nomevariável.itemstatechanged

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

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

71 71 JList Lista de itens No NetBeans Listar

72 72 JList Para definir os itens da lista Propriedade model

73 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

74 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 75 JTable Tabela simples No NetBeans Tabela

76 76 JTable Para definir os itens da tabela Propriedade model Título Tipo Editável ou não

77 77 Prática 3 parte 2 Completar a interface da Prática 3 OBS: Botão Cadastrar Dependentes inicialmente desabilitado

78 78 Prática 4 Montar janela para cadastro de dependente Jogar o dependente cadastrado para o JTable

79 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

80 Linguagem de Programação II Prof. Alessandro Borges