💻

Le interfacce grafiche
L’interfaccia per l’utente
I programmi eseguiti da un elaboratore possono dividersi in due categorie:

• Programmi che eseguono autonomamente i propri compiti;

• Programmi che hanno bisogno di interagire con gli utenti stessi

La parte di un'applicazione che interagisce con l'utente prende il nome di interfaccia utente. La presenza di
questa interfaccia distingue i programmi interattivi da quelli non interattivi.
L'interfaccia utente indica tutto ciò che serve per la comunicazione tra un programma e il suo utilizzatore
(apparecchiature hardware e risorse software). In questa definizione rientra quello che l'utente vede sullo
schermo, quello che sente oppure quello che può toccare.

Le interfacce utente si possono classificare in base agli strumenti che usano per interagire con gli utenti. Supponendo
che lo schermo sia l’elemento di interazione tra persone ed elaboratore, esse possono essere distinte in interfacce a
caratteri e interfacce a grafiche.

Interfacce a caratteri: molto semplici perché possono visualizzare solo i caratteri; l’interazione avviene mediante
input da tastiera.

Interfaccia grafica: più complessa da realizzare ma il modo con cui l’utente interagisce è più semplice; essa è
composta da elementi grafici e si indica con il termine GUI (Graphical User Interface).

Le interfacce grafiche sono un’evoluzione di quelle a caratteri; si passa da visualizzare solo caratteri a visualizzare
elementi grafici. Tale passaggio è stato possibile grazie allo sviluppo dei terminali video e dei dispositivi di puntamento,
oltre che a una riduzione del loro costo.

Gli schermi
La videata degli schermi grafici è composta da una matrice di pixel (picture element); a ognuno di questi può essere
associato un colore e la loro unione forma un’immagine completa. Le
dimensioni della matrice indicano la risoluzione dello schermo:
1280x720, per esempio, sono le dimensioni che contraddistinguono il
Full HD dove il primo numero fa riferimento ai pixel sulla linea orizzontale
mentre il secondo quelli sulla linea verticale.

Un punto all’interno di una videata può essere indicato con le sue

coordinate (x, y). Il sistema di riferimento che si adotta con lo schermo ha
come origine (0, 0), che si trova in alto a sinistra. Muovendosi a destra
viene incrementato il valore di x, mentre verso il basso si incrementa il
valore di y.

I dispositivi di puntamento
Il principale dispositivo che viene utilizzato con gli schermi è il mouse; quando è supportato dalle interfacce grafiche,
esse si definiscono point and click.
Gli elementi dell’interfaccia grafica
Il principale elemento di un’interfaccia grafica è la finestra, che rappresenta un’area dello schermo dove vengono
eseguite le applicazioni. Essa è utilizzata per contenere e posizionare altri elementi grafici. Tra i vari compiti della
progettazione di un’interfaccia grafica c’è la scelta del layout degli elementi grafici in una finestra. Tale scelta non è
banale e da questa può dipendere l’eventuale successo dell’applicazione. Una finestra presenta alcune
caratteristiche: si può ingrandire a pieno schermo, ridimensionare o ridurre a icona. Quando viene chiusa solitamente
il programma viene interrotto.

Altri elementi grafici:

• Pulsante (o bottone), che può essere etichettato con una stringa o con un’immagine. Ad essi le applicazioni
associano particolari azioni che l’utente è in grado di svolgere.
• Gestione dell’inserimento di testo:
o Casella di testo, formata da una cella dove è possibile inserire solo una riga; viene usata per chiedere
all’utente l’input di numeri o stringhe.
o Area di testo, formata da più linee e si usa per testi particolarmente lunghi.
o Etichetta, contiene un testo descrittivo delle caselle o delle aree di testo, oppure messaggi per l’utente.

Un’applicazione può interagire con l’utente offrendo la possibilità di scegliere tra un numero prefissato di alternative.
Tale scelta si può realizzare in un’interfaccia grafica usando diversi elementi grafici.

La casella combinata mostra le alternative con una

casella di testo che incorpora un menu a tendina.
Un altro modo per effettuare le scelte è
rappresentato dai menu: questi sono solitamente
posizionati nella parte alta della finestra.

Il pulsante di opzione permette di effettuare la

scelta tra valori booleani, cioè gestisce solo due
stati. Si possono raggruppare più pulsanti di
opzione in un unico gruppo per effettuare una
scelta all’interno di un elenco.

È possibile anche trovare altri elementi grafici quali barre di scorrimento, menu popup e immagini.

La progettazione dell’interfaccia
Avendo a disposizione le componenti già elencate è possibile combinarle per progettare una GUI.

Il numero di componenti e la disposizione degli stessi dipende dall’applicazione a cui la GUI è destinata. È dunque
necessario compiere due azioni:

• Individuare gli elementi grafici necessari.

• Disporre tali elementi in una finestra.

Queste due operazioni vanno svolte nella fase di analisi del problema: è utile una descrizione dell’interfaccia grafica
che si vuole utilizzare, indicando gli elementi e la posizione che essi devono occupare. Un linguaggio di
programmazione che gestisce le interfacce grafiche deve consentire l’uso delle componenti già descritte. Il linguaggio
Java consente al programma di creare oggetti da inserire nella GUI; offre anche diversi modi per disporli nella finestra.
Gli elementi grafici come oggetti della OOP
I vari elementi della GUI possono essere rappresentati in modo naturale mediante gli oggetti, poiché, in generale, tutti
gli elementi grafici possono essere considerati oggetti. Ad esempio, una finestra può essere vista come oggetto i cui
attributi sono dimensioni, posizione e titolo, mentre i metodi quelli che possono modificarla.

In un programma che usa la GUI, le operazioni che coinvolgono gli oggetti grafici vengono attivate con i metodi degli
oggetti coinvolti.

La programmazione ad oggetti è dunque l’ambiente ideale per lo sviluppo di interfacce utente di tipo grafico. Ogni
elemento grafico è un oggetto e ha una sua classe corrispondente: con l’istanza di queste classi si possono creare gli
oggetti da inserire nell’interfaccia grafica per l’utente.

Le librerie grafiche AWT e Swing

La parte grafica di Java è contenuta nei package java.awt e javax.swing. È necessario importare entrambe le librerie in
ogni programma in cui si usa la grafica per realizzare le GUI.

L’AWT (Abstract Window Toolkit) è il sistema utilizzato da Java per definire un insieme di elementi grafici indipendenti
dalla piattaforma su cui vengono utilizzati. Tale meccanismo garantisce la portabilità delle app Java tra le piattaforme.

Swing rappresenta l’evoluzione di AWT nella costruzione delle interfacce grafiche. Il package javax.swing mette a
disposizione contenitori e componenti ma differisce con l’ATW per l’aggiunta di nuovi componenti, metodi e
funzionalità. In generale, le componenti Swing sono più numerose e più utilizzate nella realizzazione delle interfacce
utente rispetto alle ATW.

Le componenti e i contenitori
In Java, l’interfaccia utente è formata da due elementi principali, ovvero componenti e contenitori:

• Componente: oggetto con una rappresentazione grafica; offre un’interazione con l’utente. Ogni componente
gestisce il modo con cui viene visualizzata, conosce il suo contenuto e reagisce alle eventuali interazioni con
l’utente. Unendo più componenti si costruisce un’interfaccia utente grafica.
• Contenitore: oggetto che può contenere le componenti. Con opportuni metodi, si possono aggiungere o togliere le
componenti dal contenitore. Il compito principale è quello di posizionare e dimensionare le varie componenti nel
contenitore stesso (layout delle componenti). Ci sono vari modi con cui viene eseguita questa operazione, in base
al tipo di gestore del layout (layout manager) che viene assegnato a quel particolare contenitore.

Tutte le componenti assieme al contenitore possono essere viste come

un’unica entità e considerate come componente speciale; in tal modo, il
contenitore diventa una componente da poter essere inserita in altri
contenitori. Le classi di Java che realizzano le componenti e i contenitori sono
organizzate in una gerarchia delle componenti che ha come madre la classe
Component.

La classe Component è una classe astratta e da questa derivano le classi che

realizzano concretamente una componente. Ogni componente viene realizzata creando un’istanza di queste classi.

La classe Container è una sottoclasse astratta derivata dalla classe Component e rappresenta i contenitori. Le sue
sottoclassi implementano concretamente i contenitori che possono essere utilizzati per costruire un’interfaccia
grafica.
Nella libreria Swing i nomi di componenti e contenitori iniziano per J e si possono classificare in:

• Contenitori principali: finestra principale (JFrame) e finestra di dialogo (JDialog);

• Contenitori intermedi, cioè di altre componenti: pannello (JPanel), scheda con etichette (JTabbedPane);
• Componenti atomiche: etichetta (JLabel), pulsante (JButton), casella di testo (JTextField)…

I panelli hanno lo scopo di organizzare le componenti atomiche nella

finestra, semplificandone il posizionamento. Diversamente da AWT,
ogni contenitore principale di Swing contiene figuratamente un
contenitore intermedio detto content pane (pannello di contenuto).
Le componenti dell’interfaccia non possono essere inserite
direttamente nel contenitore principale ma solo in quello intermedio,
a eccezione della barra dei menu che per convenzione si trova in una
posizione predefinita al di fuori del contenitore intermedio.

L’ambiente di programmazione
La programmazione delle GUI richiede che il programmatore definisca gli elementi grafici e li disponga nella finestra.
L’ambiente di programmazione e di sviluppo grafico facilita questo compito poiché offre gli strumenti per progettare
l’interfaccia e visualizzare come apparirà all’utente. Tali ambienti favoriscono uno stile di programmazione visuale,
dove il programmatore manipola gli eventi senza scrivere il codice che si autogenera.

Le etichette
L’etichetta è rappresentata dalla classe JLabel e contiene solo una riga di testo. Il suo contenuto viene stabilito durante
la fase di progettazione e può essere modificato solo dal programma, ma non dall’utente.

Essa si può definire con tre costruttori:

• JLabel(): costruttore senza parametri che crea un’etichetta vuota;

• JLabel(String): etichetta contenente una stringa, allineata a sinistra nell’etichetta, passata tramite il parametro;
• JLabel(String, int): il parametro di tipo intero indica la modalità di allineamento della stringa, mediante l’uso di
valori costanti appartenenti alla classe JLabel, quali JLabel.LEFT, JLabel.RIGTHT e JLabel.CENTER.

Per essere aggiunte al pannello si usa il metodo add (nomePannello.add), e se si vuole manipolare in seguito l’oggetto
si può utilizzare un modo più diretto per aggiungere un componente (nomePannello.add(new JLabel(“…”));)

Le caselle di testo
Le caselle di testo sono rappresentate dalla classe JTextField, una sottoclasse della classe JTextComponent, che ha
come sottoclasse la classe JTextArea; entrambe ereditano i metodi dalla classe JTextComponent. Con la classe
JTextField crea una casella di testo composta da una sola riga utilizzata per l’input o l’output di stringhe. I costruttori di
questa classe consentono di impostare la stringa da visuallizzare e la dimensione della casella.

Esistono quattro costruttori per definire una casella di testo:

• JTextField(): crea una casella senza specificare contenuto e dimensione;

• JTextField(String): crea una casella inizializzata con un valore e dimensione uguale alla lunghezza della stringa;
• JTextField(int): crea una casella vuota di dimensione specificata dal parametro;
• JTextField(String, int): imposta sia il contenuto che la dimensione della casella.
Le aree di testo
La classe JTextArea consente di creare un’area di testa formata da più righe. I costruttori sono simili a quelli delle
caselle di testo con un parametro aggiuntivo per il numero di righe:

• JTextArea(): crea un'area di testo vuota;

• JTextArea(int, int): crea un'area di testo vuota, e due parametri interi per righe e colonne;
• JTextArea(String): crea un’area di testo con uno specifico valore di testo;
• JTextArea(String, int, int, int): crea un'area di testo con uno specifico valore di testo, avente come numero di righe
e di colonne due parametri interi; il quarto parametro è una costante intera che specifica la visualizzazione delle
barre di scorrimento.

I metodi

Nome Metodo Funzionamento Caselle Aree

setText(String); modificare il testo ✓ ✓
getText(); leggere il contenuto, restituisce un oggetto di classe String ✓ ✓
setEditable(boolean); rende una casella di testo editabile ✓ ✓
append(String) Inserire nuovo testo senza cancellare quello già presente ✘ ✓

Le caselle combinate
Le caselle combinate raggruppano un elenco di voci e consentono di scegliere la singola tra queste. La classe di
riferimento è la JComboBox; nella costruzione di una casella combinata prima si crea l’oggetto di classe ComboBox e
poi si aggiungono le voci all’oggetto. È presente un unico costruttore senza parametri. Le voci si aggiungono con il
metodo addItem(String).

La casella di controllo è un elemento grafico che gestisce solo 2 stati (true e false). Essa si implementa con la classe
JCheckBox . Ogni casella di controllo è fornita di un’etichetta che si usa per spiegare all’utente il significato della
casella stessa. Di default sono impostate a false, e per modificare il valore si usa il costruttore JCheckBox (String,
boolean).

Il layout degli elementi grafici

Il layout delle componenti dipende dal contenitore nel quale esse sono contenute. A ogni contenitore può essere
associato un gestore che svolge tale compito. Il gestore prende il nome di Layout Manager. Ogni contenitore ha un
Layout Manager di default, che è comunque modificabile. Il gestore interviene alla prima visualizzazione della finestra
e alle successive modifiche della stessa con il riposizionamento delle componenti. Ogni qual volta che vengono
modificate le dimensioni di una finestra le componenti vengono riadattate, ma mantenendo lo schema definito dal
gestore.

In Java ci sono diversi gestori, ognuno dei quali dispone gli elementi in un modo particolare e richiede l’uso di un
metodo add adeguato per aggiungerne di nuovi. Per assegnare un Layout Manager a un contenitore si usa il metodo
setLayout, che riceve come parametro un oggetto che rappresenta il gestore.
FlowLayout - pannelli
Questa classe si utilizza per disporre le componenti su una stessa riga, una dopo l’altra nello stesso ordine in cui si
aggiungono. Quando una riga viene completata si passa alla successiva. Le componenti aggiunte vengono centrate
nella riga e separate con uno spazio di 5px. Questo gestore è associato di default a tutti i pannelli. In questo caso il
metodo add riceve come unico parametro la componente da inserire.

BorderLayout - finestre
Con questa classe il contenitore viene diviso in cinque regioni, all’interno della quale si può inserire una componente.
Le regioni vengono indicate con i nomi North, Sud, Center, East, West. Tale disposizione si utilizza quando si vuole dare
più importanza ad un elemento, posizionato centralmente, rispetto ai pannelli posizionati ai lati. Il BorderLayout è
associato di default a tutte le finestre.

GridLayout
Con questa classe è possibile posizionare le componenti in una griglia. Il contenitore viene diviso in celle della stessa
dimensione, nelle quali vengono posizionate le componenti, come una tabella organizzata in righe e colonne. Le
componenti sono aggiunte con un metodo add che contiene la componente come parametro, ordinate nell’ordine in
cui sono inserite. Abbiamo due costruttori per questo gestore:

• GridLayout(int,int): specifica numero di righe e colonne.

• GridLayout(int, int, int, int): specifica le dimensioni della griglia e indica anche lo spazio da lasciare tra le varie
componenti, verticalmente e orizzontalmente.

Gli eventi
La OOP, per gestire le GUI, utilizza la programmazione guidata dagli eventi: a ogni interazione dell’utente viene
associato un evento che deve essere gestito richiamando un’apposita azione.

Un evento è un avvenimento asincrono; si manifesta infatti senza tempi prefissati.

Riferito a un GUI sul computer, esso si verifica in seguito all’interazione con
l’utente. La generazione di un evento è causata da un’azione effettuata dall’utente.
L’evento generato contiene tutte le informazioni riguardanti questa azione.
Quando viene generato si deve provvedere alla sua gestione, che viene
commissionata a un gestore di eventi.

Il gestore di eventi
La parte di un’applicazione destinata alla gestione degli eventi viene esplicitamente dichiarata. Un gestore è la parte
dell’applicazione software che si preoccupa di dare una risposta in base al tipo di evento ricevuto. Dato che ogni
elemento grafico può generare un evento bisogna associare a ognuno un gestore. Se non si vuole gestire l’evento basta
non associare alcun gestore. I gestori di un particolare elemento grafico sono registrati per gestire le operazioni in
risposta agli eventi che ricevono. Ogni volta che un evento viene generato il gestore richiama il metodo predisposto per
la risposta a quell’evento. L’obbiettivo fondamentale di un Layout Manager è di rispondere istantaneamente all’azione
di un utente. Se un gestore è occupato gli eventi che sopraggiungono vengono inseriti in una coda e aspettano il loro
turno prima di essere gestiti.
La gestione degli eventi
Gli aspetti principali dell’interazione con l’utente sono:

• Riconoscere quando l’utente compie le azioni;

• Predisporre le operazioni da eseguire in corrispondenza delle azioni compiute dall’utente.

Il primo compito è affidato al gestore degli eventi mentre il secondo al programmatore che scrive il codice da eseguire
per ogni azione possibile dell’utente. L’obiettivo del gestore di una GUI è la rapidità di risposta alle azioni dell’utente.
In Java gli eventi sono gestiti da un gestore, che se non specificato implica lo scarto degli stessi. Tale modello viene
detto a delegazione poiché il programmatore definisce per delega chi è abilitato alla gestione dell’evento. Gli event i
sono generati a partire da un oggetto detto origine.

Uno o più ascoltatori possono registrarsi nell’oggetto origine per essere avvisati della generazione di un particolare
evento. Gli ascoltatori sono in pratica i gestori degli eventi. L’origine, in presenza di un evento, avverte solo gli
ascoltatori che si sono registrati.

Per realizzare la gestione degli eventi seguono queste fasi:

• Creazione di uno o più ascoltatori in base agli eventi da gestire;

• Registrazione dell’ascoltatore in un oggetto origine che si vuole controllare;
• Gestione dell’evento eseguendo il metodo associato.

La creazione degli ascoltatori

Un ascoltatore è un oggetto la cui classe è costruita in modo particolare. Ci sono vari tipi di ascoltatori, ognuno
rappresentato da un’interfaccia: esiste l’interfaccia per creare l’ascoltatore delle finestre, pulsanti, mouse e tastiera.
Una classe diventa ascoltatore se implementa un’interfaccia di tipo listener. Una classe che implementa
un’interfaccia eredita dall’interfaccia tutti i metodi astratti e, per ognuno, deve fornire un’implementazione.

Le interfacce che gestiscono gli eventi sono contenute nel package java.awt.event, che quindi deve essere importato.
Per completare la creazione dell'ascoltatore bisogna conoscere quali sono i metodi astratti da implementare. È
obbligatorio che tutti i metodi di un ascoltatore siano presenti, anche se non contengono alcuna istruzione. All'interno
di questi metodi vanno inserite le istruzioni che devono essere eseguite in risposta a un particolare evento.

La registrazione presso l'origine

Dopo aver predisposto gli ascoltatori, si devono scegliere gli oggetti origine. La scelta ricade sugli oggetti che possono
generare un evento e ai quali si vuole associare una risposta. Un oggetto origine è una componente, per esempio una
finestra o un pulsante. Ogni componente possiede i metodi per registrare un particolare ascoltatore.

Le modalità di esecuzione
L'utente, interagendo con il programma, può compiere le azioni che generano gli eventi. Come si è visto, ogni evento
nasce da una particolare componente, chiamata origine. A seguito della nascita di un evento, l'origine cerca un
ascoltatore, tra quelli che si sono registrati, in grado di gestire quel tipo di evento. Se non ci sono ascoltatori, l'evento
viene abbandonato. Se invece l'origine trova un ascoltatore, invoca il metodo associato all'evento. Dopo aver
completato la gestione di un evento, il sistema passa all'evento successivo tra quelli in coda oppure resta in attesa.