Gestione di eventi ed interfacce utente grafiche

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


}

15

public void mouseExited(MouseEvent event)

{

System.out.println

("Mouse exited. x=" + event.getX()


}

}

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{


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{


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



class RadioButtonListener implements ActionListener{


}

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



class CheckBoxListener implements ActionListener{


}

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



class ComboBoxListener implements ActionListener{


}

ActionListener listener = new ComboBoxListener();fumettiCombo.addActionListener(listener);

50

Interfaccia utente






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



class MenuItemListener implements ActionListener{


}

ActionListener listener = new menuItemListener();fileNewMenuItem.addActionListener(listener);

61

Interfaccia utente






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,


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

{


{

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

{


{

box.translate(BOX_WIDTH, 0);

repaint();

}

}

RightButtonListener rightListener = new RightButtonListener();

rightButton.addActionListener(rightListener);


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


• 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,


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

}

Documents

Gestione di eventi ed interfacce utente grafiche