Gestione di eventi ed interfacce utente grafiche

Transcript

1 Gestione di eventi ed interfacce utente grafiche 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 2

2 Gestione degli eventi Per 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 3 Package java.awt.event Ogni 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 4

3 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 5 Interfacce Listener Sono 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 6

4 Interfacce Listener MouseListener: 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 7 MouseEvent Si 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 8

5 MouseEvent: metodi addmouselistener() 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 9 MouseListener L interfaccia MouseListener ha cinque metodi: mousepressed(mouseevent event) mousereleased(mouseevent event) mouseclicked(mouseevent event) mouseentered(mouseevent event) mouseexited(mouseevent event) 10

6 MouseListener public interface MouseListener void mousepressed(mouseevent event); void mousereleased(mouseevent event); void mouseclicked(mouseevent event); void mouseentered(mouseevent event); void mouseexited(mouseevent event); 11 Spiare gli eventi del mouse Scriviamo un programma che spia gli eventi del mouse e li stampa man mano che si verificano Scriviamo una classe MouseSpy (ricevitore) che implementa MouseListener Scriviamo un applet MouseSpyApplet (sorgente degli eventi) ed installiamo il ricevitore 12

7 File MouseSpy.java 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()); 13 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()); 14

8 public void mouseexited(mouseevent event) System.out.println ("Mouse exited. x=" + event.getx() + " y=" + event.gety()); 15 File MouseSpyApplet.java import java.applet.applet; public class MouseSpyApplet extends Applet public MouseSpyApplet() MouseSpy listener = new MouseSpy(); addmouselistener(listener); 16

9 Spiare gli eventi del mouse 17 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 18

10 File MouseApplet.java 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 paint box = new Rectangle(BOX_X, BOX_Y, BOX_WIDTH, BOX_HEIGHT); 19 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); 20

11 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; 21 MouseApplet Il ricevitore listener è definito come classe interna della classe MouseApplet mousepressed può accedere alla variabile istanza box definita nel costruttore In seguito ad una pressione del mouse viene chiamato 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() 22

12 Esecuzione di MouseApplet 23 Adattatori di eventi Nella 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! 24

13 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(); 25 ActionEvent Si 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 26

14 ActionEvent: metodi addactionlistener() 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 27 ActionListener L interfaccia ActionListener ha un solo metodo: actionperformed(actionevent event) public interface ActionListener void actionperformed(actionevent event); Non ha senso avere un adattatore di eventi per ActionListener 28

15 Interfaccia utente In 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, 29 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 30

16 Componenti Etichette Caselle di testo Aree di testo Barre di scorrimento Bottoni Bottoni radio Caselle di controllo Caselle combinate 31 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 JLabel JLabel xlabel = new JLabel ( x= ); 32

17 Caselle di testo Aree 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); 33 Aree di testo Aree in cui l utente può digitare del testo su più righe Per creare un area di testo si usa la classe JTextArea JTextArea textarea = new JTextArea(10,30); 34

18 Aree di testo Alcuni metodi append aggiunge testo alla fine dell area di testo settext imposta il testo gettext legge il contenuto dell area seteditable(false) impedisce la modifica dell area setfont imposta il font 35 Barre di scorrimento Possono essere aggiunte ad un area di testo Per creare una barra di scorrimento si usa la classe JScrollPane JTextArea textarea = new JTextArea(10,30); JScrollPane scrollpane = new JScrollPane(textArea); 36

19 Bottoni Pulsanti dell interfaccia che reagiscono al clic del mouse Per creare un bottone si usa la classe JButton JButton movebutton = new JButton( Move ); JButton movebutton = new JButton(new ImageIcon( hand.gif )); JButton movebutton = new JButton( Move,new ImageIcon( hand.gif )); 37 Bottoni Quando 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); 38

20 Bottoni radio Consentono all utente di fare una sola scelta tra più opzioni 39 Bottoni radio Per creare bottoni radio si usa la classe JRadioButton JRadioButton paperbutton = new JRadioButton( Paperino ); JRadioButton pippobutton = new JRadioButton( Pippo ); Poi si crea un oggetto di tipo ButtonGroup e si aggiungono i singoli pulsanti ButtonGroup fumettigroup = new ButtonGroup(); fumettigroup.add(paperbutton); fumettigroup.add(pippobutton); 40

21 Bottoni radio Alcuni metodi isselected() stabilisce se un pulsante è selezionato setselected(true) imposta la selezione per uno dei pulsanti del gruppo 41 Bottoni radio Quando 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); 42

22 Caselle di controllo Consentono all utente di fare varie scelte che non si escludono a vicenda 43 Caselle di controllo Per 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 44

23 Caselle di controllo Quando 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); 45 Caselle combinate Consentono all utente di fare una sola scelta tra più opzioni attraverso un elenco a discesa 46

24 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 ); 47 Caselle combinate Alcuni metodi seteditable() rende la casella modificabile getselecteditem() restituisce l elemento (di tipo Object) scelto dall utente setselecteditem() imposta la voce iniziale da visualizzare nella casella 48

25 Caselle combinate Quando 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); 49 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 50

26 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 51 Pannelli Contenitori per i componenti dell interfaccia utente Per creare un pannello si usa la classe JPanel JPanel panel = new JPanel(); Dopo aver creato il pannello, si aggiungono i componenti mediante il metodo add Panel.add(xLabel); Panel.add(xField); Panel.add(yLabel); Panel.add(yField); Panel.add(moveButton); 52

27 Frame Un frame è una finestra indipendente dotata di barra del titolo pulsanti di ridimensionamento e chiusura Per creare un frame si usa la classe JFrame JFrame frame = new JFrame(); 53 Frame 54

28 Frame Il metodo pack() assegna le dimensioni al frame in modo che possa contenere tutti i suoi componenti frame.pack(); Il metodo show() mostra la finestra sullo schermo (inizialmente è invisibile) frame.show(); 55 Barra dei menu Una barra dei menu è costituita da un gruppo di menu lungo il margine superiore di una finestra 56

29 Barra dei menu Per creare una barra dei menu si usa la classe JMenuBar JMenuBar menubar = new JMenuBar(); La barra dei menu deve essere associata a un oggetto di tipo Frame con il metodo setjmenubar() frame.setjmenubar(menubar); 57 Menu Per creare un menu si usa la classe JMenu JMenu filemenu = new JMenu( File ); I menu vengono aggiunti alla barra dei menu mediante il metodo add() menubar.add(filemenu); 58

30 Menu All interno dei menu si aggiungono le voci di menu Per creare una voce di menu si usa la classe JMenuItem JMenuItem filenewmenuitem = new JMenuItem( New ); filemenu.add(filenewmenuitem); 59 Menu Quando 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); 60

31 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 61 Gestori di layout Determinano la disposizione (layout) delle componenti all interno di un contenitore Alcuni gestori comunemente usati: FlowLayout (a scorrimento) Borderlayout (a bordi) GridLayout (a griglia) GridBagLayout 62

32 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() 63 FlowLayout Gestore di default Posiziona le componenti da sinistra verso destra finchè c è spazio e poi procede alla riga successiva 64

33 FlowLayout 65 BorderLayout Suddivide 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 66

34 BorderLayout 67 BorderLayout Impostiamo il gestore in un pannello: panel.setlayout(new BorderLayout()); Aggiungiamo un componente al contenitore, specificandone la posizione: panel.add(label, BorderLayout.CENTER); 68

35 BorderLayout Possiamo usare il pannello dei contenuti predefinito di un frame, ottenuto dal metodo getcontentpane(): frame.getcontentpane().add(label, BorderLayout.CENTER); 69 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 70

36 GridLayout 71 GridLayout Impostiamo 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); 72

37 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 73 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 74

38 Esempio Scriviamo un applet che consente all utente di muovere un rettangolo specificando le coordinate dell angolo superiore sinistro 75 File ButtonApplet.java import 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 */ 76

39 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")); 77 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); 78

40 // 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(); 79 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; 80

41 Più pulsanti con comportamento simile 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); 81 Più pulsanti con comportamento simile 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); 82

42 Più pulsanti con comportamento simile Evitiamo di scrivere codice ripetitivo per pulsanti con lo stesso comportamento! Rimedio: isoliamo il codice comune e scriviamo un nuovo metodo makebutton Ad ogni invocazione del metodo viene creato un bottone e un oggetto ricevitore di tipo ButtonListener 83 Più pulsanti con comportamento simile 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; 84

43 Più pulsanti con comportamento simile 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)); 85 File ButtonApplet.java import 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". */ 86

44 public class ButtonApplet extends Applet public ButtonApplet() // il rettangolo disegnato dal metodo paint box = new Rectangle(BOX_X, BOX_Y, BOX_WIDTH, BOX_HEIGHT); // il pannello che contiene i componenti JPanel 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 pannello JFrame frame = new JFrame(); frame.setcontentpane(panel); frame.pack(); frame.show(); 87 public void paint(graphics g) Graphics2D g2 = (Graphics2D)g; g2.draw(box); /** Costruisce un pulsante che muove il label l etichetta del dx l entità dello spostamento in direzione x quando si preme il dy l entità dello spostamento in direzione y quando si preme il il pulsante */ 88

45 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; 89 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; 90