Interface Gráfica em Java Profa. Dra. Angélica Félix de Castro

1. Interface Gráfica em Java • Profa. Dra. Angélica Félix de Castro

2. 1. Introdução • Interface gráfica com o usuário (Graphical User Interface– GUI): • Apresenta um mecanismo amigável ao usuário para interagir com uma aplicação. • Freqüentemente contém barra de título, barra de menus que contém menus, botões e caixas de combinação. • É construída a partir de componentes GUI.

3. Observação sobre aparência e comportamento • Interfaces com o usuário consistentes permitem que o usuário aprenda mais rápido novos aplicativos.

4. botão menus barra de título barra de menus caixa de combinação barras de rolagem Figura 1 | Janela do Internet Explorer com componentes GUI.

5. 2. Entrada/saída baseada em GUI simples comJOptionPane • Caixas de diálogo: • Utilizadas pelas aplicações para interagir com o usuário. • Fornecidas pela classe JOptionPane do Java (pacote javax.swing). • Contém diálogos de entrada e diálogos de mensagem.

6. Mostra o diálogo de entrada para receber o primeiro inteiro Mostra o diálogo de entrada para receber o segundo inteiro Mostra o diálogo de mensagem para gerar a saída da soma para o usuário

7. Diálogo de entrada exibido nas linhas 10–11 Prompt para o usuário Campo de texto em que o usuário digita um valor Quando o usuário clica em OK,showInputDialogretorna ao programa o 100 digitado pelo usuário como uma String.O programa deve converter a String em um int Diálogo de entrada exibido nas linhas 12–13 barra de título Diálogo de entrada exibido nas linhas 22–23 Quando o usuário clique em OK, o diálogo de mensagem é fechado (é removido da tela)

8. Atenção ao trecho... • JOptionPane.showMessageDialog( null, "The sum is " + sum, "Sum of Two Integers", JOptionPane.PLAIN_MESSAGE );

9. Atenção ao trecho... • JOptionPane.showMessageDialog( null, "The sum is " + sum, "Sum of Two Integers", JOptionPane.INFORMATION_MESSAGE );

10. Atenção ao trecho... • JOptionPane.showMessageDialog( null, "The sum is " + sum, "Sum of Two Integers", JOptionPane.WARNING_MESSAGE );

11. Figura 2 | Constantes JOptionPanestatic para diálogos de mensagem.

12. 3. Visão geral de componentes Swing • Componentes Swing GUI: • Declarado no pacote javax.swing. • Fazem parte das Java Foundation Classes (JFC): bibliotecas do Java para desenvolvimento de GUI para múltiplas plataformas. • JFC suporta: • definição de botões, menus, etc. • desenho 2D (java.awt.geom) • funcionalidades drag-and-drop (java.awt.dnd) • API com acessibilidade a usuários (javax.accessibility)

13. Swing versus AWT • Abstract Window Toolkit (AWT): • Precursor do Swing. • Declarado no pacote java.awt. • Não fornece aparência e comportamento consistentes para diversas plataformas.

15. Figura 3 | Alguns componentes GUI básicos. 15

16. Construindo um JLabel • /* Cria um label com texto */ • JLabel label1 = new JLabel("Label1: Apenas Texto"); • /* Cria um label com texto e imagem */ • JLabel label2 = new JLabel("Label2: Imagem e texto", • new ImageIcon("javalogo.gif"), JLabel.CENTER); • label2.setVerticalTextPosition(JLabel.BOTTOM); • label2.setHorizontalTextPosition(JLabel.CENTER);

17. Construindo um JTextField • /* Cria um campo de nome */ • JTextField campoNome = new JTextField(10); • JLabel labelNome = new JLabel ("Nome: "); • labelNome.setLabelFor (campoNome); • /* Cria um campo de email */ • JTextField campoEmail = new JTextField(10); • JLabel labelEmail = new JLabel ("Email: "); • labelEmail.setLabelFor (campoEmail); • labelEmail.setDisplayedMnemonic('E'); // Alt-e

18. Construindo um JTextField • /* Cria um campo de nome */ • JTextField campoNome = new JTextField(10); • JLabel labelNome = new JLabel ("Nome: "); • labelNome.setLabelFor (campoNome); • /* Cria um campo de email */ • JTextField campoEmail = new JTextField(10); • JLabel labelEmail = new JLabel ("Email: "); • labelEmail.setLabelFor (campoEmail);

19. Construindo um JButton • JButton botao1 = new JButton ("Botão Desabilitado"); • botao1.setEnabled(false); • botao1.setToolTipText("Exemplo de um botão de texto"); • /* Cria um botao com texto e imagem */ • JButton botao2 = new JButton("Botão Habilitado", new • ImageIcon("javalogo.gif")); • botao2.setToolTipText("Botão de texto e imagem"); • botao2.setPressedIcon(new ImageIcon("javalogo2.gif"));

20. Construindo um JButton • JButton botao1 = new JButton ("Botão Desabilitado"); • botao1.setEnabled(false); • botao1.setToolTipText("Exemplo de um botão de texto"); • /* Cria um botao com texto e imagem */ • JButton botao2 = new JButton("Botão Habilitado", new • ImageIcon("javalogo.gif")); • botao2.setToolTipText("Botão de texto e imagem"); • botao2.setPressedIcon(new ImageIcon("javalogo2.gif"));

21. 4. Exibição de texto e imagens em uma janela • Janelas: • Componentes não flutuam na tela, são organizados dentro de janelas; • O sistema operacional fornece a borda e a barra de título; • Java oferece a parte interna, onde podemos dispor nossos componentes.

22. JFrame: minha primeira Janela import javax.swing.*; public class PrimeiraJanela { public static void main (String args[]) { JFrame janela = new JFrame("Construindo minha primeira janela"); janela.setBounds(50, 100, 400, 150); // Seta posição e tamanho janela.setDefaultCloseOperation( WindowConstants.DISPOSE_ON_CLOSE); janela.setVisible(true); // Exibe a janela } }

23. JFrame: minha primeira Janela

25. Containers e Componentes • Uma interface gráfica em Java é baseada em dois elementos: • Containers: servem para agrupar e exibir outros componentes • Componentes: botões, labels, scrollbars, etc. • Dessa forma, todo programa que ofereça uma interface vai possuir pelo menos um container, que pode ser: • JFrame: janela principal do programa • JDialog: janela para diálogos • JApplet: janela para Applets

26. Containers e Componentes Para construirmos uma interface gráfica em JAVA, adicionamos componentes (Botões, Menus, Textos, Tabelas, Listas, etc.) sobre a área da janela. Por essa razão a área da janela é um container, ou seja, um elemento capaz de armazenar uma lista de componentes. Logo, os containers possuem os componentes 26

27. Containers e Componentes 27

28. Especificando o layout • Organização dos contêineres: • Determina onde os componentes são colocados no contêiner. • Feita no Java com gerenciadores de layout. • Um dos quais é a classe FlowLayout. • Para incluir componentes GUI em uma janela (JFrame) é necessário um conteiner • O conteiner mais simples é o JPanel.

29. Exemplo usando JPanel import javax.swing.JFrame; import javax.swing.JPanel; public class Cont extends JFrame{ public Cont (String titulo){ super(titulo); setSize(250, 200); } public static void main(String[] args) { Cont janela = new Cont("Conteiner usando frame!"); JPanel painel = new JPanel(); janela.setContentPane(painel); //criando o conteiner janela.setVisible(true); } } 29

30. Vamos analisar o exemplo abaixo: import javax.swing.*; class SimpleFrame { public static void main(String args[ ]) { JFrame frame = new JFrame("Aplicação Swing"); JButton but = new JButton("Eu sou um botão Swing"); JLabel texto = new JLabel("Numero de cliques no botão: 0"); JPanel painel = new JPanel( ); painel.add(but); painel.add(texto); frame.getContentPane( ).add(painel); frame.pack( ); frame.show( ); } } 30

31. Entendendo Layouts GUI em Java JAVA são construídas na bom base em Components a Containers. Os Containers são responsáveis então por manter os componentes visíveis, repassar os eventos, etc. Como a filosofia da linguagem JAVA é de que os programas sejam extremamente portáveis, a filosofia da interface visa também ser extremamente adaptável. 31

32. Entendendo Layouts É possível definir seus próprios Layouts, mas a linguagem oferece um conjunto de Layouts básicos que simplificam o trabalho. O arranjo dos componentes no container é gerenciado por um LayoutManager A vantagem da existência de um LayoutManager é que a apresentação dos componentes se adapta quando do redimensionamento da janela A desvantagem é o pouco domínio que o programador tem da posição dos componentes com alguns LayoutManagers 32

33. FlowLayouts Os componentes são distribuídos da esquerda para a direita e de cima para baixo Panel c =new Panel( ); c.add(new Button("1")); c.add(new TextField(9)); c.add(new Button("dois")); c.add(new Button("três")); 33

34. GridLayout Similar ao FlowLayout, mas cada componente é alocado em uma célula de igual tamanho. Permite definir um vetor ou matriz de células nas quais os componentes são alocados. Panel c =new Panel(); c .setLayout(new GridLayout(2,2)); c.add(new Button("um")); c.add(new TextField(5)); c.add(new Button("dois")); c.add(new Button("três")); Divide a área em uma grade Dispõe os elementos da esquerda para a direita e de cima para baixo Todos tem o mesmo tamanho 34

35. public class AplicacaoGrafica extends Frame{ private Button butOK; private TextField campo1,campo2,resp; private Label texto1,texto2; public AplicacaoGrafica( ){ super("Aplicacao grafica simples"); addWindowListener(new AppListener( )); texto1 = new Label("Nome:"); campo1 = new TextField(15); texto2 = new Label("Fone:"); campo2 = new TextField(15); butOK = new Button("OK"); resp = new TextField(15); setLayout(new GridLayout(3,2)); add(texto1); add(campo1); add(texto2); add(campo2); add(butOK); add(resp); butOK.addActionListener(new ActionListener(){ public void actionPerformed(ActionEvent e){ resp.setText(campo1.getText()+" "+campo2.getText()); } }); pack( ); } } Exemplo 35

36. BorderLayout Divide o container em 05 seções: Norte, Sul, Leste, Oeste, Centro 36

37. Exemplo • import java.awt.*; • import javax.swing.*; • public class Bordas { • public Bordas (){ • BorderLayout layout = new BorderLayout(); • JPanel painel = new JPanel(layout); • painel.add(BorderLayout.CENTER, new JButton(”UFERSA")); • painel.add(BorderLayout.NORTH, new JButton(”POO")); • painel.add(BorderLayout.SOUTH, new JButton(”BD")); • painel.add(BorderLayout.EAST, new JButton(”ED")); • painel.add(BorderLayout.WEST, new JButton(”SO"));

38. Exemplo • JFrame frame = new JFrame("Testanto Interface com BorderLayout"); • frame.setContentPane(painel); • frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); • frame.setSize(300, 250); • frame.setVisible(true); • } • public static void main(String[] args){ • Bordas e = new Bordas(); • } • }

39. Mais um exemplo • import java.awt.*; • import java.awt.event.*; • import javax.swing.*; • public class PanelDemo extends JFrame { • private JPanel buttonPanel; • private JButton buttons[ ]; • public PanelDemo( ) • { • super( "Panel Demo" ); • Container c = getContentPane(); • buttonPanel = new JPanel(); • buttons = new JButton[ 5 ];

40. Mais um exemplo • buttonPanel.setLayout( new GridLayout( 1, buttons.length ) ); • for ( int i = 0; i < buttons.length; i++ ) { • buttons[ i ] = new JButton( "Botão " + (i + 1) ); • buttonPanel.add( buttons[ i ] ); • } • c.add( buttonPanel, BorderLayout.SOUTH ); • setSize( 425, 150 ); • show( ); • } • public static void main( String args[] ) • { • PanelDemo app = new PanelDemo( ); • app.addWindowListener( • new WindowAdapter() { • public void windowClosing( WindowEvent e ) • { System.exit( 0 ); } } ); • } }

41. 5. Campos de texto e uma introdução ao tratamento de eventos com classes aninhadas • GUIs são baseadas em evento: • Uma interação com o usuário cria um evento. • Eventos comuns são clicar em um botão, digitar em um campo de texto, selecionar um item em um menu, fechar uma janela e mover o mouse. • O evento causa uma chamada a um método que chamou um handler de evento.

42. Exemplo simples de Eventos • import java.awt.event.WindowAdapter; • import java.awt.event.WindowEvent; • import javax.swing.JFrame; • import javax.swing.JPanel; • public class LabelTest extends JFrame{ • public LabelTest(String titulo){ • super(titulo); • setSize(250, 200); • addWindowListener(new WindowAdapter(){ • public void windowClosing(WindowEvent e){ • System.exit(0); • } • }); • } • }

43. Exemplo simples de Eventos • public static void main(String[] args) { • LabelTest janela = new LabelTest("Meu frame!"); • JPanel painel = new JPanel(); • janela.setContentPane(painel); //criando o conteiner • janela.setVisible(true); • } • }

44. 5. Campos de texto e uma introdução ao tratamento de eventos com classes aninhadas. (Continuação) • Classe JTextComponent: • Superclasse de JTextField. • Superclasse de JPasswordField. • Adiciona o caractere de eco para ocultar a entrada de texto no componente. • Permite que o usuário insira texto no componente quando o componente tem o foco da aplicação.

45. Cria um novo JTextField Resumo • TextFieldFrame.java • (1 de 3)

46. Cria um novo JTextField Cria um novo JTextField não editável Cria um novo JPasswordField Criar um handler de evento Registra um handler de evento Cria uma classe de handler de evento implementando a interface ActionListener Declara o método actionPerformed Resumo • TextFieldFrame.java • (2 de 3)

47. Testa se a origem do evento é o primeiro campo de texto Obtém texto a partir do campo de texto Testa se a origem do evento é o segundo campo de texto Obtém texto a partir do campo de texto Testa se a origem do evento é o terceiro campo de texto Obtém texto a partir do campo de texto Testa se a origem do evento é o campo de senha Obtém senha a partir do campo de senha Resumo • TextFieldFrame.java • (3 de 3)

48. Resumo • TextFieldTest.java • (1 de 2)

49. Resumo • TextFieldTest.java • (2 de 2)

50. Exemplo de JDialog • public class TelaModal extends JFrame • { • JDialog primeira; • JFrame telacadastro; • JButton bcadastrar, boutrosdados; • private static final long serialVersionUID = 1L; • public TelaModal() • { • //TELA PRINCIPAL • super("Tela Principal"); • this.setLayout(null); • this.setSize(700,500); • this.setLocationRelativeTo(null); • this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);//sai e fecha • this.setVisible(true);