Desenvolvimento de Interfaces Gráficas Ms. Christien L. Rachid FUPAC E-Mail:...

Desenvolvimento de Interfaces Desenvolvimento de Interfaces Gráficas Gráficas

Ms. Christien L. RachidMs. Christien L. RachidFUPACFUPAC

E-Mail: christienrachid@gmail.comE-Mail: christienrachid@gmail.com

ObjetivosObjetivos

• Introduzir o conceito de interfaces gráficasIntroduzir o conceito de interfaces gráficas• Apresentar Swing e AWTApresentar Swing e AWT• Definir o conceito para containers gráficosDefinir o conceito para containers gráficos• Apresentar os principais componentes Apresentar os principais componentes

existentes para a construção de uma existentes para a construção de uma interface gráfica interface gráfica

3

SwingSwing

• Swing – Conjunto de componentes Swing – Conjunto de componentes direcionados para aplicações direcionados para aplicações baseadas em formuláriosbaseadas em formulários

• Swing é parte da JFC (Java Foundation Swing é parte da JFC (Java Foundation Classes)Classes)

4

Swing – CaracterísticasSwing – Características

• Componentes levesComponentes leves– Light-weight

• Arquitetura dos componentesArquitetura dos componentes– MVC

5

ContainersContainers

• Janela, Diálogo ou AppletJanela, Diálogo ou Applet– Jframe, JDialog ou JApplet

• JFrame: janelas primáriasJFrame: janelas primárias• JDialog: janelas secundáriasJDialog: janelas secundárias• JApplet: painel em um área do browserJApplet: painel em um área do browser

6

Top Level ContainerTop Level Containerpublic class SwingApplication { public class SwingApplication {

... ... public static void main(String[] args) { public static void main(String[] args) {

... ... JFrame frame = new JFrame("SwingApplication"); JFrame frame = new JFrame("SwingApplication");

// cria componentes em uma variável contents// cria componentes em uma variável contentsframe.getContentPane().add(contents, frame.getContentPane().add(contents,

BorderLayout.CENTER); BorderLayout.CENTER); //Finish setting up the frame, and show it. //Finish setting up the frame, and show it.

frame.addWindowListener(...); frame.addWindowListener(...); frame.pack(); frame.pack(); frame.setVisible(true); frame.setVisible(true);

} } } }

7

JFrameJFrame

8

JFrameJFrame

public class FrameTester {public class FrameTester { public static void main (String args[]) {public static void main (String args[]) { JFrame f = new JFrame ("JFrame JFrame f = new JFrame ("JFrame Example");Example");

Container c = f.getContentPane();Container c = f.getContentPane(); c.setLayout (new FlowLayout());c.setLayout (new FlowLayout()); for (int i = 0; i < 5; i++) {for (int i = 0; i < 5; i++) { c.add (new JButton ("No"));c.add (new JButton ("No")); c.add (new Button ("Batter"));c.add (new Button ("Batter")); }} c.add (new JLabel ("Swing"));c.add (new JLabel ("Swing")); f.setSize (300, 200);f.setSize (300, 200); f.setVisible(true);f.setVisible(true); }}}}

9

JTabbedPaneJTabbedPane

10

JTabbedPaneJTabbedPane

public class TabbedPanel extends JPanel {public class TabbedPanel extends JPanel { String tabs[] = {"One", "Two", "Three", String tabs[] = {"One", "Two", "Three", "Four"};"Four"};

public JTabbedPane tabbedPane = new public JTabbedPane tabbedPane = new JTabbedPane();JTabbedPane();

public TabbedPanel() {public TabbedPanel() { setLayout (new BorderLayout());setLayout (new BorderLayout()); for (int i=0;i<tabs.length;i++)for (int i=0;i<tabs.length;i++) tabbedPane.addTab (tabs[i], null, tabbedPane.addTab (tabs[i], null, createPane (tabs[i]));createPane (tabs[i]));

tabbedPane.setSelectedIndex(0);tabbedPane.setSelectedIndex(0); add (tabbedPane, add (tabbedPane, BorderLayout.CENTER);BorderLayout.CENTER);

}}

11

JTabbedPaneJTabbedPane

JPanel createPane(String s) {JPanel createPane(String s) { JPanel p = new JPanel();JPanel p = new JPanel(); p.add(new JLabel(s));p.add(new JLabel(s)); return p;return p; }}}}

12

JSplitPaneJSplitPane

13

JScrollPaneJScrollPane

14

public class ScrollPanel extends JPanel {public class ScrollPanel extends JPanel {

public ScrollPanel() {public ScrollPanel() { setLayout(new BorderLayout());setLayout(new BorderLayout()); Icon bigTiger = new Icon bigTiger = new ImageIcon("BigTiger.gif");ImageIcon("BigTiger.gif");

JLabel tigerLabel = new JLabel tigerLabel = new JLabel(bigTiger);JLabel(bigTiger);

JScrollPane scrollPane = JScrollPane scrollPane = new JScrollPane(tigerLabel);new JScrollPane(tigerLabel); add(scrollPane, BorderLayout.CENTER);add(scrollPane, BorderLayout.CENTER); }}}}

JScrollPaneJScrollPane

15

Gerenciadores de LayoutGerenciadores de Layout

• Em inglês (Layout Manager)Em inglês (Layout Manager)• Definem como os componentes gráficos são Definem como os componentes gráficos são

dispostos em um container AWT/SWING.dispostos em um container AWT/SWING.• Os gerenciadores de layout garantem a Os gerenciadores de layout garantem a

consistência visual em diferentes resoluções de tela consistência visual em diferentes resoluções de tela e diferentes plataformas.e diferentes plataformas.

16

• Layout Managers calculam coordenadas automaticamente, baseados em regras

• Eles controlam a posição, características e o comportamento dos componentes nos contêineres

Gerenciadores de Layout

17

Tipos de Gerenciadores de Layout Tipos de Gerenciadores de Layout

• Nulo (Posicionamento absoluto)Nulo (Posicionamento absoluto)• FlowLayoutFlowLayout• BorderLayoutBorderLayout• CardLayoutCardLayout• GridLayoutGridLayout• GridBagLayoutGridBagLayout• Outros (personalizados)Outros (personalizados)

18

Gerenciadores de LayoutGerenciadores de Layout

• Todo container possui um gerenciador de Todo container possui um gerenciador de layout a ele associadolayout a ele associado..

• Um programador pode também criar Um programador pode também criar novos gerenciadores de layout (para novos gerenciadores de layout (para aplicações com necessidades especiais).aplicações com necessidades especiais).

19

Flow LayoutFlow Layout

• À medida que os componentes são À medida que os componentes são acrescentados no container, eles são acrescentados no container, eles são posicionados em uma linha da esquerda posicionados em uma linha da esquerda para a direita.para a direita.

• O tamanho de cada componente do O tamanho de cada componente do container é calculado através do seu container é calculado através do seu tamanho preferido (getPreferedSize).tamanho preferido (getPreferedSize).

• Uma nova linha é automaticamente criada Uma nova linha é automaticamente criada quando falta espaço na linha corrente.quando falta espaço na linha corrente.

20

Grid LayoutGrid Layout

• Componentes são colocados em uma Componentes são colocados em uma matriz com um numero específico de matriz com um numero específico de colunas ou linhas.colunas ou linhas.

• Cada componente ocupa exatamente Cada componente ocupa exatamente uma célula da matriz.uma célula da matriz.

• As células são preenchidas da esquerda As células são preenchidas da esquerda para direita e do topo para a base.para direita e do topo para a base.

21

Border LayoutBorder Layout

• Define 5 áreas pré-definidas onde um Define 5 áreas pré-definidas onde um componente ou um grupo de componente ou um grupo de componentes podem ser colocados: componentes podem ser colocados: North, South, East, West, e Center.North, South, East, West, e Center.

• O programador especifica a área na O programador especifica a área na qual um componente deve aparecer.qual um componente deve aparecer.

22

Swing WidgetsSwing Widgets

• São as classes de componentes São as classes de componentes Swing.Swing.

• Possuem como base a classe Possuem como base a classe JComponentJComponent

• A partir delas foram criadas A partir delas foram criadas inúmeras classes descendentes para inúmeras classes descendentes para construção de interfaces gráficas.construção de interfaces gráficas.

23

TooltipsTooltips

24

TooltipsTooltips

public class TooltipPanel extends public class TooltipPanel extends JPanel {JPanel {

public TooltipPanel() {public TooltipPanel() { JButton myButton = new JButton myButton = new JButton("Hello");JButton("Hello");

myButton.setToolTipText myButton.setToolTipText ("World");("World");

add(myButton);add(myButton); }}}}

25

Icon e ImageIconIcon e ImageIcon

• ImageIcon é usado pela Swing, ao invés de ImageIcon é usado pela Swing, ao invés de Image (AWT), para desenho de imagens Image (AWT), para desenho de imagens em componentesem componentes

• Motivos:Motivos:– Image carrega assincronamente– Image não é serializável

26

Icon e ImageIconIcon e ImageIcon

• ImageIconImageIcon– Implementação da interface Icon que cria um

ícone a partir de uma imagem– Icon tinyPicture = new

ImageIcon(“Imagem.gif");

27

JLabelJLabel

28

JButtonJButton

29

JButtonJButton

public class ButtonPanel extends JPanel {public class ButtonPanel extends JPanel { public ButtonPanel() {public ButtonPanel() { Icon tigerIcon = new Icon tigerIcon = new ImageIcon("SmallTiger.gif");ImageIcon("SmallTiger.gif");

JButton myButton = new JButton("Tiger", JButton myButton = new JButton("Tiger", tigerIcon);tigerIcon);

add(myButton);add(myButton); }}}}

30

JCheckBox, JRadioButton, JCheckBox, JRadioButton, JToggleButtonJToggleButton

31

JCheckBox, JRadioButton, JCheckBox, JRadioButton, JToggleButtonJToggleButton

public class ToggleButtonPanel extends public class ToggleButtonPanel extends JPanel {JPanel {

public ToggleButtonPanel() {public ToggleButtonPanel() { // Set the layout to a GridLayout// Set the layout to a GridLayout setLayout(new GridLayout(4,1, 10, 10));setLayout(new GridLayout(4,1, 10, 10)); add (new JToggleButton ("Fe"));add (new JToggleButton ("Fe")); add (new JToggleButton ("Fi"));add (new JToggleButton ("Fi")); add (new JToggleButton ("Fo"));add (new JToggleButton ("Fo")); add (new JToggleButton ("Fum"));add (new JToggleButton ("Fum")); }}}}

32

ButtonGroupButtonGroup

• Possibilita o agrupamento de botõesPossibilita o agrupamento de botões• Qualquer descendente de AbstractButton Qualquer descendente de AbstractButton

pode ser agrupadopode ser agrupado• Muito utilizado em conjunto com objetos Muito utilizado em conjunto com objetos

do tipo JToggleButton e JRadioButtondo tipo JToggleButton e JRadioButton

33

ButtonGroupButtonGroup

ButtonGroup group = new ButtonGroup();group.add(new JRadioButton(“Teste 1”));group.add(new JRadioButton(“Teste 2”);

34

Componentes JText*Componentes JText*

• Fornecem funcionalidades de um editor de Fornecem funcionalidades de um editor de textos simplestextos simples– copy(), cut(), paste() – getSelectedText()– setSelectionStart(), setSelectionEnd()– selectAll(), replaceSelection() – getText(), setText() – setEditable() – setCaretPosition()

35

JTextField and JTextAreaJTextField and JTextArea

// Instantiate a new TextField // Instantiate a new TextField JTextField tf = new JTextField(); JTextField tf = new JTextField(); // Instantiate a new TextArea // Instantiate a new TextArea JTextArea ta = new JTextArea(); JTextArea ta = new JTextArea(); // Initialize the text of each// Initialize the text of eachtf.setText("TextField"); tf.setText("TextField"); ta.setText("JTextArea\n Allows Multiple ta.setText("JTextArea\n Allows Multiple Lines");Lines");

add(tf); add(tf); add(new JScrollPane(ta)); add(new JScrollPane(ta));

36

JTextPaneJTextPane

• Editor de textos mais Editor de textos mais completo com completo com formatação de formatação de textos, quebra de textos, quebra de palavras (word wrap) palavras (word wrap) e exibição de e exibição de imagensimagens

37

JTextPaneJTextPaneStyleConstants.setFontFamily(attr, StyleConstants.setFontFamily(attr, "Serif");"Serif");

StyleConstants.setFontSize(attr, 18);StyleConstants.setFontSize(attr, 18); StyleConstants.setBold(attr, true);StyleConstants.setBold(attr, true); textPane.setCharacterAttributes(attr, textPane.setCharacterAttributes(attr, false);false);

add(textField, BorderLayout.NORTH);add(textField, BorderLayout.NORTH); add(new JScrollPane(textArea), add(new JScrollPane(textArea), BorderLayout.CENTER);BorderLayout.CENTER);

add(new JScrollPane(textPane), add(new JScrollPane(textPane), BorderLayout.SOUTH);BorderLayout.SOUTH);

}}}}

38

JPasswordFieldJPasswordField

39

JPasswordFieldJPasswordField

class PasswordPanel extends JPanel {class PasswordPanel extends JPanel { PasswordPanel() {PasswordPanel() { JPasswordField pass1 = new JPasswordField pass1 = new JPasswordField(20);JPasswordField(20);

JPasswordField pass2 = new JPasswordField pass2 = new JPasswordField(20);JPasswordField(20);

pass2.setEchoChar ('?');pass2.setEchoChar ('?'); add(pass1);add(pass1); add(pass2);add(pass2); }}}}

40

JFormattedTextFieldJFormattedTextField

41

JFormattedTextFieldJFormattedTextField

this.add(new JLabel("Máscara de Data:"));this.add(new JLabel("Máscara de Data:"));DateFormat dateFormat = DateFormat dateFormat =

DateFormat.getDateInstance(DateFormat.getDateInstance(DateFormat.SHORT);DateFormat.SHORT);

JFormattedTextField data = new JFormattedTextField data = new JFormattedTextField(dateFormat);JFormattedTextField(dateFormat);

data.setValue(new Date());data.setValue(new Date());

42

JSliderJSlider

43

JComboBoxJComboBox

44

JComboBoxJComboBoxpublic class ComboPanel extends JPanel {public class ComboPanel extends JPanel { String choices[] = { "Mercury", "Venus", "Earth", String choices[] = { "Mercury", "Venus", "Earth",

"Mars", "Jupiter", "Saturn", "Mars", "Jupiter", "Saturn", "Uranus","Neptune", "Pluto"};"Uranus","Neptune", "Pluto"};

public ComboPanel() {public ComboPanel() { JComboBox combo1 = new JComboBox();JComboBox combo1 = new JComboBox(); JComboBox combo2 = new JComboBox();JComboBox combo2 = new JComboBox(); for (int i=0;i<choices.length;i++) {for (int i=0;i<choices.length;i++) { combo1.addItem (choices[i]);combo1.addItem (choices[i]); combo2.addItem (choices[i]);combo2.addItem (choices[i]); }} combo2.setEditable(true);combo2.setEditable(true); combo2.setSelectedItem("X");combo2.setSelectedItem("X"); combo2.setMaximumRowCount(4);combo2.setMaximumRowCount(4); add(combo1);add(combo1); add(combo2);add(combo2); }}}}

45

JMenuJMenu

46

JPopupMenuJPopupMenu

47

JPopupMenuJPopupMenu

public class PopupPanel extends JPanel {public class PopupPanel extends JPanel { JPopupMenu popup = new JPopupMenu ();JPopupMenu popup = new JPopupMenu (); public PopupPanel() {public PopupPanel() { JMenuItem item;JMenuItem item; popup.add (item = new JMenuItem popup.add (item = new JMenuItem ("Cut"));("Cut"));

popup.add (item = new JMenuItem popup.add (item = new JMenuItem ("Copy"));("Copy"));

popup.add (item = new JMenuItem popup.add (item = new JMenuItem ("Paste"));("Paste"));

popup.addSeparator();popup.addSeparator(); popup.add (item = new JMenuItem popup.add (item = new JMenuItem ("Select All"));("Select All"));

48

JListJList

49

JListJList

public class ListPanel extends JPanel {public class ListPanel extends JPanel { String label [] = {"Cranberry", "Orange", String label [] = {"Cranberry", "Orange", "Banana", "Kiwi", "Blueberry", "Banana", "Kiwi", "Blueberry", "Pomegranate", "Apple", "Pear", "Pomegranate", "Apple", "Pear", "Watermelon", "Raspberry", "Snozberry""Watermelon", "Raspberry", "Snozberry" };}; public ListPanel() {public ListPanel() { setLayout (new BorderLayout());setLayout (new BorderLayout()); JList list = new JList(label);JList list = new JList(label); JScrollPane pane = new JScrollPane pane = new JScrollPane(list);JScrollPane(list);

add(pane, BorderLayout.CENTER);add(pane, BorderLayout.CENTER); }}}}

50

JTableJTable

51

Componentes Avançados SwingComponentes Avançados Swing

• JTree e JTable são exemplos de JTree e JTable são exemplos de componentes mais avançados SWING.componentes mais avançados SWING.

• Tabelas e Árvores:Tabelas e Árvores:– http://www.oracle.com/technetwork/java

/javase/documentation/index.html

52

Manipulação de EventosManipulação de EventosEventos: O que são?Eventos: O que são?

• São ações dos usuários na interface São ações dos usuários na interface gráfica.gráfica.– Quando uma ação é executada,

eventos são gerados. • Eventos são objetos que descrevem o Eventos são objetos que descrevem o

que ocorreu. que ocorreu. – Existem diversos tipos de classes de

eventos para descrever diferentes categorias gerais de ações do usuário.

53

Como os eventos são Como os eventos são processados?processados?

• Através de um modelo de delegação Através de um modelo de delegação de eventos.de eventos.– Os componentes implementam

rotinas de manipulação de eventos (listener) com o objetivo de receber eventos.

– Suporte a eventos está no pacote: java.awt.event.

54

Esquema do modelo de Esquema do modelo de delegaçãodelegação

Action handlerBUTTON

PANEL

FRAMEPanel e Frameevent handlers

Action event

actionPerformed (ActionEvent e){…….}

55

Exemplo: delegaçãoExemplo: delegação

import java.awt.*;import java.awt.*;import java.awt.event.*;import java.awt.event.*;class ButtonHandler implements ActionListener {class ButtonHandler implements ActionListener { public void actionPerformed (ActionEvent e){public void actionPerformed (ActionEvent e){ System.out.println ("Acao executada");System.out.println ("Acao executada"); }}}}public class TesteButton {public class TesteButton { public static void main (String args[])public static void main (String args[]) {{ Frame f = new Frame("Teste de evento");Frame f = new Frame("Teste de evento"); Button b = new Button ("Pressione me!");Button b = new Button ("Pressione me!"); b.addActionListener (new ButtonHandler());b.addActionListener (new ButtonHandler()); f.add ("Center",b);f.add ("Center",b); f.pack();f.pack(); f.setVisible(true);f.setVisible(true); }}}}

56

Eventos gerados pelos Eventos gerados pelos componentescomponentes• Cada componente possui um conjunto Cada componente possui um conjunto

de tipos de eventos a ele associado.de tipos de eventos a ele associado.• Os componentes que podem gerar Os componentes que podem gerar

eventos de ações possuem métodos eventos de ações possuem métodos para adicionar ou remover “listeners”.para adicionar ou remover “listeners”.– addActionListener– removeActionListener

57

Interface de eventos listener da Interface de eventos listener da AWTAWT

Interface Listener Classe Adapter MétodosActionListener ---------- actionPerformed(ActionEvent)AdjustmentListener --------- adjustmentValueChanged(adjustmentEvent)ComponentListener ComponentAdapter componentHidden(ComponentEvent)

componentMoved(ComponentEvent)componentRezised(ComponentEvent)componentShown(ComponentEvent)

ContainerListener ContainerAdapter componentAdded(ContainerEvent)componentRemoved(ContainerEvent)

FocusListener FocusAdapter focusGained(FocusEvent)focusLost(FocusEvent)

ItemListener -------- itemStateChanged(ItemEvent)KeyListener KeyAdapter keyPressed(KeyEvent)

keyReleased(KeyEvent)keyTyped(KeyEvent)

MouseListener MouseAdapter mouseClicked(MouseEvent)mouseEntered(MouseEvent)mouseExited(MouseEvent)mousePressed(MouseEvent)mouseRealesed(MouseEvent)

58

Interface de eventos listener da Interface de eventos listener da AWT AWT

Interface Listener Classe Adapter MétodosMouseMotionListener MouseMotionAdapter mouseDragged (MouseEvent)

mouseMoved(MouseEvent)TextListener ------ textValueChange(TextEvent)WindowListener WindowAdapter windowActived(WindowEvent)

windowClosed(WindowEvent)windowClosing(WindowEvent)windowDeactivated(WindowEvent)windowDeiconified(WindowEvent)windowIconified(WindowEvent)windowOpened(WindowEvent)

59

• A classe AWTEventA classe AWTEvent– Cada método de cada interface “listener” dos Cada método de cada interface “listener” dos

eventos, possui um único argumento: uma eventos, possui um único argumento: uma instância de uma classe que descende da instância de uma classe que descende da classe java.awt.AWTEvent.classe java.awt.AWTEvent.

– Esta classe não define nenhum método ou API Esta classe não define nenhum método ou API que o usuário, usualmente, necessite. que o usuário, usualmente, necessite. Contudo, herda um método útil da classe Contudo, herda um método útil da classe java.util.EventObject;java.util.EventObject;• Object getSourceObject getSource: retorna o objeto que : retorna o objeto que

gerou o eventogerou o evento

A hierarquia de classes de eventos

60

A hierarquia de classes de eventos

ActionEvent AdjustmentEvent

ContainerEvent FocusEvent

KeyEvent MouseEvent

InputEvent WindowEvent

ComponentEvent ItemEvent TextEvent

AWTEvent

java.util.EventObject

java.lang.Objet

61

Utilizando JOption PaneUtilizando JOption Pane

• É utilizado para mostrar mensagens de É utilizado para mostrar mensagens de diálogo para o usuáriodiálogo para o usuário

• Fica no pacote javax.swingFica no pacote javax.swing• Permite:Permite:

– Mensagens solicitando entrada de dados– Mensagens solicitando resposta à um

questionamento– Mensagens de informação

62

Tipos de MensagensTipos de Mensagens

• São pré definidas em constantes da classe São pré definidas em constantes da classe JOptionPaneJOptionPane

• Descrição:Descrição:– PLAIN_MESSAGE– INFORMATION_MESSAGE– ERROR_MESSAGE– WARNING_MESSAGE– QUESTION_MESSAGE

63

Métodos de JOptionPaneMétodos de JOptionPane

• showMessageDialog()showMessageDialog()• showInputDialog()showInputDialog()• showConfirmDialog()showConfirmDialog()

64

ConclusõesConclusões

• AWT e SWING permitem a construção de AWT e SWING permitem a construção de interfaces gráficas portáveis entre interfaces gráficas portáveis entre resoluções gráficas e plataformasresoluções gráficas e plataformas

• Modelo de eventos Java é avançado e Modelo de eventos Java é avançado e permite separação clara entre código de permite separação clara entre código de negócios e implementaçãonegócios e implementação

• API SWING é realmente OO e permite a API SWING é realmente OO e permite a construção de aplicações MVCconstrução de aplicações MVC