Interfacce grafiche Capitolo 27 marzo 2004 Interfacce grafiche.

Presentazione sul tema: "Interfacce grafiche Capitolo 27 marzo 2004 Interfacce grafiche."— Transcript della presentazione:

1 Interfacce grafiche Capitolo 27 marzo 2004 Interfacce grafiche

2 Interfacce grafiche L’interfaccia grafica (o GUI, graphical user interface) di un programma è basata su un insieme di elementi grafici – componenti componenti utilizzati per raggruppare altri componenti –contenitori altri oggetti di supporto gestori di layout gestori degli eventi Interfacce grafiche

3 La tecnologia Swing Le Swing delle API di Java
package java.awt e javax.swing una GUI Swing è composta da un contenitore principale un pannello usato come contenitore intermedio componenti atomici altri oggetti di supporto Interfacce grafiche

4 Alcuni componenti Swing
contenitori principali contenitori intermedi alcuni componenti atomici applet finestra di dialogo frame pannello (contiene altri componenti) etichetta campi di testo area di testo Interfacce grafiche

5 La classe JFrame Il contenitore principale per una interfaccia grafica può essere un applet una frame rappresentate dalla classe JFrame del package javax.swing una finestra di dialogo Interfacce grafiche

6 Un esempio – una frame sullo schermo
import javax.swing.JFrame; /* Applicazione che visualizza una frame sullo schermo. */ class FrameSemplice extends JFrame { /* Crea una nuova FrameSemplice. */ public FrameSemplice() { super(); this.setTitle("Una frame semplice"); this.setSize(300, 100); this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); this.show(); } /* L'applicazione FrameSemplice. */ public static void main(String[] args) { /* crea una nuova FrameSemplice */ new FrameSemplice(); Interfacce grafiche

7 Componenti I componenti di una interfaccia grafica sono oggetti polimorficamente di tipo Component ciascuna tipologia di componente è rappresentata da una sotto-classe di Component (JComponent) i componenti sono oggetti istanza di tali classi bottoni – classe JButton etichette – classe JLabel campi di testo – classe JTextField aree di testo – classe JTextArea Interfacce grafiche

8 Esempio – la classe JTextField
Un campo di testo è un’area per visualizzare una linea di testo editabile classe JTextField principali costruttori JTextField() JTextField(String s) JTextField(int n) principali metodi void setText(String s) String getText() String getSelectedText() void setEditable(boolean b) Interfacce grafiche

9 Struttura di una interfaccia grafica
import javax.swing.*; /* L’applicazione Swing ApplicazioneX. */ public class ApplicazioneX extends JFrame { ... variabili d'istanza per i componenti dell'interfaccia ... ... altre variabili d'istanza ... ... costruttore ... ... metodo per l'inizializzazione dell'interfaccia ... ... altri metodi ... /* L'applicazione ApplicazioneX. */ public static void main(String[] args) { /* crea ed avvia una nuova ApplicazioneX */ new ApplicazioneX(); } Interfacce grafiche

10 Costruttore per una interfaccia grafica
/* Crea una nuova ApplicazioneX. */ public ApplicazioneX() { /* inizializza la frame */ super(); ... altre inizializzazioni ... /* inizializzazione dell’interfaccia grafica */ /* l'esecuzione dell'applicazione termina con * la chiusura della frame */ this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); /* assegna un titolo alla frame */ this.setTitle("ApplicazioneX"); /* inizializza l'interfaccia dell'applicazione */ this.inizializzaGUI(); /* dimensiona e visualizza la frame */ this.pack(); this.show(); } Interfacce grafiche

11 Inizializzazione di una interfaccia grafica
/* Inizializza l'interfaccia grafica dell'applicazione * e la gestione di eventi. */ private void inizializzaGUI() { /* pannello, usato come contenitore intermedio */ JPanel intermedio; /* crea il contenitore intermedio */ intermedio = new JPanel(); ... crea il gestore di layout del contenitore intermedio ... ... crea i componenti dell'interfaccia grafica ... ... crea gli ascoltatori di eventi ... ... aggiunge i componenti al contenitore /* aggiunge il contenitore intermedio alla frame */ this.getContentPane().add(intermedio); } Interfacce grafiche

12 Esempio – una frame con un bottone e una etichetta
variabili d’istanza per i componenti private JButton bottone; // un bottone private JLabel etichetta; // una etichetta nel metodo inizializzaGUI() /* crea i componenti dell'interfaccia */ bottone = new JButton("Un bottone"); etichetta = new JLabel("Una etichetta"); /* aggiunge i componenti al contenitore intermedio */ jPanel.add(bottone); jPanel.add(etichetta); Interfacce grafiche

13 Gestori di layout Per inserire un componente in un contenitore viene utilizzato il metodo add(Component c) la posizione del componente del contenitore viene specificata in modo indiretto e dipende gestore di layout associato al contenitore Interfacce grafiche

14 Gestori di layout I gestori di layout sono oggetti polimorficamente di tipo LayoutManager FlowLayout GridLayout BorderLayout GridBagLayout Interfacce grafiche

15 Esempio – uso di un gestore di layout
/* Inizializza l'interfaccia grafica dell'applicazione, * usando una griglia 3x2. */ private void inizializzaGUI() { /* pannello usato come contenitore intermedio */ JPanel intermedio; /* crea il contenitore intermedio */ intermedio = new JPanel(); /* crea il gestore di layout del contenitore intermedio */ intermedio.setLayout( new GridLayout(3,2) ); /* crea i componenti dell'interfaccia grafica */ bottone1 = new JButton("Uno"); bottone2 = new JButton("Due"); bottone3 = new JButton("Tre"); bottone4 = new JButton("Quattro"); bottone5 = new JButton("Cinque"); bottone6 = new JButton("Sei"); /* aggiunge i componenti al contenitore intermedio */ intermedio.add(bottone1); intermedio.add(bottone2); intermedio.add(bottone3); intermedio.add(bottone4); intermedio.add(bottone5); intermedio.add(bottone6); /* aggiunge il contenitore intermedio alla frame */ this.getContentPane().add(intermedio); } Interfacce grafiche

16 Eventi, sorgenti e ascoltatori
Un evento rappresenta una interazione tra utente e GUI gli eventi sono oggetti polimorficamente di tipo EventObject ci sono diverse classi che estendono EventObject ad es., ActionEvent rappresenta eventi d’azione Ogni evento viene generato con riferimento a un componente della GUI, chiamato la sorgente dell’evento Gli oggetti responsabili della gestione degli eventi sono chiamati gestori (o ascoltatori) degli eventi polimorficamente di tipo EventListener ci sono diverse interfacce che estendono EventListener ad esempio, ActionListener Interfacce grafiche

17 Gestione di eventi Si vuole realizzare una applicazione che conta quante volte è stato premuto un bottone Interfacce grafiche

18 Premi il bottone – componenti
Variabili d’istanza /* il bottone */ private JButton ilBottone; /* etichetta per visualizzare quante volte è * stato premuto ilBottone */ private JLabel etichettaContatore; /* conta quante volte è stato premuto ilBottone */ private int contatore; Nel costruttore /* finora il bottone non è mai stato premuto */ this.contatore = 0; Interfacce grafiche

19 Premi il bottone – componenti
Nel metodo per l’inizializzazione della GUI /* crea il bottone */ ilBottone = new JButton("Premimi!"); /* crea l'etichetta per visualizzare quante volte è * stato premuto ilBottone */ etichettaContatore = new JLabel(); etichettaContatore.setText( "Il bottone è stato premuto " + this.contatore + " volte"); più avanti /* aggiunge bottone e etichetta * al pannello intermedio */ intermedio.add(ilBottone); intermedio.add(etichettaContatore); Interfacce grafiche

20 Premi il bottone – ascoltatore
import java.awt.event.*; /* Ascoltatore di eventi per l'applicazione * PremiIlBottone. */ class AscoltatorePerPremiIlBottone implements ActionListener { /* Applicazione che usa l'ascoltatore */ private PremiIlBottone pib; /* Crea un nuovo ascoltatore per l'applicazione pib. */ public AscoltatorePerPremiIlBottone(PremiIlBottone pib){ this.pib = pib; } /* Gestione degli eventi d'azione. */ public void actionPerformed(ActionEvent e) { /* l'unico possibile evento d'azione è che sia * stato premuto il bottone ilBottone di pib */ pib.conteggiaBottone(); Interfacce grafiche

21 Premi il bottone – uso dell’ascoltatore
Nel metodo per l’inizializzazione dell’interfaccia grafica /* ascoltatore per gli eventi d'azione */ ActionListener asc; ed inoltre /* crea un ascoltatore degli eventi di azione */ asc = new AscoltatorePerPremiIlBottone(this); /* registra gli eventi di ilBottone */ ilBottone.addActionListener(asc); Interfacce grafiche

22 Premi il bottone – metodo per la gestione dell’evento
Nella classe PremiIlBottone /* Il bottone ilBottone è stato premuto. */ public void conteggiaBottone() { /* incrementa contatore */ this.contatore++; /* aggiorna il valore visualizzato da * etichettaContatore */ etichettaContatore.setText( "Il bottone è stato premuto " + this.contatore + " volte"); } Interfacce grafiche

23 Gestione di più sorgenti di eventi
Si consideri la seguente applicazione come gestire due sorgenti di eventi? Interfacce grafiche

24 Un solo ascoltatore per più sorgenti di eventi
import java.awt.event.*; /* Ascoltatore di eventi per ConvertitoreTemperature. */ class AscoltatorePerConvertitoreTemperature implements ActionListener { /* Applicazione che usa l'ascoltatore */ private ConvertitoreTemperature ct; /* Crea un nuovo ascoltatore per l'applicazione ct. */ public AscoltatorePerConvertitoreTemperature (ConvertitoreTemperature ct) { this.ct = ct; } /* Gestione degli eventi d'azione. */ public void actionPerformed(ActionEvent e) { /* sono possibili due eventi: è stato premuto il bottone * bottoneACelsius o bottoneAFahrenheit di ct */ if (e.getSource()==ct.bottoneACelsius) ct.aCelsius(); else if (e.getSource()==ct.bottoneAFahrenheit) ct.aFahrenheit(); Interfacce grafiche

25 Metodo per la gestione di un evento
/* Effettua una conversione a gradi Celsius. */ public void aCelsius() { double f; // temperatura in gradi Fahrenheit double c; // temperatura in gradi Celsius /* legge la temperatura in gradi Fahrenheit */ f = new Double(campoTemperatura.getText()) .doubleValue(); /* converte la temperatura in gradi Celsius */ c = (f-32)/1.8; /* visualizza la temperatura in gradi Celsius */ etichettaTemperaturaConvertita.setText(f + "F = " + c + "C"); } Interfacce grafiche

26 Programmazione ad eventi
Lo sviluppo di applicazione interattive con GUI è basato sulla programmazione ad eventi l’esecuzione delle operazioni svolte dall’applicazione è controllata dalle azioni effettuate dall’utente uso estensivo del polimorfismo uso di framework Interfacce grafiche

27 Programmazione visuale
Interfacce grafiche