Swing e la programmazione a eventi. 2 Lo stile basato su eventi I componenti interagiscono...
-
Upload
cirillo-pavan -
Category
Documents
-
view
215 -
download
1
Transcript of Swing e la programmazione a eventi. 2 Lo stile basato su eventi I componenti interagiscono...
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
3
Occorrenzadell’evento A
Osservatori
Realtà
Applicazione
Ascoltatoreevento A
Ascoltatoreevento A
Ascoltatoreevento B
Occorrenzadell’evento B
Notificadell’evento A Notifica dell’evento B
listeners
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
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")
5
Gestore degli eventi
subscribe x
subscribe y
subscribe zx
y
In pratica
6
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
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?
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à
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)
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
12
AWT e Swing
Il nome di tutti i componenti Swing inizia con J La convenzione è JXxxx
I componenti Swing sono lightweight 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
13
Un’interfaccia Swing
Tre elementi fondamentali Contenitori Elementi grafici Eventi
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.
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 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
JFrame
QuickTime and aᆰTIFF (LZW) decompressor
are needed to see this picture.
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
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
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)
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();
}
}QuickTime and aᆰ
TIFF (LZW) decompressorare needed to see this picture.
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();
}
}
QuickTime and aᆰTIFF (LZW) decompressor
are needed to see this picture.
22
Look&feel
QuickTime and aᆰTIFF (LZW) decompressor
are needed to see this picture.
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);
}
}
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
25
JApplet JDialog JFrame
JPanelJScrollPane JSplitPane JTabbedPane
Container
Top-level container
General-purpose container
26
JInternalFrame JLayeredPane
Permette di inserire componenti a vari livelli di profondità
JToolBar
Permette di inserire frame dentro altri frame
Permette di semplificare l’attivazione di determinate funzioni per mezzo di semplici pulsanti
Container
Special-purpose container
27
JButtons
Include buttons, radioButtons, checkbox, MenuItem, ToggleButton
JComboBox JList JMenu
JSlider JTextField
Include JPasswordField, JTextArea
Controlli di base
28
JLabel
Può includere immagini e/o testo
JProgressBar Jcomponent.setToolTipText(String)
Visualizzatori di informazioni non editabili
29
JColorChooser JFileChooser JTable
JTextComponent
JTextField, JPasswordField, JTextArea, JEditorPane, JTextPane
JTree
Visualizzatori di informazioni formattate editabili
30
Altri componenti grafici
Label Button CheckBoxButton ScrollBar PullDownMenu PopupMenu …
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());
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);
}
QuickTime and aᆰTIFF (LZW) decompressor
are needed to see this picture.
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
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("West"), BorderLayout.WEST);
frame.pack();
frame.setVisible(true);
}
frame.add(new JButton("East"), BorderLayout.EAST);
QuickTime and aᆰTIFF (LZW) decompressor
are needed to see this picture.
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);
}
QuickTime and aᆰTIFF (LZW) decompressor
are needed to see this picture.
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);
}
QuickTime and aᆰTIFF (LZW) decompressor
are needed to see this picture.
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
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) { ...
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);
QuickTime and aᆰTIFF (LZW) decompressor
are needed to see this picture.
40
Eventi e Listener
FocusListenerFocusEventfocus
WindowListenerWindowEventcambiamenti nella finestra
ActionListenerActionEventbottoni, menu,...
AdjustmentListenerAdjustmentEventscrollbar
TextListenerTextEventinput di testo
ItemListenerItemEventSelezione elem
KeyListenerKeyEventKeyboard
MouseListener, MouseMotionListener
MouseEventMouse
handlerEventoCategoria
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);
}
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(); }}
43
Esempio completo (parte III)
ActionEventpublic 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");
}
}
44
Esempio completo (parte IV)
WindowEventpublic class MyWindowAdapter extends WindowAdapter {
public void windowClosing(WindowEvent e) {System.exit(0);}
}
45
QuickTime and aᆰTIFF (LZW) decompressor
are needed to see this picture.
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;
}
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();
}
}
47
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-2004-16a-Gui.ppt Graphical User Interfaces with Java www.csd.uwo.ca/courses/CS212a/notes/javagui.ppt