Sei sulla pagina 1di 5

Sviluppo di

interfacce utente
Vediamo un semplice modello per lo sviluppo rapido di documentazione e codice di interfacce collegate a dati

di Benedetto Neigre

Benedetto Neigre
ra i molteplici problemi ha lavorato come
che affliggono l’analista- Scenario di riferimento
system administrator
programmatore, quello presso l’Amministra-
zione Provinciale di
che riguarda la progettazione e L’Aquila.
lo sviluppo dell’interfaccia uten- Attualmente è
te è spesso il più oneroso. impegnato in un
L’obiettivo di questo articolo è progetto Domino/

di fornire una struttura base fa- Notes presso l’ASL di


Avezzano-Sulmona.
cilmente adattabile e che si pre- Si interessa anche di
sti ad ulteriori “sofisticazioni” sicurezza, computer
per la creazione di un tool di crime, sviluppo VB e
generazione automatica di inter- può essere contattato
per email come
facce. bneigre@infomedia.it

LO SCENARIO DI RIFERIMENTO
La grande diffusione di ambien-
ti operativi a finestre, la dispo-
nibilità di tool visuali di sviluppo e la ricca do- necessario a questa esposizione, è opportuna
cumentazione che guida nella ricerca di un cor- qualche riflessione riguardo al contesto - più
retto stile nel dialogo con l’utente non impedi- ampio e complesso - di una ipotetica applicazio-
scono - il più delle volte - un approccio che ne reale.
risente ancora della tradizionale impostazione Ciò che condiziona di più nello sviluppo di una
ASCII-like “unica finestra è lo schermo”. interfaccia è la preoccupazione dello sviluppa-
Spesso, infatti, lo sviluppo di una nuova appli- tore di fornire uno strumento agile di acquisi-
cazione si trasforma in un “porting” su un am- zione dati. La “soluzione classica” per il data-
biente operativo a finestre. entry è quella che prevede l’acquisizione dei dati
È spiacevole, inoltre, assistere anche alla per- su form con avanzamento libero tra campi (con
dita delle caratteristiche positive delle vecchie la pressione del ritorno carrello, del tasto tab o
interfacce; come quando, ad esempio, si obbliga tramite mouse indifferentemente) e scelta della
l’operatore a spostarsi unicamente con il tasto validazione dei dati a livello di campo, di form o
“Tab” tra un campo e l’altro (quasi che il conse- mista a seconda delle specifiche esigenze.
guente risparmio di due o tre righe di codice sia Tale modalità è ampiamente consolidata e pre-
metodo contemplato dalle moderne tecniche di vale, come soluzione adottata, nella maggior parte
ingegnerizzazione economica del software!). dei casi, pur essendo utile allo snellimento dei
L’esempio applicativo che prenderemo in con- tempi di immissione dei dati, solo in una ristret-
siderazione riguarderà un form di gestione di tissima casistica. A questa modalità si contrap-
un’anagrafe dei soggetti che entrano in contatto pone l’utilizzo del wizard il cui uso è preferibile
con una ipotetica azienda. ed auspicabile in quanto permette una maggiore
Per soggetti intendiamo quindi: Fornitori, Clienti, concentrazione dell’operatore sui singoli step di
Agenti e genericamente “Altro”. In Figura 1 è lavoro ed evita errori che determinano un dete-
stato riportato lo scenario di riferimento. Le due rioramento dei tempi di immissione delle infor-
modalità d’uso dell’applicazione sono: immissio- mazioni.
ne di nuovi soggetti tramite wizard o tramite un In linea di massima, nei wizard correttamente
classico form di data-entry; gestione di soggetti progettati, ad un dato da acquisire deve corri-
in archivio (modifica, stampa, ecc.). spondere una modalità preferenziale da usare (ta-
Seppure il codice allegato è riferito al solo form stiera o mouse) al contrario delle form di data-
di gestione dei soggetti per quanto strettamente entry classico che spesso obbligano ad interve-

Dev. Developing Software & Solutions 43 Numero 82 - Febbraio 2001

visualbasic.PM6 43 18/01/01, 16.16


nire in vari modi e in punti diversi del form stes-
so (TextBox, DataCombo, OptionBox, CheckBox). Form frmRicerca utilizzato per acce-
dere a frmSoggetti
Ferma restando la possibilità di far convivere
wizard e modalità “classica” per l’acquisizione dati,
vogliamo porre l’attenzione su un modello di ge-
stione della nostra interfaccia che consenta di otte-
nere un rilevante abbattimento dei tempi di svilup-
po, non rinunciando alle peculiarità di un ambiente
operativo a finestre e senza cedere a scorciatoie
che, come detto, trasformino la nostra applicazio-
ne in un banale “porting”. Lo strumento di coman-
do scelto è una ToolBar: ai controlli che serviranno
a presentare le informazioni all’utente saranno as-
segnati dei “codici colore” che identificheranno lo
status del campo.
Contrariamente a quanto si potrebbe pensare, per
il collegamento dei controlli ai campi non verranno
utilizzate le proprietà tipiche dei controlli stessi -
come in [1], [2] o nelle creazioni guidate del VB -
ma si ricorrerà allo SQL cablato nel codice.
Il lavoro descritto, incentrato sul form frmSoggetti,
tende a standardizzare quanto più possibile il lega-
me tra rappresentazione a video e DB.

IL FORM D’ESEMPIO
Per l’accesso a frmSoggetti utilizzeremo una sem-
plice maschera di passaggio, frmRicerca in Figura 2,
che ci consentirà di ricercare il soggetto di nostro
interesse.
Il codice che gestisce il passaggio alla frmSoggetti è
quello riportato nel Listato 1 e la routine di acces-
so ai dati del soggetto è LeggiSoggetto(CodiceSoggetto in archivio vengono utilizzate delle TextBox con:
as String) di frmSoggetti.
A margine è opportuno evidenziare un utile mec- proprietà Name, di norma, impostata a txt-
canismo, sempre presente in Listato 1 (al commento NomeCampo (dove NomeCampo è il nome del
Salvataggio delle opzioni di ricerca), per il mantenimen- campo nella tabella del DB);
to dei valori immessi dall’utente in fase di ricerca. I proprietà Locked = True;
valori indicati sono passati al Tag del form frmSog- colore di fondo grigio per indicare la possibilità
getti come stringa sfruttando il “punto e virgola” di modificare il valore;
come separatore. colore di fondo bianco per indicare che si è in
modalità di modifica;
colore di fondo giallo chiaro per indicare l’im-
Le scelte operate nella possibilità di modificare il valore;
colore di fondo arancione per indicare la possi-
progettazione dell’interfaccia bilità di selezione di un nuovo valore che deter-
permettono una netta mina un cambio di record (Es. x CodiceSoggetto).
separazione tra contesto
di visualizzazione Nel caso che il campo da visualizzare a video
e contesto di modifica sia derivato da un’altra tabella di DB (relazione
tramite chiave esterna) sarà presente, in corrispon-
denza della TextBox visibile (ospitante il valore
contenuto nel campo correlato), un controllo
In Figura 3 è stato riportato il form frmSoggetti, DataCombo nascosto e associato tramite codice.
la ToolBar viene gestita da codice al fine di adat- Le operazioni di modifica dei dati vengono atti-
tarsi al contesto operativo. vate dall’operatore tramite doppio clic sul campo
Nella sezione “Generale - Dichiarazioni” viene di interesse; il software provvede a modificare il
dichiarata una variabile booleana InModifica che colore di fondo della TextBox interessata alla
servirà ad evitare l’attivazione dello stato di mo- modifica o a rendere visibile il DataCombo relati-
difica per più di un campo alla volta. vo nascondendo la TextBox.
Sempre in questa sezione vengono dichiarati i La scelta della modifica dei colori, la modifica
necessari oggetti recordset per le DBCombo; in delle opzioni della ToolBar, la disponibilità trami-
alternativa è possibile limitare il ciclo di vita di te doppio clic e non tramite un semplice trasferi-
questi oggetti al solo spazio elaborativo richiesto mento del focus (a qualunque titolo) permettono
per l’operazione di modifica dello specifico cam- una netta separazione tra contesto di visualizza-
po, migliorando così la velocità di accesso al re- zione e contesto di modifica, consentendo all’ope-
cord del soggetto. Per la rappresentazione dei dati ratore una maggiore consapevolezza ed un pieno

Dev. Developing Software & Solutions 44 Numero 82 - Febbraio 2001

visualbasic.PM6 44 18/01/01, 16.17


Codice di gestione del passaggio Routine di intercettazione delle ri-
da frmRicerca a frmSoggetti chieste di ingresso nello stato di
modifica del campo

Private Sub lsvRubrica_DblClick() Sub DblClkCampo(Ctl As Control)


If Me.lsvRubrica.ListItems.Count > 0 Then Dim Found As Boolean
If Me.lsvRubrica.SelectedItem.Text “” Then Dim MyObject As Control
Load frmSoggetti If Not InModifica Then
With frmSoggetti ‘Verifico l’esistenza di un DataCombo corrispondente
.LeggiSoggetto Mid$(lsvRubrica.SelectedItem.Key, 3) ‘al controllo TextBox (verifico se ci sono dati correlati)
.Show Found = False
.Enabled = True For Each MyObject In Me.Controls
.SetFocus If MyObject.Name = “dbc” & Mid$(Ctl.Name, 4) Then
.Tag = cmbTipo.Text & “;” Found = True
‘Salvataggio delle opzioni di ricerca Exit For
End If
If optRaSocNote(0) = True Then
Next
.Tag = frmSoggetti.Tag & “0;”
InModifica = True
Else
InizializzaToolBar Mid$(Ctl.Name, 4)
.Tag = frmSoggetti.Tag & “1;”
If TypeName(Ctl) = “TextBox” And Not Found Then
End If
Il campo non ha collegamenti in altra tabella
.Tag = .Tag & txtCerca.Text
With Ctl
Unload Me
Temp = .Text
End With
.BackColor = &H80000005
End If
.Locked = False
End If
.SelStart = 0
End Sub .SelLength = Len(.Text)
.SetFocus
End With
Else
controllo.
‘Il controllo contiene un valore di collegamento
Da questo momento, se non diversamente spe-
in altra tabella
cificato, tratteremo unicamente di frmSoggetti poi- ‘abilito il DataCombo per i dati collegati
ché il codice di frmRicerca (che è comunque alle- Temp = Ctl.Text
gato) non è “centrale” rispetto all’argomento trat- Ctl.Visible = False
tato. Controls(“dbc” & Mid$(Ctl.Name, 4)).Visible = True
L’evento Form_Load contiene solo il necessario al- Controls(“dbc” & Mid$(Ctl.Name, 4)).Text = Ctl.Text
l’inizializzazione degli oggetti recordset per le DB- End If
Combo e alla ListView. End If
La ToolBar viene gestita tramite la routine End Sub
InizializzaToolBar(OP as String) in cui la variabile pas-
sata identifica il set di comandi da rendere disponi-
bili. In linea di massima avremo una impostazione Allo stesso modo, Commerciale e Classe (chiavi per
predefinita (per OP pari a “Inizializza”), eventuali la relazione con la tabella Soggetti la prima e con
impostazioni accessorie ed un numero n di impo- la tabella Classificazioni la seconda) necessiteran-
stazioni pari al numero di campi da trattare, rag- no, dopo il passaggio allo stato di modifica, dei
gruppati per tipologia di comandi disponibili. comandi “Nuovo”, “Conferma”, “Annulla” po-
Come esempio prendiamo in considerazione i tendo così essere raggruppati.
campi Indirizzo, Note, Commerciale, Classe: Al termine delle impostazioni della ToolBar viene
anche assegnato il valore di OP al Tag del coman-
do “Annulla”, disponibile sulla ToolBar stessa in
Ai controlli che serviranno modo da poter gestire i successivi eventi correlati
al campo (tbrMagArt.Buttons.Item(“Annulla”).Tag = Op).
a presentare le informazioni Per “impostazioni accessorie” si intendono quelle
all’utente saranno assegnati relative, ad esempio, alla scheda “Prodotti” della
dei “codici colore” che SSTab la cui attivazione (passaggio del focus) do-
identificheranno lo status vrebbe determinare un cambiamento dei bottoni
del campo della ToolBar, al fine di consentire la gestione
dell’elenco prodotti trattati dal soggetto (nel caso
la Classe Soggetto sia, ad es., “Fornitori”).
Ricapitolando: la modifica richiesta dall’utente
se l’operatore richiede la modifica del campo In- su campi rappresentati da OptionBox o da Che-
dirizzo (txtIndirizzo sul form) oltre ad intervenire ckBox sarà diretta ed implementata, quindi, nella
sulla relativa TextBox dovremo modificare i co- routine relativa all’evento; utilizzeremo invece una
mandi della ToolBar permettendo all’operatore i chiamata alla routine in Listato 2 in tutti gli altri
fondamentali “Conferma” e “Annulla”; identici casi. Al termine delle procedure appena descrit-
comandi dovranno essere disponibili quando si te, il software si troverà in stato di attesa di un
andrà in modifica del campo Note. comando (Nuovo se richiesto dal contesto, Confer-

Dev. Developing Software & Solutions 45 Numero 82 - Febbraio 2001

visualbasic.PM6 45 18/01/01, 16.17


ma o Annulla).
La routine di intercettazione Form frmSoggetti

del comando selezionato sulla


ToolBar demanda la gestione
della conferma delle modifiche
operate sul campo alla routine
“ConfermaModifiche” in cui vie-
ne esaminato il valore di
tbrMagArt.Buttons.Item(“Annulla”).Tag
Nei wizard per deter minare il corretto
correttamente
progettati, ad un
blocco-operazioni da eseguire.
dato da acquisire Come si vede dalle poche ri-
deve corrispondere ghe di codice riportate di se-
una modalità guito anche in questa sede è
preferenziale da
possibile operare dei raggrup-
usare, tastiera o
mouse, da parte
pamenti in base alle “affinità”
dell’utente. dei campi da gestire.

Case Is = “Note”, “Indirizzo”, “CAP”, “Citta”


‘…seguono altri
ModificaCampo
tbrMagArt.Buttons.Item(“Annulla”).Tag,_
Me.Controls(“txt” & _
tbrMagArt.Buttons.Item(“Annulla”).Tag).Text
Me.Controls(“txt” & _
tbrMagArt.Buttons.Item(“Annulla”).Tag).BackColor rappresentare; no a riportare i comandi della To-
= 14737632 2. tipo di dati del campo con olBar necessari a gestire corret-
Me.Controls(“txt” & _ specifica della lunghezza mas- tamente la rappresentazione del
tbrMagArt.Buttons.Item(“Annulla”).Tag).Locked sima per i tipi stringa; campo.
= True 3. ammissibilità del valore Null; Con questa semplice schematiz-
4. valore di default per il cam- zazione possiamo “assemblare”
Per l’annullamento dell’operazio- po; tutto il codice necessario alla ge-
ne, così come per la conferma 5. eventuale tipo di collegamen- stione del nostro form in pochis-
delle modifiche, si provvederà a to ad altra tabella, colore di simi minuti.
trattare il campo tramite l’insie- fondo della cella corrispon- Lo standard adottato, come già
me controls sfruttando la possibili- dente allo standard fissato detto, prevede che in presenza di
tà di assemblare il nome del con- per la rappresentazione a vi- dati correlati siano presenti una
trollo utilizzando i prefissi e il deo per i campi (giallo = non TextBox e un DataCombo con il
valore che abbiamo ereditato tra- modificabile; grigio = modi- nome del campo chiave e n Tex-
mite la proprietà Tag del button ficabile, ecc.); tBox per gli eventuali altri campi
Annulla della ToolBar. In Lista- correlati.
to 3 è riportata la parte di codice L’aggiornamento delle infor-
della procedura di annullamento Possiamo mazioni sul form è sempre de-
appena citata. “assemblare” mandato alla routine di lettura
A modifiche apportate (routine tutto il codice del record tramite l’utilizzazio-
ModificaCampo(Campo As String, necessario alla ne della chiave univoca della ta-
Valore As Variant)), si procede ad gestione del nostro bella da rappresentare (nel no-
una nuova lettura del soggetto tra- stro caso LeggiSoggetto(CodiceSog-
mite LeggiSoggetto(CodiceSoggetto as form in pochissimi getto as String)) al fine di evitare
String) di frmSoggetti in modo da minuti codice addizionale per l’eventua-
evitare ogni ulteriore complica- le “sincronizzazione” di altri dati
zione legata ad aggiornamento di correlati.
campi correlati multipli. 6. eventuale validazione delle Questa modalità di azione ci con-
modifiche apportate; sente, inoltre, di mantenere una
LA DOCUMENTAZIONE DI 7. eventuale tabella correlata; maggiore standardizzazione del
SUPPORTO 8. campo chiave riferito al pun- codice. La presenza di eventuali
Una volta acquisita la logica di to 7; indicazioni nella colonna 6 indi-
funzionamento, possiamo prende- 9. elenco campi dati riferito al ca la necessità di gestire il cam-
re in considerazione i passi fon- punto 7; po senza aggregazione con altri
damentali che ci aiuteranno nel 10. nome dell’oggetto, sul form, a causa delle peculiarità descrit-
definire una nuova interfaccia. che rappresenterà il campo (di te (ad esempio nel caso di un
Con l’aiuto di un foglio elettroni- norma l’estensione standard codice univoco la cui assenza in
co prepariamo una tabella com- dell’oggetto seguita dal nome archivio debba essere verificata
posta dalle seguenti colonne: del campo in tabella). preventivamente).
Si dovrà necessariamente evi-
1. campi della tabella di DB da Dalla colonna 11 si comincia- tare l’aggregazione anche per

Dev. Developing Software & Solutions 46 Numero 82 - Febbraio 2001

visualbasic.PM6 46 18/01/01, 16.17


generazione del codice per richie-
Routine di annullamento delle modifiche
ste di conferma modifica su campi
particolari, la verifica preventiva
di date condizioni, la lettura dei
dati per l’aggiornamento a video,
Case Is = “Annulla” il frazionamento di campi su tab-
InModifica = False bed dialog, il wizard di acquisizione
Select Case tbrMagArt.Buttons.Item(“Annulla”).Tag
dati, ecc.. Un ottimo esempio che
Case Is = “Indirizzo”, “Note”, “CAP”, “Citta”, “PartitaIVA”, “Provincia”, _
“Telefono1”, “Telefono2”, “TeleFax”, “EMail”, “WWW”
opportunamente adattato permet-
Me.Controls(“txt” & tbrMagArt.Buttons.Item(“Annulla”).Tag).Text = Temp
terebbe la realizzazione di questo
Me.Controls(“txt” & tbrMagArt.Buttons.Item(“Annulla”).Tag).BackColor = 14737632 strumento lo troviamo in [1].
Me.Controls(“txt” & tbrMagArt.Buttons.Item(“Annulla”).Tag).Locked = True
CONCLUSIONI
Case Is = “Commerciale” L’evoluzione del VB consente,
Me.Controls(“txt” & tbrMagArt.Buttons.Item(“Annulla”).Tag).Visible = True adottando diversi stratagemmi, di
Me.Controls(“dbc” & tbrMagArt.Buttons.Item(“Annulla”).Tag).Visible = False costruire GUI che siano vera-
mente tali senza rinunciare, quin-
Case Is = “RagioneSociale”
di, agli indispensabili requisiti di
txtRagioneSociale.Visible = False
“look” & “feel”.
End Select
La necessità di abbattere tempi
InizializzaToolBar (“Inizializza”)
e costi nello sviluppo del softwa-
re non può certamente passare
attraverso una “creazione guida-
ta” che, se usata, ci ricompense-
quei campi che si vogliono gesti- In ogni caso il massimo cui si rà con un maggiore onere nella
re con controlli particolari come potrebbe aspirare è uno stru- fase di addestramento dell’uten-
ad esempio il campo RagioneSo- mento che a partire dalle speci- za e nella successive inevitabili
ciale che ho assegnato alla Caption fiche di progettazione provveda “customizzazioni” richieste dal-
del frame frameDescrizione. a generare automaticamente il ne- l’utenza stessa. Il tentativo ope-
cessario codice ed il relativo rato è quello di spezzare la du-
POSSIBILI SVILUPPI E NOTE form, magari attingendo ad un plice funzione di una interfac-
Se nello sviluppo di una appli- buon archivio di template. cia orientata a dati nelle due
cazione si è orientati verso l’uso È sottintesa la necessità di un componenti fondamentali:
delle ToolBar e si intende fornire buon approfondimento nell’ana-
qualcosa di più di una semplice lisi con conseguente correzione di il data-entry che viene affida-
interfaccia da “creazione guida- alcune scelte operate dal sotto- to ad un wizard;
ta”, il modello proposto, già in scritto. Una delle modifiche im- la gestione dei dati affidata al
questa forma, risolve svariati pro- mediate è, ad esempio, quella che form sopra descritto.
blemi e permette un drastico ta- riguarda il passaggio del parame-
glio dei tempi di sviluppo. tro di identificazione del campo Rimane chiara la possibilità di
In una applicazione reale dovre- tramite la proprietà Tag del but- operare sul form di gestione an-
mo utilizzare estensivamente al- ton “Annulla” della ToolBar. che come data-entry, aggiungen-
cuni accorgimenti non presenti do una variabile di modulo e adat-
nel form di esempio: tando le routine evento senza per-
Il tentativo dere in generalizzazione. In que-
1. Tool Tip Text, i suggerimenti operato è quello sto modo, pur se in misura mino-
che compaiono quando l’uten- di spezzare la re, avremo comunque operato
te “sosta” con il puntatore del duplice funzione una divisione concettuale ed ope-
mouse su un oggetto; di una interfaccia rativa tra le due modalità.
2. Le shortcut da tastiera, combi- orientata a dati Per quanti iniziano oggi ad af-
nazioni di tasti (massimo due) frontare le problematiche connes-
o “tasti funzione”; nelle due se allo sviluppo di interfacce è
3. Il bottone “Modifica” sulla Tool- componenti consigliabile la lettura di [3] che
Bar, che permetta all’utente una fondamentali introduce abilmente gli elementi
alternativa “visibile” per l’ingres- fondamentali e offre un sapiente
so in modifica (l’uso della pro- Sarebbe infatti opportuno asse- condensato di consigli.
prietà Locked ci consente di in- gnare il valore al Tag del primo
tercettare i tasti tramite l’even- bottone in modo da svincolarlo BIBLIOGRAFIA
to KeyPress di ogni TextBox, po- dalla necessità di avere, appunto, [1] S. Castelli, “Un generatore di
tendo quindi gestire con accu- un bottone “Annulla” sulla ToolBar form”, 1997, Visual Basic Jour-
ratezza ogni “movimento” del stessa. Le possibilità di automazio- nal n. 18.
nostro ipotetico utente); ne del processo sono enormi e [2] M.C. Amudsen, “Creare al volo
4. La funzione di “Undo”, che consentirebbero, se implementate, form in VB”, 1996, Visual Ba-
permetta il recupero di quelli di disporre di uno strumento “de- sic Journal n. 10.
che, vista l’implementazione, finitivo” ed altamente configura- [3] C. Pescio, “Interfaccia Utente ”,
dovrebbero essere rari errori. bile che dovrebbe includere la Computer Programming n. 45.

Dev. Developing Software & Solutions 47 Numero 82 - Febbraio 2001

visualbasic.PM6 47 18/01/01, 16.17