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

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

Figura 1 | Janela do Internet Explorer com componentes GUI.

botão menus barra de título barra de menus caixa de combinação

barrasde rolagem

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.

3 import javax.swing.JOptionPane;

4

5 public class Addition

6 {

7 public static void main( String args[] )

8 {

10 String firstNumber =

11 JOptionPane.showInputDialog( "Enter first integer" );

12 String secondNumber =

13 JOptionPane.showInputDialog( "Enter second integer" );

14

16 int number1 = Integer.parseInt( firstNumber );

17 int number2 = Integer.parseInt( secondNumber );

18

19 int sum = number1 + number2;

20

22 JOptionPane.showMessageDialog( null, "The sum is " + sum,

23 "Sum of Two Integers", JOptionPane.PLAIN_MESSAGE );

24 }

25 }

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

Diálogo de entrada exibido nas linhas 10–11



Campo de texto em queo usuário digita umvalor

Prompt para o usuário

Quando o usuárioclica 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)

Atenção ao trecho...

JOptionPane.showMessageDialog( null,

"The sum is " + sum,

"Sum of Two Integers",

JOptionPane.PLAIN_MESSAGE );





JOptionPane.INFORMATION_MESSAGE );





JOptionPane.WARNING_MESSAGE );

11

Figura 2 | Constantes JOptionPane static para diálogos de mensagem.

Tipo de diálogo de mensagem Ícone Descrição

ERROR_MESSAGE

Um diálogo que indica um erro para o usuário.

INFORMATION_MESSAGE

Um diálogo com uma mensagem informativa para o usuário.

WARNING_MESSAGE

Um diálogo que adverte o usuário de um problema potencial.

QUESTION_MESSAGE

Um diálogo que impõe uma pergunta ao usuário. Normalmente, esse diálogo exige uma resposta, como clicar em um botão Yes ou No.

PLAIN_MESSAGE Nenhum ícone

Um diálogo que contém uma mensagem, mas nenhum ícone..

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.

Componente Descrição

JLabel Exibe texto não-editável ou ícones.

JTextField Permite ao usuário inserir dados do teclado. Também pode ser utilizado para exibir texto editável ou não editável.

JButton Desencadeia um evento quando o usuário clicar nele com o mouse.

JCheckBox Especifica uma opção que pode ser ou não selecionada.

JComboBox Fornece uma lista drop-down de itens a partir da qual o usuário pode fazer uma seleção clicando em um item ou possivelmente digitando na caixa.

JList Fornece uma lista de itens a partir da qual o usuário pode fazer uma seleção clicando em qualquer item na lista. Múltiplos elementos podem ser selecionados.

JPanel Fornece uma área em que os componentes podem ser colocados e organizados. Também pode ser utilizado como uma área de desenho para imagens gráficas.

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

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

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

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

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.

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

}

}

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


• 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


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

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

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

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

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

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

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

BorderLayout

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

Exemplo

import java.awt.*;


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

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

}

}

Mais um exemploimport java.awt.*;

import java.awt.event.*;


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

Mais um exemplobuttonPanel.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.

Exemplo simples de Eventosimport 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);

}

});

}

}

Exemplo simples de Eventospublic 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

Resumo

TextFieldFrame.java

(1 de 3)

1 // Fig. 11.9: TextFieldFrame.java

2 // Demonstrando a classe JTextField.

3 import java.awt.FlowLayout;

4 import java.awt.event.ActionListener;

5 import java.awt.event.ActionEvent;

6 import javax.swing.JFrame;

7 import javax.swing.JTextField;

8 import javax.swing.JPasswordField;

9 import javax.swing.JOptionPane;

10

11 public class TextFieldFrame extends JFrame

12 {

13 private JTextField textField1; // campo de texto com tamanho configurado

14 private JTextField textField2; // campo de texto construído com texto

15 private JTextField textField3; // campo de texto com texto e tamanho

16 private JPasswordField passwordField; // campo de senha com texto

17

18 // Construtor TextFieldFrame adiciona JTextFields a JFrame

19 public TextFieldFrame()

20 {

21 super( "Testing JTextField and JPasswordField" );

22 setLayout( new FlowLayout() ); // configura layout de frame

23

24 // constrói textfield com 10 colunas

25 textField1 = new JTextField( 10 );

26 add( textField1 ); // adiciona textField1 a JFrame

27

Cria um novo JTextField

46

Resumo

TextFieldFrame.java

(2 de 3)

28 // constrói campo de texto com texto padrão

29 textField2 = new JTextField( "Enter text here" );

30 add( textField2 ); // adiciona textField2 a JFrame

31

32 // constrói textfield com texto padrão e 21 colunas

33 textField3 = new JTextField( "Uneditable text field", 21 );

34 textField3.setEditable( false ); // desativa a edição

35 add( textField3 ); // adiciona textField3 ao JFrame

36

37 // constrói passwordfield com o texto padrão

38 passwordField = new JPasswordField( "Hidden text" );

39 add( passwordField ); // adiciona passwordField a JFrame

40

41 // registra handlers de evento

42 TextFieldHandler handler = new TextFieldHandler();

43 textField1.addActionListener( handler );



46 passwordField.addActionListener( handler );

47 } // fim do construtor TextFieldFrame

48

49 // classe interna private para tratamento de evento

50 private class TextFieldHandler implements ActionListener

51 {

52 // processa eventos de campo de texto

53 public void actionPerformed( ActionEvent event )

54 {

55 String string = ""; // declara string a ser exibida

56

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

Resumo

TextFieldFrame.java

(3 de 3)

57 // usuário pressionou Enter no JTextField textField1

58 if ( event.getSource() == textField1 )

59 string = String.format( "textField1: %s",

60 event.getActionCommand() );

61


63 else if ( event.getSource() == textField2 )



66


68 else if ( event.getSource() == textField3 )



71

72 // usuário pressionou Enter no JTextField passwordField

73 else if ( event.getSource() == passwordField )

74 string = String.format( "passwordField: %s",

75 new String( passwordField.getPassword() ) );

76

77 // exibe conteúdo do JTextField

78 JOptionPane.showMessageDialog( null, string );

79 } // fim do método actionPerformed

80 } // fim da classe TextFieldHandler interna private

81 } // fim da classe TextFieldFrame

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

Resumo

TextFieldTest.java

(1 de 2)

1 // Fig. 11.10: TextFieldTest.java

2 // Testando TextFieldFrame.

3 import javax.swing.JFrame;

4

5 public class TextFieldTest

6 {

7 public static void main( String args[] )

8 {

9 TextFieldFrame textFieldFrame = new TextFieldFrame();

10 textFieldFrame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );

11 textFieldFrame.setSize( 325, 100 ); // configura tamanho do frame

12 textFieldFrame.setVisible( true ); // exibe o frame

13 } // fim de main

14 } // fim da classe TextFieldTest

49

Resumo

TextFieldTest.java

(2 de 2)

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

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

Exemplo de JDialogtelacadastro.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);

}

});

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

Exemplo de JDialogWindowListener 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();

}

}

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.

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

}

}

Passo 2: Faz seu código em HTML usando APPLET

<TITLE> Programa testando Applet em Java </TITLE>

<h1> Página com Applet Java</h1>

<applet

code = "TesteApplet.class"

width = 250

height = 250

name = "TesteApplet">

</applet>

Usando GUI no NetBeans

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

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

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

Documents

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