Jframe, JDialog ou JApplet

(1)

Desenvolvimento

Desenvolvimento de Interfaces Gráficas

de Interfaces Gráficas

Ms

Ms. . ChristienChristien L. RachidL. Rachid FUPAC

FUPAC E

E--MailMail: christienrachid@gmail.com: christienrachid@gmail.com

Objetivos

•• Introduzir

Introduzir o

o conceito

conceito de interfaces gráficas

de interfaces gráficas

•• Apresentar

Apresentar Swing e AWT

Swing e AWT

•• Definir o

Definir o conceito

conceito para

para containers gráficos

containers gráficos

•• Apresentar

Apresentar os

os principais

principais componentes

componentes existentes

existentes

•• Apresentar

Apresentar os

os principais

principais componentes

componentes existentes

existentes

para

para a

a construção

construção de

de uma

uma interface

interface gráfica

gráfica

Swing

•• Swing

Swing –

– Conjunto

Conjunto de

de componentes

componentes

direcionados

direcionados para

para aplicações

aplicações baseadas

baseadas em

em

formulários

•• Swing é parte da JFC (Java Foundation

Swing é parte da JFC (Java Foundation

•• Swing é parte da JFC (Java Foundation

Swing é parte da JFC (Java Foundation

Classes)

Swing

Swing –

– Características

Características

•• Componentes

Componentes leves

leves

–

Light-weight

•• Arquitetura

Arquitetura dos

dos componentes

componentes

– MVC

(2)

Containers

•• Janela

Janela,

, Diálogo

Diálogo ou

ou Applet

Applet

– Jframe, JDialog ou JApplet

•• JFrame

JFrame:

: janelas

janelas primárias

primárias

•• JDialog

JDialog:

: janelas

janelas secundárias

secundárias

5

•• JDialog

JDialog:

: janelas

janelas secundárias

secundárias

•• JApplet

JApplet:

: painel

painel em

em um

um área

área do browser

do browser

Top Level Container

public class

public class SwingApplicationSwingApplication { { ...

...

public static void main(String[]

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

... JFrame

JFrame frame = new frame = new JFrameJFrame("("SwingApplicationSwingApplication"); "); //

// criacria componentescomponentes emem umauma variávelvariável contentscontents frame.getContentPane frame.getContentPane().add(contents, ().add(contents, BorderLayout.CENTER BorderLayout.CENTER); ); 6 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 frame.setVisible(true); (true); } } } }

JFrame

public class

public class FrameTesterFrameTester {{

public static void main (String

public static void main (String argsargs[]) {[]) { JFrame

JFrame f = new f = new JFrameJFrame ("("JFrameJFrame Example");

Example");

Container c =

Container c = f.getContentPanef.getContentPane();(); c.setLayout

c.setLayout (new (new FlowLayoutFlowLayout());()); for (

for (intint ii = 0; = 0; ii < 5; < 5; ii++) {++) { for (

for (intint ii = 0; = 0; ii < 5; < 5; ii++) {++) { c.add

c.add (new (new JButtonJButton ("No"));("No")); c.add

c.add (new Button ("Batter"));(new Button ("Batter")); }

} c.add

c.add (new (new JLabelJLabel ("Swing"));("Swing")); f.setSize

f.setSize (300, 200);(300, 200); f.setVisible

(3)

JTabbedPane

9

JTabbedPane

public class

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

"Four"}; public

public JTabbedPaneJTabbedPane tabbedPanetabbedPane = new = new JTabbedPane

JTabbedPane();(); public

public TabbedPanelTabbedPanel() {() { setLayout

setLayout (new (new BorderLayoutBorderLayout());());

10

setLayout

setLayout (new (new BorderLayoutBorderLayout());()); for (

for (intint ii=0;i<=0;i<tabs.length;itabs.length;i++)++) tabbedPane.addTab

tabbedPane.addTab (tabs[(tabs[ii], null, ], null, createPane

createPane (tabs[(tabs[ii]));]));

tabbedPane.setSelectedIndex tabbedPane.setSelectedIndex(0);(0); add (

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

JTabbedPane

JPanel

JPanel createPane

createPane(String s) {

(String s) {

JPanel

JPanel p = new

p = new JPanel

JPanel();

();

p.add

p.add(new

(new JLabel

JLabel(s));

(s));

return p;

}

JSplitPane

(4)

JScrollPane

13

public class

public class ScrollPanelScrollPanel extends extends JPanelJPanel {{ public

public ScrollPanelScrollPanel() {() { setLayout

setLayout(new (new BorderLayoutBorderLayout());()); Icon

Icon bigTigerbigTiger = new = new ImageIcon

ImageIcon("BigTiger.gif");("BigTiger.gif"); JLabel

JLabel tigerLabeltigerLabel = new = new

JScrollPane

14

JLabel

JLabel tigerLabeltigerLabel = new = new JLabel

JLabel((bigTigerbigTiger);); JScrollPane

JScrollPane scrollPanescrollPane = = new

new JScrollPaneJScrollPane((tigerLabeltigerLabel);); add(

add(scrollPanescrollPane, , BorderLayout.CENTERBorderLayout.CENTER);); }

} } }

Gerenciadores

Gerenciadores de Layout

de Layout

•• Em inglês (Layout Manager)Em inglês (Layout Manager)

•• Definem como os componentes gráficos são dispostos em Definem como os componentes gráficos são dispostos em um container AWT/SWING.

um container AWT/SWING.

•• Os gerenciadores de layout garantem a consistência visual Os gerenciadores de layout garantem a consistência visual em diferentes resoluções de tela e diferentes plataformas. em diferentes resoluções de tela e diferentes plataformas. em diferentes resoluções de tela e diferentes plataformas. em diferentes resoluções de tela e diferentes plataformas.

•

Layout Managers calculam coordenadas

automaticamente, baseados em regras

•

Eles controlam a posição, características e

Gerenciadores de Layout

•

Eles controlam a posição, características e

o comportamento dos componentes nos

contêineres

(5)

Tipos

Tipos de

de Gerenciadores

Gerenciadores de Layout

de Layout

•• Nulo

Nulo ((Posicionamento

Posicionamento absoluto

absoluto))

•• FlowLayout

FlowLayout

•• BorderLayout

BorderLayout

•• CardLayout

CardLayout

17

•• CardLayout

CardLayout

•• GridLayout

GridLayout

•• GridBagLayout

GridBagLayout

•• Outros

Outros ((personalizados

personalizados))

Gerenciadores

Gerenciadores de Layout

de Layout

•• Todo container possui um gerenciador de layout

Todo container possui um gerenciador de layout

a ele associado

a ele associado..

•• Um

Um programador

programador pode

pode também

também criar

criar novos

novos

gerenciadores

gerenciadores de layout (

de layout (para

para aplicações

aplicações com

com

necessidades

necessidades especiais

especiais).

).

18

necessidades

necessidades especiais

especiais).

).

Flow Layout

•• À

À medida

medida que

que os

os componentes

componentes são

são acrescentados

acrescentados

no

no container,

container, eles

eles são

são posicionados

posicionados em

em uma

uma linha

linha

da

da esquerda

esquerda para

para a

a direita

direita..

•• O

O tamanho

tamanho de

de cada

cada componente

componente do

do container

container é

é

calculado

através

do

do seu

seu tamanho

tamanho preferido

preferido

calculado

através

do

do seu

seu tamanho

tamanho preferido

preferido

((getPreferedSize

getPreferedSize))..

•• Uma

Uma nova

nova linha

linha é

é automaticamente

automaticamente criada

criada quando

quando

falta

falta espaço

espaço na

na linha

linha corrente

corrente..

Grid Layout

•• Componentes

Componentes são

são colocados

colocados em

em uma

uma matriz

matriz

com

com um

um numero

numero específico

específico de

de colunas

colunas ou

ou

linhas

linhas..

•• Cada

Cada componente

componente ocupa

ocupa exatamente

exatamente uma

uma

célula

célula da

da matriz

matriz..

célula

célula da

da matriz

matriz..

•• As

As células

células são

são preenchidas

preenchidas da

da esquerda

esquerda para

para

direita

(6)

Border Layout

•• Define

Define 5

5 áreas

áreas pré

pré--definidas

definidas onde

onde um

um

componente

componente ou

ou um

um grupo

grupo de

de componentes

componentes

podem

podem ser

ser colocados

colocados:: North,

North, South,

South, East,

East,

West,

West, e

e Center

Center..

•• O

O programador

programador especifica

especifica a

a área

área na

na qual

qual

21

•• O

O programador

programador especifica

especifica a

a área

área na

na qual

qual

um

um componente

componente deve

deve aparecer

aparecer..

Swing Widgets

•• São as classes de componentes Swing.

São as classes de componentes Swing.

•• Possuem como base a classe

Possuem como base a classe JComponent

JComponent

•• A partir delas foram criadas inúmeras

A partir delas foram criadas inúmeras

22

•• A partir delas foram criadas inúmeras

A partir delas foram criadas inúmeras

classes descendentes para construção de

interfaces gráficas.

Tooltips

public class

public class TooltipPanel

TooltipPanel extends

extends

JPanel

JPanel {

{

public

public TooltipPanel

TooltipPanel() {

() {

JButton

JButton myButton

myButton = new

= new

JButton

JButton("Hello");

("Hello");

myButton.setToolTipText

("World");

add(

add(myButton

myButton);

);

}

(7)

Icon e ImageIcon

•• ImageIcon

ImageIcon é

é usado

usado pela

pela Swing,

Swing, ao

ao invés

invés de

de

Image (AWT),

Image (AWT), para

para desenho

desenho de

de imagens

imagens em

em

componentes

•• Motivos

Motivos::

25

– Image carrega assincronamente – Image não é serializável

Icon e ImageIcon

•• ImageIcon

ImageIcon

– Implementação da interface Icon que cria um ícone a partir de uma imagem

– Icon tinyPicture = new ImageIcon(“Imagem.gif");

26

JLabel

(8)

JButton

public class

public class ButtonPanelButtonPanel extends extends JPanelJPanel {{ public

public ButtonPanelButtonPanel() {() { Icon

Icon tigerIcontigerIcon = new = new ImageIcon

ImageIcon("SmallTiger.gif");("SmallTiger.gif"); JButton

JButton myButtonmyButton = new = new JButtonJButton("Tiger", ("Tiger", tigerIcon tigerIcon);); 29 tigerIcon tigerIcon);); add( add(myButtonmyButton);); } } } }

JCheckBox, JRadioButton, JToggleButton

30

JCheckBox

JCheckBox,

, JRadioButton

JRadioButton,

, JToggleButton

JToggleButton

public class

public class ToggleButtonPanelToggleButtonPanel extends extends JPanel

JPanel {{ public

public ToggleButtonPanelToggleButtonPanel() {() { // Set the layout to a

// Set the layout to a GridLayoutGridLayout setLayout

setLayout(new (new GridLayoutGridLayout(4,1, 10, 10));(4,1, 10, 10)); add (new

add (new JToggleButtonJToggleButton ("Fe"));("Fe")); add (new

add (new JToggleButtonJToggleButton ("("FiFi"));")); add (new

add (new JToggleButtonJToggleButton ("("FoFo"));")); add (new

add (new JToggleButtonJToggleButton ("("FumFum"));")); } } } }

ButtonGroup

•• Possibilita

Possibilita o

o agrupamento

agrupamento de

de botões

botões

•• Qualquer

Qualquer descendente

descendente de

de AbstractButton

AbstractButton pode

pode

ser

ser agrupado

agrupado

•• Muito

Muito utilizado

utilizado em

em conjunto

conjunto com

com objetos

objetos do

do tipo

tipo

•• Muito

Muito utilizado

utilizado em

em conjunto

conjunto com

com objetos

objetos do

do tipo

tipo

JToggleButton

(9)

ButtonGroup

ButtonGroup group = new ButtonGroup();

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

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

33

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

Componentes JText*

•• Fornecem

Fornecem funcionalidades

funcionalidades de um editor de

de um editor de

textos

textos simples

simples

– copy(), cut(), paste() – getSelectedText() – setSelectionStart(), setSelectionEnd() 34 – selectAll(), replaceSelection() – getText(), setText() – setEditable() – setCaretPosition()

JTextField 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 each tf.setText("TextField");

tf.setText("TextField"); tf.setText("TextField"); tf.setText("TextField"); ta.setText("JTextArea

ta.setText("JTextArea\\n Allows Multiple n Allows Multiple Lines"); Lines"); add(tf); add(tf); add(new JScrollPane(ta)); add(new JScrollPane(ta));

JTextPane

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

de imagens de imagens de imagens

(10)

JTextPane

StyleConstants.setFontFamily

StyleConstants.setFontFamily((attrattr, , "Serif");

"Serif");

StyleConstants.setFontSize

StyleConstants.setFontSize((attrattr, 18);, 18); StyleConstants.setBold

StyleConstants.setBold((attrattr, true);, true); textPane.setCharacterAttributes

textPane.setCharacterAttributes((attrattr, , false);

false); add(

add(textFieldtextField, , BorderLayout.NORTHBorderLayout.NORTH););

37

add(

add(textFieldtextField, , BorderLayout.NORTHBorderLayout.NORTH);); add(new

add(new JScrollPaneJScrollPane((textAreatextArea), ), BorderLayout.CENTER

BorderLayout.CENTER);); add(new

add(new JScrollPaneJScrollPane((textPanetextPane), ), BorderLayout.SOUTH BorderLayout.SOUTH);); } } } }

JPasswordField

38

JPasswordField

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 ('?'); pass2.setEchoChar ('?'); pass2.setEchoChar ('?'); add(pass1); add(pass1); add(pass2); add(pass2); } } } }

JFormattedTextField

(11)

JFormattedTextField

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

DateFormat dateFormat = DateFormat.getDateInstance( DateFormat dateFormat = DateFormat.getDateInstance(

DateFormat.SHORT); DateFormat.SHORT); JFormattedTextField data = new JFormattedTextField data = new

JFormattedTextField(dateFormat); JFormattedTextField(dateFormat); 41 JFormattedTextField(dateFormat); JFormattedTextField(dateFormat); data.setValue(new Date()); data.setValue(new Date());

JSlider

42

JComboBox

public class

public class ComboPanelComboPanel extends extends JPanelJPanel {{

String choices[] = { "Mercury", "Venus", "Earth", String choices[] = { "Mercury", "Venus", "Earth",

"Mars", "Jupiter", "Saturn", "

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

"Pluto"}; public

public ComboPanelComboPanel() {() { JComboBox

JComboBox combo1 = new combo1 = new JComboBoxJComboBox();(); JComboBox

JComboBox combo2 = new combo2 = new JComboBoxJComboBox();(); for (

for (intint ii=0;i<=0;i<choices.length;ichoices.length;i++) {++) { combo1.addItem (choices[

combo1.addItem (choices[ii]);]); combo1.addItem (choices[ combo1.addItem (choices[ii]);]); combo2.addItem (choices[ combo2.addItem (choices[ii]);]); } } combo2.setEditable(true); combo2.setEditable(true); combo2.setSelectedItem("X"); combo2.setSelectedItem("X"); combo2.setMaximumRowCount(4); combo2.setMaximumRowCount(4); add(combo1); add(combo1);

(12)

JMenu

45

JPopupMenu

46

JPopupMenu

public class

public class PopupPanelPopupPanel extends extends JPanelJPanel {{ JPopupMenu

JPopupMenu popup = new popup = new JPopupMenuJPopupMenu ();(); public

public PopupPanelPopupPanel() {() { JMenuItem

JMenuItem item;item; popup.add

popup.add (item = new (item = new JMenuItemJMenuItem ("Cut"));

("Cut")); popup.add

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

("Copy")); popup.add

popup.add (item = new (item = new JMenuItemJMenuItem ("Paste")); ("Paste")); popup.addSeparator popup.addSeparator();();

JList

(13)

JList

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

JTable

50

Componentes Avançados Swing

••

JTree

JTree e

e JTable

JTable são

são exemplos

exemplos de

de componentes

componentes

mais

mais avançados

avançados SWING.

SWING.

••

Tabelas

Tabelas e

e Árvores

Árvores::

–

http://www.oracle.com/technetwork/java/java

–

http://www.oracle.com/technetwork/java/java

se/documentation/index.html

Manipulação

Manipulação de

de Eventos

Eventos

Eventos: O que são?

•• São ações dos usuários na interface gráfica.

São ações dos usuários na interface gráfica.

– Quando uma ação é executada, eventos

são gerados.

•• Eventos são objetos que descrevem o que

Eventos são objetos que descrevem o que

ocorreu.

(14)

Como os eventos são processados?

•• Através de um modelo de delegação de

Através de um modelo de delegação de

eventos.

– Os componentes implementam rotinas

de manipulação de eventos (listener)

com o objetivo de receber eventos.

53

com o objetivo de receber eventos.

– Suporte a eventos está no pacote:

java.awt.event.

Esquema do modelo de delegação

Action handler

PANEL

FRAME

Panel e Frame event handlers Action event 54 BUTTON actionPerformed (ActionEvent e) { ……. }

Exemplo: delegação

import java.awt.*; import java.awt.*; import

import java.awt.eventjava.awt.event.*;.*; class

class ButtonHandlerButtonHandler implements implements ActionListenerActionListener {{ public void actionPerformed (ActionEvent e){ public void actionPerformed (ActionEvent e){

System.out.println

System.out.println ("("AcaoAcao executadaexecutada");"); }

} } }

public class

public class TesteButtonTesteButton {{

public static void main (String

public static void main (String argsargs[])[]) public static void main (String

public static void main (String argsargs[])[]) {

{

Frame f = new Frame("

Frame f = new Frame("TesteTeste de de eventoevento");"); Button b = new Button ("

Button b = new Button ("PressionePressione me!");me!"); b.addActionListener

b.addActionListener (new (new ButtonHandlerButtonHandler());()); f.add

f.add ("("Center",bCenter",b);); f.pack

f.pack();();

Eventos gerados pelos componentes

•• Cada

Cada componente

componente possui

possui um

um conjunto

conjunto de

de tipos

tipos

de

de eventos

eventos a

a ele

ele associado

associado..

•• Os

Os componentes

componentes que

que podem

podem gerar

gerar eventos

eventos de

de

ações

ações possuem

possuem métodos

métodos para

para adicionar

adicionar ou

ou

remover “listeners”.

– addActionListener

– removeActionListener

(15)

Interface de eventos listener da AWT

Interface Listener Classe Adapter Métodos

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

57

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)

Interface de eventos listener da AWT

Interface Listener Classe Adapter Métodos

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

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

•• A classe

A classe AWTEvent

AWTEvent

–

– Cada método de cada interface “

Cada método de cada interface “listener

listener” dos

” dos

eventos, possui um único argumento: uma

instância de uma classe que descende da

classe

classe java

java..awt

awt..AWTEvent

AWTEvent..

–

– Esta classe não define nenhum método ou API

Esta classe não define nenhum método ou API

A hierarquia de classes de eventos

–

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

Contudo, herda um método útil da classe

java

java..util.EventObject;

util.EventObject;

•• Object

Object getSource

getSource: retorna o objeto que

: retorna o objeto que

gerou o evento

A hierarquia de classes de eventos

AWTEvent java.util.EventO bject java.lang.Objet ActionEvent AdjustmentEvent ContainerEvent FocusEvent KeyEvent MouseEvent InputEvent WindowEvent

(16)

Utilizando JOption Pane

•• É

É utilizado

utilizado para

para mostrar

mostrar mensagens

mensagens de

de diálogo

diálogo

para

para o

o usuário

usuário

•• Fica

Fica no

no pacote

pacote javax.swing

javax.swing

•• Permite

Permite::

61

– Mensagens solicitando entrada de dados

– Mensagens solicitando resposta à um questionamento – Mensagens de informação

Tipos

Tipos de

de Mensagens

Mensagens

•• São São prépré definidasdefinidas emem constantesconstantes da da classeclasse JOptionPaneJOptionPane •• DescriçãoDescrição:: – PLAIN_MESSAGE – INFORMATION_MESSAGE – ERROR_MESSAGE 62 – ERROR_MESSAGE – WARNING_MESSAGE – QUESTION_MESSAGE