Swing e la programmazione a eventi
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
Tutti i componenti interessati all’evento descritto da tale messaggio
ne ricevono copia
In tal caso agisce da “generatore dell’evento”
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
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
Ascoltatore
evento A
Notifica dell’evento B
Ascoltatore
evento A
Ascoltatore
evento B
listeners
3
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
In pratica
subscribe y
x
Gestore degli eventi
y
subscribe z
subscribe x
5
Modello a eventi in Java
Un’applicazione può essere costruita come componenti 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
Swing
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
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
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
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
AWT e Swing
Il nome di tutti i componenti Swing inizia con J
I componenti Swing sono lightweight
La convenzione è JXxxx
Vengono creati disegnandoli nella finestra sottostante
È 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
Un’interfaccia Swing
Tre elementi fondamentali
Contenitori
Elementi grafici
Eventi
13
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
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
http://java.sun.com/j2se/1.5/docs/api/
java.awt.Frame
javax.swing.JFrame
15
JFrame
QuickTimeﾪ and a
TIFF (LZW) decompressor
are needed to see this picture.
16
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
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
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
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();
}
}
QuickTimeﾪ and a
TIFF (LZW) decompressor
are needed to see this picture.
20
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();
}
}
QuickTimeﾪ and a
TIFF (LZW) decompressor
are needed to see this picture.
21
Look&feel
QuickTimeﾪ and a
TIFF (LZW) decompressor
are needed to see this picture.
22
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
Aggiungiamo componenti
Dobbiamo sapere:
Da dove prendere i componenti?
Come costruirli e personalizzarli?
Costruttori e modificatori
Come usarli?
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?
Layout manager
24
Container
Top-level container
JApplet
JDialog
General-purpose containerJScrollPane
JPanel
JFrame
JSplitPane
JTabbedPane
25
Container
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à
26
Controlli di base
JButtons
Include buttons,
radioButtons, checkbox,
MenuItem, ToggleButton
JComboBox
JSlider
JList
JMenu
JTextField
Include
JPasswordField,
JTextArea
27
Visualizzatori di informazioni non editabili
JLabel
JProgressBar
Jcomponent.setToolTipText(String)
Può includere
immagini e/o testo
28
Visualizzatori di informazioni formattate editabili
JColorChooser
JFileChooser
JTable
JTextComponent
JTree
JTextField,
JPasswordField,
JTextArea, JEditorPane,
JTextPane
29
Altri componenti grafici
Label
Button
CheckBoxButton
ScrollBar
PullDownMenu
PopupMenu
…
30
Layout
Java gestisce la disposizione dei componenti dentro i Container
mediante oggetti che si chiamano LayoutManager
È 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
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)
p.setLayout(new BorderLayout());
31
FlowLayout
E’ il più semplice. La sua strategia
è:
Rispettare la dimensione di tutti i
componenti
private static void createAndShowGUI() {
JFrame frame = new JFrame("Flow");
Disporre i componenti in
orizzontale finché non viene
riempita tutta una riga, altrimenti
iniziare su una nuova riga
frame.setLayout(new FlowLayout());
Se non c’è spazio i componenti
non vengono visualizzati
frame.add(new JButton("Button3"));
frame.add(new JButton("Button1"));
frame.add(new JButton("Button2"));
frame.add(new JButton("Button4"));
frame.add(new JButton("Button5"));
frame.pack();
frame.setVisible(true);
}
QuickTimeﾪ and a
TIFF (LZW) decompressor
are needed to see this picture.
32
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
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("West"), BorderLayout.WEST);
frame.pack();
frame.setVisible(true);
}
QuickTimeﾪ and a
TIFF (LZW) decompressor
are needed to see this picture.
34
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);
QuickTimeﾪ and a
TIFF (LZW) decompressor
are needed to see this picture.
}
35
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);
}
QuickTimeﾪ and a
TIFF (LZW) decompressor
are needed to see this picture.
36
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
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
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) {
}
QuickTimeﾪ and a
TIFF (LZW) decompressor
are needed to see this picture.
b.setBackground(Color.RED);
39
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
40
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
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
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
Esempio completo (parte IV)
WindowEvent
public class MyWindowAdapter extends WindowAdapter {
public void windowClosing(WindowEvent e) {System.exit(0);}
}
44
Altro esempio
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;
QuickTimeﾪ and a
TIFF (LZW) decompressor
are needed to see this picture.
45
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
Link utili
http://java.sun.com/products/jfc/
http://java.sun.com/docs/books/tutorial/uiswing/
http://www.javaolympus.com/freebooks/FreeJavaSwingBooks.jsp
www.cs.uno.edu/~fred/nhText/ Resources/Slides/Chapter17.ppt
Building Graphical User Interfaces with Java
www.sce.carleton.ca/courses/ sysc-2004/w04/lectures/SYSC-200416a-Gui.ppt
Graphical User Interfaces with Java
www.csd.uwo.ca/courses/CS212a/notes/javagui.ppt
47
