Swing e la programmazione a eventi

Transcript

1 Swing e la programmazione a eventi

2 Lo stile basato su eventi I componenti interagiscono attraverso l invio di messaggi broadcast o multicast Attenzione! C è un incendio Si avvisano i signori passeggeri che Ogni componente notifica un cambiamento nel proprio stato o in quello dell ambiente inviando un messaggio In tal caso agisce da generatore dell evento Tutti i componenti interessati all evento descritto da tale messaggio ne ricevono copia In tal caso agiscono da ascoltatori dell evento In generale, il generatore dell evento non conosce né il numero né l identità degli ascoltatori 2

3 Caratteristiche generali Con il paradigma a eventi L applicazione è puramente reattiva Non è possibile identificare staticamente un flusso di controllo unitario Il programma principale si limita a inizializzare l applicazione, istanziando gli osservatori e associandovi gli opportuni handler Occorrenza dell evento A Occorrenza dell evento B Realtà Applicazione Osservatori Notifica dell evento A Notifica dell evento B Ascoltatore evento A Ascoltatore evento A listeners Ascoltatore evento B 3

4 Vantaggi Utili per sistemi altamente dinamici ed evolutivi, in cui nuovi moduli si possono aggiungere o possono essere eliminati Per comunicare tra di loro, i moduli non devono conoscere le rispettive identità come invece accade in Java nomemodulo.nomeservizio (parametri) Si parla più in generale di paradigma di progettazione "publish and subscribe" moduli che generano eventi ("publish") moduli che sottoscrivono l'interesse ad essere notificati dell'occorrenza di certi eventi ("subscribe") 4

5 In pratica subscribe y y x Gestore degli eventi subscribe z subscribe x 5

6 Modello a eventi in Java Un applicazione può essere cost ruit a come component i che interagiscono attraverso eventi Utilizzando le convenzioni dei JavaBean Qui noi vediamo il package javax.swing libreria che fornisce le classi che consentono la progettazione delle interfacce utente secondo lo stile ad eventi 6

7 Swing

8 GUI GUI: Graphical User Interface L'interfaccia utente costituisce il mezzo con il quale l'utente interagisce con l'applicazione costituisce il "look&feel" Fondamentale per l'usabilità del software Come si progetta? 8

9 Progettazione Separare GUI e parte funzionale La GUI si preoccupa di interagire con l'utente visualizzare accettare input La parte funzionale contiene la logica applicativa Vantaggi GUI modificabile senza toccare la parte funzionale e viceversa Diverse strategie "look&feel" per la stessa applicazione Spesso le modifiche si incentrano sulla GUI al fine di migliorare l'usabilità 9

10 Model-View-Controller Swing si basa su un paradigma di progettazione che si incontra anche in altri campi: Un componente ha un suo modello logico Un componente ha un suo aspetto visuale Un componente ha comportamenti che consentono la sua interazione con il resto dell applicazione Esempio -> JButton Model: Premuto/Rilasciato (variabile booleana) View: dipende dal look&feel Controller: ActionPerformed della classe ActionListner collegata al JButton (ci torneremo) 10

11 AWT e Swing Abstract Windowing Toolkit (AWT) Sono un residuo di precedenti versioni di JAVA fornisce ancora alcune importanti componenti al funzionamento e creazione di elementi di interfaccia Swing Consentono di realizzare applicazioni con un look and feel più aggiornato e elegante Si basano su un modello di interazione introdotto da JAVA2 Hanno superato alcuni dei difetti di AWT Chiedono servizi al sistema operativo, ma (normalmente) ad un livello più basso e riescono così ad avere un maggiore controllo del look&feel Sono una estensione del core di JAVA e possono risultare più complesse da programmare Consentono un maggior controllo del look&feel di un applicazione e garantiscono il medesimo look&feel su tutte le piattaforme 11

12 AWT e Swing Il nome di tutti i componenti Swing inizia con J La convenzione è JXxxx I componenti Swing sono lightweight Un componente lightweight implementa il suo look-and-feel direttamente in Java senza delegarlo al sistema operativo che ospita l applicazione Maggior uniformità di comportamento È bene non includere componenti Swing ed AWT in una stessa interfaccia: I componenti AWT (heavyweight) vengono sempre mostrati sopra i componenti Swing (ad esempio con i Menu) Problema dovuto alla mancanza di compatibilità fra i due framework 12

13 Un interfaccia Swing Tre elementi fondamentali Contenitori Elementi grafici Eventi 13

14 Frame Un frame Definisce l intelaiatura dell interfaccia Fornisce un rettangolo, decorato alla maniera delle finestre cui siamo abituati E un oggetto COMPLESSO! QuickTime and a TIFF (LZW) decompressor are needed to see this picture. 14

15 JFrame Come in tutta la programmazione ad oggetti occorre conoscere la gerarchia entro la quale si colloca JFrame Per conoscere la derivazione di ogni oggetto delle librerie GUI di Swing si deve fare ricorso alla documentazione in linea di Java java.lang.object java.awt.component java.awt.container java.awt.window java.awt.frame javax.swing.jframe 15

16 JFrame QuickTime and a TIFF (LZW) decompressor are needed to see this picture. 16

17 Scorrendo la gerarchia Component A component is an object having a graphical representation that can be displayed on the screen and that can interact with the user. Examples of components are the buttons, checkboxes, and scrollbars of a typical graphical user interface Component è quindi una classe molto generale e definisce un sacco di metodi Container Un Component con la proprietà di essere abilitato a contenere altri Component Prevede metodi di tipo add per aggiungere componenti Prevede anche metodi per rappresentare il contenitore e i suoi contenuti e per aggiornarne l immagine 17

18 Scorrendo la gerarchia Window È un particolare contenitore che può apparire sullo schermo come entità propria, ma non ha bordi, barre e controlli Possiede metodi per mostrare la finestra, nascondere la finestra, posizionare la finestra e aggiustare l ordine di comparizione relativamente ad altre finestre Frame Si tratta di Window con bordi e barra del titolo, oltre alle caratteristiche solite di un interfaccia (minimizzazione, iconizzazione, chiusura, resizing) JFrame È un Frame AWT a cui SWING aggiunge una serie di metodi per ridefinire i dettagli grafici. Ad esempio l metodo setsize(int l, int h) permette di determinare le dimensioni del Frame Il metodo setlocation(int x, int y) consente di definire le coordinate del pixel in alto a sinistra del frame nel riferimento dello schermo 18

19 Cosa possiamo fare con un JFrame? Non possiamo disegnare, scrivere o aggiungere elementi direttamente al Frame Gli elementi diversi dal Menu debbono essere aggiunti ad un Container opportuno Ad esempio Per scrivere del testo dentro un Frame, il testo dovrà essere scritto (aggiunto) al pannello contentpane del JFrame Per convenienza il metodo add() di JFrame si occupa di tutto il lavoro frame.getcontentpane().add(label) = frame.add(label) 19

20 HelloWorldSwing import javax.swing.*; public class HelloWorldSwing { private static void createandshowgui() { JFrame frame = new JFrame("HelloWorldSwing"); JLabel label = new JLabel("Hello World"); frame.getcontentpane().add(label); frame.pack(); frame.setvisible(true); } } public static void main(string[] args) { createandshowgui(); } 20

21 HelloWorldSwing (seconda versione) import javax.swing.*; public class HelloWorldSwing { private static void createandshowgui() { JFrame.setDefaultLookAndFeelDecorated(true); JFrame frame = new JFrame("HelloWorldSwing"); frame.setdefaultcloseoperation(jframe.exit_on_close); JLabel label = new JLabel("Hello World"); frame.getcontentpane().add(label); frame.pack(); frame.setvisible(true); } } public static void main(string[] args) { createandshowgui(); } 21

22 Look&feel 22

23 Look&feel nativo public class WindowUtilities { public static void setnativelookandfeel() { try { UIManager.setLookAndFeel( UIManager.getSystemLookAndFeelClassName()); } catch(exception e) { System.out.println( Problema Look and feel nativo + e); } } 23

24 Aggiungiamo componenti Dobbiamo sapere: Da dove prendere i componenti? Una lista/descrizione delle librerie disponibili Come costruirli e personalizzarli? Costruttori e modificatori Come usarli? Quali eventi sono in grado di raccogliere e quali i listener necessari Come disporli sui frame che costituiscono la nostra applicazione? Layout manager 24

25 Container Top-level container JApplet JDialog JFrame General-purpose container JPanel JScrollPane JSplitPane JTabbedPane 25

26 Container Special-purpose container JInternalFrame JLayeredPane JToolBar Permette di inserire frame dentro altri frame Permette di semplificare l attivazione di determinate funzioni per mezzo di semplici pulsanti Permette di inserire componenti a vari livelli di profondità 26

27 Controlli di base JButtons JComboBox JList JMenu Include buttons, radiobuttons, checkbox, MenuItem, ToggleButton JSlider JTextField Include JPasswordField, JTextArea 27

28 Visualizzatori di informazioni non editabili JLabel JProgressBar Jcomponent.setToolTipText(String) Può includere immagini e/o testo 28

29 Visualizzatori di informazioni formattate editabili JColorChooser JFileChooser JTable JTextComponent JTree JTextField, JPasswordField, JTextArea, JEditorPane, JTextPane 29

30 Altri componenti grafici Label PushButton CheckBoxButton ScrollBar PullDownMenu PopupMenu 30

31 Layout Java gestisce la disposizione dei componenti dentro i Container mediante oggetti che si chiamano LayoutManager Incapsulano gli algoritmi per il posizionamento delle componenti di una GUI Il LayoutManager mantiene l algoritmo separato in una classe a parte È un interfaccia che descrive come un componente deve comunicare con il suo LayoutManager Esiste un ampia collezione di LayoutManager, ma se si vuole si può creare il proprio Noi vediamo solo i LayoutManager più comuni: FlowLayout, BorderLayout, GridLayout, CardLayout e GridBagLayout L associazione avviene tramite il metodo setlayout() di cui è provvista la classe Container (e quindi tutte le sue sottoclassi) p.setlayout(new BorderLayout()); 31

32 FlowLayout E il più semplice. La sua strategia è: Rispettare la dimensione di tutti i componenti Disporre i componenti in orizzontale finché non viene riempita tutta una riga, altrimenti iniziare su una nuova riga Se non c è spazio i componenti non vengono visualizzati private static void createandshowgui() { JFrame frame = new JFrame("Flow"); frame.setlayout(new FlowLayout()); frame.add(new JButton("Button1")); frame.add(new JButton("Button2")); frame.add(new JButton("Button3")); frame.add(new JButton("Button4")); frame.add(new JButton("Button5")); frame.pack(); frame.setvisible(true); } 32

33 BorderLayout Definisce 5 aree logiche: NORTH, SOUTH, CENTER, EAST e WEST Richiede la dimensione preferita del componente (altezza e larghezza) Se il componente è NORTH o SOUTH setta l altezza al valore preferito e la larghezza in modo da occupare tutto lo spazio orizzontale Se il componente è EAST o WEST setta la larghezza al valore preferito e l altezza in modo da occupare tutto lo spazio verticale restante Se il componente è CENTER setta l altezza e la larghezza in modo da occupare tutto lo spazio centrale restante Quindi Le posizioni NORTH e SOUTH servono quando vogliare fissare l altezza di un componente al valore preferito Le posizioni EAST e WEST servono quando vogliamo fissare la larghezza di un componente al valore preferito La parte CENTER è quella che si espande 33

34 Esempio private static void createandshowgui() { JFrame frame = new JFrame("Border"); frame.setlayout(new BorderLayout()); frame.add(new JButton("North"), BorderLayout.NORTH); frame.add(new JButton("South"), BorderLayout.SOUTH); frame.add(new JButton("Center"), BorderLayout.CENTER); frame.add(new JButton("East"), BorderLayout.EAST); frame.add(new JButton("West"), BorderLayout.WEST); frame.pack(); frame.setvisible(true); } 34

35 GridLayout Dispone i componenti su una griglia private static void createandshowgui() { JFrame frame = new JFrame("Grid"); frame.setlayout(new GridLayout(3,4)); for (int x=1; x<13; x++) frame.add(new JButton(""+x)); frame.pack(); frame.setvisible(true); } 35

36 Stratificazione private static void createandshowgui() { JFrame f = new JFrame( Example"); JPanel p1 = new JPanel(); JPanel p2 = new JPanel(); JPanel p3 = new JPanel(); JPanel p4 = new JPanel(); } f.setlayout(new BorderLayout()); p2.setlayout(new FlowLayout()); p4.setlayout(new BorderLayout()); p4.add(new JButton("Button1"), BorderLayout.EAST); p4.add(new JButton("Button2"), BorderLayout.WEST); p2.add(p3); p2.add(p4); f.add(p1, BorderLayout.NORTH); f.add(p2, BorderLayout.SOUTH); f.pack(); f.setvisible(true); 36

37 Eventi L interazione tra gli elementi dell interfaccia e la logica applicativa è gestita tramite eventi Gli EventListener sono interfacce definite per catturare e processare tipi di eventi particolari Un listener deve Essere associato al componente Essere informato quando il componente genera un evento del tipo richiesto Rispondere facendo qualcosa di appropriato 37

38 EventHandler Devono avere tre pezzi di codice Dichiarazione Estendono o implementano listener esistenti public class MyClass implements ActionListener { Associazione tra handler (ovvero listener) e istanza somecomponent.addactionlistener(instanceofmyclass); Definizione del codice che implementa i metodi dell interfaccia listener public void actionperformed(actionevent e) {... 38

39 Un primo esempio public class Demo extends JFrame implements ActionListener { JButton b = new JButton("Click me!"); public Demo() { b.addactionlistener(this); getcontentpane().add(b); pack(); setvisible(true); } public void actionperformed(actionevent e) { b.setbackground(color.red); } 39

40 Eventi e Listener Categoria Mouse Keyboard Selezione elem input di testo scrollbar bottoni, menu,... cambiamenti nella finestra focus Evento MouseEvent KeyEvent ItemEvent TextEvent AdjustmentEvent ActionEvent WindowEvent FocusEvent handler MouseListener, MouseMotionListener KeyListener ItemListener TextListener AdjustmentListener ActionListener WindowListener FocusListener 40

41 Esempio completo (parte I) import java.awt.*; import java.awt.event.*; import javax.swing.*; public class CheckDemo { static JFrame jframe = new JFrame("Example"); public static void setupjframe() { jframe.setsize(400,100); jframe.setvisible(true); jframe.getcontentpane().setlayout( new FlowLayout() ); } WindowListener l = new MyWindowAdapter(); jframe.addwindowlistener(l); 41

42 Esempio completo (parte II) public static void main(string[] args) { setupjframe(); JCheckBox jck1 = new JCheckBox("Pepperoni"); JCheckBox jck2 = new JCheckBox("Mushroom"); JCheckBox jck3 = new JCheckBox("Black olives"); JCheckBox jck4 = new JCheckBox("Tomato"); jck1.addactionlistener(new MyActionListener()); jck2.additemlistener(new MyItemListener()); } } Container c = jframe.getcontentpane(); c.add(jck1); c.add(jck2); c.add(jck3); c.add(jck4); jframe.pack(); 42

43 Esempio completo (parte III) ActionEvent public class MyActionListener implements ActionListener { public void actionperformed(actionevent e) { System.out.println("event = " + e); } } ItemEvent public class MyItemListener implements ItemListener { public void itemstatechanged(itemevent e) { if (e.getstatechange()==e.selected) System.out.print("selected "); else System.out.print("de-selected "); System.out.print("Mushroom\n"); } } 43

44 Esempio completo (parte IV) WindowEvent public class MyWindowAdapter extends WindowAdapter { public void windowclosing(windowevent e) {System.exit(0);} } 44

45 Altro esempio QuickTime and a TIFF (LZW) decompressor are needed to see this picture. public class SwingApplication implements ActionListener { private static String labelprefix = "Number of button clicks: "; private int numclicks = 0; final JLabel label = new JLabel(labelPrefix + "0 "); public Component createcomponents() { JButton button = new JButton("I'm a Swing button!"); button.setmnemonic(keyevent.vk_i); button.addactionlistener(this); label.setlabelfor(button); JPanel pane = new JPanel(new GridLayout(0, 1)); pane.add(button); pane.add(label); pane.setborder(borderfactory.createemptyborder( 30, //top 30, //left 10, //bottom 30) //right ); return pane; } 45

46 Altro esempio public void actionperformed(actionevent e) { numclicks++; label.settext(labelprefix + numclicks); } } private static void createandshowgui() { JFrame.setDefaultLookAndFeelDecorated(true); JFrame frame = new JFrame("SwingApplication"); frame.setdefaultcloseoperation(jframe.exit_on_close); SwingApplication app = new SwingApplication(); Component contents = app.createcomponents(); frame.getcontentpane().add(contents, BorderLayout.CENTER); frame.pack(); frame.setvisible(true); } public static void main(string[] args) { createandshowgui(); } 46

47 Swing e multi-threading Un piccolo approfondimento

48 GUI Swing - multithreading Quando si scrive una GUI Swing si assiste a un cambio di paradigma Programma con flusso centralizzato -> programma reattivo basato su eventi Per questo motivo le Swing adottano un architettura multithread. Ciò permette di ottenere interfacce sempre reattive e che non si bloccano Esempio: se ho un client di posta elettronica e qualcuno mi spedisce un messaggiodi 10M voglio comunque potere: vedere l intestazione della mail, vedere una barra che mi indica quanto manca al download, scrivere una nuova mail nel frattempo, ecc. 48

49 3 tipi di thread - thread iniziale Il thread principale si occupa di inizializzare l interfaccia grafica. import javax.swing.*; public class HelloWorldSwing { private static void createandshowgui() { JFrame frame = new JFrame("HelloWorldSwing"); JLabel label = new JLabel("Hello World"); frame.getcontentpane().add(label); frame.pack(); frame.setvisible(true); } public static void main(string[] args) { createandshowgui(); } } // posso andare avanti a fare altro 49

50 3 tipi di thread - Event Dispatch Thread (EDT) Tutto il codice per la gestione dell interfaccia grafica viene eseguito dentro l EDT. Esiste una coda di eventi di sistema che raccoglie i click del mouse, la pressione sui tasti della tastiera, ecc. L EDT controlla ciclicamente la coda. Raccoglie un evento e decide cosa farne. Se è un click su un bottone chiama il metodo per la gestione del click del mouse su quel bottone. La gestione mediante coda garantisce che venga rispettato un certo ordine nella gestione degli eventi 50

51 Immaginiamo cosa sarebbe successo se non avessimo avuto l EDT. Ipotizziamo di avere due tasti: A e B Tasto A: Legge il contenuto di un file e lo presenta all utente all interno di una textbox. Tasto B: Legge dallo stesso textbox e scrive i contenuti su un file Cosa succede se premo molto velocemente prima A e poi B? Probabilmente avrei un comportamento anomalo!!! E per questo che tutto ciò che lavora sull interfaccia gira all interno di un univo thread (l EDT). 51

52 SwingUtilities Il modo giusto di inizializzare una GUI quindi non è quello che abbiamo visto prima, ma SwingUtilities.invokeLater(new Runnable() { public void run() { createandshowgui(); } } In questomodocreoun oggettorunnable(ilqualesioccupadi creare l interfaccia) e chiedo che venga gestito dall EDT. Esiste anche: SwingUtilities.invokeAndWait(new Runnable() { }) 52

53 La coda degli eventi di sistema 53

54 Considerazioni per la progettazione Per avere una buona interfaccia grafica cbisogna essere reattivi Bisogna dare l impressione all utente che sia sempre in controllo Il segreto è cercare di scrivere EventListener che siano veloci In questo modo eviteremo situazioni in cui un click può portare a una lunga attesa prima di vedere un risultato Ma se devo fare qualcosa che richiede tempo? Come faccio? Dobbiamo introdurre il terzo tipo di thread 54

55 3 tipi di thread - Worker Thread Il Worker thread viene creato dal programmatore per l esecuzione di compiti gravosi in background 55

56 Un indizio Per capire a fondo dobbiamo introdurre (per davvero) il multi-threading e la concorrenza in Java Sono argomenti di Info 3 Per chi volesse approfondire per conto proprio Il modo giusto è quello di usare un oggetto SwingWorker Definisce un metodo che si occupa del lavoro in background, e Un secondometodocheinveceverrà eseguito nell EDT e che fa da ponte tra il background thread e la GUI 56

57 Link utili Resources/Slides/Chapter17.ppt Building Graphical User Interfaces with Java sysc-2004/w04/lectures/sysc a-Gui.ppt Graphical User Interfaces with Java 57