Este documento apresenta um estudo aplicado sobre interfaces gráficas em ambientes heterogêneos usando ferramentas de autoria. O objetivo é realizar um estudo prático de produção de interfaces em web, desktop e mobile. Inclui informações sobre componentes Swing, gerenciadores de layout e tratamento de eventos em Java.

1. Noções de Design Gráfico
Unidade IV – Estudo aplicado em
ambientes heterogêneos
Prof. Nécio de Lima Veras
http://lattes.cnpq.br/8284657916723590

2. Objetivo
Realizar estudo prático de produção de
interfaces em ambientes heterogêneos (web,
desktop e móvel) usando ferramentas de
autoria.
Prof. Nécio de Lima Veras
http://lattes.cnpq.br/8284657916723590
Página da disciplina na Web

3. Interfaces gráficas usando Swing
Adaptado por: Nécio de Lima Veras
necio.veras@ifce.edu.br
Objetivo: revisar os comandos da API Swing
Créditos: Regis Pires Magalhães – regis@ifpi.edu.br
Prof. Nécio Veras

4. Leitura recomendada
http://java.sun.com/docs/books/tutorial/ui/feature
s/compWin.html
Prof. Nécio Veras

5. Parte I – Fundamentos do Swing
Prof. Nécio Veras

6. Interfaces gráficas em
Java
● As bibliotecas gráficas oficiais incluídas no
Java são: AWT e Swing;
● Outra biblioteca muito usada é o SWT,
desenvolvida pela IBM e usada no IDE
Eclipse;
● A complexidade do Swing deve-se ao máximo
de portabilidade de busca atingir;
● A aplicação se comporta da mesma forma,
independente do sistema operacional em uso;
Prof. Nécio Veras

7. AWT e Swing
● AWT (Abstract Window Toolkit)
– Provê facilidades para interface de usuário (IU) em Java.
– Insuficiente para suportar interfaces de usuário complexas.
● Swing
– Conjunto de componentes de UI muito mais completo, flexível e
portável do que o provido pela AWT.
– Conjunto de componentes gráficos customizáveis cuja aparência
(look-and-feel - L&F) pode ser alterada em tempo de execução.
– Não substitui a AWT.
– Construído no topo das classes que compõem o núcleo das
bibliotecas AWT.
Prof. Nécio Veras

8. Exemplo
import javax.swing.JOptionPane;
public class FSimples {
public static void main(String[] args) {
JOptionPane.showMessageDialog(null, "Oi");
}
}
Prof. Nécio Veras

9. Aparência - Look & Feel
● Identificando a aparência usada...
import javax.swing.JOptionPane;
import javax.swing.UIManager;
public class FSimples {
public static void main(String[] args) {
JOptionPane.showMessageDialog(null, UIManager.getLookAndFeel());
}
}
Prof. Nécio Veras

10. Aparência - Look & Feel
● Mudando a aparência...
import javax.swing.JOptionPane;
import javax.swing.UIManager;
public class FSimples {
public static void main(String[] args) {
JOptionPane.showMessageDialog(null,
"Aparência Padrão: " + UIManager.getLookAndFeel());
try {
UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
} catch (Exception e) {
e.printStackTrace();
}
JOptionPane.showMessageDialog(null,
"Aparência do Sistema: " + UIManager.getLookAndFeel());
}
} Prof. Nécio Veras

11. Aparência - Look & Feel
● Algumas aparências possíveis:
– UIManager.getCrossPlatformLookAndFeelClassName()
● Funciona em todas as plataformas (Java L&F)
● Java Look and Feel
– “javax.swing.plaf.metal.MetalLookAndFeel”
– UIManager.getSystemLookAndFeelClassName()
● Aparência para a plataforma em uso
● No Linux: GTK look and feel
– “com.sun.java.swing.plaf.gtk.GTKLookAndFeel”
● No Windows: Windows look and feel
– "com.sun.java.swing.plaf.windows.WindowsLookAndFeel"
– Outras aparências podem ser instaladas.
Prof. Nécio Veras

12. Componentes AWT
● Component
● Container
● Panel
● Window
● Dialog
● Frame
● Graphics
● Outros:
Prof. Nécio Veras

13. Exemplo
import java.awt.*;
public class FrameDemo {
public static void main(String args[]) {
Frame f = new Frame();
f.setSize(100, 100);
f.setVisible(true);
}
}
Prof. Nécio Veras

14. Exemplo
import java.awt.*;
public class PanelDemo extends Panel {
public PanelDemo() {
this.setBackground(Color.black);
}
public void paint(Graphics g) {
g.setColor(new Color(0, 255, 0)); // verde
g.setFont(new Font("Helvetica", Font.PLAIN, 16));
g.drawString("Hello GUI World!", 30, 100);
g.setColor(new Color(1.0f, 0, 0)); // vermelho
g.fillRect(30, 100, 150, 10);
}
public static void main(String args[]) {
Frame f = new Frame("Testing Graphics Panel");
PanelDemo painel = new PanelDemo();
f.add(painel);
f.setSize(600, 300);
f.setVisible(true);
}
}
Prof. Nécio Veras

15. Exemplo
import java.awt.*;
import javax.swing.*;
public class JDesenho extends JPanel{
protected void paintComponent(Graphics g) {
g.setColor(Color.white);
g.fillRect(0, 0, 500, 500);
g.setColor(Color.darkGray);
g.fillOval(150, 200, 200, 40);
g.setColor(Color.red);
g.fillOval(100, 80, 150, 150);
g.setColor(Color.pink);
g.fillOval(120, 105, 30, 30);
g.setColor(Color.blue);
g.setFont(new Font("Arial Bold", Font.PLAIN,
36));
g.drawString("Java Swing", 30, 50);
}
public static void main(String args[]) {
JFrame f = new JFrame();
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
f.add(new JDesenho());
f.setSize(400, 300);
f.setVisible(true);
}
}
Prof. Nécio Veras

16. Componentes Swing
● Containers de alto nível (top-level):
– JFrame
– JApplet
– JDialog
Prof. Nécio Veras

17. Componentes Swing
●
JComponent
– Classe raiz para todos os componentes Swing, excluindo containers de
alto-nível.
●
JTextField
– Permite a edição de uma única linha de texto.
●
JOptionPane
– Fornece uma maneira fácil de exibir caixas de diálogo pop-up.
● JFileChooser
– Permite ao usuário que selecione um arquivo.
● JColorChooser
– Permite ao usuário selecionar uma cor.
Prof. Nécio Veras

18. Componentes Swing
● Botão – JButton
– Criação de botões com ícones
● ImageIcon
– Uso de mnemonic
– Habilitação e desabilitação
– Uso de ações
– Registro de action listener
– Configuração de tooltip
– Texto de botões em HTML
Prof. Nécio Veras

19. Componentes Swing
● Caixa de Seleção - JCheckBox
– Uso de mnemonic
– Marcar e desmarcar
– Registro de action listener
● Modificação de estado
Prof. Nécio Veras

20. Componentes Swing
● Botão de Opção - JRadioButton
– Uso de mnemonic
– Usado em conjunto com Grupo de Botões –
ButtonGroup – para que apenas um item possa
ser selecionado.
– Registro de action listener
● Modificação de opção
Prof. Nécio Veras

21. Componentes Swing
● Painel com Abas - JTabbedPane
– Adição de abas / guias
– Modificação de aba selecionada
Prof. Nécio Veras

22. Componentes Swing
● Divisão de Painel - JSplitPane
– Usado para dividir dois componentes que podem ser
redimensionados interativamente pelo usuário.
– Configuração geral e orientação do split
– Posicionamento do divisor
– Restrição de tamanho
do divisor
– SplitPane aninhados
Prof. Nécio Veras

23. Componentes Swing
● Tabela - JTable
– Cria uma tabela para apresentar dados tabulares
● Muito utilizado para mostrar tabelas detalhe de tabelas
mestre
– Lado N de relacionamento 1:N
– Pode utilizar diversos modelos de dados
Prof. Nécio Veras

24. Componentes Swing
● Tabela - JTable
– Alta flexibilidade para definir a aparência da tabela
Prof. Nécio Veras

25. Exemplo
import java.awt.FlowLayout;
import javax.swing.*;
public class FTeste {
public static void main(String[] args) {
JFrame janela = new JFrame("Simples");
janela.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
janela.setLayout(new FlowLayout());
JLabel rotulo = new JLabel();
rotulo.setText("Java Swing");
janela.add(rotulo);
JButton botao = new JButton();
botao.setText("Botão Inútil");
janela.add(botao);
janela.pack();
janela.setVisible(true);
}
} Prof. Nécio Veras

26. Experiências e Exercícios
● O que acontece de diferente se as linhas a seguir
não estiverem no código?
● janela.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
● janela.setLayout(new FlowLayout());
● janela.pack();
● Para que elas servem?
● Exercício:
– Faça um formulário de cadastro qualquer usando
componentes básicos vistos anteriormente, tais como:
jLabel, jButton, jTextField, jCheckBox, jRadioButton e
jTable, por exemplo. Prof. Nécio Veras

27. Parte II – Trabalhando com controle
de Layouts e tratamentos de
Eventos
Prof. Nécio de Lima Veras
http://lattes.cnpq.br/8284657916723590

28. Gerenciadores de Layout –
Layout Managers
● Determinam a disposição e o tamanho dos
componentes no contêiner.
Prof. Nécio Veras

29. Gerenciadores de Layout –
Layout Managers
● BorderLayout
– Layout default para objetos Window e suas
subclasses.
– Posiciona os componentes em 5 áreas
● Norte, sul, leste, oeste e centro
Prof. Nécio Veras

30. Exemplo
import java.awt.BorderLayout;
import javax.swing.JButton;
import javax.swing.JFrame;
public class BorderLayoutDemo {
public static void main(String args[]) {
JFrame frm = new JFrame();
frm.setLayout(new BorderLayout(10, 10));
frm.add(new JButton("NORTH"), BorderLayout.NORTH);
frm.add(new JButton("SOUTH"), BorderLayout.SOUTH);
frm.add(new JButton("EAST"), BorderLayout.EAST);
frm.add(new JButton("WEST"), BorderLayout.WEST);
frm.add(new JButton("CENTER"), BorderLayout.CENTER);
frm.setSize(200, 200);
frm.setVisible(true);
}
}
Prof. Nécio Veras

31. Gerenciadores de Layout –
Layout Managers
● FlowLayout
– Gerenciador padrão para Panel e suas
subclasses.
– Posiciona os componentes da esquerda para a
direita e de cima para baixo, começando no canto
superior esquerdo.
Prof. Nécio Veras

32. Exemplo
import java.awt.FlowLayout;
import javax.swing.JButton;
import javax.swing.JFrame;
public class FlowLayoutDemo {
public static void main(String args[]) {
JFrame frm = new JFrame();
frm.setLayout(new FlowLayout(FlowLayout.RIGHT, 10, 10));
frm.add(new JButton("ONE"));
frm.add(new JButton("TWO"));
frm.add(new JButton("THREE"));
frm.setSize(180, 120);
frm.setVisible(true);
}
}
Prof. Nécio Veras

33. Gerenciadores de Layout –
Layout Managers
● BoxLayout
– Permite posicionar elementos de forma linear
● De cima para baixo
● Da esquerda para a direita
Prof. Nécio Veras

34. Gerenciadores de Layout –
Layout Managers
● GridLayout
– Dispõe os componentes em um grid de linhas e
colunas.
– Cada componente ocupa o espaço exato de uma
célula.
– Posiciona os componentes da esquerda para a
direita e de cima para baixo.
Prof. Nécio Veras

35. Exemplo
import java.awt.GridLayout;
import javax.swing.JButton;
import javax.swing.JFrame;
public class GridLayoutDemo {
public static void main(String args[]) {
JFrame frm = new JFrame();
frm.setLayout(new GridLayout(2, 3, 4, 4));
frm.add(new JButton("ONE"));
frm.add(new JButton("TWO"));
frm.add(new JButton("THREE"));
frm.add(new JButton("FOUR"));
frm.add(new JButton("FIVE"));
frm.setSize(200, 200);
frm.setVisible(true);
}
}
Prof. Nécio Veras

36. Gerenciadores de Layout –
Layout Managers
● GridBagLayout
– Layout mais flexível e mais complexo do Swing
– Dispõe os componentes em um grid de linhas e
colunas
● Componentes podem se estender a várias linhas ou
colunas
Prof. Nécio Veras

37. Gerenciadores de Layout –
Layout Managers
● GroupLayout
– Nativo no Swing a partir do Java 6.
– Agrupa componentes hierarquicamente para
posicioná-los em um contêiner.
– Foi projetado especialmente para uso em
construtores de tela, mas pode ser codificado
manualmente.
– Suporta 2 tipos de agrupamentos:
● Sequencial – elementos são posicionados
sequencialmente, um após o outro.
● Paralelo – Alinha os elementos em 1 de 4 maneiras
possíveis. Prof. Nécio Veras

38. Gerenciadores de Layout –
Layout Managers
● O GroupLayout permite:
– Alinhar componentes horizontal e verticalmente;
– Inserir componentes inteligentemente;
– Alinhar a margem dos componentes;
– Esticar os componentes para esquerda, direita ou ambos;
– Esticar os componentes para o alto, baixo ou ambos;
– Definir o alinhamento, tamanho e espaçamento.
Prof. Nécio Veras

39. Eventos
Prof. Nécio Veras

40. Eventos
● Implementação de manipuladores de eventos
– Declaração de classe que implementa a interface para
tratamento de eventos do tipo requerido.
– Código que implementa os métodos definidos na interface
listener.
– Registro de instâncias de classe manipuladoras de eventos
como ouvintes para o evento do componente desejado.
● Adição de ouvintes através de métodos como:
– addActionListener
– addWindowListener
Prof. Nécio Veras

41. Eventos
● Exemplos de Ouvintes usados no Swing:
– ActionListener
● Cliques em botões, Enter em campos, cliques em
menus
– WindowListener
● Manipulação de frames
– MouseListener e MouseMotionListener
● Pressionamento de botão do mouse sobre
componentes
● Movimentação do mouse sobre componentes
Prof. Nécio Veras

42. Implementando Ouvinte
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.JOptionPane;
public class MeuOuvinte implements ActionListener {
public void actionPerformed(ActionEvent e) {
JOptionPane.showMessageDialog(null, "Ação!!!");
}
}
Prof. Nécio Veras

43. Registrando um Ouvinte
import java.awt.FlowLayout;
import javax.swing.*;
public class FTeste {
public static void main(String[] args) {
JFrame janela = new JFrame("Simples");
janela.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
janela.setLayout(new FlowLayout());
JLabel rotulo = new JLabel();
rotulo.setText("Java Swing");
janela.add(rotulo);
JButton botao = new JButton();
botao.setText("Botão Útil");
botao.addActionListener(new MeuOuvinte());
janela.add(botao);
janela.pack();
janela.setVisible(true);
}
}
Prof. Nécio Veras

44. Registrando e Implementando
Ouvinte através de uma classe
interna estática
import java.awt.FlowLayout;
import java.awt.event.*;
import javax.swing.*;
public class FTeste {
public static void main(String[] args) {
final JFrame janela = new JFrame("Simples");
janela.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
janela.setLayout(new FlowLayout());
JLabel rotulo = new JLabel();
rotulo.setText("Java Swing");
janela.add(rotulo);
JButton botao = new JButton();
botao.setText("Botão Útil");
botao.addActionListener(new MeuOuvinte());
janela.add(botao);
janela.pack();
janela.setVisible(true);
}
public static class MeuOuvinte implements ActionListener {
public void actionPerformed(ActionEvent e) {
JOptionPane.showMessageDialog(null, "Ação!!!");
}
}
}
Prof. Nécio Veras

45. Registrando e Implementando
Ouvinte através de uma classe
interna anônima
import java.awt.FlowLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.*;
public class FTeste {
public static void main(String[] args) {
final JFrame janela = new JFrame("Simples");
janela.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
janela.setLayout(new FlowLayout());
JLabel rotulo = new JLabel();
rotulo.setText("Java Swing");
janela.add(rotulo);
JButton botao = new JButton();
botao.setText("Botão Útil");
botao.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e) {
JOptionPane.showMessageDialog(janela, "Ação!!!");
}
});
janela.add(botao);
janela.pack();
janela.setVisible(true);
}
}
Prof. Nécio Veras

46. Exercício
● Construa uma calculadora simples baseada na interface gráfica abaixo.
● Os resultados devem estar desabilitados.
● Deve haver teclas de atalho para acessar as caixas de texto e os botões.
● Deve haver dicas para explicar as caixas de texto e botões.
●
Os números só devem ser aceitos se forem válidos.
● Dica:
– Botão padrão:
● this.getRootPane().setDefaultButton(jButtonCalcula);
Prof. Nécio Veras