Gestione di eventi ed interfacce utente grafiche
2
Eventi
Ogni volta che l’utente esegue un’azione
un clic del mouse
la pressione di un tasto sulla tastiera
la modifica di una finestra
la selezione di un elemento da un menu…
viene generato un evento
3
Gestione degli eventiPer gestire gli eventi bisogna distinguere tra
Sorgente dell’evento (source)la componente dell’interfaccia utente che ha generato l’evento
Pulsanti, voci di menu, barre di scorrimento, etc.
Ricevitore dell’evento (listener)
la classe che intercetta l’evento e definisce le azioni
intraprese a seguito del verificarsi di particolari eventi
4
Package java.awt.eventOgni evento è descritto da una appropriata
classe
Il package java.awt.event contiene
Le classi per i diversi tipi di eventi
Le interfacce relative ai ricevitori di eventi, i
Listener
Le classi degli adattatori, gli Adapter, che
implementano le interfacce Listener
5
Tipi di evento
MouseEvent: eventi del mouse
ActionEvent: eventi di azione
AdjustmentEvent: eventi di modifica
FocusEvent: eventi di selezione
ItemEvent: eventi di elemento
KeyEvent: eventi di tastiera
WindowEvent: eventi di finestra
etc…
6
Interfacce ListenerSono i ricevitori di eventi
Esiste una interfaccia Listener per ciascun tipo
di evento
Definiscono i metodi che devono essere
implementati da ogni oggetto che desidera
essere informato dell’accadere di un particolare
tipo di evento
7
Interfacce ListenerMouseListener: eventi del mouse
ActionListener: eventi di azione
AdjustmentListener: eventi di modifica
FocusListener: eventi di selezione
ItemListener: eventi di elemento
KeyListener: eventi di tastiera
WindowListener: eventi di finestra
etc…
8
MouseEventSi verificano in seguito ad azioni che riguardano
il mouse
Tali azioni possono essere eseguite dall’utente
in un punto qualsiasi dell’interfaccia grafica
Una classe deve implementare l’interfaccia
MouseListener per essere in grado di avvertire e
gestire eventi di questo tipo
9
MouseEvent: metodiaddMouseListener() associa l’ascoltatore di eventi a ciascun componente in grado di generare eventi di questo tipo
getX() e getY() restituiscono le coordinate del punto in cui l’evento relativo al mouse è accaduto
10
MouseListenerL’interfaccia MouseListener ha cinque metodi:
mousePressed(MouseEvent event)
mouseReleased(MouseEvent event)
mouseClicked(MouseEvent event)
mouseEntered(MouseEvent event)
mouseExited(MouseEvent event)
11
MouseListenerpublic interface MouseListener
{ void mousePressed(MouseEvent event);
void mouseReleased(MouseEvent event);
void mouseClicked(MouseEvent event);
void mouseEntered(MouseEvent event);
void mouseExited(MouseEvent event);
}
12
Spiare gli eventi del mouseScriviamo un programma che spia gli eventi del
mouse e li stampa man mano che si verificanoScriviamo una classe MouseSpy (ricevitore) che
implementa MouseListener
Scriviamo un applet MouseSpyApplet (sorgente degli
eventi) ed installiamo il ricevitore
13
import java.awt.event.MouseEvent;import java.awt.event.MouseListener;
class MouseSpy implements MouseListener{
public void mousePressed(MouseEvent event){
System.out.println("Mouse pressed. x=" + event.getX()
+ " y=" + event.getY());}
public void mouseReleased(MouseEvent event){
System.out.println("Mouse released. x=" + event.getX()
+ " y=" + event.getY());}
File MouseSpy.java
14
public void mouseClicked(MouseEvent event)
{
System.out.println
("Mouse clicked. x=" + event.getX()
+ " y=" + event.getY());
}
public void mouseEntered(MouseEvent event)
{
System.out.println
("Mouse entered. x=" + event.getX()
+ " y=" + event.getY());
}
15
public void mouseExited(MouseEvent event)
{
System.out.println
("Mouse exited. x=" + event.getX()
+ " y=" + event.getY());
}
}
16
File MouseSpyApplet.java
import java.applet.Applet;
public class MouseSpyApplet extends Applet
{
public MouseSpyApplet()
{
MouseSpy listener = new MouseSpy();
addMouseListener(listener);
}
}
17
Spiare gli eventi del mouse
18
Elaborare gli eventi del mouse
Scriviamo un programma che disegna un rettangolo sullo schermo
in seguito alla pressione di un tasto del mouse, sposta
l’angolo superiore sinistro nella posizione del
puntatore del mouse
19
import java.applet.Applet;import java.awt.Graphics;import java.awt.Graphics2D;import java.awt.Rectangle;import java.awt.event.MouseListener;import java.awt.event.MouseEvent;
public class MouseApplet extends Applet{
public MouseApplet(){
// il rettangolo disegnato dal metodo paintbox = new Rectangle(BOX_X, BOX_Y,
BOX_WIDTH, BOX_HEIGHT);
File MouseApplet.java
20
class MousePressListener implements MouseListener{
public void mousePressed(MouseEvent event){
int x = event.getX();int y = event.getY();box.setLocation(x, y);repaint();
}
public void mouseReleased(MouseEvent event) {}public void mouseClicked(MouseEvent event) {}public void mouseEntered(MouseEvent event) {}public void mouseExited(MouseEvent event) {}
}
MouseListener listener = new MousePressListener();addMouseListener(listener);
}
}
21
public void paint(Graphics g){
Graphics2D g2 = (Graphics2D)g;g2.draw(box);
}
private Rectangle box;private static final int BOX_X = 100;private static final int BOX_Y = 100;private static final int BOX_WIDTH = 20;private static final int BOX_HEIGHT = 30;
}
22
MouseAppletIl ricevitore listener è definito come classe internadella classe MouseApplet
mousePressed può accedere alla variabile istanza box definita nel costruttore
In seguito ad una pressione del mouse vienechiamato il metodo setLocation(x,y) sul rettangolo box
L’oggetto che memorizza il rettangolo viene aggiornato
Per visualizzare la nuova posizione dobbiamo ridisegnare lo schermo con repaint()
23
Esecuzione di MouseApplet
24
Adattatori di eventiNella classe MousePressListener eravamo interessati
solo alla pressione dei tasti del mouse…
…ma abbiamo dovuto riscrivere tutti I metodi di
MouseListener!
Possiamo usare la classe MouseAdapter, che
implementa tutti i metodi di MouseListener come metodi
vuoti
sovrascriviamo solo i metodi che ci interessano!
25
Adattatori di eventi
class MousePressListener extends MouseAdapter{
public void mousePressed(MouseEvent event){
int x = event.getX();int y = event.getY();box.setLocation(x,y);repaint();
}}
26
ActionEventSi verificano quando l’utente compie un’azione utilizzando uno dei componenti dell’interfaccia utente
Una classe deve implementare l’interfaccia
ActionListener per essere in grado di avvertire e
gestire eventi di questo tipo
27
ActionEvent: metodiaddActionListener() associa l’ascoltatore di
eventi a ciascun componente in grado di
generare eventi di questo tipo
getSource() determina il componente che ha
provocato l’evento
28
ActionListener
L’interfaccia ActionListener ha un solo metodo:
actionPerformed(ActionEvent event)
Non ha senso avere un adattatore di eventi per
ActionListener
public interface ActionListener
{ void actionPerformed(ActionEvent event);
}
29
Interfaccia utenteIn Java esistono due modi per gestirla:
Swing (package javax.swing)
Estensione delle prime versioni di Java, componente
standard di Java 2
Esempi di classi: JTextField, JLabel, JButton, JRadioButton,
JCheckbox, JFrame, JPanel, JScrollPane, …
Abstract Windowing Toolkit (package java.awt)Ormai obsoleto
Esempi di classi: TextField, Label, Button, RadioButton,
ChechBox, Frame, Panel, ScrollBar,
30
Interfaccia utente
Tre elementi fondamentali
Componenti: elementi di base dell’interfaccia
Contenitori: elementi che contengono componenti
Gestori del Layout: elementi che controllano la
disposizione delle componenti all’interno di un
contenitore
31
Componenti
Etichette
Caselle di testo
Aree di testo
Barre di scorrimento
Bottoni
Bottoni radio
Caselle di controllo
Caselle combinate
32
Etichette
I più semplici elementi di un’interfaccia utente
Stringhe di testo impiegate per
identificare la funzione di altre componenti
aggiungere spiegazioni destinate all’utente
Per creare un’etichetta si usa la classe
JLabelJLabel xLabel = new JLabel (“x=’’);
33
Caselle di testoAree in cui l’utente può digitare del testo
Bisogna specificare la dimensione della casella di testo
Per creare una casella di testo si usa la classe
JTextField
JTextField xField = new JTextField(5);
34
Aree di testoAree in cui l’utente può digitare del testo su più righe
Per creare un’area di testo si usa la classe
JTextAreaJTextArea textarea = new JTextArea(10,30);
35
Alcuni metodiappend aggiunge testo alla fine dell’area di testo
setText imposta il testo
getText legge il contenuto dell’area
setEditable(false) impedisce la modificadell’areasetFont imposta il font
Aree di testo
36
Barre di scorrimento
Possono essere aggiunte ad un’area di testo
Per creare una barra di scorrimento si usa la classe
JScrollPaneJTextArea textarea = new JTextArea(10,30);
JScrollPane scrollPane = new JScrollPane(textArea);
37
BottoniPulsanti dell’interfaccia che reagiscono al clic del
mouse
Per creare un bottone si usa la classe
JButtonJButton moveButton = new JButton(“Move”);
JButton moveButton = new JButton(new
ImageIcon(“hand.gif”));
JButton moveButton = new JButton(“Move”,new
ImageIcon(“hand.gif”));
38
BottoniQuando un bottone viene premuto, invia un evento di
azione
Per riceverlo, è necessario installare un ricevitore di
azioni (classe che implementa l’interfaccia ActionListener)
class MoveButtonListener implements ActionListener{
public void actionPerformed(ActionEvent event){ … }
}
ActionListener listener = new MoveButtonListener();moveButton.addActionListener(listener);
39
Bottoni radioConsentono all’utente di fare una sola scelta tra
più opzioni
40
Bottoni radioPer creare bottoni radio si usa la classe
JRadioButton
Poi si crea un oggetto di tipo ButtonGroup e siaggiungono i singoli pulsanti
JRadioButton paperButton = new JRadioButton(“Paperino”);JRadioButton pippoButton = new JRadioButton(“Pippo”);
ButtonGroup fumettiGroup = new ButtonGroup();fumettiGroup.add(paperButton);fumettiGroup.add(pippoButton);
41
Bottoni radio
Alcuni metodiisSelected()
stabilisce se un pulsante è selezionato
setSelected(true)
imposta la selezione per uno dei pulsanti del gruppo
42
Bottoni radioQuando un bottone radio viene selezionato, invia un
evento di azione
Per riceverlo, è necessario installare un ricevitore di
azioni (classe che implementa l’interfaccia ActionListener)
class RadioButtonListener implements ActionListener{
public void actionPerformed(ActionEvent event){ … }
}
ActionListener listener = new RadioButtonListener();paperButton.addActionListener(listener);
43
Caselle di controlloConsentono all’utente di fare varie scelte che
non si escludono a vicenda
44
Caselle di controlloPer creare una casella di controllo si usa la
classe
JCheckbox
JCheckBox paperCheckBox = new JCheckBox(“Paperino”);
Non è necessario creare un gruppo di pulsanti,
come per i bottoni radio
45
Caselle di controlloQuando una casella di controllo viene selezionata, invia
un evento di azione
Per riceverlo, è necessario installare un ricevitore di
azioni (classe che implementa l’interfaccia ActionListener)
class CheckBoxListener implements ActionListener{
public void actionPerformed(ActionEvent event){ … }
}
ActionListener listener = new CheckBoxListener();paperCheckBox.addActionListener(listener);
46
Caselle combinateConsentono all’utente di fare una sola scelta tra
più opzioni attraverso un elenco a discesa
47
Caselle combinate
Per creare una casella combinata si usa la
classe
JComboBox
JComboBox fumettiCombo = new JComboBox();
Poi si aggiungono le voci con il metodo addItem
fumettiCombo.addItem(“Paperino”);fumettiCombo.addItem(“Pippo”);fumettiCombo.addItem(“Pluto”);fumettiCombo.addItem(“Topolino”);
48
Caselle combinate
Alcuni metodisetEditable()
rende la casella modificabile
getSelectedItem()
restituisce l’elemento (di tipo Object) scelto
dall’utente
setSelectedItem()
imposta la voce iniziale da visualizzare nella casella
49
Caselle combinateQuando una casella combinata viene selezionata, invia
un evento di azione
Per riceverlo, è necessario installare un ricevitore di
azioni (classe che implementa l’interfaccia ActionListener)
class ComboBoxListener implements ActionListener{
public void actionPerformed(ActionEvent event){ … }
}
ActionListener listener = new ComboBoxListener();fumettiCombo.addActionListener(listener);
50
Interfaccia utente
Tre elementi fondamentali
Componenti: elementi di base dell’interfaccia
Contenitori: elementi che contengono componenti
Gestori del Layout: elementi che controllano la
disposizione delle componenti all’interno di un
contenitore
51
Contenitori
Negli applet visti finora l’esecuzione avveniva
all’interno della finestra del browser
Per creare una maggiore interazione con
l’utente è possibile creare diversi contenitori per
i componenti dell’interfaccia utente
panelli
finestre
menu
52
PannelliContenitori per i componenti dell’interfaccia utente
Per creare un pannello si usa la classe
JPanelJPanel panel = new JPanel();
Dopo aver creato il pannello, si aggiungono i componenti
mediante il metodo addPanel.add(xLabel);
Panel.add(xField);
Panel.add(yLabel);
Panel.add(yField);
Panel.add(moveButton);
53
Frame
Un frame è una finestra indipendente dotata di barra del titolo
pulsanti di ridimensionamento e chiusura
Per creare un frame si usa la classe
JFrameJFrame frame = new JFrame();
54
Frame
55
FrameIl metodo pack() assegna le dimensioni al frame
in modo che possa contenere tutti i suoi
componenti
Il metodo show() mostra la finestra sullo schermo
(inizialmente è invisibile)
frame.show();
frame.pack();
56
Barra dei menuUna barra dei menu è costituita da un gruppo di
menu lungo il margine superiore di una finestra
57
Barra dei menuPer creare una barra dei menu si usa la classe
JMenuBarJMenuBar menuBar = new JMenuBar();
La barra dei menu deve essere associata a un
oggetto di tipo Frame con il metodo
setJmenuBar()
frame.setJMenuBar(menuBar);
58
Menu
Per creare un menu si usa la classe
JMenuJMenu fileMenu = new JMenu(“File”);
I menu vengono aggiunti alla barra dei menu
mediante il metodo add()menuBar.add(fileMenu);
59
Menu
All’interno dei menu si aggiungono le voci di menu
Per creare una voce di menu si usa la classe
JMenuItemJMenuItem fileNewMenuItem = new
JMenuItem(“New”);
filemenu.add(fileNewMenuItem);
60
MenuQuando una voce di menu viene selezionata, invia un
evento di azione
Per riceverlo, è necessario installare un ricevitore di
azioni (classe che implementa l’interfaccia ActionListener)
class MenuItemListener implements ActionListener{
public void actionPerformed(ActionEvent event){ … }
}
ActionListener listener = new menuItemListener();fileNewMenuItem.addActionListener(listener);
61
Interfaccia utente
Tre elementi fondamentali
Componenti: elementi di base dell’interfaccia
Contenitori: elementi che contengono componenti
Gestori del Layout: elementi che controllano la
disposizione delle componenti all’interno di un
contenitore
62
Gestori di layoutDeterminano la disposizione (layout) delle
componenti all’interno di un contenitore
Alcuni gestori comunemente usati:FlowLayout (a scorrimento)
Borderlayout (a bordi)
GridLayout (a griglia)
GridBagLayout
63
Gestori di layout
Bisogna innanzitutto creare un contenitore Poi si utilizza il metodo setLayout() per definire
un gestore di layout
In seguito si aggiungono i componenti al contenitore con il metodo add()
64
FlowLayout
Gestore di default
Posiziona le componenti da sinistra verso destra
finchè c’è spazio e poi procede alla riga
successiva
65
FlowLayout
66
BorderLayoutSuddivide un contenitore in cinque settori
Alto (NORTH)
Basso (SOUTH)
Sinistra (WEST)
Destra (EAST)
Centro (CENTER)
I settori relativi ai bordi occupano lo spazio di cui hanno
bisogno, e tutto lo spazio restante viene usato dal settore
centrale
67
BorderLayout
68
BorderLayoutImpostiamo il gestore in un pannello:
panel.setLayout(new BorderLayout());
Aggiungiamo un componente al contenitore,specificandone la posizione:
panel.add(label, BorderLayout.CENTER);
69
BorderLayoutPossiamo usare il pannello dei contenuti
predefinito di un frame, ottenuto dal metodo getContentPane():
frame.getContentPane().add(label,
BorderLayout.CENTER);
70
GridLayout
Dispone i componenti in base ad una griglia con
un certo numero di righe e colonne
L’aggiunta dei componenti avviene a partire dalla
riga superiore, da sinistra a destra
La dimensione delle componenti cambia in
seguito a ridimensionamenti del contenitore
71
GridLayout
72
GridLayoutImpostiamo il gestore in un pannello:
panel.setLayout(new GridLayout(4,3));
Aggiungiamo i componenti al contenitore:
panel.add(button7);panel.add(button8);panel.add(button9);panel.add(button4);
73
GridBagLayout
Consente la creazione di griglie avanzate
le proporzioni tra righe e colonne all’interno della griglia non sono necessariamente uguali
i componenti possono essere disposti in modo arbitrario e occupare più celle
Noi non lo utilizzeremo
74
E adesso?Dopo aver descritto i componenti dell’interfaccia utente, vogliamo gestire gli eventi di azione
Una classe deve implementare l’interfaccia ActionListener per essere in grado di avvertire e gestire eventi di questo tipo
75
EsempioScriviamo un applet che consente all’utente di muovere
un rettangolo specificando le coordinate dell’angolo
superiore sinistro
76
File ButtonApplet.javaimport java.applet.Applet;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Rectangle;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JTextField;
/** Questo applet consente all’utente di muovere un rettangolo specificando le coordinate dell’angolo superiore sinistro
*/
77
public class ButtonApplet extends Applet
{
public ButtonApplet()
{
// il rettangolo disegnato dal metodo paint
box = new Rectangle(BOX_X, BOX_Y,
BOX_WIDTH, BOX_HEIGHT);
// i campi di testo per inserire le coordinate
final JTextField xField = new JTextField(5);
final JTextField yField = new JTextField(5);;
// il bottone per muovere il rettangolo
JButton moveButton = new JButton("Move",
new ImageIcon("hand.gif"));
78
class MoveButtonListener implements ActionListener
{
public void actionPerformed(ActionEvent event)
{
int x = Integer.parseInt(xField.getText());
int y = Integer.parseInt(yField.getText());
box.setLocation(x, y);
repaint();
}
}
ActionListener listener = new MoveButtonListener();
moveButton.addActionListener(listener);
79
// le etichette per i campi di testo
JLabel xLabel = new JLabel("x = ");
JLabel yLabel = new JLabel("y = ");
// il pannello che contiene i componenti
JPanel panel = new JPanel();
panel.add(xLabel);
panel.add(xField);
panel.add(yLabel);
panel.add(yField);
panel.add(moveButton);
// il frame che contiene il pannello
JFrame frame = new JFrame();
frame.setContentPane(panel);
frame.pack();
frame.show();
}
80
public void paint(Graphics g)
{
Graphics2D g2 = (Graphics2D)g;
g2.draw(box);
}
private Rectangle box;
private static final int BOX_X = 100;
private static final int BOX_Y = 100;
private static final int BOX_WIDTH = 20;
private static final int BOX_HEIGHT = 30;
}
81
JButton leftButton = new JButton(“Left”);
class LeftButtonListener implements ActionListener
{
public void actionPerformed(ActionEvent event)
{
box.translate(-BOX_WIDTH, 0);
repaint();
}
}
LeftButtonListener leftListener = new LeftButtonListener();
leftButton.addActionListener(leftListener);
Più pulsanti con comportamentosimile
82
JButton rightButton = new JButton(“Right”);
class RightButtonListener implements ActionListener
{
public void actionPerformed(ActionEvent event)
{
box.translate(BOX_WIDTH, 0);
repaint();
}
}
RightButtonListener rightListener = new RightButtonListener();
rightButton.addActionListener(rightListener);
Più pulsanti con comportamentosimile
83
Più pulsanti con comportamento simile
Evitiamo di scrivere codice ripetitivo per pulsanticon lo stesso comportamento!
Rimedio: isoliamo il codice comune e scriviamo un nuovo metodomakeButton
Ad ogni invocazione del metodoviene creato un bottone e un oggetto ricevitore di tipoButtonListener
84
public JButton makeButton(String label, final intdx, final int dy){
JButton button = new JButton(label);
class ButtonListener implements ActionListener{ public void actionPerformed(ActionEvent event) {
box.translate(dx, dy); repaint();
} }ButtonListener listener = new ButtonListener(); button.addActionListener(listener); return button;
}
Più pulsanti con comportamento simile
85
Più pulsanti con comportamentosimile
• Invochiamo il metodo quattro volte:
panel.add(makeButton("Left",-BOX_WIDTH,0)); panel.add(makeButton("Right",BOX_WIDTH,0)); panel.add(makeButton("Up",0,-BOX_HEIGHT)); panel.add(makeButton("Down",0,BOX_HEIGHT));
86
File ButtonApplet.javaimport java.applet.Applet;import java.awt.Graphics;import java.awt.Graphics2D;import java.awt.Rectangle;import java.awt.event.ActionEvent;import java.awt.event.ActionListener;import javax.swing.JButton;import javax.swing.JFrame;import javax.swing.JPanel;
/**Questo applet permette all’utente di spostare un rettangolo premendo quattro pulsanti con etichette "Left", "Right", "Up", and "Down".
*/
87
public class ButtonApplet extends Applet{
public ButtonApplet(){
// il rettangolo disegnato dal metodo paintbox = new Rectangle(BOX_X, BOX_Y,
BOX_WIDTH, BOX_HEIGHT);
// il pannello che contiene i componentiJPanel panel = new JPanel();
panel.add(makeButton("Left", -BOX_WIDTH, 0));panel.add(makeButton("Right", BOX_WIDTH, 0));panel.add(makeButton("Up", 0, -BOX_HEIGHT));panel.add(makeButton("Down", 0, BOX_HEIGHT));
// il frame che contiene il pannelloJFrame frame = new JFrame();frame.setContentPane(panel);frame.pack();frame.show();
}
88
public void paint(Graphics g){Graphics2D g2 = (Graphics2D)g;
g2.draw(box);}
/**Costruisce un pulsante che muove il rettangolo@param label l’etichetta del pulsante@param dx l’entità dello spostamento in
direzione x quando si preme il pulsante@param dy l’entità dello spostamento in
direzione y quando si preme il pulsante@return il pulsante
*/
89
public JButton makeButton(String label, final int dx, final int dy)
{JButton button = new JButton(label);
class ButtonListener implements ActionListener{
public void actionPerformed(ActionEvent event){
box.translate(dx, dy);repaint();
}}
ButtonListener listener = new ButtonListener();button.addActionListener(listener);return button;
}
90
private Rectangle box;private static final int BOX_X = 100;private static final int BOX_Y = 100;private static final int BOX_WIDTH = 20;private static final int BOX_HEIGHT = 30;
}
Top Related