CRS4 - http://www.crs4.it java.awt.* Abstract Window Toolkit maggio 2004 Stefano Sanna - [email protected] CRS4 - http://www.crs4.it Agenda ● Java e interfacce grafiche ● Caratteristiche di AWT ● Design e implementazione di interfacce grafiche ● Panoramica dei componenti disponibili ● Primitive grafiche e modello ad eventi ● Esempi di codice ● Bibliografia ● Conclusioni Stefano Sanna - [email protected] CRS4 - http://www.crs4.it Java Stefano Sanna - [email protected] Due approcci per le UI in Java CRS4 - http://www.crs4.it ● ● Componenti heavyweight – Sono basati su componenti forniti dal sistema operativo (scritti in C/C++): le prestazioni e l'integrazione “estetica” con le altre applicazioni è massima – L'applicazione perde portabilità ove non è disponibile la libreria Componenti lightweight – Sono basati sull'assegnazione di una area di disegno sul desktop, dove la VM può tracciare i componenti in piena libertà: le prestazioni non sono eccezionali ma la portabilità è assicurata! Stefano Sanna - [email protected] AWT e Swing CRS4 - http://www.crs4.it ● ● AWT: Abstract Window Toolkit – Nasce con le prime versioni di Java (1.0.2 e 1.1) – Definisce un insieme minimo di componenti nativi comuni a tutte le UI (Win32, X-Window, MacOS, SymbianOS…) Swing (JFC, Java Foundation Classes) – Disponibili dalla versione 1.2 – Definisce un set di componenti complessi e personalizzabili indipendenti dalla piattaforma Stefano Sanna - [email protected] Altre librerie: SWT e LWVCL CRS4 - http://www.crs4.it ● ● SWT: Standard Widget Toolkit – Utilizza componenti nativi come AWT, ma è basata su un set molto ricco – E' utilizzata sull'IDE Eclipse LWVCL: Lightweight Visual Comp Library – E' una soluzione full-Java (come Swing) per sistemi mobili quali palmari e cellulari – Fornisce un set molto ricco di componenti e garantisce ottime prestazioni in termini di velocità di elaborazione Stefano Sanna - [email protected] Abstract Window Toolkit CRS4 - http://www.crs4.it ● ● ● E’ un insieme di classi per la creazione di interfacce grafiche elementari Contiene una librerie di componenti heavyweighted: ogni componente ha il suo corrispondente nel sistema operativo host, a cui la VM delega la gestione del componente vero e proprio Permette di creare componenti personalizzati attraverso il controllo diretto delle funzioni di disegno e di gestione dei dispositivi di input (mouse, tastiera…) Stefano Sanna - [email protected] Abstract Window Toolkit CRS4 - http://www.crs4.it ● ● Coerentemente con la vocazione multipiattaforma di Java, i componenti AWT e le applicazioni sviluppate con questi cambiano il loro aspetto a seconda del sistema operativo in cui sono eseguite Questa caratteristica da una parte limita le GUI in Java 1.1 (sono disponibili solo i componenti comuni a tutte le interfacce grafiche), dall’altro permette un vero sviluppo indipendente dalla piattaforma! Stefano Sanna - [email protected] GUI in Java: il codice CRS4 - http://www.crs4.it ● L’interfaccia grafica è costruita all’interno del codice sorgente: non esistono i resource-file! import java.awt.*; public class HelloGUI extends Frame { private Label helloLabel = new Label("Hello!"); public HelloGUI() { this.setTitle("Hello!"); this.add(helloLabel); this.pack(); } public static void main(String[] args) { HelloGUI myHello = new HelloGUI(); myHello.show(); } } Stefano Sanna - [email protected] Object Oriented CRS4 - http://www.crs4.it ● ● ● Le interfacce grafiche sono costituite da “oggetti” e dunque la loro implementazione in un linguaggio ad oggetti è abbastanza naturale Creare un nuovo oggetto grafico significa creare una istanza della classe corrispondente Java è completamente ad oggetti e la costruzione di interfacce grafiche si integra perfettamente con la filosofia del linguaggio Stefano Sanna - [email protected] Creazione di interfacce grafiche CRS4 - http://www.crs4.it ● Creare interfacce grafiche significa essenzialmente: 1.Istanziare e assemblare i componenti visuali con cui interagisce l’utente 2.Associare i dati dell’applicazione ai componenti visuali 3.Intercettare gli eventi dei componenti visuali e compiere opportune azioni sui dati dell’applicazione Stefano Sanna - [email protected] CRS4 - http://www.crs4.it Creazione di interfacce grafiche 1.Istanziare e assemblare i componenti visuali con cui interagisce l’utente: – Stabilire quali sono i componenti necessari a visualizzare i dati dell’applicazione (campi di testo, valori booleani, liste…) – Organizzare i componenti in pannelli, finestre, dialoghi – Verificare la usabilità dell’interfaccia Stefano Sanna - [email protected] CRS4 - http://www.crs4.it Creazione di interfacce grafiche 2.Associare i dati dell’applicazione ai componenti visuali: ● ● Fare in modo che ad una qualsiasi variazione dei dati (modello) dell’applicazione corrisponda un aggiornamento di quanto visualizzato dall’interfaccia grafica Prevedere opportuni raggruppamenti e/o separazioni per utilizzare al meglio i (pochi) componenti disponibili Stefano Sanna - [email protected] CRS4 - http://www.crs4.it Creazione di interfacce grafiche 3.Intercettare gli eventi dei componenti visuali e compiere opportune azioni sui dati dell’applicazione: ● ● Registrare la propria applicazione in ascolto degli eventi di interesse (pressione di un pulsante, uso del mouse, chiusura di una finestra…) Modificare i dati secondo le azioni compiute dall’utente sull’interfaccia grafica Stefano Sanna - [email protected] CRS4 - http://www.crs4.it Componenti elementari ● Frame, Window, Dialog ● Panel e Layout Manager ● Menubar, Menu, MenuItem ● Button e Label ● TextField e TextArea ● List e Choice (ComboBox) ● CheckBox e CheckBoxMenuItem ● Canvas Stefano Sanna - [email protected] java.awt.Frame CRS4 - http://www.crs4.it ● ● E’ la classe che permette di creare finestre con un bordo, una barra del titolo, una barra di menù (opzionale), e un’area dove assemblare i componenti dell’interfaccia grafica E’, nella maggior parte dei casi, la finestra principale dell’applicazione da cui si creano tutte le altre finestre (vedi: Window e Dialog) Stefano Sanna - [email protected] Window e Dialog CRS4 - http://www.crs4.it ● ● Le Window sono finestre senza bordo e menù, utilizzate per splash screen e per aree del quale il programmatore vuole controllo completo Le Dialog sono finestre (eventualmente modali) con il quale l'applicazione richiede l'interazione esplicita con l'utente: avvisi, inserimento di dati, conferme... Stefano Sanna - [email protected] java.awt.Panel CRS4 - http://www.crs4.it ● ● ● Le istanze di questa classe sono contenitori per altri componenti E’ possibile assegnare una logica di organizzazione dei componenti all’interno di un pannello a seconda delle esigenze di visualizzazione Le interfacce “non banali” sono costituite da numerosi pannelli annidati, ciascuno contenente un certo gruppo di componenti elementari o complessi Stefano Sanna - [email protected] Layout Manager CRS4 - http://www.crs4.it ● ● I LayoutManager sono degli oggetti particolari che gestiscono il posizionamento e dimensionamento dei componenti all’interno dei contenitori (Frame, Window, Dialog, Panel…). Seguendo la filosofia di Java (indipendente dalla piattaforma!), i LayoutManager permettono di stabilire una posizione logica (“di massima”, potremmo dire) dei componenti, delegando poi alla specifica piattaforma il reale tracciamento dei componenti. Stefano Sanna - [email protected] Layout Manager CRS4 - http://www.crs4.it ● FlowLayout – ● BorderLayout – ● Dispone i componenti assegnando a ciascuno le dimensioni preferenziali Divide il container in 5 regioni (vedi screenshot) CardLayout – Crea uno stack di componenti che vengono visualizzati alternativamente Stefano Sanna - [email protected] Layout Manager CRS4 - http://www.crs4.it ● GridLayout – ● Crea una griglia (n*m, con n e m assegnati) in cui dispone i componenti assegnando a ciascuno le dimensioni preferenziali GridBagLayout – In assoluto il layout più potente e complesso; offre una organizzazione a griglia come il GridLayout, ma consente maggiore controllo sulla posizione e dimensione dei componenti Stefano Sanna - [email protected] java.awt.FlowLayout CRS4 - http://www.crs4.it ● ● È il layout di impostato di default Dispone i componenti in sequenza assegnando a ciascuno le dimensioni preferenziali Stefano Sanna - [email protected] java.awt.BorderLayout CRS4 - http://www.crs4.it ● È uno dei layout più utilizzati per l’organizzazione di componenti su finestre di dimensione variabile. Stefano Sanna - [email protected] java.awt.CardLayout CRS4 - http://www.crs4.it ● ● Mostra un componente per volta Utile per creare interfacce tipo “pannello di configurazione” VISTA Stefano Sanna - [email protected] Layout Manager CRS4 - http://www.crs4.it ● ● E’ comunque possibile fare a meno dei Manager e specificare esattamente posizione e dimensione di ciascun componente. Tale scelta è consigliabile solo con componenti custom (e dunque non dipendenti dalla piattaforma) L’uso dei manager di layout è comune ad altri linguaggi e ambienti di sviluppo, così pure la tecnica dei pannelli annidati (VisualBasic, Delphi…) Stefano Sanna - [email protected] Menubar, Menu, MenuItem CRS4 - http://www.crs4.it ● E’ un insieme di classi che permette di creare menù per i Frame e popup-menù per gli altri componenti di AWT. – Menubar: è il contenitore delle voci di menù posto immediatamente sotto la barra del titolo – Menu: è la classe che individua le voci visibili su una menubar – MenuItem: è la classe che permette di creare voci di menù selezionabili dall’utente. Stefano Sanna - [email protected] Button e Label CRS4 - http://www.crs4.it ● ● La classe Button permette di creare pulsanti da azionare con il mouse o con la tastiera Le istanze di Label sono oggetti per la visualizzazione di testo non editabile dall’utente. Possono essere utilizzati per finestre informative o indicazioni di supporto agli altri componenti (ad esempio, per descrivere il contenuto di una certa lista di elementi) Stefano Sanna - [email protected] TextField e TextArea CRS4 - http://www.crs4.it ● ● ● E’ la classe che permette di creare oggetti attraverso i quali l’utente può digitare stringhe di testo Permette di gestire eventi di provenienti dalla tastiera (ad esempio, per offrire suggerimenti all’utente durante la digitazione) Per l’inserimento di testo su più linee è disponibile il componente TextArea, che permette di gestire anche le barre di scorrimento Stefano Sanna - [email protected] List e ComboBox CRS4 - http://www.crs4.it ● ● ● ● Permette di mostrare una lista di elementi di testo Offre la possibilità di aggiungere barre di scorrimento, di selezionare gli elementi singolarmente o a gruppi La versione Swing (JList) permette di visualizzare una lista di componenti grafici arbitrari (contenenti testo e immagini) La classe Chioce (ComboBox) permette la creazione di menù a tendina Stefano Sanna - [email protected] CheckBox e CheckBoxMenuItem CRS4 - http://www.crs4.it ● ● La classe CheckBox permette di rappresentare valori booleani true/false attraverso check box (selettori a scelta multipla) o radio button (selettori a scelta mutuamente esclusiva) I CheckBoxMenuItem permettono di gestire valori booleani attraverso menù dei Frame. Stefano Sanna - [email protected] java.awt.Canvas CRS4 - http://www.crs4.it ● ● ● E’ il componente con cui è possibile disegnare in una regione dello schermo attraverso primitive grafiche quali punti, linee, poligoni, testo, immagini… Attraverso la riscrittura di un metodo (paint) e le funzionalità della classe Graphics ottenuta dal framework è possibile creare effetti grafici personalizzati Numerose librerie permettono di gestire i più diffusi formati grafici per la visualizzazione di immagini Stefano Sanna - [email protected] Primitive grafiche CRS4 - http://www.crs4.it ● ● Ogni volta che il sistema grafico deve ridisegnare l’area del componente viene invocato il metodo paint(). Attraverso questo metodo il sistema fornisce una istanza di Graphics su cui eseguire le operazioni di disegno. Il Canvas, oltre ad un’area di disegno, mette a disposizione tutta l’infrastruttura per la gestione degli eventi associati al componente: mouse, tastiera, interazione con gli altri componenti. Questo permette di realizzare componenti personalizzati. Stefano Sanna - [email protected] Primitive grafiche An instance of Graphics import java.awt.*; CRS4 - http://www.crs4.it public class MyComponent extends Canvas { public void paint(Graphics g) { g.drawLine(……………..) } } L’utente sposta la finestra… Stefano Sanna - [email protected] Event Driven CRS4 - http://www.crs4.it ● ● Nello sviluppo di applicazioni con interfaccia utente a linea di comando vi era un unico flusso all’interno del programma (ricordate scanf o readln?) Le interfacce grafiche permettono all’utente di selezionare diversi dispositivi di input indipendenti (tastiera, mouse…) che agiscono su numerosi componenti dell’interfaccia stessa: non esiste più un unico flusso all’interno del programma, non si può rimanere in attesa di uno specifico segnale… Stefano Sanna - [email protected] Event Driven CRS4 - http://www.crs4.it ● ● ● Le nuove interfacce grafiche hanno portato alla definizione di un nuovo modello di interazione con l’utente: gli eventi Non vi sono routine bloccanti che controllano i dispositivi di input (come scanf in C…): il sistema operativo nasconde tutta la gestione dei dispositivi di input L’applicazione definisce una interfaccia con cui il sistema operativo comunica in modo asincrono i comandi (pulsante premuto, testo digitato, finestra ridimensionata…) Stefano Sanna - [email protected] CRS4 - http://www.crs4.it Event Sequence Diagram Stefano Sanna - [email protected] Event Driven CRS4 - http://www.crs4.it import java.awt.*; public class HelloGUI extends Frame { private Label helloLabel = new Label("Hello!"); public HelloGUI() { this.setTitle("Hello!"); this.add(helloLabel); this.pack(); } public void actionPerformed(ActionEvent ae) { ************ ********** } } • Gli eventi passano da un livello all’altro in maniera trasparente per l’utente: • Window Message in Win32 • Native method nella JVM • Pure Java dal pulsante in poi Sistema operativo Stefano Sanna - [email protected] Event Driven CRS4 - http://www.crs4.it connect() Listener 1 showWindow() startTime() Listener 2 Event Source Listener n-1 Listener n Stefano Sanna - [email protected] CRS4 - http://www.crs4.it MouseMotionListener WindowListener Frame Virtual Machine ActionListener MouseListener interface Stefano Sanna - [email protected] class Listener CRS4 - http://www.crs4.it ● ActionListener – ● WindowListener – ● intercetta gli eventi legati alla gestione di Frame, Window e Dialog (visualizza/nascondi) MouseListener – ● intercetta eventi di azioni (pulsanti, menù, pressione del tasto INVIO su un TextField) intercetta gli eventi del mouse (entrata/uscita in una certa zona, pressione dei tasti…) MouseMotionListener: – intercetta il movimento (semplice o drag) Stefano Sanna - [email protected] Listener CRS4 - http://www.crs4.it ● ● Vi sono altri tipi di listener per gestire gli eventi della tastiera, di digitazione testo, del ciclo di vita dei componenti, del focus tra i componenti… Ciascun tipo di listener è specializzato per un ben determinato tipo di eventi. Questi, a loro volta, sono destinati a notificare solo un ben determinato tipo di azione fatta sull’interfaccia grafica Stefano Sanna - [email protected] CRS4 - http://www.crs4.it Domande? Stefano Sanna - [email protected] Mano al codice!!! CRS4 - http://www.crs4.it … e alla documentazione!!! ● ● Le classi sono contenute all’interno dei package java.awt, java.awt.event, java.awt.image, java.awt.datatransfer, java.applet. Per scrivere delle buone interfacce grafiche sarebbe opportuno avere una buona conoscenza del linguaggio e della programmazione ad oggetti (polimorfismo, classi inner, interfacce, design pattern…). Stefano Sanna - [email protected] Componenti disponibili CRS4 - http://www.crs4.it ● Button, Canvas, Checkbox, CheckboxGroup, CheckboxMenuItem, Choice, Dialog, FileDialog, Font, Frame, Image, Label, List, Menu, MenuBar, MenuItem, Panel, ScrollPane, TextArea, TextField, Window… Stefano Sanna - [email protected] Una semplice finestra import java.awt.*; CRS4 - http://www.crs4.it public class SimpleFrame1 extends Frame { private Label titleLabel = new Label("Simple Frame"); public SimpleFrame1() { this.setLayout(new FlowLayout()); this.setTitle(titleLabel.getText()); this.add(titleLabel); this.pack(); this.show(); } public static void main(String[] args) { new SimpleFrame1(); } } Stefano Sanna - [email protected] Aggiungiamo un menù... public class SimpleFrame2 extends Frame { CRS4 - http://www.crs4.it private Label titleLabel = new Label("Simple Frame"); private MenuBar menuBar = new MenuBar(); private Menu fileMenu = new Menu("File"); private MenuItem exitMenuItem = new MenuItem("Exit"); public SimpleFrame2() { this.setMenuBar(menuBar); menuBar.add(fileMenu); fileMenu.add(exitMenuItem); this.setLayout(new FlowLayout()); this.setTitle(titleLabel.getText()); this.add(titleLabel); this.pack(); this.show(); } Stefano Sanna - [email protected] CRS4 - http://www.crs4.it MouseMotionListener WindowListener Frame Virtual Machine ActionListener MouseListener interface Stefano Sanna - [email protected] class Gestire gli eventi Registers itself as listener… CONSUMER LISTENERS CRS4 - http://www.crs4.it PRODUCER Invokes listener’s methods actionPerformed… Stefano Sanna - [email protected] Gestire gli eventi CRS4 - http://www.crs4.it ● ● ● Ciascun producer dispone di una lista di listener (ascoltatori) interessati a gestire gli eventi prodotti dal producer stesso Per poter ricevere notifica di nuovi eventi i listener devono implementare l’interfaccia relativa ad una specifica classe di eventi e registrarsi presso il producer Il producer, al manifestarsi di un evento, invocherà i metodi dell’interfaccia dei listener inviando come parametri degli EventObject specifici per il tipo di evento Stefano Sanna - [email protected] Gestire gli eventi CRS4 - http://www.crs4.it ● I passi nella realizzazione del modello ad eventi: – Creazione di un listener per il tipo di evento di interesse (ActionListener, MouseListener, MouseMotionListener, TextListener, ComponentListener…) attraverso l’implementazione di una opportuna interfaccia – Registrazione del listener appena creato nella lista ascoltatori del producer Stefano Sanna - [email protected] Gestire gli eventi CRS4 - http://www.crs4.it ... implements ActionListener ... public void actionPerformed(ActionEvent ae) { if (ae.getSource() == exitMenuItem) { System.exit(0); } } exitMenuItem.addActionListener(this); ● ● La classe dichiara di voler (saper…) gestire ActionEvent e implementa il metodo actionPerformed La classe registra se stessa quale ascoltatore degli eventi del menù Stefano Sanna - [email protected] CRS4 - http://www.crs4.it Pannelli annidati FlowLayout BorderLayout Stefano Sanna - [email protected] Componenti personalizzati CRS4 - http://www.crs4.it ● ● ● Grazie all’architettura object oriented è semplice sviluppare componenti personalizzati estendendo quelli esistenti o creandone di completamente nuovi Possiamo ereditare dalla classe Component tutta la gestione del mouse, della tastiera e degli altri eventi correlati senza la necessità di scrivere codice nativo Se scritti in modo sapiente (!) i nuovi componenti si integreranno perfettamente con l’infrastruttura AWT Stefano Sanna - [email protected] Bibliografia CRS4 - http://www.crs4.it ● Java AWT Reference John Zukowski O'Reilly 1997 Il libro non è più in stampa, ma l'editore mette a disposizione gratuitamente i file PDF di tutti i capitoli: http://www.oreilly.com/catalog/javawt/book/index.html Stefano Sanna - [email protected] Conclusioni CRS4 - http://www.crs4.it ● ● ● Java AWT è uno strumento rapido e multipiattaforma per la creazione di interfacce semplici Lo sviluppo di applicazioni complesse richiede l'uso di librerie più complete (ad esempio, Swing o LWVCL) AWT è una buona palestra per imparare il modello ad eventi!!! Stefano Sanna - [email protected] CRS4 - http://www.crs4.it Grazie... :-) Stefano Sanna - [email protected]