6.

Introduzione allo sviluppo di interfacce utente grafiche (GUI)

Riferimenti bibliografici Getting Started with MATLAB, Version 7, The MathWorks, www.mathworks.com (Capitolo 5)

Graphical User Interface (GUI)

Nella storia recente dellinformatica si assistito ad un progressivo spostamento dellattenzione dalla macchina alluomo ed in particolare allinterazione delluomo con la macchina. Le interfacce a linea di comando sono state sostituite da interfacce utente grafiche (Graphical User Interfaces, GUIs) che permettono uninterazione pi diretta e naturale. In una GUI le applicazioni si presentano sotto forma di una o pi finestre grafiche, con le quali si pu interagire attraverso elementi grafici quali ad esempio menu, pulsanti, barre degli strumenti.

Graphical User Interface (GUI)

Nelle GUI, linterazione avviene in genere attraverso dispositivi quali tastiera e mouse. La ricerca attuale nel campo delle interfacce e dellinterazione con il calcolatore sta studiando metodi ancora pi naturali ed espressivi per comunicare con la macchina. Sono ad esempio allo studio tecniche affidabili per interagire con comandi vocali, con il proprio gesto, perfino attraverso le caratteristiche emotive/espressive del proprio comportamento.

GUIDE
GUIDE lambiente di sviluppo di interfacce utente grafice di MATLAB. GUIDE fornisce una serie di strumenti per creare interfacce grafiche per MATLAB in modo semplice e rapido. GUIDE pu essere usato per:
Progettare uninterfaccia utente grafica e definirne laspetto (layout). Programmare linterfaccia utente grafica, ovvero stabilirne il comportamento in funzione delle azioni dellutente.

GUIDE
Per avviare GUIDE si digita guide nella Finestra dei Comandi. A questo punto appare la finestra di GUIDE ed possibile definire una nuova GUI o aprirne una gi esistente.

Layout Editor
Appena si apre una GUI con GUIDE o se ne crea una nuova, la GUI viene visualizzata nel Layout Editor. Quando si crea una nuova GUI, il Layout Editor crea e visualizza una GUI vuota. A questo punto, si possono definire i componenti che costituiranno la nuova GUI, trascinandoli allinterno della GUI vuota dalla barra dei componenti, dimensionandoli e posizionandoli secondo necessit. Nota: esistono delle linee-guida per la scelta ed il posizionamento dei componenti allo scopo di massimizzare la fruibilit e lusabilit di una GUI.

Layout Editor

Per aggiungere un nuovo componente lo si seleziona nella component palette e lo si trascina nella layout area. Tra i componenti troviamo ad esempio, bottoni di vario tipo, caselle di testo, barre di scorrimento, ecc.

Layout Editor

Nella figura sopra, ad esempio, stato aggiunto un bottone ad una nuova GUI. Il Layout Editor pu essere utilizzato anche per impostare le propriet dei componenti inseriti e per creare menu.

Programmazione della GUI

Dopo aver definito i componenti di una GUI ed averne impostato le propriet, il passo successivo la programmazione della GUI. Con programmazione della GUI si intende la definizione del comportamento della GUI in seguito ad azioni dellutente sui componenti della GUI stessa. La programmazione della GUI avviene attraverso la scrittura di apposite funzioni MATLAB associate ai singoli componenti della GUI ed alle possibili azioni dellutente. Tali funzioni sono in genere chiamate callback.

Programmazione della GUI

Consideriamo ad esempio una GUI in cui presente un bottone. Quando il bottone viene premuto si vuole che venga lanciato un certo script. Occorre allora scrivere una funzione callback associata alla pressione del bottone da parte dellutente. Quando lutente preme il bottone, MATALB chiama la funzione callback. Questa a sua volta chiamer lo script come richiesto dallapplicazione.

Programmazione della GUI

GUIDE genera automaticamente un M-file contenente le funzioni callback associate ad una GUI sviluppata con il Layout Editor. Le funzioni generate da GUIDE sono vuote: il programmatore dovr quindi riempirle con il codice per eseguire le azioni richieste per la specifica applicazione.

Esempio
Sviluppiamo una semplice GUI: la GUI contiene un solo bottone e mostra la stringa Goodbye nella Finestra dei Comandi di MATLAB quando il bottone viene premuto. Il primo passo consiste nellaprire GUIDE, selezionare il componente Push Button nel pannello dei componenti e trascinarlo nella GUI vuota generata da GUIDE. A questo punto si possono impostare le propriet del bottone. Ad esempio si pu impostare la stringa Goodbye come testo da visualizzare sul bottone.

Esempio

A questo punto possiamo salvare la nuova GUI: GUIDE crea un file M contenente la funzione callback associata al bottone.

Esempio
Completiamo ora la funzione callback inserendo il codice per la visualizzazione del testo Goodbye nella Finestra dei Comandi:
function varargout = pushbutton1_Callback(h, eventdata, handles, varargin) display Goodbye close(handles.figure1);

La riga close(handles.figure1) chiude la finestra della GUI dopo che il bottone Goodbye stato premuto e la stringa Goodbye stata visualizzata nella Finestra dei Comandi.

Esempio
Per provare questa semplice applicazione sufficiente digitare nella Finestra dei Comandi il nome con cui si salvata la GUI. Apparir una finestra contenente il bottone Goodbye. Premendo il bottone Goodbye, MATLAB scriver Goodbye nella Finestra dei Comandi e chiuder la finestra della GUI.