Next Previous Contents

5. L'uso di Glade

Come ogni programma anche con Glade occorre acquisire un poco di manualità ma dopo un primo impatto una finestra si può costruire in cinque minuti di lavoro.

Nelle seguenti sezioni cercherò di darvi qualche consiglio che avrei avuto piacere ricevere quando ho cominciato ad usare Glade.

5.1 I tools di Glade

Glade, analogamente a Gimp, si mostra composto da una finestra base e ad alcune finestre accessorie: imparare ad orientarsi fra queste finestre é il primo passo da fare [11].

La finestra base

la finestra base si mostra leggermente diversa a seconda del sistema operativo (Linux, Win 32, Solaris) e dalla versione (GTK+ o Gnome) ad ogni modo contiene le stesse informazioni e propone funzioni:

Dalla barra dei menù, oltre alle funzioni standard, potrete accedere alle finestre dei tools caratteristici di Glade mediante il "menu vista":

Dalla barra degli strumenti potete, oltre che caricare e salvare il progetto, visualizzare la finestra di configurazione del progetto mediante il pulsante "opzioni" e ottenere la produzione dei sorgenti e degli altri files di supporto mediante il pulsante "crea eseguibile".

Il pulsante "crea eseguibile" non crea realmente l'eseguibile ma scrive o aggiorna i sorgenti che dovranno essere ancora compilati per generare l'eseguibile binario [12].

La configurazione di un progetto Glade

La finestra delle opzioni del progetto si presenta divisa in tre sessioni:

Non ho particolari raccomandazione avendo usato senza problemi il settaggio di default. Comunque Glade si dimostra stabile anche per cambiamenti rispetto al default presentato anche in corso d'opera.

la finestra delle palette

La finestra delle palette si mostra in 2 sezioni per la versione GTK+ più un'ulteriore sezione per la versione Gnome, la quale contiene ovviamente le estensioni:

Per quanto mi riguarda ho usato al 99% solo la sezione "GTK+ Basic" implementando run-time [14] le estensioni di cui sentivo la necessità.

La sezione "Gnome" non l'ho mai adoperata, così come non ho mai adoperato le icone/menù proposti in quanto avrebbero condizionato l'utente finale ad avere Gnome installato sul sistema pur magari adoperando un altro windows-manager.

Se non sentite la necessità di sviluppare un'applicazione che si integri nell'ambiente Gnome allora sarebbe molto meglio che vi metteste al riparo dalla possibilità di scegliere inconsapevolmente widgets/comportamenti/eventi che sono estensioni di Gnome utilizzando solo la versione di Glade per GTK+ (almeno all'inizio in modo da acquisire abbastanza padronanza del mezzo per poter distinguere i due aspetti GTK+/Gnome).

La finestra delle proprietà dei widgets

La finestra delle proprietà dei widgets/finestre é composta da quatto sezioni:

Le prime due sezioni cambiano di aspetto a seconda del tipo di widget che é stato selezionato mentre le ultime due rimangono inalterate.

La sezione di "Base" é l'unica su cui solo raramente si debba intervenire se si sistemano i widgets per proporzioni, piuttosto che a posizione, all'interno della finestra che si va creando (vedi la sezione "Creare una finestra").

Le sezioni di "Widget" e "Posizione" sono molto utili nella creazione proporzionale di una finestra (non saprei dirvi nell'altro caso :-P ) perché permettono al programmatore di far assumere al widget selezionato l'aspetto e le proporzioni (rispetto agli altri) desiderati.

La sezione "Segnali" é fondamentale se si vuole un'interfaccia grafica in grado di operare una qualche funzione oltre a quella naturale di essere visibile (la comparsa dei menù ed altre amenità sono comunque assicurate ma un utente si aspetta che alla pressione di un bottone e/o voce di menù segua la relativa operazione e non nulla come altrimenti avverrebbe se non si fossero definiti dei signal-handler).

L'albero dei widgets e la lista delle finestre

Nella finestra di base di Glade trovate la lista delle finestre che avete creato. Se clickate su una di queste finestre vi verrà visualizzata quella selezionata con un'apparenza molto vicina a quella che avrà in run-time [15].

Attraverso i tools precedentemente presentati potete modificare il layout della finestra oppure un singolo widget.

Sebbene i singoli widgets siano selezionabili direttamente con un click su di loro, vi invito ad usare per questo task il forse meno comodo ma sicuramente più efficace "albero dei widgets". Sarà in seguito la vostra esperienza a farvi scoprire quale sia la strada più veloce e sicura per raggiungere un widgets.

La classificazione funzionale degli strumenti

Gli strumenti messi a disposizione possono essere concettualmente divisi in tre sezioni:

Quelli di creazione vi permettono di generare finestre e/o widgets che poi potrete adattare alle vostre esigenze mediante gli strumenti di modifica, i quali agiscono sugli oggetti selezionati.

Gli strumenti di selezione sono altrettanto importante perché oltre a consentirvi di selezionare gli oggetti o gruppi di essi vi permettono di navigare fra essi fornendovi visioni parziali, totali ma comunque ben organizzate del vostro progetto.

Vedere come appare una finestra piena di widgets e contestualmente poterne navigare l'albero dei widgets che la compone vi permetterà di produrre interfacce grafiche sempre più user-frendly e semplici da gestire per il programmatore.

5.2 Creare una finestra

Per creare il layout di una finestra basta un click sulla prima icona della sezione "Base" delle palette.

Per quanto riguarda il layout di una finestra, a differenza dei widgets, la sezione "Base" della finestra proprietà é molto utile perché si può definire le dimensioni che si vuole abbia la finestra (un dialogo di errore non dovrebbe mai essere troppo grande ne troppo piccolo ;-).

Il bello viene quando questo layout lo si deve riempire di widgets. Per farlo si possono usare due approcci: a proporzione oppure a posizione.

Costruire a proporzioni

Se selezionate dalla palette una widget e lo inserite nella finestra appena creata questo va a riempirla tutta e non potrete mettere nella finestra nessun altro widget.

Il primo passo é quello di dividere la finestra in porzioni. Ad esempio per quanto detto nella sezione "Il momento della creazione" una finestra base dovrebbe essere divisa in quattro porzioni orizzontali. Nella paletta "Base" scoprirete che a questo compito sono preposti gli Horizontal Box, Vertical Box, Tabella.

Dopo una prima divisione ogni porzione della finestra può essere ancora divisa utilizzando lo stesso metodo.

Ad esempio se si volessero mettere una serie di n bottoni sulla seconda divisione orizzontale basterebbe scegliere Vertical Box clickare nel punto in cui si vuole inserirlo, impostare il numero di divisioni, e poi utilizzando la finestra proprietà dei widgets impostare il valore "SI" nella sezione "Widget" per l'opzione "Omogeneo". In questo modo avremmo creato n celle della medesima proporzione in cui inserire gli n bottoni. Ad ogni modo ogni bottone avrà una sua dimensione minima quindi complessivamente una finestra avrà una dimensione minima. Però il vantaggio é che per dimensioni superiori alla minima la mappa dei widgets si adatta proporzionalmente alla finestra.

Costruire a posizioni

Un altro approccio alla costruzione di una finestra che contenga dei widgets é quello delle posizioni/dimensioni: ogni widgets ha una sua posizione e dimensione all'interno di un reticolo (che si può visualizzare o meno) e tale posizione mantiene indipendentemente dalla grandezza della finestra.

Per attivare questa modalità in tutta la finestra oppure solo in una porzione di essa si può usare la palette "Base" detta "Posizioni fisse". A questo punto qualsiasi paletta scelta genera con un click su questo retino un widget di cui il programmatore oltre che della posizione si deve occupare della dimensione.

Se si vorranno costruire n bottoni si dovranno creare, dimensionare e poi allineare.

Questo metodo che può apparire molto pratico di primo acchito mostra invece dei seri limiti. Ad esempio se modifico un bottone inserendovi un'etichetta più lunga di quella inizialmente prevista questo si allungherà andandosi ad avvicinarsi o a sovrapporsi a quelli a fianco. Quindi dovrò ridimensionarli tutti e riallinearli. Se per esempio questa barra di bottoni sovrastava una finestra dovrò ridimensionare anche la finestra oppure perderò quella piacevole apparenza che accompagna le geometrie regolari.

Inoltre consideriamo l'utente che ridimensionerà la finestra costruita con questo metodo: tutto quello che vedrà sarà dello spazio vuoto ai bordi e magari la vostra GUI in un angolo !

Personalmente é stato un piccolo trauma scoprire che non tutti gli ambienti "Visual" usavano il metodo della posizione/dimensione ma superato questo piccolo pregiudizio non ho mai avuto modo di pentirmi di aver usato solo il metodo delle proporzioni per costruire le mie GUI.

5.3 Classificazione funzionale dei widgets

Una delle cose che vi consiglio vivamente di fare per prendere confidenza con Glade é di creare una finestra dividerla in molti settori e cominciare a giocare con i vari widgets contenuti nelle palette.

I vari tipi di widgets

Nell'osservare i widgets così creati vi accorgerete che essi possono essere divisi (a discapito della loro già presente divisione in "Base", "Avanzata" e "Gnome") in diverse categorie a secondo del loro comportamento:

Mi sono occupato di citare solo i widgets contenuti nella sezione "Base" ma anche gli altri sono classificabili in una delle precedenti categorie.

Alcuni widgets appartengono a più categorie: ad esempio le caselle di testo a seconda che siano usate per visualizzare dei messaggi oppure rese editabili per ricevere degli inputs; oppure come le etichette di testo che sono un elemento decorativo/informativo potendo essere aggiornate in run-time possono contenere un messaggio all'utente e quindi essere veicolo di comunicazione dinamica.

Perché dividere in classi i widgets ?

Attualmente l'uso del PC é fortemente correlato con l'interazione da parte dell'operatore con diverse GUI ma per crearne una occorre che il programmatore guardi bene quelle già esistenti.

Per "guardare bene" intendo quell'azione composta da due differenti processi: quello del vedere e quello del concepire.

La divisione in classi di funzionalità dei vari elementi é una strada per capire come funziona una GUI e cosa l'utente si aspetta da essa. Queste sono informazioni di estrema utilità per il programmatore che si accinge a creare una GUI.

5.4 Una buona e consapevole GUI

Una GUI non vuol essere solo un modo grafico di interazione ma deve avere delle ben precise caratteristiche affinché sia di successo:

Le GUI complesse sono dispersive e generano confusione nell'utente il quale viene distratto e intimidito. L'utente deve sentirsi a suo agio, vedere solo ciò che gli serve, intuire subito da dove cominciare e dove sono le semplici operazioni che si aspetta di trovare. Eppure dopo i primi passi l'utente deve capire che può chiedere alla GUI molto di più. Ma per navigare nel mare delle funzioni/opzioni complesse il programmatore deve dotare la GUI di una bussola cioé sapergli dare una struttura logica e geometrica tale per cui l'utente può sempre intuire dove trovare quello che cerca e come usarlo.

Funzioni complesse spesso si posso compiere associando strumenti semplici o mediante un sequenza di semplici operazioni: tali funzioni/operazioni debbono sempre essere poste in risalto a discapito di quelle complesse che eventualmente potranno essere reperite nei menù.

Come farsi una bella GUI

Bisogna riflettere sul fatto che un buona GUI non é mai un puzzle di operazioni e/o visualizzazione delle informazioni più disparate. Le funzioni/operazioni devono essere ordinate e catalogate in base a criteri di utilità, di semplicità e di frequenza d'uso in modo da creare più livelli di utilizzo a seconda dell'esperienza/necessità dell'utente.

Ad esempio se ho bisogno delle funzioni start e stop posso adottare due soluzioni molto diverse:

  1. due semplici bottoni: uno di "stop" e un bottone di "start"
  2. un unico bottone a pressione con un'etichetta dinamica

Nel primo caso l'utente preme lo "start" ma il bottone rilasciato torna al punto di prima. Egli non sa se il comando é stato eseguito e in che stato si trovi il sistema.

Questa GUI quindi ha due difetti: non é in grado di ricordare all'utente ciò che ha fatto (pressione del bottone) e nemmeno di comunicargli lo stato del sistema. Ovviamente si possono aggiungere barre di progressione e messaggi di testo per completare questa mancanza.

Nel secondo caso l'utente preme il bottone e questo rimane premuto anche dopo il click. L'etichetta che prima diceva "start" in nero ora indica "stop" e lampeggia di un tranquillizzante verde.

Questa GUI ricorda all'utente cosa ha fatto (pressione del bottone), diversamente dall'altra gli suggerisce la prossima operazione (ora é comparsa la scritta "stop" non potrà fare 2 volte "start") inoltre lo informa di aver attivato il processo richiestto (l'etichetta é diventata da nera = buio a verde = funzionante, il rosso é associato ad accesso ma anche ad errore o pericolo) e lo informa dello stato del sistema (la luce verde sta lampeggiando = il programma sta lavorando). Quando il processo sarà terminato l'utente ne sarà informato dal fatto che il bottone avrà l'etichetta scritta in verde fisso.

Una buona GUI deve apparire circolare nel suo divenire: quanto tutto é finito deve tornare allo stato iniziale.

Il magico bottone ora é premuto e l'etichetta indica "stop" in verde fisso: aspetta che l'utente vi faccia un click sopra per ritornare alla posizione iniziale.

Può darsi che non abbiate necessità di tanti inputs da parte dell'utente ma di sicuro potete averli con pochi oggetti dinamici invece che con molti statici e vi assicuro che su un monitor piccolo ed un desktop sempre più affollato di finestre la cosa fa ha la sua importanza.

Un bottone intelligente come quello presentato evita l'uso di più bottoni, barre di progressione e messaggi di testo del tipo: "ho completato la funzione premi OK" che personalmente mi irritano molto. Penso che l'utente sia molto più a suo agio se vede solo un bottone il quale straordinariamente funziona come quello della sua lavatrice !

Inoltre un'interfaccia animata é assai più bella e interessante di una statica e può essere utilizzata anche da persone con problemi di concentrazione o di mobilità (un bottone può essere anche azionato dalla barra spaziatrice).


Next Previous Contents