Lezione 06:

PROGRAMMI CON INTERFACCIA GRAFICA

Struttura di un'interfaccia

Una interfaccia grafica e' costituita da:

• una o piu' finestre
• vari dispositivi o componenti situati all'interno delle finestre

Finestra = area rettangolare dello schermo che funge da area di input/output indipendente.

Finestra ha un bordo gestito dal sistema (es. da Windows), contenente dispositivi di controllo per chiusura, iconificazione, redimensionamento ecc., e un interno gestito dall' applicazione a cui la finestra appartiene.

Dispositivi o componenti = oggetti con proprio aspetto grafico e comportamento (capacita' di reagire a sollecitazioni) che permettono interazione con l'utente.

Esempi: bottoni, menu', campi di input testuale...

Programmazione guidata da eventi / Event-driven programming

Il flusso di esecuzione di un programma e' la sequenza di istruzioni che vengono eseguite quando lo si lancia.

Nei programmi senza interfaccia grafica (detti anche programmi "batch") il flusso e' predefinito nel codice (si eseguono le istruzioni della funzione "main").

Invece, il comportamento di un programma con interfaccia grafica e' inter-attivo.

Sono le azioni compiute dell'utente sui dispositivi di input a determinare il flusso di esecuzione del programma.

Il programma raccoglie le azioni e scatena le reazioni corrispondenti.

+------+         azione su                        +------------+
|      |--(1)--> dispositivo --(2)-->  evento --->|    (3)     |
|      |         di input                         |            |
|utente|                                          |applicazione|
|      |         feedback su          reazione    |            |
|      |<--(5)-- dispositivi <--(4)-- (cambio <---|            |
+------+         di output            di stato)   +------------+

(1) L'utente compie azioni sui dispositivi di input (mouse, tastiera).

(2) Le azioni sono tradotte in eventi. Evento = pacchetto di informazioni che descrivono che cosa e' avvenuto.

(3) In base all'evento l'applicazione decide che cosa fare (come reagire). La reazione "cambia qualcosa" nello stato dell'applicazione...

(4) La reazione (avvenuto cambio di stato) viene comunicata all'utente come feedback / riscontro sui disposiviti di output (schermo, altoparlante).

(5) In base al feedback, l'utente decidera' la prossima azione...

Librerie per interfacce grafiche

Un programma con interfaccia grafica viene scritto usando una libreria o toolkit per sviluppo di interfacce. Per Esempio nel linguaggio Java ne esistono due: Java AWT (Abstract Window Toolkit), Java Swing.

La libreria fornisce classi di dispositivi / componenti di interfaccia.

Ciascuna classe corrisponde a un tipo di componente con proprie caratteristiche di aspetto / comportamento. Le caratteristiche sono in parte personalizzabili. E' possibile inserire comportamenti aggiuntivi.

Esempio: un bottone e' un'area rettangolare sensibile al click del mouse. Posso personalizzarlo scegliendo dimensioni, colore, font della scritta... Ha predefinito il comportamento di evidenziarsi quando viene cliccato. Posso aggiungere quello di chiamare una certa funzione applicativa (es. salvare il file corrente).

Funzioni callback

Meccanismo per associare comportamenti aggiuntivi ai dispositivi / componenti di interfaccia.

Callback = funzione "da chiamare in risposta" a un evento che accade su un certo componente di interfaccia.

1. la funzione callback viene scritta dal programmatore
2. il programmatore registra questa funzione presso la libreria associandola a un certo componente di interfaccia per un certo tipo di evento
3. ogni volta che quel tipo di evento si verifichera' su quel componente di interfaccia, la funzione verra' chiamata automaticamente dalla libreria

Come funziona

Che cosa scrive il programmatore

• Dichiarazione che intende usare il toolkit: es. in Java il toolkit e' un insieme di classi che stanno in vari package, bisogna importarli mediante direttiva import.
• Costruzione dell'interfaccia dal punto di vista estetico (creare le finestre, i dispositivi, personalizzarne l'aspetto, posizionarli nelle finestre...)
• Definizione delle funzioni che saranno usate come callback per implementare i comportamenti aggiuntivi (a parte)
• Registrazione delle callback per associare le funzioni-comportamenti ai dispositivi
• Visualizzazione a schermo dell'interfaccia (almeno la finestra principale, mentre altre possono essere tenute inizialmente nascoste per apparire a seguito di eventi)

Come viene eseguito

La libreria compila una tabella di associazioni dispositivo - evento - callback.

La libreria esegue ciclo infinito in cui ad ogni giro:

• attende un evento
• guarda il tipo di evento e il componente su cui si e' verificato
• esegue la reazione predefinita per quel tipo di evento su quel tipo di componente
• se (nella tabella) per quel tipo di evento e quel componente e' stata registrata un callback, la esegue

Tipi di dispositivi

I dispositivi forniti da una libreria / toolkit si classificano in diversi tipi o classi, ciascun tipo con certe caratteristiche di aspetto / comportamento.
Nella terminologia Java i dispositivi si chiamano "componenti".

Componenti attivi o interti

Compomenti attivi = sensibili a input:

• menu' (permettono di immettere una scelta da una lista predefinita di opzioni)
• bottoni (sensibili al click)
• dispositivi per introduzione di testo (campi di input)
• dispositivi per introduzione di valori numerici (potenziometri lineari, circolari, digitali)
• ecc...

Elementi inerti = solo aspetto grafico:

• etichette testuali
• etichette grafiche (bitmap, pixmap)
• cornici ed altri elementi decorativi
• ecc...

Aree dedicate a scopi speciali: aree grafiche, aree per visualizzazione o editing di testi...

Componenti di base e contenitori

• componenti di base = servono per presentare informazioni all'utente e/o ricevere input da questo (sono quelli attivi o inerti di cui si parlava sopra).
• componenti contenitori = servono per raggruppare altri componenti in un contesto grafico.

I contenitori servono a strutturare lo spazio della finestra. Definiscono vincoli per la disposizione (layout) dei componenti all'interno di un contenitore. Un contenitore puo' contenere altri contenitori... meccanismo a "scatole cinesi": gerarchia di annidamento dei contenitori.
Anche le finestre sono contenitori (contenitori top-level).

Esempio: la finestra e' divisa in due parti verticalmente, nella parte sinistra c'e' un'area di testo, la parte destra e' strutturata come una griglia 3 righe x 3 colonne con dentro dei bottoni.

+--------------------+----+----+----+
|                    | B1 | B2 | B3 |
|                    +----+----+----+
|    area di testo   | B4 | B5 | B6 |
|                    +----+----+----+
|                    | B7 | B8 | B9 |
+--------------------+----+----+----+

       contenitore a due scomparti verticali est/ovest
                        |
             +----------+----------+
             |                     |
    area di testo        contenitore a griglia 3x3
                                     |
                               +-----+-----+
                               |    ...    |
                        bottone B1  ...  bottone B9

Che cosa e' un dispositivo

Dal punto di vista dell'utente, un dispositivo / componente di interfaccia e' caratterizzato da:

• una grafica che costituisce la sua apparenza
• comportamento predefinito rispetto a certi eventi che sono gestiti internamente a cura del toolkit
• comportamento personalizzabile rispetto a certi eventi che sono gestibili a cura dell'applicazione

Dal punto di vista del programmatore un componente e' caratterizzato da:

• uno stato descritto da un insieme di variabili
• funzioni per interrogare e cambiare lo stato (get / set)
• un insieme di eventi che possono essere intercettati dal componente e passati all'applicazione
• un meccanismo per "agganciare" (registrare) funzioni callback al componente per tali eventi

Gestione degli eventi nei componenti

Quando su un componente di interfaccia avviene un evento, il toolkit lo puo' gestire come:

• Evento interno: usato solo internamente al toolkit per cambiare lo stato del componente, senza interessare l'applicazione.
• e/o Evento esterno: potenzialmente interessante per l'applicazione, per poterlo intercettare l'applicazione deve aver scritto e registrato una callback

Esempi

Voce della tendina di un menu':

• evento entrata / uscita del mouse dal riquadro della voce e' gestito dal toolkit mediante cambiamento di colore (la voce si evidenzia quando ci passo sopra)
• evento rilascio del mouse sulla voce (cioe' quando utente seleziona quella voce) e' gestito da applicazione stabilendo la callback da invocare

Campo testuale (per l'immissione di una stringa di testo):

• evento "pressione del mouse" e' usato internamente al toolkit per attivare il campo di testo
• a campo di testo attivo, gli eventi "pressione di caratteri" sono usati internamente per aggiornare il contenuto del campo
• evento "pressione del tasto return" e' passato all'applicazione, che deve avere stabilito una callback per gestirlo (leggere la stringa immessa...)