INTERFACCE GRAFICHE

IN JAVA

Laboratorio Informatica 4AI

Java: GUI (Graphical User Interface)
La parte grafica di Java è contenuta nei package java.awt e javax.swing. E’ quindi
necessario importare entrambe le librerie in ogni programma in cui viene utilizzata la grafica
per realizzare una GUI.

Programmazione event-driven: non più algoritmi stile input/elaborazione/output, ma

reazione agli eventi che l’utente genera sui componenti grafici in modo interattivo.

Quando si dota un programma di una GUI, cambia completamente il ciclo di vita del
programma,

• SENZA GUI → le applicazioni durano essenzialmente “il tempo di eseguire il main( )”

• CON GUI → la JVM mantiene sullo schermo la GUI e cattura eventuali eventi (interazioni
dell’utente) su di essa. Quindi un’applicazione che fa uso di GUI, una volta lanciata, rimane
in attesa dell’input dell’utente e termina solo in base a un determinato input.

Interfacce Grafiche Java

Java: GUI (Graphical User Interface)

Abstract Windows Toolkit (AWT)

AWT è una libreria per creare interfacce grafiche utente che sfruttano componenti dipendenti dal
sistema operativo. Appoggiandosi al sistema operativo, l’aspetto grafico può variare sensibilmente
in funzione della piattaforma su cui gira la JVM. Conclusione: poca portabilità

Swing
Per correggere questi difetti la Sun ha successivamente introdotto le Swing in cui i componenti
vengono direttamente disegnati dalla JVM: Visualizzazione uniforme su
ogni piattaforma, ricchezza di componenti

Le classi della libreria Swing iniziano tutte con la lettera J

Interfacce Grafiche Java

Java: GUI (Graphical User Interface)
I componenti Swing sono organizzati secondo una gerarchia che estende la struttura di AWT
(Swing non sostituisce AWT, ma la estende)

Interfacce Grafiche Java

Java: GUI (Graphical User Interface)
Componente e Contenitori
In Java l’interfaccia utente è formata da due elementi principali: le componenti e i contenitori:

Una componente è un oggetto che offre un’interazione con l’utente (pulsante, menù, campo
di testo, ecc).

Un contenitore è un oggetto che può contenere le componenti. Usando opportuni metodi è

possibile aggiungere, eliminare posizionare componenti all’interno del contenitore stesso.

● contenitori principali: finestra principale, finestra di dialogo

● contenitori intermedi: pannello, pannello con barre di scorrimento, scheda con
etichette
● componenti atomiche: pulsanti, etichette, caselle e aree di testo, tabelle, combo box.

Interfacce Grafiche Java

Java: GUI (Graphical User Interface)

Contenitori Frame e Panel (JFRAME - JPANEL)

Analogia: immagina che il FRAME sia una parete e il PANEL sia un quadro.
Quando vuoi mostrare qualcosa sulla parete come una foto o un disegno, puoi creare un
quadro e appenderlo alla parete.

Quindi, se vuoi mostrare un’informazione (come testo, pulsanti, immagini e così via) sul
FRAME, prima devi creare un PANEL ed aggiungerlo alla PARETE.

Successivamente puoi usare i quadri (PANEL) per organizzare e mostrare diverse

informazioni sulla tua parete (FRAME)

Interfacce Grafiche Java

Java: GUI (Graphical User Interface)
AWT (Frame - Panel)

Interfacce Grafiche Java

Java: GUI (Graphical User Interface)
Swing: JFrame e JPanel

Interfacce Grafiche Java

Swing prevede un contenitore
intermedio detto content pane
(pannello del contenuto).
Le componenti dell’interfaccia
non vengono inserite
direttamente nel contenitore
principale, ma prima nel
contenitore intermedio c (di
classe Container) reso
disponibile dal metodo
getcontentPane()

Interfacce Grafiche Java

Java: GUI (Graphical User Interface)
Panel e contentPane
In termini di funzionalità, il Panel in AWT e il contentPane in Swing svolgono una funzione
simile, ovvero sono entrambi contenitori di componenti e consentono di organizzare i
componenti all'interno di un Frame o di un JFrame.

Tuttavia, ci sono alcune differenze importanti tra i due componenti:

1. Il Panel AWT non offre tutte le funzionalità avanzate di Swing, come ad esempio il
rendering di testo antialiasing.
2. Il Panel in AWT utilizza un layout predefinito basato su griglie (grid layout), mentre il
contentPane in Swing utilizza un layout predefinito basato su bordi (border layout).
Questo significa che il modo in cui i componenti vengono organizzati all'interno del
contenitore predefinito è diverso.

Interfacce Grafiche Java

Java: GUI (Graphical User Interface)
Classe BorderLayout Swing Classe GridLayout

Interfacce Grafiche Java

Java: GUI (Graphical User Interface)
Panel e contentPane
3. Il Panel in AWT è più leggero in termini di risorse di sistema rispetto al contentPane in
Swing. Questo può essere importante se si sta sviluppando un'applicazione che richiede alte
prestazioni e la gestione di grandi quantità di componenti

4. Il colore di background:

• Nel caso del Panel in AWT, il colore di sfondo predefinito è generalmente determinato dal
sistema operativo in uso. Di solito, sarà di colore grigio chiaro o bianco, ma il colore esatto
dipende dalle impostazioni del sistema.

• Per il contentPane in Swing, il colore di sfondo predefinito è solitamente bianco

Interfacce Grafiche Java

“Pettiniamo” un po’ il codice

Interfacce Grafiche Java

Etichette - Classe JLabel
La classe JLabel consente di istanziare oggetti etichetta attraverso tre costruttori:

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

➔ JLabel(String) crea un’etichetta contenente come testo la stringa passata tramite il
parametro;
➔ JLabel(String, int) il secondo parametro utilizza costanti statiche definite all’interno della
classe JLabel: JLabel.LEFT, JLabel.CENTER, JLabel,RIGHT.

Metodi:

➔ setText(String) permette di modificare il testo all’interno dell’etichetta

➔ setForeground(Color) modifica il colore del testo
➔ setBackground(Color) modifica il colore di sfondo dell’etichetta

Interfacce Grafiche Java

Pulsanti - Classe JButton
La classe JButton consente di istanziare oggetti pulsanti principalmente attraverso tre costruttori:

➔ JButton() costruttore senza parametri che crea un pulsante vuoto;

➔ JButton(String) crea un pulsante contenente come testo la stringa passata tramite il
parametro;
➔ JButton(Icon) il parametro Icon permette di rappresentare il pulsante attraverso un’ icona
(immagine).

Metodi:
➔ void setText(String s) viene utilizzato per impostare il testo specificato sul
pulsante;
➔ String getText() viene utilizzato per restituire il testo del pulsante;
➔ void setEnabled(boolean b) viene utilizzato per abilitare o disabilitare il
pulsante;
➔ void setIcon(Icon b) viene utilizzato per impostare l'icona specificata sul
pulsante;
➔ Icon getIcon() Viene utilizzato per ottenere l'icona del pulsante.
Interfacce Grafiche Java
Caselle di testo - Classe JTextField
La classe JTextField è sottoclasse di JTextComponent e consente di creare una casella di testo
composta da una sola riga che può essere usata come input o output di stringhe.

Costruttori:

➔ JTextField() - Crea una casella di testo vuoto

➔ JTextField(String text) - Crea un oggetto casella di testo con il testo specificato
➔ JTextField(String text, int) - Crea un nuovo TextField inizializzato con il testo e
dimensione in termini di colonne disponibili.
➔ JTextField(int columns) - Crea un nuovo TextField vuoto con il numero di
colonne specificato.

Metodi:

➔ void setText(String) - modifica il contenuto della casella di testo;

➔ String getText() - restituisce il contenuto della casella di testo;
➔ void setFont(Font f) - imposta il carattere corrente;
➔ void setEditable(boolean) - rende una casella di testo editabile o non editabile.
Interfacce Grafiche Java
Area di testo - Classe JTextArea
La classe JTextArea consente di creare un’area di testo formata da più righe.

Costruttori:
➔ JTextArea() crea un’area di testo vuota;
➔ JTextArea(int, int) crea un’area di testo avente un numero di righe e di 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 un valore di testo, un numero
di righe e di colonne. Il quarto parametro int rappresenta una costante statica della
classe JTextArea che consente di impostare una scrollbars (SCROLLBARS_BOTH,
SCROLLBARS_VERTICAL_ONLY, SCROLLBARS_HORIZONTAL_ONLY,
SCROLLBARS_NONE)

Interfacce Grafiche Java

Metodi:
➔ setText(String) consente di modificare il contenuto dell’area di testo
➔ getText() restituisce la stringa contenuta nell’area
➔ setEditable(boolean) consente di rendere editabile o meno l’area di testo
➔ append(String) aggiunge al contenuto corrente un nuovo testo

Interfacce Grafiche Java

Caselle combinate - Classe JComboBox
La classe JComboBox consente di creare menù a tendina che permettono la selezione di una
singola voce.
Costruttori:
➔ JComboBox() crea un menù vuoto
➔ JComboBox(E[ ]) crea un menù con elementi contenuti in uno specifico array
➔ JComboBox(Vector<E>) crea un menù di scelta con elementi contenuti in uno specifico
array dinamico
Metodi:
Se il menù viene creato con il costruttore vuoto è possibile inserire elementi con il metodo:
➔ addItem(String)

Interfacce Grafiche Java

Casella di controllo - Classe JCheckBox
La casella di controllo è un componente grafico che gestisce solo due stati, true e false. Se
ha il segno di spunta a essa si associa il valore true, altrimenti false.
Costruttori:
➔ JCheckBox() costruttore vuoto;
➔ JCheckBox(String) crea una casella di controllo con testo impostato senza spunta
sulla casella stessa;
➔ JCheckBox(String, boolean) possiamo creare una casella di controllo con valore true
o false impostati;
➔ JCheckBox(Icon) crea una casella di controllo con un’immagine senza spunta sulla
casella stessa;
➔ JCheckBox(Icon, boolean) crea una casella di controllo con un’immagine e un valore
impostato.

Interfacce Grafiche Java

Ogni componente atomico può essere inserito nel contenitore (JPanel) utilizzando il metodo
add.

Ogni componente atomico può essere dimensionato e posizionato in modo assoluto con il
metodo setBounds(x, y, width, height).

Per poter posizionare i widget in modo assoluto bisogna “disattivare” il gestore di layout del
contenitore. Il gestore di layout predefinito del JPanel è FlowLayout, per “disattivarlo”
bisogna settare il layout a null (setLayout(null))

La classe Java FlowLayout viene utilizzata per disporre i componenti in una riga, uno dopo
l'altro (in un flusso). È il layout predefinito del pannello.

https://docs.oracle.com/javase/7/docs/api/javax/swing/package-summary.html
 JPanel p = new JPanel();
p.setLayout(null);
JButton b = new JButton(“click”);
b.setBounds(130,100,100,40);
p.add(b);

https://docs.oracle.com/javase/7/docs/api/javax/swing/package-summary.html
Layout Manager
In Java il modo con cui le componenti vengono disposte e posizionate (layout)
dipende dal contenitore. A ogni contenitore può essere associato un gestore che
si occupa della disposizione degli elementi. Questo gestore è chiamato Layout
Manager.

Tutti i contenitori hanno un Layout Manager di default, che può essere comunque
cambiato richiamando un metodo e definendo un nuovo gestore.

Per cambiare Layout Manager a un contenitore bisogna utilizzare il metodo

setLayout() che riceve come parametro un oggetto che rappresenta il layout
scelto.

Interfacce Grafiche Java

Classe FlowLayout
La classe FlowLayout viene usata per disporre le componenti su una stessa riga, una dopo
l'altra, nello stesso ordine con cui vengono aggiunte. Quando la riga viene completata, si
passa alla riga successiva. Le componenti aggiunte vengono centrate nella riga e sono
separate con uno spazio di 5 pixel. Questo gestore è associato per default a tutti i pannelli
(Panel - JPanel)
Il metodo add che viene usato per aggiungere le componenti a un contenitore di
tipo FlowLayout riceve come unico parametro la componente da inserire.

JPanel p = new JPanel();

JButton b1 = new JButton(“b1”);
JButton b2 = new JButton(“b2”);
JButton b3 = new JButton(“b3”);
p.setLayout(new FlowLayout());
p.add(b1);
p.add(b2); Posso passare al costruttore i valori FlowLayout.LEFT,
p.add(p3); FlowLayout.CENTER, FlowLayout.RIGHT.

Interfacce Grafiche Java

Classe BorderLayout
Usando la classe BorderLayout, il contenitore viene diviso in cinque regioni, in ognuna delle
quali può essere inserita una componente. Le regioni sono indicate con i seguenti nomi:
North, South, Center, East, West.
Questo tipo di disposizione viene usato quando c'è una componente che deve occupare
molto spazio, per esempio un'area di testo o un'area di disegno, e che quindi conviene
aggiungere al contenitore nella zona centrale.
Le zone laterali vengono usate per inserire i pannelli che solitamente contengono i comandi
dell'applicazione.
Il BorderLayout è associato
per default a tutte le finestre

Interfacce Grafiche Java

Classe BorderLayout
Possiamo impostare il panel con il BorderLayout utilizzando il metodo setLayout():

JPanel p = new JPanel();

p.setLayout(new BorderLayout());

BorderLayout bl = new BorderLayout();

p.setLayout(bl);

Se devo aggiungere un componente al pannello devo indicare dove posizionarlo:

JButton b = new JButton(“Pulsante”);

p.add(b,“South”);

Interfacce Grafiche Java

Classe GridLayout
La classe GridLayout permette di posizionare le componenti in una griglia. Il contenitore
strutturato come una tabella organizzata in righe e colonne: ogni componente può essere
inserita in una cella.
Esistono due costruttori per questo gestore che differiscono per il numero di parametri che
ricevono:
● GridLayout(int, int) consente di specificare il numero di righe e il numero di
colonne che formano la griglia;
● GridLayout(int, int, int, int), oltre alle dimensioni della griglia, permette di
indicare quanto spazio lasciare tra le componenti. Ha quattro parametri:
i primi due hanno lo stesso significato del costruttore precedente, il terzo indica quanti
pixel separano le componenti orizzontalmente, il quarto indica la spaziatura verticale.

Interfacce Grafiche Java

Classe GridLayout
Le componenti sono aggiunte usando un metodo add che possiede come unico parametro
la componente.
Le celle vengono riempite usando le componenti nell'ordine con cui vengono inserite: prima
si riempie la prima riga, da sinistra a destra, poi si passa alle celle sulla seconda riga ecc.

JPanel p = new JPanel();

p.setLayout(new GridLayout(3, 3);

Interfacce Grafiche Java

Programmazione guidata dagli Eventi
Quando l’utente interagisce con un componente genera un evento.
Un evento è una qualsiasi interazione dell’utente con
l’interfaccia grafica.

Possibili eventi sono l'apertura o la chiusura di una finestra, il clic su

un pulsante oppure la pressione di un tasto del mouse.

L'evento generato contiene tutte le informazioni riguardanti questa

azione. Una volta generato un evento si deve provvedere alla sua
gestione, che viene affidata a un gestore di eventi.

Un gestore di evento è un blocco di codice che gestisce un

particolare evento legato a un particolare componente.

Interfacce Grafiche Java

Gestione degli eventi
Gli eventi sono generati a partire da un particolare oggetto, chiamato origine.
Uno o più ascoltatori possono registrarsi nell'oggetto origine per essere avvisati della
generazione di un particolare tipo di 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.

ESEMPIO
Un pulsante genera un evento quando si clicca su di esso, una finestra genera un evento
quando viene chiusa: tutte le componenti sono possibili oggetti di origine.

Per realizzare la gestione degli eventi si deve procedere nel seguente modo:
1. creare uno o più ascoltatori in base agli eventi che si vogliono gestire;
2. registrare l'ascoltatore in un oggetto origine che si vuole controllare;
3. gestire l'evento eseguendo il metodo associato.

Interfacce Grafiche Java

1 - Creazione degli ascoltatori
Un ascoltatore è un oggetto la cui classe implementa un’interfaccia listener contenuta nel
package java.awt.event.

Una classe che implementa un’interfaccia eredita da essa tutti i metodi astratti che devono
quindi essere definiti. E’ importante che tutti i metodi astratti dell’interfaccia siano definiti,
anche senza inserire codice tra le { …}.

Esempio: Ascoltatore dell’ oggetto origine finestra

import java.awt.event.*;
class GestoreFinestra implements WindowListener
{
…
}

Interfacce Grafiche Java

Esempio: Ascoltatore dell’ oggetto origine finestra

import java.awt.event.*;
class GestoreFinestra implements WindowListener
{
…
}
GestroreFinestra deve prevedere tutti i metodi astratti dell’interfaccia WindowListener, anche
se non contengono istruzioni:

Interfacce Grafiche Java

All’interno dei metodi vanno inserite le istruzioni che devono essere eseguite in
risposta a un particolare evento:

Se il programma deve terminare quando la finestra viene chiusa il metodo

potrebbe essere:
public void windowClosing(WindowEvent e) {
System.exit(0);
}

Interfacce Grafiche Java

2 - Registrazione presso l’origine
L’oggetto origine è il componente che può generare l’evento. Ogni classe componente
prevede un metodo per registrare l’ascoltatore.

Esempio:

● metodo addWindowListener: registra eventi legati a oggetti finestra

● metodo addActionListener: registra eventi legati a oggetti pulsante

JFrame f = new JFrame();

…
f.addWindowListener(new GestoreFinestra());
…

Interfacce Grafiche Java

Esempio completo

Creazione dell’ascoltatore:
viene implementato solo il
metodo che gestisce l’evento di
chiusura della finestra con la
terminazione del programma

Interfacce Grafiche Java

Riga 7: l’ascoltatore GestoreFinestra
viene registrato presso l’origine (la
Interfacce
finestra f). Grafiche Java

Il metodo windowClosing() sarà

eseguito non appena l’utente
cliccherà sull’icona di chiusura
finestra (x). L’evento generato sarà
passato al metodo stesso.

Interfacce Grafiche Java

Eventi sul pulsante

Ascoltatore: implementa l’interfaccia

ActionListener che prevede il metodo
actionPerformed() per gestire l’evento
“click sul pulsante”

Al click sul pulsante il gestore

dell’evento cambia il background del
contenitore pannello, che quindi deve
essere passato al costruttore del
gestore stesso

Interfacce Grafiche Java

Viene creata la classe per l’interfaccia
grafica e a riga 15 e riga 17 si registra
l'ascoltatore alle componenti pulsante.

Interfacce Grafiche Java

Quando viene cliccato un pulsante si genera l’evento che viene ascoltato dal gestore
registrato sul pulsante stesso e viene quindi eseguito il metodo actionPerformed().

Interfacce Grafiche Java

Input/Output da interfaccia grafica

Le classi JTextArea e JTextField definiscono i metodi:

● getText() - restituisce il testo contenuto nell’area o campo di testo
● setText(String) - modifica il testo in base alla stringa specificata come
parametro
● setEditable(boolean) - true rende editabile/false non permette di
editare

Interfacce Grafiche Java

Convertire una stringa in numero
Metodi statici della classe Integer → parseInt()

Double → parseDouble()
JTextField t = new JTextField();
Esempio:
…
int n = Integer.parseInt(t.getText());

Potrebbe succedere che l’utente inserisca spazi prima e/o dopo il valore numerico:
int n = Integer.parseInt(t.getText().trim());

Interfacce Grafiche Java

Convertire un numero in una stringa da fornire in output
Metodo statico della classe Integer/Double → toString()

Esempio:
JTextField t = new JTextField();
…
int somma = 100;
t.setText(Integer.toString(somma));

Interfacce Grafiche Java

Gestire errori nell’input dei dati
NumberFormatException

Esempio:
try{
number =
Integer.parseInt(t.getText().trim());
}catch (NumberFormatException e) {

t.setText(“Errore: Reinserire il numero: “);

}

Interfacce Grafiche Java

Esercitazione 1: Calcolatrice semplificata

Next Step