Paradigma ad eventi, MVC, Swing

Swing e la programmazione a eventi
Prova Finale – Ingegneria del Software
Davide Mazza
[email protected]
http://home.dei.polimi.it/mazza
Lo stile basato su eventi
l 
I componenti interagiscono attraverso l’invio di messaggi
broadcast o multicast
l 
l 
l 
Ogni componente notifica un cambiamento nel proprio stato o in
quello dell’ambiente inviando un messaggio
l 
l 
In tal caso agisce da “generatore dell’evento”
Tutti i componenti interessati all’evento descritto da tale
messaggio ne ricevono copia
l 
l 
“Attenzione! C’è una nuova notizia di Politica”
“Sono interessato alle notizie di Sport”
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
Caratteristiche generali
l 
Con il paradigma a eventi
l 
l 
L’applicazione è puramente “reattiva”
Non è possibile identificare staticamente un flusso di controllo unitario
l 
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
Ascoltatore
evento A
Notifica dell’evento B
Ascoltatore
evento A
Ascoltatore
evento B
listeners
3
Vantaggi
l 
l 
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à
l 
come invece accade in Java
l 
l 
nomeModulo.nomeServizio (parametri)
Si parla più in generale di paradigma di progettazione "publish
and subscribe"
l 
l 
moduli che generano eventi ("publish")
moduli che sottoscrivono l'interesse ad essere notificati
dell'occorrenza di certi eventi ("subscribe")
4
In pratica
subscribe y
x
Gestore degli eventi
y
subscribe z
subscribe x
5
Modello a eventi in Java
l 
l 
Un’applicazione può essere costruita come componenti che
interagiscono attraverso eventi
Qui noi vediamo il package javax.swing
l 
libreria che fornisce le classi che consentono la progettazione delle
interfacce utente secondo lo stile ad eventi
6
Swing
UI e GUI
l 
UI: User Interface
l 
L'interfaccia utente costituisce il mezzo con il quale l'utente
interagisce con l'applicazione
l 
GUI: Graphical User Interface
l 
Fondamentale per l'usabilità del software
l 
Come si progetta?
8
Progettazione
l 
l 
Separare GUI e parte funzionale
La GUI si preoccupa di interagire con l'utente
l 
l 
visualizzare
accettare input
l 
La parte funzionale contiene la logica applicativa
l 
Vantaggi
l 
l 
l 
GUI modificabile senza toccare la parte funzionale e viceversa
La parte funzionale può essere testata automaticamente senza
interagire con l’interfaccia grafica
Diverse strategie "look&feel" per la stessa applicazione
l 
Spesso le modifiche si incentrano sulla GUI al fine di migliorare
l'usabilità
9
AWT e Swing
l 
Abstract Windowing Toolkit (AWT)
l 
l 
Sono un residuo di precedenti versioni di JAVA fornisce ancora alcune
importanti componenti al funzionamento e creazione di elementi di interfaccia
Swing
l 
l 
l 
l 
l 
Costruite sopra AWT
Consentono di realizzare applicazioni con un “look and feel” più aggiornato e
elegante
Più semplici da usare rispetto alle librerie AWT
Il nome di tutti le classi Swing inizia con J (Es. JButton, Jframe, ecc)
Per motivi di compatibilità è bene non includere componenti Swing ed AWT in
una stessa interfaccia
10
Model-View-Controller
l 
Swing si basa su un “paradigma” di progettazione che si incontra
anche in altri campi:
l 
l 
l 
l 
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
l 
l 
l 
Model: Premuto/Rilasciato (variabile booleana)
View: dipende dal look&feel
Controller: azioni associate agli eventi del pulsante
11
Un’interfaccia Swing
l 
Tre elementi fondamentali
l 
Contenitori
l 
l 
Elementi Interattivi e visuali
l 
l 
Finestre, Panelli
Pulsanti, Menù, Caselle di testo
Eventi
l 
Pulsante premuto, Focus, resize
12
Components e Container
l 
l 
l 
Tutti gli elementi che hanno una rappresentazioni grafica sono dei
Component
l  Sono sotto classi di java.awt.Component
l  Esempi: JLabel, JTextArea, JButton
Sia i contenitori che gli elementi interattivi sono Component
I contenitori sono implementati dalla classe java.awt.Container
l  Sotto classe di java.awt.Component
l  Esempi: JFrame, JPanel
13
Container
l 
l 
l 
l 
I Container possono contenere un insieme di Component
Dato che tutti i Container sono dei Component posso avere un
meccanismo a scatole cinesi
l  Un container può contenere altri Container
l  Esempio: una finestra contiene diversi pannelli, e i pannelli
contengono vari pulsanti
l  Non tutti i Component sono Container!
Container.add(Component c)
Container.add(Component c, parametri …)
l  I parametri specificano come il componente verrà posizionato
nel contenitore
14
Frame
l 
Un frame
l 
l 
l 
l 
Definisce l’intelaiatura dell’interfaccia
Fornisce un rettangolo, “decorato” alla maniera delle
finestre cui siamo abituati
E’ un oggetto COMPLESSO!
Riceve Eventi come close, resize,
riduzione ad icona, ecc
15
JFrame
l 
l 
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
l 
http://java.sun.com/j2se/1.5/docs/api/
java.lang.Object
java.awt.Component
java.awt.Container
java.awt.Window
java.awt.Frame
javax.swing.JFrame
16
Scorrendo la gerarchia
l 
Component
l 
l 
l 
“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
l 
Un Component con la proprietà di essere abilitato a contenere altri
Component
l 
l 
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
Scorrendo la gerarchia
l 
Window
l 
l 
l 
Frame
l 
l 
È 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
Si tratta di Window con bordi e barra del titolo, oltre alle caratteristiche
solite di un’interfaccia (minimizzazione, iconizzazione, chiusura, resizing)
JFrame
l 
È un Frame AWT a cui SWING aggiunge una serie di metodi per ridefinire i
dettagli grafici. Ad esempio
l 
l 
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
Cosa possiamo fare con un JFrame?
l 
Aggiungere un titolo usando il costruttore ereditato
l 
Possiamo aggiungere componenti nel suo pannello principale:
l 
frame.getContentPane().add(label)
l 
frame.add(label)
l 
Settare le dimensioni delle finestra
l 
Associare un azione all’evento di chiusura della finestra
l 
Mostrare la finestra all’utente
19
HelloWorldSwing
import javax.swing.*;
public class HelloWorld extends JFrame{
"
"public HelloWorld (){
"
"super("HelloWorld!");
"
"setSize(200, 100);
"
"setDefaultCloseOperation(EXIT_ON_CLOSE);
"
"add(new JLabel("Hello World!"));
"
"
"
"setVisible(true);
"}
"
"public static void main(String[] args) {
"
"new HelloWorld();
"}
}
20
Aggiungiamo componenti
l 
Dobbiamo sapere:
l 
Da dove prendere i componenti?
l 
l 
Come costruirli e personalizzarli?
l 
l 
Costruttori e modificatori
Come usarli?
l 
l 
Una lista/descrizione delle librerie disponibili
Quali eventi sono in grado di raccogliere e quali i listener necessari
Come disporli sui frame che costituiscono la nostra applicazione?
l 
Layout manager
21
Container
l 
Top-level container
JApplet
l 
JDialog
JFrame
General-purpose container
JPanel
JScrollPane
JSplitPane
JTabbedPane
22
Container
l 
Special-purpose container
JInternalFrame
JLayeredPane
JToolBar
Permette di semplificare
l’attivazione di determinate
funzioni per mezzo di semplici
pulsanti
Permette di inserire frame
dentro altri frame
Permette di inserire
componenti a vari
livelli di profondità
23
Controlli di base
JButtons
Include buttons,
radioButtons, checkbox,
MenuItem, ToggleButton
JComboBox
JSlider
JList
JMenu
JTextField
Include JPasswordField,
JTextArea
24
Visualizzatori di informazioni non editabili
JLabel
JProgressBar
Jcomponent.setToolTipText(String)
Può includere
immagini e/o testo
25
Visualizzatori di informazioni formattate
editabili
JColorChooser
JFileChooser
JTable
JTextComponent
JTree
JTextField,
JPasswordField,
JTextArea, JEditorPane,
JTextPane
26
Layout
l 
Java gestisce la disposizione dei componenti dentro i Container
mediante oggetti che si chiamano LayoutManager
l 
l 
l 
l 
È 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
l 
l 
Incapsulano gli algoritmi per il posizionamento delle componenti di una
GUI
Il LayoutManager mantiene l’algoritmo separato in una classe a parte
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)
l 
p.setLayout(new BorderLayout());
27
FlowLayout
l 
E’ il più semplice. La sua strategia
è:
l 
l 
l 
l 
l 
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
E’ possibile allineare i componenti a
sinistra, destra o al centro
E’ possibile specificare la distanza
verticale e orizzontale
public static void main(String[] args) {
"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);
}
"
28
BorderLayout
l 
l 
l 
l 
l 
l 
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
l 
l 
l 
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
29
Esempio
public static void main(String[] args) {
"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);
}
"
"
"
"
30
GridLayout
Dispone i componenti su una griglia
l 
public static void main(String[] args) {
"JFrame frame = new JFrame("Grid");
"frame.setLayout(new GridLayout(3,4));
"for (int x=0; x<12; x++)
"
"frame.add(new JButton(""+x));
"frame.pack();
"frame.setVisible(true);
}
"
"
"
31
Stratificazione
"public static void main(String[] args) {
"
"JPanel panel_flow=new JPanel(new FlowLayout(FlowLayout.CENTER,20,20));
"
"panel_flow.setBorder(BorderFactory.createTitledBorder("Flow Layout"));
"
"panel_flow.add(new JLabel("JLabel"));
"
"panel_flow.add(new JTextField("JTextField"));
"
"panel_flow.add(new JButton("JButton"));
"
"JPanel panel_grid=new JPanel(new GridLayout(3,1));
"
"panel_grid.setBorder(BorderFactory.createTitledBorder("Grid Layout"));
"
"panel_grid.add(new JButton("JButton_1"));
"
"panel_grid.add(new JButton("JButton_2"));
"
"panel_grid.add(panel_flow);
"
"
"
"JFrame f = new JFrame("Example");
"
"f.add(panel_grid);
"
"f.pack();
"
"f.setVisible(true);
"}
"
"
"
"
32
Layout di Default
l 
Nel JPanel il layout di default è: FlowLayout
l 
Nel JFrame il layout di default è: BorderLayout
33
Eventi
l 
l 
l 
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
l 
l 
l 
Essere associato al componente
Essere informato quando il componente genera un evento del tipo
richiesto
Rispondere facendo qualcosa di appropriato
34
EventHandler
l 
Devono avere tre pezzi di codice
l 
Dichiarazione
l 
l 
l 
Associazione tra handler (ovvero listener) e istanza
l 
l 
Estendono o implementano listener esistenti
public class MyClass implements ActionListener {
someComponent.addActionListener(instanceOfMyClass);
Definizione del codice che implementa i metodi dell’interfaccia listener
l 
public void actionPerformed(ActionEvent e) { ...
35
Un primo esempio
public class Demo extends JFrame implements ActionListener {
"JButton button = new JButton("Click me!");
"public Demo() {
"
"button.addActionListener(this);
"
"getContentPane().add(button);
"
"pack();
"
"setVisible(true);
"}
"public void actionPerformed(ActionEvent e) {
"
"button.setBackground(Color.RED);
"}
"public static void main(String[] args) {
"
"new Demo();
"}
} "
36
Eventi e Listener
Categoria
Evento
handler
Mouse
MouseEvent
MouseListener,
MouseMotionListener
Keyboard
KeyEvent
KeyListener
Selezione elem
ItemEvent
ItemListener
input di testo
TextEvent
TextListener
scrollbar
AdjustmentEvent
AdjustmentListener
bottoni, menu,...
ActionEvent
ActionListener
cambiamenti nella finestra
WindowEvent
WindowListener
focus
FocusEvent
FocusListener
37
Swing e Thread
l 
l 
l 
Nelle Swing, la gestione degli eventi e il ridisegno delle finestre e
dei componenti grafici è affidata ad un unico thread
l  Dispatching Thread
Perché un unico thread? Perché le Swing non sono thread safe!
L’accesso ad un oggetto da parte di più thread può causare
problemi!
Dispatching Thread:
l  Viene eseguito in background
l  Processa gli elementi presenti nella coda degli eventi grafici
l  Anche il ri-disegno dei componenti è un evento (paint)
38
Esempio Completo
public class Calcolatrice extends JFrame {
"private JButton somma;
"private JTextField num1;
"private JTextField num2;
"private JTextField tot;
"
"public Calcolatrice(){
""
" […]
"}
"
"//Gestione Evento
"[…]
"
"public static void main(String[] args) {
""
"new Calcolatrice();
"}
}
39
Esempio Completo - Costruttore
public Calcolatrice(){
" "super("Semplice Calcolatrice");
" "setDefaultCloseOperation(EXIT_ON_CLOSE);
" "somma = new JButton("somma");
" "num1 = new JTextField("1",5);
" "num2 = new JTextField("1",5);
" "tot = new JTextField("0",5);
" "somma.addActionListener(new AzioneSomma());
" "setLayout(new FlowLayout());
" "add(num1);
" "add(num2);
" "add(somma);
" "add(tot);
" "pack();
" "setVisible(true);
}
40
Esempio Completo – Gestore dell’Evento
public class Calcolatrice extends JFrame {
"private JButton somma;
"private JTextField num1;
"private JTextField num2;
"private JTextField tot;
"
"public Calcolatrice(){
"}
"
"//Gestione Evento
"private class AzioneSomma implements ActionListener{
" "public void actionPerformed(ActionEvent arg0) {
""
"int n1= Integer.parseInt(num1.getText());
""
"int n2= Integer.parseInt(num2.getText());
""
"tot.setText("" + (n1+n2));
" "}
"}
41
Link utili
l 
l 
Swing Tutorial:
http://download.oracle.com/javase/tutorial/uiswing/index.html
Java Api:
http://java.sun.com/javase/6/docs/api/
42