componenti GUI

Modulo “Java” - Unità didattica 5
GUI
Graphical Users Interfaces
di
Tiziana Catania
Prof.Cantone SISSIS IV Ciclo - Classe 42A
Prerequisiti
 Conoscenza delle interfacce
grafiche dal punto di vista
dell’utente
 Conoscenza dei fondamenti di
Java e della programmazione ad
oggetti
Obiettivi (1)
Essere in grado di
creare interfacce
grafiche in Java
Obiettivi (2)
 Conoscere i principi generali per
progettare un’interfaccia
 Conoscere i vari componenti GUI e i
package che li contengono
 Sapere come funziona la gestione
degli eventi e quali sono gli eventi che
possono essere generati
 Conoscere e saper utilizzare i layout
manager
Contenuti
 Principi generali di progettazione
 I componenti GUI
 Il modello di gestione degli eventi
 I layout manager
 Esempi pratici in laboratorio
Metodologia
 Lezione frontale
 Lezione dialogata
 Brainstorming
Strumenti
 Libro di testo
 Dispense e appunti integrativi
 Lavagna luminosa e proiettore
 Computer
Verifiche
 Prove di laboratorio
 Progetto finale
Valutazione
Costanza
Di tipo formativo
Impegno
Partecipazione
Di tipo sommativo
Prove di lab.
Progetto finale
Tempi
Lezione:
Laboratorio:
Verifica:
Recupero e/o potenziamento:
10
8
3
5
ore
ore
ore
ore
Cos’è una GUI?
Inglese: Graphical Users Interfaces
Italiano: Interfacce utente grafiche
Rappresenta ciò che l’utente
vede di una applicazione e con
cui interagisce effettivamente
Es. menu, pulsanti, etc.
Principi generali di progettazione
Una GUI :
 deve fornire tutte le funzionalità
necessarie per interagire con
l’applicazione
 deve essere progettata secondo criteri
di usabilità, cioè deve:
- essere intuitiva
- permettere all’utente di imparare
velocemente ad usare le applicazioni
- non essere invadente (es.con i colori)
I componenti GUI (1)
 Un’interfaccia grafica è costituita da
componenti GUI ossia oggetti con cui
l’utente può interagire (ad es. col
mouse o con la tastiera):
-
pulsanti
menu
campi di testo
etc…
I componenti GUI (2)
Per creare componenti GUI in Java, si
possono utilizzare due diversi
packages:
java.awt
javax.swing
Il package java.awt
I componenti del package java.awt
(Abstract Windowing Toolkit) sono
definiti anche “componenti pesanti” in
quanto sono strettamente legati alle
capacità GUI della piattaforma locale
Il loro aspetto può variare da una
piattaforma all’altra
Il package javax.swing
I componenti del package javax.swing
fanno parte della piattaforma Java 2 e
sono detti anche “componenti leggeri”
in quanto sono stati scritti in Java per
cui offrono portabilità e flessibilità
Il loro aspetto può essere uniforme per
tutte le piattaforme o diverso per ogni
piattaforma e può variare persino a
tempo di esecuzione
Gerarchie di classi
Per capire come usare i componenti GUI
è bene conoscere le seguenti gerarchie
di ereditarietà:
java.lang.Object
java.awt.Component
java.awt.Container
javax.swing.JComponent
La classe Component
 Una classe che eredita da
Component è un componente
 La classe Component definisce i
metodi che possono essere applicati a
un oggetto qualsiasi di qualsiasi
sottoclasse di Component (es. paint e
repaint)
La classe Container
 Un Container è un Component
 E’ costituito da un insieme di
componenti collegati l’uno con l’altro
 Viene usato come riquadro dei
contenuti al quale vengono aggiunti i
vari componenti col metodo add
 Col metodo setLayout invece, è
possibile specificare un layout manager
La classe JComponent
 Un Jcomponent è un Container
 La classe JComponent è la
superclasse di molti componenti
Swing e definisce diversi metodi che
possono essere applicati a un oggetto
di qualsiasi sottoclasse di
JComponent.
Gestione degli eventi
 L’utente interagisce con l’interfaccia.
Possibili interazioni sono:
- clic e movimenti del mouse
- inserimento di testo
- etc.
 Quando avviene un’interazione, viene
inviato un evento al programma
 Tale evento deve essere “ascoltato” da
un particolare oggetto detto listener
ed inviato ad un metodo di gestione
appropriato che lo “elabora”
Classi di eventi
 Le classi di eventi sono contenute nei
package:
- java.awt.event che continuano ad
essere utilizzati con i componenti
Swing
- javax.swing.event che sono stati
aggiunti dopo, per definire eventi
specifici per i vari tipi di componenti
Swing
Listener e gestori (1)
 Un listener degli eventi per un evento
GUI è un oggetto di una classe che
implementa una o più interfacce
listener degli eventi dei package
java.awt.event e javax.swing.event
 Il listener sta in ascolto di specifici
eventi che possono essere generati.
 Quando viene generato un evento
esso viene inviato solo ai listener di
tipo appropriato: viene chiamato il
metodo di gestione dell’evento.
Listener e gestori (2)
 Le interfacce listener specificano uno o
più metodi di gestione che devono
essere definiti (tutti) nella classe che
le implementa,
altrimenti:
la classe risulterà abstract e non
potremo utilizzarla per creare oggetti
Listener e gestori (3)
 Per elaborare un evento si deve
- registrare un listener degli eventi
- implementare un gestore degli eventi
 Quando si verifica un evento, il
componente GUI interessato notifica i
suoi (eventuali) listener registrati e
viene chiamato automaticamente il
gestore per quel tipo di evento.
I componenti GUI
Mostreremo alcuni fondamentali componenti
GUI, senza pretendere di esaurire
l’argomento:
 JLabel
 JTextField
 JButton
 JCheckBox
 JRadioButton
 JComboBox
Vedremo il
codice più in
dettaglio
JLabel
 La classe javax.swing.JLabel è una
sottoclasse di JComponent
 Una label è un’etichetta: una singola
riga di testo che di solito non viene
modificata
 Non ci sono eventi per l’oggetto JLabel
 Vediamo un esempio: la creazione di
label con tre diversi costruttori, con
diversi argomenti
Esempio con JLabel (1)
public class ProvaLabel extends JFrame {
private JLabel label1, label2, label3;
public ProvaLabel()
{
super( "Prova di JLabel..." );
Container c = getContentPane(); //ritorna un rif.al
//riquadro dei contenuti
c.setLayout( new FlowLayout() );
// costruttore JLabel con argomento stringa
label1 = new JLabel( "Label con testo" );
label1.setToolTipText( "Questa è la label1" );
c.add( label1 );
Esempio con JLabel (2)
// costruttore JLabel con stringa, Icon e allineamento
//orizzontale
Icon libro = new ImageIcon( "libro.gif" );
label2 = new JLabel( "Label con testo e icona",
libro, SwingConstants.LEFT );
label2.setToolTipText( "Questa è la label2" );
c.add( label2 );
Un Icon è un oggetto di una classe (in questo caso
ImageIcon) che implementa l’interfaccia Icon del
package javax.swing. ImageIcon supporta immagini
GIF e JPEG.
SwingConstant.LEFT è una costante definita
nell’interfaccia SwingConstant del package javax.swing
Esempio con JLabel (3)
// costruttore JLabel senza argomenti
label3 = new JLabel();
label3.setText( "Label con icona e testo in basso" );
label3.setIcon( libro );
label3.setHorizontalTextPosition( SwingConstants.CENTER
);
label3.setVerticalTextPosition( SwingConstants.BOTTOM );
label3.setToolTipText( "Questa è la label3" );
c.add( label3 );
setSize( 260, 220 );
show();
}
Esempio con JLabel (4)
JTextField
 La classe JTextField estende la
classe JTextComponent del package
javax.swing.text.
 Serve a creare un’area di testo
composta da una sola riga su cui
scrivere o visualizzare testo.
 In maniera simile JPasswordField
 Viene generato un evento se si digita
del testo nella casella e si preme Invio
 Vediamo un esempio:
Esempio di JTextField (1)
public class ProvaTextField extends JFrame {
private JTextField text1, text2;
public ProvaTextField()
{
super( "Prova JTextField" );
Container c = getContentPane();
c.setLayout( new FlowLayout() );
// Costruttore JTextField con 12 colonne di testo
text1 = new JTextField( 12 );
c.add( text1 );
Esempio di JTextField (2)
// Costruttore JTextField con testo di default
text2 = new JTextField( "Inserisci il testo" );
c.add( text2 );
TextFieldHandler handler = new TextFieldHandler();
text1.addActionListener( handler );
text2.addActionListener( handler );
setSize( 350, 70 );
show();
}
Esempio di JTextField (3)
private class TextFieldHandler implements ActionListener {
public void actionPerformed( ActionEvent e )
Determina il
componente GUI
interessato
{
String s = "";
if ( e.getSource() == text1 )
Ritorna il testo
del JTextField
che ha generato
l’evento
s = "text1: " + e.getActionCommand();
else if ( e.getSource() == text2 )
s = "text2: " + e.getActionCommand();
JOptionPane.showMessageDialog( null, s );
}
}
Esempio di JTextField (4)
JButton
 La classe JButton eredita dalla classe AbstractButton
del package javax.swing.
 Un JButton è un pulsante su cui è possibile fare clic:
l’evento generato è un ActionEvent.
Btn1 = new JButton(“Vai”);
crea un JButton con etichetta “Vai”
Btn2 = new JButton(“Vai”,libro);
crea un JButton con etichetta “Vai” e
l’Icon libro, con il testo a destra
JCheckBox
 JCheckBox: sono pulsanti di stato con valore
true/false a seconda che la casella sia
selezionata o meno. Ad esso viene associata
un’etichetta con il costruttore. Ad esempio:
chbox = new JCheckBox(“Prova”);
 Se l’utente seleziona una casella viene
generato un ItemEvent che può essere
gestito da un ItemListener (un oggetto che
implementa l’interfaccia ItemListener) il quale
deve definire il metodo itemStateChanged
JRadioButton
 JRadioButton: sono pulsanti di stato con valore
true/false a seconda che siano selezionati o meno. A
differenza dei JCheckBox, se i pulsanti radio appaiono
in gruppo (relazione mantenuta dall’oggetto
ButtonGroup) solo 1 di essi alla volta può essere
selezionato. Se l’utente fa clic si genera un ItemEvent.
 Vediamo un esempio:
rbtn1 = new JRadioButton(“Scelta A”, true);
rbtn2 = new JRadioButton(“Scelta B”, false);
(…) radioGroup = new ButtonGroup();
radioGroup.add(rbtn1);radioGroup.add(rbtn2);
JComboBox
 JComboBox: sono i classici elenchi a discesa che
mostrano una serie di elementi tra i quali l’utente può
scegliere. Sono dette anche “caselle combinate”.
 Generano gli ItemEvent.
 Vediamo un esempio:
private String names[] = { "autore",
"titolo","editore", "prezzo" }; (…)
cbox = new JComboBox( names );
cbox.setMaximumRowCount( 3 );
 Ad ogni elemento è associato un indice numerico, a
partire da 0.
Nell’esempio, cbox.getSelectedIndex() restituirebbe
l’indice dell’elemento selezionato.
I layout manager
Creare interfacce grafiche in Java
non è semplice
 I layout manager aiutano a posizionare e
dimensionare i vari componenti GUI
dell’interfaccia.
 Ne esistono diversi tipi ma noi vedremo i
seguenti:
- FlowLayout
- BorderLayout
- GridLayout
FlowLayout
 Dispone i componenti nel contenitore nell’ordine in cui
vengono aggiunti, da sinistra a destra fino al bordo,
per continuare nella riga successiva.
 Per default i componenti vengono centrati, ma possono
essere allineati anche a sinistra o a destra.
 Per impostare il layout di tipo FlowLayout:
layout = new FlowLayout();
c = getContentPane();
c.setLayout(layout);
 Per modificare l’allineamento:
layout.setAlignment(FlowLayout.LEFT);
//ma ci sono anche CENTER e RIGHT
layout.layoutContainer( c );
//il container deve essere organizzato per il nuovo
//layout modificato
Esempio di FlowLayout
BorderLayout
 Dispone i componenti nel contenitore in cinque aree distinte:
North, South, East, West, Center.
 Si possono riempire tutte o solo alcune. North e South si
estendono orizzontalmente fino ai lati e verticalmente quanto
i componenti che li contengono. East e West si estendono
verticalmente tra North e South e orizzontalmente quanto i
componenti che li contengono. Center si estende per lo
spazio restante.
 Se non sono occupate tutte le aree, le altre si espandono
come vedremo in un esempio.
 Per impostare il layout di tipo BorderLayout:
Es. layout = new BorderLayout(4,5); //4 gap orizz. 5 vert.
c = getContentPane();c.setLayout(layout);
 Per inserire i componenti:
c.add(component, regione);
regione può essere: BorderLayout.NORTH,
BorderLayout.SOUTH, BorderLayout.EAST etc…
Esempio BorderLayout(1)
Inseriamo nelle regioni dei componenti JButton etichettati con
i nomi delle regioni, per vedere come vengono disposti e
dimensionati nel caso in cui li inseriamo tutti o no.
Esempio BorderLayout(2)
GridLayout
 Dispone i componenti nel contenitore in righe e
colonne, come in una griglia. Ogni componente
aggiunto ha le stesse dimensioni degli altri.
 I componenti vengono aggiunti da sinistra a destra
partendo dalla prima riga.
 Per impostare il layout di tipo GridLayout:
Es.
layout = new GridLayout(3,2);
oppure
layout = new GridLayout(3,2,4,4);
c = getContentPane();
c.setLayout(layout);
(..) c.add(component);
Esempio di GridLayout
Inseriamo dei componenti JButton in un GridLayout con tre
righe e tre colonne
Altri layout manager
 Esistono anche altri layout manager più
sofisticati. Li citiamo per completezza ma non
li spiegheremo:
- BoxLayout
- CardLayout
- GridBagLayout
Considerazioni finali
 Abbiamo visto come progettare semplici
interfacce grafiche in Java.
 Abbiamo mostrato alcuni esempi di come ciò
può essere fatto.
 La teoria, soprattutto in questo caso, non
sostituisce la pratica. E’ necessario provare e
riprovare in laboratorio per vedere i risultati.
FINE