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 dell’informatica si è assistito ad un progressivo spostamento dell’attenzione dalla macchina all’uomo ed in particolare all’interazione dell’uomo con la macchina. • Le interfacce a linea di comando sono state sostituite da interfacce utente grafiche (Graphical User Interfaces, GUIs) che permettono un’interazione 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.

1

• GUIDE può essere usato per: – Progettare un’interfaccia utente grafica e definirne l’aspetto (layout). perfino attraverso le caratteristiche emotive/espressive del proprio comportamento. • Sono ad esempio allo studio tecniche affidabili per interagire con comandi vocali. con il proprio gesto. • La ricerca attuale nel campo delle interfacce e dell’interazione con il calcolatore sta studiando metodi ancora più naturali ed espressivi per comunicare con la macchina. ovvero stabilirne il comportamento in funzione delle azioni dell’utente.Graphical User Interface (GUI) • Nelle GUI. 2 . – Programmare l’interfaccia utente grafica. GUIDE • GUIDE è l’ambiente 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. l’interazione avviene in genere attraverso dispositivi quali tastiera e mouse.

GUIDE • Per avviare GUIDE si digita guide nella Finestra dei Comandi. la GUI viene visualizzata nel Layout Editor. il Layout Editor crea e visualizza una GUI vuota. • Nota: esistono delle linee-guida per la scelta ed il posizionamento dei componenti allo scopo di massimizzare la fruibilità e l’usabilità di una GUI. • A questo punto. dimensionandoli e posizionandoli secondo necessità. • A questo punto appare la finestra di GUIDE ed è possibile definire una nuova GUI o aprirne una già esistente. trascinandoli all’interno della GUI vuota dalla barra dei componenti. si possono definire i componenti che costituiranno la nuova GUI. • Quando si crea una nuova GUI. 3 . Layout Editor • Appena si apre una GUI con GUIDE o se ne crea una nuova.

ecc. caselle di testo. è stato aggiunto un bottone ad una nuova GUI. bottoni di vario tipo. • Tra i componenti troviamo ad esempio. Layout Editor • Nella figura sopra. 4 . ad esempio. barre di scorrimento.Layout Editor • Per aggiungere un nuovo componente lo si seleziona nella component palette e lo si trascina nella layout area. • Il Layout Editor può essere utilizzato anche per impostare le proprietà dei componenti inseriti e per creare menu.

MATALB chiama la funzione callback.Programmazione della GUI • Dopo aver definito i componenti di una GUI ed averne impostato le proprietà. il passo successivo è la programmazione della GUI. Programmazione della GUI • Consideriamo ad esempio una GUI in cui è presente un bottone. 5 . Quando il bottone viene premuto si vuole che venga lanciato un certo script. • Questa a sua volta chiamerà lo script come richiesto dall’applicazione. • La programmazione della GUI avviene attraverso la scrittura di apposite funzioni MATLAB associate ai singoli componenti della GUI ed alle possibili azioni dell’utente. • Tali funzioni sono in genere chiamate callback. • Quando l’utente preme il bottone. • Occorre allora scrivere una funzione callback associata alla pressione del bottone da parte dell’utente. • Con “programmazione della GUI” si intende la definizione del comportamento della GUI in seguito ad azioni dell’utente sui componenti della GUI stessa.

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. Ad esempio si può impostare la stringa “Goodbye” come testo da visualizzare sul bottone. selezionare il componente “Push Button” nel pannello dei componenti e trascinarlo nella GUI vuota generata da GUIDE. 6 . • Le funzioni generate da GUIDE sono vuote: il programmatore dovrà quindi riempirle con il codice per eseguire le azioni richieste per la specifica applicazione. • Il primo passo consiste nell’aprire GUIDE.Programmazione della GUI • GUIDE genera automaticamente un M-file contenente le funzioni callback associate ad una GUI sviluppata con il Layout Editor. • A questo punto si possono impostare le proprietà del 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.figure1) chiude la finestra della GUI dopo che il bottone Goodbye è stato premuto e la stringa Goodbye è stata visualizzata nella Finestra dei Comandi. varargin) display Goodbye close(handles. handles.Esempio • A questo punto possiamo salvare la nuova GUI: GUIDE crea un file M contenente la funzione callback associata al bottone. • La riga close(handles. 7 .figure1).

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