Vai alla Home Page About me Courseware Federica Living Library Federica Federica Podstudio Virtual Campus 3D Le Miniguide all'orientamento Gli eBook di Federica La Corte in Rete
 
 
Il Corso Le lezioni del Corso La Cattedra
 
Materiali di approfondimento Risorse Web Il Podcast di questa lezione

Marco Faella » 9.Elementi di programmazione di interfacce grafiche


Interfacce grafiche in Java

Unico tra i linguaggi di programmazione più diffusi, Java offre nella sua libreria standard un framework per la realizzazione di interfacce grafiche (GUI).
Tale framework si basa sulle due librerie Swing e AWT (Abstract Windowing Toolkit).

AWT è stata introdotta con la prima versione di Java (1.0).
AWT usa gli elementi grafici (widget) propri del sistema operativo ospite.
Quindi, i programmi presentano una diversa veste grafica in ciascun sistema operativo.

Swing, introdotta con Java 1.2, offre dei propri elementi grafici, identici per tutti i sistemi operativi.
Più esattamente, Swing si occupa di disegnare il contenuto delle finestre, mentre la cornice della finestra e la sua barra del titolo restano affidate alla GUI del sistema operativo.

Swing non sostituisce interamente AWT, ma si appoggia ad essa per alcune funzionalità.

Gran parte dei meccanismi presentati in questa lezione sono in realtà automatizzati dai moderni ambienti di sviluppo, come Netbeans ed Eclipse.
Tuttavia, resta comunque interessante conoscere il sistema sottostante, soprattutto dal punto di vista della progettazione.
In particolare, in queste librerie si possono vedere all’opera diversi design pattern.

Creare una finestra

Il seguente codice mostra come creare una finestra con Swing/AWT.
Eseguendo il programma, viene mostrata la finestra riportata nella figura.

Mostra codice
Figura 1: La finestra creata dal programma a sinistra.

Figura 1: La finestra creata dal programma a sinistra.


Creare una finestra (segue)

All’inizio, importiamo tutte le classi dei pacchetti java.awt e javax.swing, anche se in questo semplice esempio utilizziamo solo la classe javax.swing.JFrame

Poi, creiamo un oggetto di tipo JFrame e impostiamo alcune sue proprietà con opportuni metodi:

  • il metodo setSize imposta le dimensioni iniziali della finestra;
  • il metodo setDefaultCloseOperation serve ad impostare il comportamento del programma quando la finestra in questione viene chiusa:
    • il parametro JFrame.EXIT_ON_CLOSE (costante di classe) indica che il programma deve terminare quando la finestra viene chiusa.

Le ultime due chiamate a metodo servono a rendere la finestra visibile.

A questo punto, il main termina.
Non termina l’intera applicazione, perché, essendo stata resa una finestra visibile, è partito automaticamente un nuovo thread che ne gestisce gli eventi.
L’applicazione terminerà solo quando l’utente cliccherà sull’apposita icona nella cornice della finestra.

Aggiungere widget

Aggiungiamo alla finestra creata precedentemente degli elementi grafici, come pulsanti e campi di testo, chiamati widget.
Di seguito sono riportati i passaggi principali, commentati nella prossima slide:

creo la finestra Mostra codice

ottengo un riferimento al "pannello del contenuto" (contentPane) della finestra Mostra codice

Aggiungere widget (segue)

I widget principali (pulsanti, caselle di testo, barre di scorrimento, checkbox, etc.) corrispondono ad altrettante classi (JButton, JTextField, etc.), tutte sottoclassi di Component.
Per aggiungere un widget ad una finestra, si ottiene prima il Container che rappresenta lo spazio inizialmente vuoto contenuto nella finestra, chiamando il metodo getContentPane di JFrame.
La disposizione grafica dei widget all’interno di un Container si controlla impostando un layout.
Ciascun layout è identificato da una apposita classe, secondo le disposizioni del pattern STRATEGY, che sarà illustrato nella lezione successiva.
In questo caso, utilizziamo il layout GridLayout, che dispone gli elementi in una griglia.
I parametri (2,2) passati al costruttore rappresentano il numero di righe e di colonne della griglia.
Infine, si invoca il metodo add di Container, che aggiunge un elemento al contenitore.
Il risultato è quello nella figura a destra.

Figura 2: La finestra creata dal programma della slide precedente.

Figura 2: La finestra creata dal programma della slide precedente.


Gestione degli eventi

Allo stato attuale, la pressione dei pulsanti non provoca nessuna reazione nell’applicazione.
Supponiamo di voler modificare il contenuto del campo di testo in corrispondenza della pressione di un pulsante.
A questo scopo, dobbiamo costruire un oggetto deputato a reagire all’evento “pressione del pulsante”.
Poi, registriamo questo oggetto come interessato a ricevere determinati eventi.
Questo tipo di oggetto viene chiamato “listener” (ascoltatore) e deve implementare l’interfaccia ActionListener:

public interface ActionListener {

void actionPerformed(ActionEvent e);

}

Il metodo actionPerformed viene richiamato automaticamente quando si genera un evento di interesse.
Per segnalare che un oggetto listener intende ricevere gli eventi generati da un determinato oggetto grafico, si chiama il metodo addActionListener di quest’ultimo, passando il primo come argomento.
La prossima slide illustra i passaggi principali.

Gestione degli eventi (segue)

Il metodo main viene modificato come segue

Mostra codice

Gestione degli eventi (segue)

Con le modifiche della slide precedente, l’applicazione risponde alla pressione dei due pulsanti, inserendo le stringhe “Hello, World” e “Goodbye, World” nel campo di testo.
Utilizziamo la classe locale Ascoltatore per realizzare gli oggetti ascoltatori necessari.
Essendo locale, tale classe locale non è visibile al di fuori del metodo main.
La classe Ascoltatore può accedere alla variabile locale textField, in quanto questa è stata dichiarata final.
Esercizio: modificare il codice in modo da utilizzare una o più classi anonime al posto della classe Ascoltatore.

Il metodo addActionListener registra un ascoltatore interessato specificamente alla pressione di quel pulsante.
Il meccanismo degli eventi è molto più complesso, e prevede la possibilità di rilevare gli eventi più disparati, come i singoli movimenti del mouse o pressioni di tasti della tastiera.

E’ possibile associare più listener alla stessa sorgente di eventi, chiamando più volte il metodo appropriato (in questo caso addActionListener); quando si verificherà l’evento in questione, saranno chiamati tutti i listener registrati.

Il pattern OBSERVER

Il meccanismo di eventi ed ascoltatori viene codificato dal pattern OBSERVER, dove la metafora dell’ascolto viene sostituita da quella dell’osservazione.

Contesto:

  • Un oggetto (soggetto) genera eventi;
  • Uno o più oggetti (osservatori) vogliono essere informati del verificarsi di tali eventi.

Soluzione:

  • Definire un’interfaccia con un metodo notify, che sarà implementata dagli osservatori;
  • Il soggetto ha un metodo (attach) per registrare un osservatore;
  • Il soggetto gestisce l’elenco dei suoi osservatori registrati;
  • Quando si verifica un evento, il soggetto informa tutti gli osservatori registrati, chiamando il loro metodo notify.

Diagramma del pattern OBSERVER

La figura a destra rappresenta il diagramma delle classi tipico del pattern OBSERVER.
Sono presenti la classe Subject (soggetto osservato) e l’interfaccia Observer (osservatore).

Si noti la relazione di aggregazione uno-a-molti tra Subject e Observer:

  • tale relazione indica che ogni oggetto di tipo Subject conserva un insieme di riferimenti ad oggetti di tipo Observer;
  • ovvero, ogni Subject tiene traccia degli osservatori che si sono registrati chiamando attach.
Figura 3: Diagramma UML del pattern OBSERVER.

Figura 3: Diagramma UML del pattern OBSERVER.


Applicazione di OBSERVER

La figura a destra rappresenta il diagramma delle classi che lega la classe JButton all’interfaccia ActionListener.
Come si vede, c’è una corrispondenza diretta con lo schema proprio del pattern OBSERVER, riportato sulla slide precedente.

In particolare, JButton ricopre il ruolo di Subject e ActionListener quello di Observer.

Figura 4: Diagramma UML dell’applicazione del pattern OBSERVER ai pulsanti delle interfacce grafiche create con Swing/AWT.

Figura 4: Diagramma UML dell'applicazione del pattern OBSERVER ai pulsanti delle interfacce grafiche create con Swing/AWT.


Supporto al pattern OBSERVER nella libreria standard

Oltre che essere utilizzato dalle librerie grafiche, il pattern OBSERVER viene anche supportato dalla libreria standard tramite la classe Observable e l’interfaccia Observer, del package java.util.

L’interfaccia Observer rappresenta un generico osservatore; il suo contenuto è il seguente:

public interface Observer {

void update(Observable o, Object arg);

}

Il metodo update corrisponde a quello che nel pattern si chiama notify:

  • cioè, è il metodo che l’oggetto osservato invocherà al verificarsi degli eventi di interesse;
  • i due argomenti di update sono l’oggetto osservabile che sta chiamando e un argomento libero, che l’applicazione può utilizzare come vuole.

Supporto al pattern OBSERVER nella libreria standard (segue)

La classe Observable rappresenta un generico oggetto osservabile;
i suoi metodi principali sono i seguenti:

public class Observable {

public void addObserver(Observer o) { ... }
public void notifyObservers(Object arg) { ... }

}

Il metodo addObserver aggiunge un osservatore a questo oggetto, corrisponde al metodo attach del pattern.

Il metodo notifyObservers invoca il metodo update di tutti gli osservatori registrati, passando this come primo argomento e arg come secondo.

L’uso tipico di questa classe consiste nell’estenderla, in modo da aggiungere ad una nostra classe la capacità di essere osservata.
Altre classi nostre implementeranno Observer e fungeranno da osservatori.
In tal modo, non dovremo preoccuparci di implementare il meccanismo di registrazione e notifica degli osservatori.
Naturalmente, la classe che estende Observable perde la possibilità di utilizzare l’ereditarietà per altri scopi, visto che in Java è possibile estendere una sola classe.

  • Contenuti protetti da Creative Commons
  • Feed RSS
  • Condividi su FriendFeed
  • Condividi su Facebook
  • Segnala su Twitter
  • Condividi su LinkedIn
Progetto "Campus Virtuale" dell'Università degli Studi di Napoli Federico II, realizzato con il cofinanziamento dell'Unione europea. Asse V - Società dell'informazione - Obiettivo Operativo 5.1 e-Government ed e-Inclusion