Interfacce grafiche Capitolo 27 marzo 2004 Interfacce grafiche

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Programmazione visuale Interfacce grafiche