GUI e java swing

GUI e java swing
Raffaella Brighi, a.a. 2005/06
Corso di Laboratorio II. A.A. 2005-06
CdL Operatore Informatico Giuridico.
Elmenti della GUI
„
Eventi e listener
contenitori
componenti
layout manager
„
caratteristiche speciali
„
„
„
1
Componenti della GUI
„
„
„
„
Un componente della GUI rappresenta un
oggetto grafico che visualizza informazioni
oppure permette all’utente di interagire con il
programma.
Es. pulsanti, etichette, campi di testo, barre
di scorrimento sono componenti.
I componenti generano eventi cui i
programmi attraverso le classi listener
rispondono.
Ogni componenti genera eventi specifici.
Container
„
„
I container sono componenti speciali che
possono contenere altri componenti
Sono container
‰
‰
‰
applet
frame: è una finestra che può essere posizionata
ovunque nello schermo
panel: consentono di organizzare gruppi di
componenti
2
Java Swing
„
„
„
I componenti grafici sono classi. Per mostrarli
e utilizzarli occorre dichiarare un riferimento
e creare l’oggetto.
Possono essere creati come derivazione di
classi base appartenenti al package Swing.
Le super classi base definiscono le
caratteristiche generali dei componenti. Le
classi derivate definiscono le proprietà
specifiche.
Frame - estensione di JFrame
„
„
„
„
Per creare una classe frame occorre:
importare javax.swing.JFrame
estendere la classe JFrame
public class FrameDemo extends JFrame
creare un listener per la finestra
‰
‰
primo modo implementare l’interfaccia
WindowListener
sec modo estendere la classe WindowAdapter
3
Templates per GUI degli IDE
„
„
„
„
Gli IDE forniscono Template per generare interfacce
grafiche.
NetBeans: New-> Java Gui Forms -> JFrame
(assegnare un nome al Frame, es. FrameDemo)
L’IDE crea un Frame vuoto a cui è associato un
evento windowclosing, che si autoavvia in posizione
iniziale (0,0) con dimensioni ridotte.
FrameDemo è una classe (si può vedere il codice
dall’albero del filesystem). Attraverso una maschera
(sulla sx) è possibile impostare le proprietà più
importanti del Frame. Attraverso codice poi si può
personalizzare la classe.
DESIGN
4
Codice di un frame generato da NetBeans
public class FrameDemo extends javax.swing.JFrame {
public FrameDemo() {
initComponents();
}
private void initComponents() {
Dichiarazione della classe come
estensione di JFrame
costruttore: richiama il metodo initComponet. Qui
dobbiamo impostare le proprietà iniziali del Frame
addWindowListener(new java.awt.event.WindowAdapter() {
public void windowClosing(java.awt.event.WindowEvent evt) {
exitForm(evt);
Metodo generato automaticamente dall’IDE.
}
Aggiunge il listener per gestrire gli eventi di
chiusura della finestra. NON scrivere mai in questa
});
parte.
pack();
}
private void exitForm(java.awt.event.WindowEvent evt) {
System.exit(0);
}
public static void main(String args[]) {
new FrameDemo().show();
}
}
Metodo eseguito alla chiusura
del Frame
metodo Main: opzionale,
possiamo creare un programma
driver
Programma test: avvia la maschera
public class avvioGUI {
/** Creates a new instance of avvioGUI */
public avvioGUI() {
}
public static void main(String[] args) {
FrameDemo myFrame = new FrameDemo();
myFrame.show();
}
}
5
Personalizzazioni
Il FORM compare in (0,0) e con dimensioni
zero, senza titolo. Per modificare dimensioni
e titolo della finestra, personalizzo il
costruttore:
„
public FrameDemo() {
initComponents();
setTitle("la mia prima finestra");
setSize (500, 500);
setLocation(100,100);
}
Si possono aggiungere metodi per gestire eventi, come mouseclick
ecc. Tali eventi possono essere definiti attraverso la maschera che
mostra le proprietà della classe. L’IDE li scrive automaticamente e
aggiunge il listener nel metodo initComponents.
„
public class FrameDemo2 extends javax.swing.JFrame {
public FrameDemo2() {
initComponents();
setTitle("prima");
setSize (500, 500);
setLocation(100,100);
Imposto nel costruttuore
proprietà iniziali dell’oggetto
}
private void initComponents() {
addMouseListener(new java.awt.event.MouseAdapter() {
public void mouseClicked(java.awt.event.MouseEvent evt) {
mouseClick(evt);
}
});
addWindowListener(new java.awt.event.WindowAdapter() {
public void windowClosing(java.awt.event.WindowEvent evt) {
exitForm(evt);
}
});
}
pack();
6
private void mouseClick(java.awt.event.MouseEvent evt) {
//se nel titolo è scirtto 'prima' lo cambio in 'dopo' e viceversa
String titAtt;
titAtt=this.getTitle();
metodo invocato al click del
if (titAtt.equals("prima"))
mouse
this.setTitle("dopo");
else
this.setTitle("prima");
}
private void exitForm(java.awt.event.WindowEvent evt) {
System.exit(0);
}
public static void main(String args[]) {
new FrameDemo2().show();
}
// Variables declaration - do not modify
// End of variables declaration
}
Aggiungere componenti al Frame
„
„
Nella classe FrameDemo si possono
aggiungere pulsanti, etichette ecc (altri
componenti grafici), prima costruendo classi
per ognuno di essi e poi istanziando e
utilizzando gli oggetti delle classi. Nelle
JavaDoc troviamo metodi e proprietà di tutte
le classi.
Attraverso i tool grafici di NetBeans tali
elementi vengono aggiunti automaticamente,
trascinando l’elemento dal panel che
compare in design direttamente sul Frame.
7
Layout manager
„
„
„
Il Layout manager determina il modo in cui i componenti devono essere
organizzati graficamente in un contenitore.
Ogni componente ha il suo layout manager di default, che però può
essere cambiato.
I layoutmanager di default sono:
‰
‰
‰
‰
‰
‰
‰
„
Flow Layout
Border Layout
Box Layout
Card Layout
Grid Layout
GridBag Layout
Overlay Layout
Ognuno ha proprie caratteristiche. Per modificare quello di default in
NetBeans si fa click col pulsante dx sull’oggetto Layout nell’albero della
classe. Da codice invece
FrameDemo.setLayout (new BorderLayout());
„
„
„
FlowLayout: è uno dei più semplici. Mette su una
riga quanti più componenti è possibile, usando le
dimensioni predefinite, quando un componente non
sta sulla riga corrente lo sposta sulla riga successiva.
Si può impostare lo spazio tra i componenti.
Box Layout: organizza i componenti sia
verticalmente sia orizzontalmente, in una riga o in
una colonna. Occorre creare un boxlayout per ogni
componente. In fase di creazione è possibile
specificare se organizzare gli oggetti orizzontalmente
o verticalmente. Consente anche di creare aree
vuote per fissare lo spazio vuoto sulla maschera.
Nuovo Absolute Layout: mette in posizione fissa i
componenti
8
Pulsanti, eticchette, text box..
„
„
Fissato il LayoutManager del container si possono
trascinare su questo altri componenti grafici per
comporre l’interfaccia.
I componenti grafici più in uso sono:
‰
‰
‰
‰
Label (etichetta): visualizza una riga di testo.
TextField (campo di testo): visualizza un riga di testo e
permette all’utente di scriverci dentro, utilizzata per l’input
TextArea (area di testo): come textFild ma visualizza più
linee di testo.
Push Button (pulsante): utilizzato per eseguire delle azioni
al click.
(Altri la prossima lezione..)
Label
Si trascina l’oggetto graficamente sulla maschera. E’
possibile modificare in fase di design (pannello
proprietà) il nome dell’oggetto (etich1, ad esempio),
font, scritta iniziale, etc. codice aggiunto da
netbeans:
etich1 = new javax.swing.JLabel(); //nel metodo init
components
„ La classe JLabel ha un serie di metodi per gestire
l’etichetta. Per modificare proprietà o richiamare
metodi dell’etichetta aggiunta richiamiamo i membri
della classe JLabel. Es.:
„ etich1.setText (“pippo”) imposta il testo
dell’etichetta
„
9
Pulsanti
Come per le label è sufficiente trascinarli e
impostare le proprietà iniziali.
Bottone1 = new javax.swing.JButton();
„ Si devono poi aggiungere gli eventi da
gestire: mouseclick ecc (design, scheda
events).
„ Dentro ai metodi invocati al verificarsi degli
eventi si scriverà ciò che il programma deve
fare.
„
Codice per gestire il click su un bottone
nel metodo initComponents:
Bottone1.addMouseListener(new java.awt.event.MouseAdapter() {
public void mouseClicked(java.awt.event.MouseEvent evt) {
Bottone1mouseClick(evt);
}
…..
private void Bottone1mouseClick(java.awt.event.MouseEvent evt) {
// TODO add your handling code here:
}
10
TextField
„
E’ utile per leggere l’input dell’utente,
attraverso le proprietà setText e getText.
11