DISPOSITIVI DI CONTROLLO

[Estratto dai capitoli 5 e 4 del libro di Marcus & C]

Che cosa sono i dispositivi di controllo?

I pacchetti software per lo sviluppo di interfacce (toolkit) forniscono vari tipi di controlli predefiniti che possono essere istanziati ed inseriti in un'interfaccia.
Es: il controllo di tipo "bottone" viene istanziato specificando l'etichetta da visualizzare e la funzione da invocare quando l'utente preme il bottone.
Ciascun tipo di dispositivo e' adatto a ricevere un certo tipo di input.

I tipi di dispositivi forniti pronti dal toolkit dovrebbero essere usati il piu' possibile. Come alternativa si possono progettare e implementare dispositivi di controllo appositi per l'applicazione specifica. In generale i toolkit forniscono meccanismi per fare questo.

Attivazione e disattivazione

Un dispositivo di controllo puo' essere disattivato (es: se corrisponde ad un'opzione che non e' sensato invocare nello stato corrente dell'applicazione). Il toolkit distingue graficamente i controlli non attivi (es: colore meno intenso).

Tipi di controlli

• Bottoni
• Dispositivi per input testuale
• Dispositivi per input numerico
• Dispositivi di scelta

Bottoni

Bottone di comando (command button)

In genere, ha l'aspetto di un rettangolo con un'etichetta (testuale e/o grafica) che indica l'operazione corrispondente.

Il pulsante cambia aspetto (es. forma, colore) durante il click effettuato dal mouse per dare feedback che l'operazione e' stata attivata.

Sensibile al click del mouse. Puo' catturare evento quando e' premuto e/o quando e' rilasciato. Di solito il programma puo' interrogare il bottone per sapere con quale tasto del mouse e' stato azionato.

Esempio: Bottone per chiudere una finestra.
Opportuno usare differenti etichette per diverse finestre. (es: "close" per finestra di un documento, "quit" per finestra di applicazione, "ok" per finestra di messaggi...).

Bottone a due stati (check button o check box)

Rappresenta la selezione o non selezione di una scelta.

In genere, ha l'aspetto di un quadrato (rombo, cerchio...) con un'etichetta accanto. Il quadrato puo' contenere una crocetta (o altro segno), la cui presenza o assenza denota lo stato della scelta.
Puo' anche avere l'aspetto di un bottone premuto o non premuto, o di un bottone con luce accesa o spenta.
Nel suo stato interno ha un valore booleano (selezionato o non selezionato).

Sensibile al click del mouse. Al click lo stato del bottone si inverte (da selezionato a non selezionato o viceversa).
Il programma puo' interrogare il bottone per sapere il suo stato.

Puo' apparire in un'interfaccia singolarmente o a gruppi. In un gruppo di piu' checkbox, ciascuno puo' essere selezionato indipendentemente: le opzioni sono NON mutuamente esclusive.

Bottone radio (radio button)

Rappresenta una scelta singola in un insieme di scelte mutuamente esclusive.
Aspetto simile a quello del check box.

I bottoni radio sono usati a gruppi, in un gruppo in ogni momento solo una scelta puo' essere selezionata (selezionare una nuova scelta automaticamente disseleziona quella precedente).

Dispositivi per input testuale

Campo di testo (text field o text box)

Permette l'introduzione di input testuale.

Appare come un'area rettangolare in cui l'utente inserisce il testo. Quando l'utente clicca all'interno dell'area, appare un cursore, i caratteri digitati successivamente sulla tastiera sono diretti al campo di input.

• campi di testo a singola linea
• campi di testo a piu' linee, eventualmente muniti di scroll bar (barra di scorrimento), questi ultimi chiamati anche aree di testo

Di solito cattura evento quando l'utente preme return all'interno dell'area di inserimento. I programma puo' leggere il testo che e' stato immesso.

Esistono campi di input abilitati ad accettare solo stringhe che obbediscono ad una certa sintassi, es: rappresentano numeri interi o float.

Dispositivi per input numerico

Potenziometro (slider)

Visualizza e permette di cambiare un valore corrente appartenente ad un intervallo "continuo" di valori.

E' composto da:

• barra (orizzontale o verticale): rappresenta l'intervallo dei valori ammissibili.
• cursore (o handle, o slider arm): rappresenta il valore corrente, l'utente imposta il valore facendo scorrere il cursore sulla barra (trascinandolo con il mouse).
• pulsanti frecce collocati alle estremita' della barra (elemento non sempre presente): usati per muovere il cursore di un incremento unitario (o comunque fissato) in una direzione particolare

Nel suo stato interno contiene il valore corrente.

L'utente interagisce per cambiare il valore corrente trascinando il cursore a mouse premuto oppure agendo sulle frecce (se presenti).

Puo' catturare evento ogni volta che l'utente sposta il cursore, oppure solo quando rilascia il cursore (dopo averlo spostato). Il programma puo' interrogare lo slider per leggere il valore corrente.

Esistono anche potenziometri circolari anziche' lineari.

Spin box (o counter)

Permette di introdurre un valore scelto in un intervallo "discreto" (insieme finito) di valori.
I valori non sono necessariamente numerici, ma devono essere un insieme discreto e ordinato logicamente (es: mesi dell'anno).

Consiste in un campo in cui appare il valore corrente, con una coppia di frecce che puntano in opposte direzioni. Il campo di testo mostra la scelta corrente, che l'utente puo' cambiare (incrementando o decrementando) agendo sulle frecce.

Nel suo stato interno ha il valore corrente.

Di solito cattura evento ogni volta che l'utente modifica il valore. Il programma puo' leggere il valore corrente.

Dispositivi di scelta

Lista selezionabile (selection list o list box)

Visualizza una lista prefissata di scelte da cui e' possibile selezionarne una. Puo' essere fornita o meno di una scrollbar.

L'utente esprime la sua selezione scorrendo il mouse sulla lista e cliccando sulla scelta desiderata.

Nel suo stato interno ha la linea correntemente selezionata.

Cattura evento quando viene immessa una scelta. Il programma puo' interrogare il dispositivo per conoscere la scelta effettuata.

Liste piu' sofisticate

Esistono tipi piu' sofisticati di liste che permettono selezione di linee multiple con modalita' di interazione sono anche piuttosto complesse (selezione e deselezione, conferma ed invio della selezione, sensibilita' a click singolo/doppio del mouse...).

Chiamati anche browser.

Lista selezionabile a scomparsa (drop-down list box)

E' visualizzato solo un campo con il valore corrente, mentre la lista delle scelte rimane nascosta finche' l'utente non effettua un'azione necessaria per renderla visibile (es. cliccare su un bottone a lato).

Una variante, anziche' adoperare la tendina a scomparsa, presenta la scelta corrente su un bottone e cliccando sul bottone l'utente puo' ciclare sull'insieme delle scelte possibili.

Combination box

Contiene

• una lista di scelte da cui l'utente puo' selezionare un elemento
• una box di testo in cui l'utente puo' inserire del testo come un'alternativa alla selezione dalla lista

L'utente puo' scorrere la lista delle scelte e selezionarne una, oppure scrivere direttamente la scelta nella text box.

Usata quando i valori possibili non possono essere previsti tutti. La lista conterra' le scelte piu' frequenti.

La lista di scelte puo' essere permanentemente visibile, oppure drop-down.

Menu'

Un menu' consiste di:

• titolo = nome del menu'
• uno o piu' elementi o voci del menu' (menu items) = le singole scelte all'interno del menu'

Le scelte in un menu' possono essere rappresentate da etichette testuali o grafiche (icone).
I tipi di voci di menu' ricalcano i tipi di bottoni (command, check, radio).
Una voce di menu' di tipo check o radio ha associato un riquadro o altro elemento grafico (visualizzato di lato) che puo' essere selezionato oppure no.

Per effettuare una selezione, l'utente si sposta col mouse all'interno della tendina e aziona il mouse sulla voce desiderata. Cattura evento quando una voce viene selezionata. Il programma puo' sapere dal menu' quale voce e' stata selezionata.

Tipi di menu'

• Pull-down (o drop-down):
  Si estende da un'etichetta permanentemente visibile nell'interfaccia, in genere posta su una barra orrizzontale.

• Pop-up (o menu' contestuale):
  Rimane nascosto fintantoche' l'utente lo invoca. L'utente lo invoca cliccando il sul bottone del mouse in un'area particolare dell'interfaccia.

• A cascata (o menu' gerarchico):
  Quando l'utente posiziona il mouse su una voce di un menu', appare un altro menu' (sottomenu') a lato della voce in questione.
  La presenza di un menu' a cascata e' indicata graficamente (es: da una freccia) in corrispondenza dell'elemento a cui e' attaccato il sottomenu'.

• Tear-off:
  Puo' essere rimosso dalla barra di menu', trascinato col mouse e visualizzato in una zona dello schermo scelta dall'utente.

Tipi di elementi di menu'

Gli elementi di un menu' possono rappresentare:

• un'azione, che viene effettuata quando l'elemento viene selezionato (es: SAVE) - ricalca un command button.
• un routing: la selezione dell'elemento visualizza un altro menu' o una finestra da cui l'utente puo' specificare ulteriori informazioni relative all'operazione da effettuare (es. FIND).
• un setting: visualizza o cambia la proprieta' di un oggetto (es: UNDERLINE in un word processor) - ricalca un check box o un radio button (se con comportamento mutuamente esclusivo oppure no).

Esempio:

Menu' standard per le applicazioni.

Assolve il compito di mantenere consistenza fra applicazioni diverse.

Dentro la menu' bar della finestra principale ci sono:

• Menu' FILE: operazioni sui file (creazione, apertura, chiusura, stampa, salvataggio)
• Menu' EDIT: operazioni sui dati correnti dell'applicazione (copy, paste, cut, delete...)
• Menu' VIEW: per cambiare la vista dei dati correnti dell'applicazione senza cambiare i dati stessi
• Menu' HELP: per ottenere informazioni sull'applicazione

Altri dispositivi

Toolbar

Collezione di pulsanti che permettono un accesso veloce e a scelte e comandi usati frequentemente dall'utente all'interno di un'applicazione.

Puo' essere rimossa dalla sua collocazione, trascinata col mouse e visualizzata in una zona dello schermo scelta dall'utente.

Scroll bar (barra di scorrimento)

Permette all'utente di vedere parti nascoste di un testo o di un disegno quando questo e' troppo grande per essere visualizzato simultaneamente in una finestra.

Aspetto e' simile a slider. Scroll bar e' composta da:

• scroll bar shaft (barra): contenitore rettangolare (orizzontale o verticale) che rappresenta l'intervallo di movimento per il cursore.
• scroll box: cursore mobile sulla barra.
• scroll arrows: appaiono alle estremita' della barra.