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

Apresentação em tema: "1 Interface Gráfica em Java Profa. Dra. Angélica Félix de Castro."— Transcrição da apresentação:

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

2 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 2005 by Pearson Education do Brasil 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 4 Figura 1 | Janela do Internet Explorer com componentes GUI. botãomenusbarra de títulobarra de menuscaixa de combinação barras de rolagem

5 5 2. Entrada/saída baseada em GUI simples com JOptionPane 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 Diálogo de entrada exibido nas linhas 12–13 Diálogo de entrada exibido nas linhas 22–23 Campo de texto em que o usuário digita um valor Prompt para o usuário Quando o usuário clica em OK, showInputDialog retorna ao programa o 100 digitado pelo usuário como uma String. O programa deve converter a String em um int barra de título 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 11 Figura 2 | Constantes JOptionPane static 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 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.

14

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

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

24

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

27 27 Containers e Componentes

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

30 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( ); }

31 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.

32 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

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

34 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

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( ); } } 35 Exemplo

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

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 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 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 45 Resumo TextFieldFrame.java (1 de 3) Cria um novo JTextField

46 46 Resumo TextFieldFrame.java (2 de 3) 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

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

48 48 Resumo TextFieldTest.java (1 de 2)

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

51 Exemplo de JDialog bcadastrar = new JButton("Cadastrar"); bcadastrar.setBounds(20,50,100,20); this.add(bcadastrar); bcadastrar.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent d) { telacadastro.setVisible(true); } }); //TELA DE CADASTRO telacadastro = new JFrame("Cadastro"); telacadastro.setLayout(null);

52 Exemplo de JDialog telacadastro.setSize(400, 250); telacadastro.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);//apenas retira-se da memoria se fecha-se telacadastro.setLocationRelativeTo(null); boutrosdados = new JButton("Proximo >>"); boutrosdados.setBounds(20,20,100,20); telacadastro.add(boutrosdados); boutrosdados.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent d) { primeira.setVisible(true); } });

53 Exemplo de JDialog //CRIAMOS UMA TELA primeira = new JDialog(); primeira.setTitle("Outros dados"); //primeira.setModal(true); primeira.setAlwaysOnTop(true);//sempre no topo primeira.setSize(200,200); primeira.setLocationRelativeTo(null);

54 Exemplo de JDialog WindowListener EventosWindows = (new WindowAdapter()//Cria um evento de Janela para fecha-la { public void windowClosing(WindowEvent ml) { telacadastro.setVisible(false); telacadastro.dispose(); } }); primeira.addWindowListener(EventosWindows); } public static void main(String args[]) { new TelaModal(); }

55

56

57

58 Applets em Java O que são Applets? Applets são aplicações Java que permitem estender as funcionalidades da páginas da Internet. As applets são executadas juntamente com um browser ou pelo appletviewer (programa do JDK para rodar applets). As applets são chamdas por um documento HTML.

59 Passo 1: Faz o código Java import java.applet.*; import java.awt.Graphics; public class TesteApplet extends Applet { public void paint(Graphics g) { g.drawString("Oi gente!!!", 50, 25); }

60 Passo 2: Faz seu código em HTML usando APPLET Programa testando Applet em Java Página com Applet Java <applet code = "TesteApplet.class" width = 250 height = 250 name = "TesteApplet">

61

62 Usando GUI no NetBeans

63 Permitem que possamos ver o código-fonte da classe ou a visão gráfica de seus componentes GUI Provêem acesso aos comandos comuns para manipulação de GUIs, tais como escolher entre modo seleção e conexão, alinhar componentes, e visualizar formulários Provê uma representação de todos os componentes GUI de uma aplicação, como uma hierarquia em árvore

64 Trabalho para próxima quinta-feira: Implementar algo bastante interessante usando Applets Java (Java + HTML) para apresentar aos colegas próxima quinta-feira, dia 26.11. Ponto Extra: 1,0