2. Agenda
Java e interfacce grafiche
●
Caratteristiche di AWT
●
CRS4 - http://www.crs4.it
Design e implementazione di interfacce
●
grafiche
Panoramica dei componenti disponibili
●
Primitive grafiche e modello ad eventi
●
Esempi di codice
●
Bibliografia
●
Conclusioni
●
Stefano Sanna - gerda@crs4.it
4. Due approcci per le UI in Java
Componenti heavyweight
●
Sono basati su componenti forniti dal sistema
–
CRS4 - http://www.crs4.it
operativo (scritti in C/C++): le prestazioni e
l'integrazione “estetica” con le altre
applicazioni è massima
L'applicazione perde portabilità ove non è
–
disponibile la libreria
Componenti lightweight
●
Sono basati sull'assegnazione di una area di
–
disegno sul desktop, dove la VM può tracciare i
componenti in piena libertà: le prestazioni non
sono eccezionali ma la portabilità è assicurata!
Stefano Sanna - gerda@crs4.it
5. AWT e Swing
AWT: Abstract Window Toolkit
●
Nasce con le prime versioni di Java (1.0.2 e
–
CRS4 - http://www.crs4.it
1.1)
Definisce un insieme minimo di componenti
–
nativi comuni a tutte le UI (Win32, X-Window,
MacOS, SymbianOS…)
Swing (JFC, Java Foundation Classes)
●
Disponibili dalla versione 1.2
–
Definisce un set di componenti complessi e
–
personalizzabili indipendenti dalla piattaforma
Stefano Sanna - gerda@crs4.it
6. Altre librerie: SWT e LWVCL
SWT: Standard Widget Toolkit
●
Utilizza componenti nativi come AWT, ma è
–
CRS4 - http://www.crs4.it
basata su un set molto ricco
E' utilizzata sull'IDE Eclipse
–
LWVCL: Lightweight Visual Comp Library
●
E' una soluzione full-Java (come Swing) per
–
sistemi mobili quali palmari e cellulari
Fornisce un set molto ricco di componenti e
–
garantisce ottime prestazioni in termini di
velocità di elaborazione
Stefano Sanna - gerda@crs4.it
7. Abstract Window Toolkit
E’ un insieme di classi per la creazione di
●
interfacce grafiche elementari
CRS4 - http://www.crs4.it
Contiene una librerie di componenti heavy-
●
weighted: ogni componente ha il suo
corrispondente nel sistema operativo host,
a cui la VM delega la gestione del
componente vero e proprio
Permette di creare componenti
●
personalizzati attraverso il controllo diretto
delle funzioni di disegno e di gestione dei
dispositivi di input (mouse, tastiera…)
Stefano Sanna - gerda@crs4.it
8. Abstract Window Toolkit
Coerentemente con la vocazione
●
multipiattaforma di Java, i componenti AWT
CRS4 - http://www.crs4.it
e le applicazioni sviluppate con questi
cambiano il loro aspetto a seconda del
sistema operativo in cui sono eseguite
Questa caratteristica da una parte limita le
●
GUI in Java 1.1 (sono disponibili solo i
componenti comuni a tutte le interfacce
grafiche), dall’altro permette un vero
sviluppo indipendente dalla piattaforma!
Stefano Sanna - gerda@crs4.it
9. GUI in Java: il codice
L’interfaccia grafica è costruita all’interno
●
del codice sorgente: non esistono i
CRS4 - http://www.crs4.it
resource-file!
import java.awt.*;
public class HelloGUI extends Frame {
private Label helloLabel = new Label(quot;Hello!quot;);
public HelloGUI() {
this.setTitle(quot;Hello!quot;);
this.add(helloLabel);
this.pack();
}
public static void main(String[] args) {
HelloGUI myHello = new HelloGUI();
myHello.show();
}
}
Stefano Sanna - gerda@crs4.it
10. Object Oriented
Le interfacce grafiche sono costituite da
●
“oggetti” e dunque la loro
CRS4 - http://www.crs4.it
implementazione in un linguaggio ad
oggetti è abbastanza naturale
Creare un nuovo oggetto grafico significa
●
creare una istanza della classe
corrispondente
Java è completamente ad oggetti e la
●
costruzione di interfacce grafiche si integra
perfettamente con la filosofia del
linguaggio
Stefano Sanna - gerda@crs4.it
11. Creazione di interfacce grafiche
Creare interfacce grafiche significa
●
essenzialmente:
CRS4 - http://www.crs4.it
1.Istanziare e assemblare i componenti visuali
con cui interagisce l’utente
2.Associare i dati dell’applicazione ai componenti
visuali
3.Intercettare gli eventi dei componenti visuali e
compiere opportune azioni sui dati
dell’applicazione
Stefano Sanna - gerda@crs4.it
12. Creazione di interfacce grafiche
1.Istanziare e assemblare i componenti
visuali con cui interagisce l’utente:
CRS4 - http://www.crs4.it
Stabilire quali sono i componenti necessari a
–
visualizzare i dati dell’applicazione (campi di
testo, valori booleani, liste…)
Organizzare i componenti in pannelli, finestre,
–
dialoghi
Verificare la usabilità dell’interfaccia
–
Stefano Sanna - gerda@crs4.it
13. Creazione di interfacce grafiche
2.Associare i dati dell’applicazione ai
componenti visuali:
CRS4 - http://www.crs4.it
Fare in modo che ad una qualsiasi variazione
●
dei dati (modello) dell’applicazione corrisponda
un aggiornamento di quanto visualizzato
dall’interfaccia grafica
Prevedere opportuni raggruppamenti e/o
●
separazioni per utilizzare al meglio i (pochi)
componenti disponibili
Stefano Sanna - gerda@crs4.it
14. Creazione di interfacce grafiche
3.Intercettare gli eventi dei componenti
visuali e compiere opportune azioni sui dati
CRS4 - http://www.crs4.it
dell’applicazione:
Registrare la propria applicazione in ascolto
●
degli eventi di interesse (pressione di un
pulsante, uso del mouse, chiusura di una
finestra…)
Modificare i dati secondo le azioni compiute
●
dall’utente sull’interfaccia grafica
Stefano Sanna - gerda@crs4.it
15. Componenti elementari
Frame, Window, Dialog
●
Panel e Layout Manager
●
CRS4 - http://www.crs4.it
Menubar, Menu, MenuItem
●
Button e Label
●
TextField e TextArea
●
List e Choice (ComboBox)
●
CheckBox e CheckBoxMenuItem
●
Canvas
●
Stefano Sanna - gerda@crs4.it
16. java.awt.Frame
E’ la classe che permette di creare finestre
●
con un bordo, una barra del titolo, una
CRS4 - http://www.crs4.it
barra di menù (opzionale), e un’area dove
assemblare i componenti dell’interfaccia
grafica
E’, nella maggior parte dei casi, la finestra
●
principale dell’applicazione da cui si creano
tutte le altre finestre
(vedi: Window e Dialog)
Stefano Sanna - gerda@crs4.it
17. Window e Dialog
Le Window sono finestre senza bordo e
●
menù, utilizzate per splash screen e per
CRS4 - http://www.crs4.it
aree del quale il programmatore vuole
controllo completo
Le Dialog sono finestre (eventualmente
●
modali) con il quale l'applicazione richiede
l'interazione esplicita con l'utente: avvisi,
inserimento di dati, conferme...
Stefano Sanna - gerda@crs4.it
18. java.awt.Panel
Le istanze di questa classe sono contenitori
●
per altri componenti
CRS4 - http://www.crs4.it
E’ possibile assegnare una logica di
●
organizzazione dei componenti all’interno
di un pannello a seconda delle esigenze di
visualizzazione
Le interfacce “non banali” sono costituite
●
da numerosi pannelli annidati, ciascuno
contenente un certo gruppo di componenti
elementari o complessi
Stefano Sanna - gerda@crs4.it
19. Layout Manager
I LayoutManager sono degli oggetti
●
particolari che gestiscono il
CRS4 - http://www.crs4.it
posizionamento e dimensionamento dei
componenti all’interno dei contenitori
(Frame, Window, Dialog, Panel…).
Seguendo la filosofia di Java (indipendente
●
dalla piattaforma!), i LayoutManager
permettono di stabilire una posizione logica
(“di massima”, potremmo dire) dei
componenti, delegando poi alla specifica
piattaforma il reale tracciamento dei
componenti.
Stefano Sanna - gerda@crs4.it
20. Layout Manager
FlowLayout
●
Dispone i componenti assegnando a ciascuno
–
CRS4 - http://www.crs4.it
le dimensioni preferenziali
BorderLayout
●
Divide il container in 5 regioni (vedi
–
screenshot)
CardLayout
●
Crea uno stack di componenti che vengono
–
visualizzati alternativamente
Stefano Sanna - gerda@crs4.it
21. Layout Manager
GridLayout
●
Crea una griglia (n*m, con n e m assegnati) in
–
CRS4 - http://www.crs4.it
cui dispone i componenti assegnando a
ciascuno le dimensioni preferenziali
GridBagLayout
●
In assoluto il layout più potente e complesso;
–
offre una organizzazione a griglia come il
GridLayout, ma consente maggiore controllo
sulla posizione e dimensione dei componenti
Stefano Sanna - gerda@crs4.it
22. java.awt.FlowLayout
È il layout di
●
impostato di default
CRS4 - http://www.crs4.it
Dispone i
●
componenti in
sequenza
assegnando a
ciascuno le
dimensioni
preferenziali
Stefano Sanna - gerda@crs4.it
23. java.awt.BorderLayout
È uno dei layout più
●
utilizzati per
CRS4 - http://www.crs4.it
l’organizzazione di
componenti su
finestre di
dimensione
variabile.
Stefano Sanna - gerda@crs4.it
24. java.awt.CardLayout
Mostra un
●
componente per
CRS4 - http://www.crs4.it
volta
Utile per creare
●
interfacce tipo
“pannello di
configurazione”
VISTA
Stefano Sanna - gerda@crs4.it
25. Layout Manager
E’ comunque possibile fare a meno dei
●
Manager e specificare esattamente
CRS4 - http://www.crs4.it
posizione e dimensione di ciascun
componente. Tale scelta è consigliabile
solo con componenti custom (e dunque
non dipendenti dalla piattaforma)
L’uso dei manager di layout è comune ad
●
altri linguaggi e ambienti di sviluppo, così
pure la tecnica dei pannelli annidati
(VisualBasic, Delphi…)
Stefano Sanna - gerda@crs4.it
26. Menubar, Menu, MenuItem
E’ un insieme di classi che permette di
●
creare menù per i Frame e popup-menù
CRS4 - http://www.crs4.it
per gli altri componenti di AWT.
Menubar: è il contenitore delle voci di menù
–
posto immediatamente sotto la barra del titolo
Menu: è la classe che individua le voci visibili
–
su una menubar
MenuItem: è la classe che
–
permette di creare voci di
menù selezionabili
dall’utente.
Stefano Sanna - gerda@crs4.it
27. Button e Label
La classe Button permette di creare
●
pulsanti da azionare con il mouse o con la
CRS4 - http://www.crs4.it
tastiera
Le istanze di Label sono oggetti per la
●
visualizzazione di testo non editabile
dall’utente. Possono essere utilizzati per
finestre informative o indicazioni di
supporto agli altri componenti (ad esempio,
per descrivere il contenuto di una certa
lista di elementi)
Stefano Sanna - gerda@crs4.it
28. TextField e TextArea
E’ la classe che permette di creare oggetti
●
attraverso i quali l’utente può digitare
CRS4 - http://www.crs4.it
stringhe di testo
Permette di gestire eventi di provenienti
●
dalla tastiera (ad esempio, per offrire
suggerimenti all’utente durante la
digitazione)
Per l’inserimento di testo su più linee è
●
disponibile il componente TextArea, che
permette di gestire anche le barre di
scorrimento
Stefano Sanna - gerda@crs4.it
29. List e ComboBox
Permette di mostrare una lista di elementi
●
di testo
CRS4 - http://www.crs4.it
Offre la possibilità di aggiungere barre di
●
scorrimento, di selezionare gli elementi
singolarmente o a gruppi
La versione Swing (JList) permette di
●
visualizzare una lista di componenti grafici
arbitrari (contenenti testo e immagini)
La classe Chioce (ComboBox) permette la
●
creazione di menù a tendina
Stefano Sanna - gerda@crs4.it
30. CheckBox e CheckBoxMenuItem
La classe CheckBox permette di
●
rappresentare valori booleani true/false
CRS4 - http://www.crs4.it
attraverso check box (selettori a scelta
multipla) o radio button (selettori a scelta
mutuamente esclusiva)
I CheckBoxMenuItem permettono di gestire
●
valori booleani attraverso menù dei Frame.
Stefano Sanna - gerda@crs4.it
31. java.awt.Canvas
E’ il componente con cui è possibile
●
disegnare in una regione dello schermo
CRS4 - http://www.crs4.it
attraverso primitive grafiche quali punti,
linee, poligoni, testo, immagini…
Attraverso la riscrittura di un metodo
●
(paint) e le funzionalità della classe
Graphics ottenuta dal framework è
possibile creare effetti grafici personalizzati
Numerose librerie permettono di gestire i
●
più diffusi formati grafici per la
visualizzazione di immagini
Stefano Sanna - gerda@crs4.it
32. Primitive grafiche
Ogni volta che il sistema grafico deve
●
ridisegnare l’area del componente viene
CRS4 - http://www.crs4.it
invocato il metodo paint(). Attraverso
questo metodo il sistema fornisce una
istanza di Graphics su cui eseguire le
operazioni di disegno.
Il Canvas, oltre ad un’area di disegno,
●
mette a disposizione tutta l’infrastruttura
per la gestione degli eventi associati al
componente: mouse, tastiera, interazione
con gli altri componenti. Questo permette
di realizzare componenti personalizzati.
Stefano Sanna - gerda@crs4.it
33. Primitive grafiche
import java.awt.*;
An instance of Graphics
public class MyComponent extends Canvas {
CRS4 - http://www.crs4.it
public void paint(Graphics g) {
g.drawLine(……………..)
}
}
L’utente sposta la finestra…
Stefano Sanna - gerda@crs4.it
34. Event Driven
Nello sviluppo di applicazioni con
●
interfaccia utente a linea di comando vi era
CRS4 - http://www.crs4.it
un unico flusso all’interno del programma
(ricordate scanf o readln?)
Le interfacce grafiche permettono
●
all’utente di selezionare diversi dispositivi
di input indipendenti (tastiera, mouse…)
che agiscono su numerosi componenti
dell’interfaccia stessa: non esiste più un
unico flusso all’interno del programma, non
si può rimanere in attesa di uno specifico
segnale…
Stefano Sanna - gerda@crs4.it
35. Event Driven
Le nuove interfacce grafiche hanno portato
●
alla definizione di un nuovo modello di
CRS4 - http://www.crs4.it
interazione con l’utente: gli eventi
Non vi sono routine bloccanti che
●
controllano i dispositivi di input (come
scanf in C…): il sistema operativo nasconde
tutta la gestione dei dispositivi di input
L’applicazione definisce una interfaccia con
●
cui il sistema operativo comunica in modo
asincrono i comandi (pulsante premuto,
testo digitato, finestra ridimensionata…)
Stefano Sanna - gerda@crs4.it
37. Event Driven
import java.awt.*;
public class HelloGUI extends Frame {
private Label helloLabel = new Label(quot;Hello!quot;);
CRS4 - http://www.crs4.it
public HelloGUI() {
this.setTitle(quot;Hello!quot;);
this.add(helloLabel);
this.pack();
}
public void actionPerformed(ActionEvent ae) {
************
**********
}
}
Gli eventi passano da un livello all’altro in maniera
•
trasparente per l’utente:
• Window Message in Win32
• Native method nella JVM
• Pure Java dal pulsante in poi
Sistema operativo
Stefano Sanna - gerda@crs4.it
40. Listener
ActionListener
●
intercetta eventi di azioni (pulsanti, menù,
–
CRS4 - http://www.crs4.it
pressione del tasto INVIO su un TextField)
WindowListener
●
intercetta gli eventi legati alla gestione di
–
Frame, Window e Dialog (visualizza/nascondi)
MouseListener
●
intercetta gli eventi del mouse (entrata/uscita
–
in una certa zona, pressione dei tasti…)
MouseMotionListener:
●
intercetta il movimento (semplice o drag)
–
Stefano Sanna - gerda@crs4.it
41. Listener
Vi sono altri tipi di listener per gestire gli
●
eventi della tastiera, di digitazione testo,
CRS4 - http://www.crs4.it
del ciclo di vita dei componenti, del focus
tra i componenti…
Ciascun tipo di listener è specializzato per
●
un ben determinato tipo di eventi. Questi, a
loro volta, sono destinati a notificare solo
un ben determinato tipo di azione fatta
sull’interfaccia grafica
Stefano Sanna - gerda@crs4.it
43. Mano al codice!!!
… e alla documentazione!!!
Le classi sono contenute all’interno dei
●
CRS4 - http://www.crs4.it
package java.awt, java.awt.event,
java.awt.image, java.awt.datatransfer,
java.applet.
Per scrivere delle buone interfacce grafiche
●
sarebbe opportuno avere una buona
conoscenza del linguaggio e della
programmazione ad oggetti (polimorfismo,
classi inner, interfacce, design pattern…).
Stefano Sanna - gerda@crs4.it
49. Gestire gli eventi
Ciascun producer dispone di una lista di
●
listener (ascoltatori) interessati a gestire gli
CRS4 - http://www.crs4.it
eventi prodotti dal producer stesso
Per poter ricevere notifica di nuovi eventi i
●
listener devono implementare l’interfaccia
relativa ad una specifica classe di eventi e
registrarsi presso il producer
Il producer, al manifestarsi di un evento,
●
invocherà i metodi dell’interfaccia dei
listener inviando come parametri degli
EventObject specifici per il tipo di evento
Stefano Sanna - gerda@crs4.it
50. Gestire gli eventi
I passi nella realizzazione del modello ad
●
eventi:
CRS4 - http://www.crs4.it
Creazione di un listener per il tipo di evento di
–
interesse (ActionListener, MouseListener,
MouseMotionListener, TextListener,
ComponentListener…) attraverso
l’implementazione di una opportuna interfaccia
Registrazione del listener appena creato nella
–
lista ascoltatori del producer
Stefano Sanna - gerda@crs4.it
51. Gestire gli eventi
... implements ActionListener ...
public void actionPerformed(ActionEvent ae) {
CRS4 - http://www.crs4.it
if (ae.getSource() == exitMenuItem) {
System.exit(0);
}
}
exitMenuItem.addActionListener(this);
La classe dichiara di voler (saper…) gestire
●
ActionEvent e implementa il metodo
actionPerformed
La classe registra se stessa quale
●
ascoltatore degli eventi del menù
Stefano Sanna - gerda@crs4.it
53. Componenti personalizzati
Grazie all’architettura object oriented è
●
semplice sviluppare componenti
CRS4 - http://www.crs4.it
personalizzati estendendo quelli esistenti o
creandone di completamente nuovi
Possiamo ereditare dalla classe Component
●
tutta la gestione del mouse, della tastiera e
degli altri eventi correlati senza la
necessità di scrivere codice nativo
Se scritti in modo sapiente (!) i nuovi
●
componenti si integreranno perfettamente
con l’infrastruttura AWT
Stefano Sanna - gerda@crs4.it
54. Bibliografia
Java AWT Reference
●
John Zukowski
CRS4 - http://www.crs4.it
O'Reilly 1997
Il libro non è più in stampa, ma l'editore
mette a disposizione gratuitamente i file
PDF di tutti i capitoli:
http://www.oreilly.com/catalog/javawt/book/index.html
Stefano Sanna - gerda@crs4.it
55. Conclusioni
Java AWT è uno strumento rapido e
●
multipiattaforma per la creazione di
CRS4 - http://www.crs4.it
interfacce semplici
Lo sviluppo di applicazioni complesse
●
richiede l'uso di librerie più complete (ad
esempio, Swing o LWVCL)
AWT è una buona palestra per imparare il
●
modello ad eventi!!!
Stefano Sanna - gerda@crs4.it
56. Grazie... :-)
CRS4 - http://www.crs4.it
Copyright (c) 2004-2005 CRS4
Scritto da Stefano Sanna (gerda@crs4.it)
è garantito il permesso di copiare, distribuire e/o
modificare questo documento seguendo i termini
della Licenza per Documentazione Libera GNU,
Versione 1.1 o ogni versione successiva pubblicata
dalla Free Software Foundation. Una copia della
licenza in lingua italiana è disponibile presso:
http://www.softwarelibero.it/gnudoc/fdl.it.html
Stefano Sanna - gerda@crs4.it