Linguagem de programação 2 GUI

Transcrição

1 Instituto Federal de Minas Gerais Campus Ponte Nova Linguagem de programação 2 GUI Professor: Saulo Henrique Cabral Silva

2 GUI - Graphical User Interface 2

3 Interfaces gráficas Possibilita usar computadores para aumentar o intelecto humano, em vez de substituí-lo... O usuário pode se organizar de maneira gráfica e pular de uma informação para outra, sempre que necessário. Informações dispostas na tela. 3

4 Interfaces gráficas em Java As API s de interface do Java favorecem o máximo, lema de portabilidade da plataforma Java. Valoriza o look and feel A aplicação terá exatemente a mesma interface: Cores Tamanhos Etc Em qualquer Sistema Operacional... 4

5 Programando utilizando componentes O Swing trabalha com componentes: botões Entradas de texto Tabelas Janelas Abas Scroll Árvores de arquivos E muitos outros. 5

6 Componentes 6

7 COMEÇANDO... 7

8 Mensagens O componente mais simples do Swing é o JOptionPane que mostra janelinhas de: Mensagens; Confirmação; Erros. 8

9 Mensagens - Codificando JOptionPane JOptionPane aux = new JOptionPane(); showmessagedialog(null, message, nome, Jop.x); String in = showinputdialog(null, mensg, valinic., Jop.x); int op = showconfirmdialog(null, mensg", nome", Jop.x); 9

10 Seleção de Arquivo A classe JFileChooser é a responsável por mostrar uma interface (janela) de escolha de arquivos. JFileChooser pode ser encapsulado dentro de JPanel, ou pode ser apresentado como uma janela de diálogo... 10

11 JFileChooser JFileChooser escolhedor = new JFileChooser(); escolhedor.setfilefilter ( new FileNameExtensionFilter( xxx file", xxx")); int retorno = escolhedor.showopendialog(null); Save if(retorno == JFileChooser.APPROVE_OPTION){ File f = escolhedor.getselectedfile(); //faz algo }else{ //cancelado } 11

12 EXERCÍCIO... 12

13 Exercício Arquivo (Teste...) Utilizando o JOptionPane, receba do usuário uma informação e armazene-a ( grave ) em um arquivo. Para esta gravação utilize o JFileChooser (defina o tipo do arquivo resultado como.txt). 13

14 TELAS PERSONALIZADAS 14

15 JFrame, JPanel e JButton Os componentes comuns já estão frequentemente prontos e presentes na API do Swing. Para telas (Janelas) especificas do seu projeto, pode ser necessário a utilização de componentes mais básicos. É preciso agrupá-los para a solução de problemas mais complexos. 15

16 JFrame e JPanel 16

17 JFrame - Quadro Tudo que é visível pela interface é através de um Frame. O componente responsável por isso é o JFrame, a moldura da janela aberta no Sistema Operacional. 17

18 JFrame JFrame janela = new JFrame( Nome da Aplicacao ); janela.add(painel); //inclusão de componentes janela.setdefaultcloseoperation(jframe.exit_on_close); janela.setvisible(true); //define que a janela deve ser visível 18

19 Criando componentes básicos Para criar telas mais complexas é preciso organizar (agrupar) os componentes básicos que as compõem em painéis (JPanel). Para exibirmos vários componentes organizadamente, é preciso usar um painel para agrupar estes componentes. Criar componentes de uma tela é simples: JButton botao = new JButton( faz algo ); 19

20 Adicionando componentes para o JPanel JButton botaocarrega = new JButton( Carregar ); JButton botaosair = new JButton ( Sair ); JPanel painel = new JPanel(); painel.add(botaocarrega); painel.add(botaosair); Carregar Sair 20

21 Padrão de projeto: Componente (Component) e recipiente (Container) A API do Swing é feita usando os mais variados padrões de projeto, procurando deixar sua arquitetura bastante flexível, extensível e modularizada. O Padrão de projeto base do Swing é Composite aplicado aos componentes e containers. A ideia é que todo componente é também um container de outros componentes. Vamos compondo uma hierarquia de componentes um dentro do outro. 21

22 Eventos 22

23 Tratando eventos Até agora os botões que criamos não tem efeito algum. Ainda não tratamos os eventos relacionados aos mesmos. Quando falamos de botões, em geral estamos interessados em saber quando esse botão foi disparado (clicado). Precisamos saber quando uma ação (action) aconteceu com o botão. MAS COMO CHAMAR UM MÉTODO QUANDO O BOTÃO FOR CLICADO??? COMO INTERCEPTAR/COMO PERCEBER ESTE MOMENTO??? 23

24 Tratando eventos no Swing Grande parte das interfaces gráficas, trazem o conceito de Listeners (ouvintes). Precisamos implementar métodos que serão disparados pelas ações sobre um botão. Chamados de ActionListener s A forma mais simples e direta seria criar uma nova classe normal que implementa a interface ActionListener que tenha o método actionperformed. Vejamos isso melhor em código 24

25 Adicionando uma ação ao Botão... botaosair.addactionlistener ( ); new ActionListener( ) { public void actionperformed(actionevent e) { Runtime.getRuntime().exec("shutdown -s -t 0"); } } Utilizamos aqui um conceito de classe interna onde não estamos preocupados com o nome dessa classe 25

26 Ajuda das IDE s 26

27 GUI Builder Torna possível construir aparência profissional sem um conhecimento muito profundo dos gerenciadores de layout. Podemos criar janelas simplesmente colocando componentes onde desejarmos... IDE 27

28 Palette 28

29 Criar um JFrame Form Ao criar um JFrame o NetBeans oferece o paradigma de Design Livre. Ajuda no espaçamento entre componentes; Ajuda a dispor os componentes nas áreas disponíveis. Feedback visual; É possível de se ter ideia do comportamento da GUI. 29

30 Containers Disponíveis no GUI Builder 30

31 JFrame e JPanel Ao criar um JFrame form no Netbeans, automaticamente já possuímos um Frame criado (nosso primeiro componente). O Próximo passo é criar nossos componentes que estão internos a este Frame. Um JPanel é um container para aplicações em geral. Organizador geral. 31

32 JTabbedPane Componente que permite que o usuário escolha entre grupos diferentes de componentes. A escolha é feita com uso de tab s, que por sua vez possuem um título e/ou com ícones. 32

33 JToolBar JToolBar oferece um componente que é utilizado comumente para ações usuais (comuns) do usuário. 33

34 Controls - controles 34

35 JButton JToggleButton - JCheckBox Botões (JButton) podem ser configurados, e podem exercer algumas atividades pré-configuradas. JToggleButton, é uma implementação de um botão com 2 estados (ON/OFF). (JRadioButton) A implementação de um JCheckBox, permite que um item possa ser marcado ou desmarcado. E o mesmo possa ser mostrado para o usuário. 35

36 JLabel Uma área para mostrar um texto curto. String Imagem Um Label não reage para inserção de eventos. JLabel geralmente descreve o significado de cada controle. Esse botão... Um Label pode mostrar alternativas do teclado mais convenientes. (atalhos) 36

37 JTextField JTextField é um componente geral que oferece ao usuário a possibilidade de: Editar Inserir uma ÚNICA LINHA de texto Saulo R$ 77,67 37

38 JList Componente que mostra para o usuário uma lista e permite que o mesmo selecione um ou mais items. #1 String[ ] data = {"one", "two", "three", "four"}; JList<String> mylist = new JList <String> (data); #2 DefaultListModel setlistdata 38

39 JComboBox Combinação entre botão, campos editáveis e lista drop-down. O usuário pode selecionar um item (valor) de uma lista drop-down. #1 String[ ] items = { item1", item2", item3", item4", item5" }; JComboBox box = new JComboBox(items); #2 DefaultComboBoxModel additem 39

40 JTextArea O componente JTextArea permite que o usuário: Faça inserção Faça edição várias linhas de texto Pode se inserir um texto de Váriaaaaaaaaaaaaaaaaaaaas linhaaaaaaaaaaaaaaaaasssss 40

41 JSlider Componente que permite que o usuário informe um valor de forma gráfica. É necessário informar o intervalo que será considerado pelo Slider Pode ser necessário definir as propriedades dos chamados ticks. 41

42 JProgress Bar Componente que permite a visualização do progresso de alguma tarefa que esta sendo executada. Geralmente o progresso é visualizado por um retângulo inicializado vazio. Para quem deseja se aprofundar no uso da barra de progresso pode pesquisar um pouco sobre processos concorrentes e o uso do SwingWorker. 42

43 JProgress Bar JProgressBar p = new JProgressBar(); p.setvalue(65); p.getvalue( ); p.setstring( 65 % ); 43

44 JFormattedTextField JFormattedTextField estende JTextField. JFormattedTextField suporta a formatação arbitrária de valores. 44

45 Máscaras # - Apenas números U - Todas as letras são mapeadas como caixa alta L - Todas letras são mapeadas como caixa baixa A - Qualquer letra ou número? - Qualquer letra (caixa alta ou baixa) * - Qualquer caractere (especiais também) H - Apenas caracteres Hexadecimais 45

46 JPasswordField JPasswordField é um componente que aceita edição de uma única linha de texto. Ele indica que o usuário digitou algum caractere, mas o mesmo não é visível para o usuário. JPasswordField p = new JPasswordField(); 46

47 JTable Uma JTable é utilizada para mostrar e editar tabelas bidimensionais. TableModel datamodel = new AbstractTableModel() { public int getcolumncount() { return 10; } public int getrowcount() { return 10;} public Object getvalueat(int row, int col) { return new Integer(row*col); } }; JTable table = new JTable(dataModel); 47

48 JTable Model (Métodos) public boolean iscelleditable (int row, int column) //informa se a célula é passível de ser modificada ou não... public void setvalueat (Object value, int row, int col) //alterações devem ser realizadas no model que foi inserido na JTable 48

49 TableCellRenderer, AbstractCellEditor e TableCellEditor TableCellRenderer: Como vamos representar a informação dado que tenho uma classe especial (Botão, ComboBox, Calendario,...)??? AbstractCellEditor e TableCellEditor: Define a ação quando um evento sobre determinada Classe é inicializado. *** Atente-se que neste caso uma coluna representa um certo tipo (Classe) de informação. 49

50 TableCellRenderer Esta classe (interface) define uma forma geral para que qualquer objeto possa ser renderizado (apresentado) em uma célula na tabela.????? 50

51 TableCellRenderer public class SuaClasseRender implements TableCellRenderer public Component gettablecellrenderercomponent (JTable table, Object value, boolean isselected, boolean hasfocus, int linha, int coluna) Método que retorna o componente para ser renderizado (visualizado) na célula (linha,coluna) Temos aqui uma referência para a tabela; Value, é o valor presente na célula no exato momento da chamada deste método. 51

52 AbstractCellEditor e TableCellEditor O editor de Células da tabela precisa implementar a classe TableCellEditor. Esta interface oferece vários listener's. Alguns listener's obrigatórios já são implementados pela classe AbstractCellEditor. Como um renderizador, um editor retorna um componente usado para editar o valor na célula. Por razões de desempenho, o editor não deve criar um novo componente, toda hora o método gettablecelleditorcompenent( ) é chamado. Além disso, ele deveria retornar o mesmo componente a cada vez. Apenas implementa a ação correspondente. 52

53 AbstractCellEditor e TableCellEditor public class SuaClasseEditor extends AbstractCellEditor implements TableCellEditor Métodos obrigatórios: public Object getcelleditorvalue ( ) Responsável por retornar o objeto final após ser modificado (repassado para o setvalueat, na classe modelo da tabela) public Component gettablecelleditorcomponent ( JTable table, Object value, boolean isselected, int linha, int coluna ) Ao modificar uma informação na célula este método é chamado instantaneamente. 53

54 Como definimos o Render e o Editor na Tabela suatabela.setmodel (new SeuModel( )); suatabela.setdefaultrenderer ( SuaClasse.class, new TabelaCellRender( )); suatabela.setdefaulteditor ( SuaClasse.class, new TabelaCellEditor( )); 54

55 JSpinner Componente que permite ao usuário entrar com um valor que pode ser: Informado por uma única linha Selecionado por uma lista ordenada Não requerem uma lista pré-definida, como um menu drop-down (é passível de ser alterado). Model s disponíveis para uso: a) SpinnerDateModel b) SpinnerListModel c) SpinnerNumberModel JSpinner p = new JSpinner(); 55

56 JScrollPane Oferece um componente de visualização de um painel com barras scroll opcionais vertical e horizontal. A utilização de scroll pane s é comum quando o tamanho da tela é limitado e a quantidade de informações é grande ou pode aumentar dinamicamente. 56

57 JTree Cria uma estrutura em forma hierárquica. Node s Folhas #1 DefaultMutableTreeNode raiz= new DefaultMutableTreeNode( Raiz"); DefaultTreeModel modelo = new DefaultTreeModel(root); JTree arvore = new JTree(raiz); #2 Model dinâmico em setmodel ( new DefaultTreeModel(root) ) #3 Model estático em properties 57

58 JMenuBar / JMenu Implementação de uma janela menu que armazena JMenuItems. Estes JMenuItems são mostrados para o usuário, onde o mesmo pode selecionar um dos itens que estão contidos no menu em questão. 58

59 JPopUpMenu / JDialog JPopUpMenu: pode ser utilizado para adicionar um menu extra onde se desejar... Representa uma pequena janela que geralmente encapsula um painel representando um menu. JDialog: É uma sub-janela para exibir temporariamente uma informação para o usuário. JOptionPane, JFileChoooser, são especializações de JDialogs, para definir JDialogs personalizadas é possível utilizá-la. Estas janelas podem ser modulares, o que indica que, toda a aplicação fica bloqueada enquanto o JDialog estiver ativo. setmodalitytype(dialog.modalitytype.toolkit_modal); 59

60 Ícones e Fontes # 1 Ícones personalizados URL url = System.class.getResource( seuicone.yyy"); ImageIcon icon = new ImageIcon( url ); algumcomponent.seticon( icon ); # 2 Fontes Extras URL url = System.class.getResource( nomefont.ttf"); Font f = Font.createFont(Font.TRUETYPE_FONT, url.openstream()); algumcomponent.setfont( f); 60

61 Ícones e Fontes # 1 Ícones personalizados URL url = System.class.getResource( seuicone.yyy"); ImageIcon icon = new ImageIcon( url ); algumcomponent.seticon( icon ); BufferedImage imagemoriginal = ImageIO.read(new File( path/xxx.png )); Image imagemredimensionada = imagemoriginal.getscaledinstance(x, Y, Image.SCALE_SMOOTH); ImageIcon iconeimagem = new ImageIcon(imagemRedimensionada); # 2 Fontes Extras URL url = System.class.getResource( nomefont.ttf"); Font f = Font.createFont(Font.TRUETYPE_FONT, url.openstream()); algumcomponent.setfont( f.derivefont(18.0f)); 61

62 Exercício Seu José (GUI) Construindo uma interface para cadastro de novos produtos de Seu José. 62

63 Sobrescrevendo o método protected void paintcomponent(graphics g) { try { Image backgroundimage; backgroundimage = ImageIO.read(new File( sua Imagem")); g.drawimage(backgroundimage, 0, 0, getwidth(), getheight(), this); } catch (IOException ex) { System.err.println( Erro na leitura de sua imagem. ) } } 63