Capitolo 8 - Sito Web di Emanuele Maria Latorre

Transcript

Capitolo 8
Utilizzo dei Controlli Avanzati
In questo capitolo impareremo ad utilizzare alcuni controlli avanzati come IconView, ListView,
GridView, ColumnView e Tabstrip. Per quanto riguarda il controllo IconView, l’approccio sarà
diverso; faremo uso di un programma-esempio di quelli forniti nell’IDE di Gambas. Vedremo
il programma Explorer, scritto dal creatore di Gambas, Benoı̂t Minisini, attraverso ogni singola
riga di codice per comprendere esattamente come opera il programma e le modalità del controllo
IconView.
0.1
Controllo IconView
Per prima cosa, aprire Gambas e selezionare l’esempio Explorer (figura 1) dal menù Miscellaneous
(Varie1 ). Una volta selezionato il progetto Explorer, si aprirà l’IDE e noi dovremo accedere alla
finestra del codice. Fare doppio clic sul file della classe o se il form è già visualizzato, fare doppio
clic su un controllo e portarsi all’inizio della finestra del codice. In entrambi i casi vedremo la
parte iniziale della finestra del codice dove la prima riga visualizzerà:
’ Gambas class file
La prima cosa che osserviamo in questo codice è la dichiarazione delle variabili globali del programma. Si noti che esse sono precedute da un carattere dollaro “$” per maggior chiarezza. La
variabile $sPath è dichiarata come PRIVATE ed è utilizzata per contenere il percorso del file
corrente.
PRIVATE $sPath AS String
$bHidden è una variabile PRIVATE Boolean che agisce come un flag per poter determinare se un
certo file è nascosto oppure no. Per verificare il suo stato useremo la funzione Stat.
PRIVATE $bHidden AS Boolean
$bCtrl è un variabile PRIVATE Boolean che agisce come un flag quando viene premuto il tasto
CTRL. Se l’utente tiene premuto il tasto CTRL quando effettua un doppio clic su una cartella, il
programma aprirà una nuova finestra.
PRIVATE $bCtrl AS Boolean
Questa è la prima subroutine che viene eseguita quando lanciamo il programma:
STATIC PUBLIC SUB Main()
Le prossime due righe dichiarano una variabile locale per il form che vogliamo visualizzare all’utente
e una per creare un’istanza del form chiamata FExplorer, passando il parametro System.Home a
una routine identificata come new() la quale richiede un parametro stringa sPath (System.Home)
il cui valore è ottenuto dalla classe System.
1 Nelle ultime versioni di Gambas2 il codice dell’esempio Explorer differisce in qualche punto del codice rispetto
alla versione del libro di Rittinghouse.
1
This product is [C] 2005 by John W. Rittinghouse, all rights reserved. It is released to the
Gambas User Community under an Open Content License [OCL] and may not be distributed
under any other terms or conditions without the express written consent of the author.
2
A Beginner’s Guide to Gambas
Figura 1: Esempio Explorer.
DIM hForm AS Form
hForm = NEW FExplorer(System.Home)
Quindi viene visualizzato il form:
hForm.Show
END
La subroutine successiva è il costruttore chiamato quando è attivata la subroutine Main() e il form
FExplorer viene istanzializzato:
PUBLIC SUB _new(sPath AS String)
Assegnamo il percorso passato in System.Home come parametro per la nostra variabile globale
$sPath:
$sPath = sPath
Infine, dobbiamo chiamare la subroutine RefreshExplorer() per riempire il controllo iconview
denominato ivwExplorer.
RefreshExplorer
END
Di seguito la subroutine RefreshExplorer(). Essa è la parte essenzialmente del programma:
PRIVATE SUB RefreshExplorer()
Per prima cosa si dichiarano le variabili locali. Iniziamo con una stringa per contenere il nome del
file:
3
DIM sFile AS String
Successivamente si dichiarano le variabili immagine per le immagini icona: la directory genitore,
la cartella e il file.
DIM hPictDir AS Picture
DIM hPictParDir AS Picture ’ added by the author
DIM hPictFile AS Picture
cDir è un array stringa (contenente i nomi dei files o delle directories):
DIM cDir AS NEW String[]
sName è una stringa utilizzata per contenere i nomi dei files trovati in una directory:
DIM sName AS String
L’istruzione successiva non sembra essere documentata in Gambas o la documentazione esistente
non è raggiungibile sul sito web di Gambas.2 Questa chiamata serve per incrementare il valore della
proprietà Busy definita nella classe Application.
INC Application.Busy
Una volta che il flag “per non interrompere il processo” è attivo, viene impostato il titolo della
finestra al percorso di sistema e viene chiamata la funzione Conv$ per convertire il sistema di
caratteri (l’insieme dei caratteri del sistema operativo predefinito) con quello che l’utente ha scelto
per il proprio desktop. Si noti che Conv è sinonimo di Conv$; è possibile utilizzare le due funzioni
in modo intercambiabile.
ME.Title = Conv($sPath, System.Charset, Desktop.Charset)
Ora, qualunque cosa possa esserci nella icon view viene cancellata dalla chiamata del metodo
Clear :
ivwExplorer.Clear
Di seguito, assegnamo le icone alle variabili picture che abbiamo dichiarato. Prendiamo un’icona
per rappresentare le directories e una per i files:
hPictDir = Picture["folder.png"]
hPictParDir = Picture["ParentFolder.png"]’added by the author
hPictFile = Picture["file.png"]
Se il percorso della variabile non è impostato al livello gerarchico più alto (percorso assoluto),
indicato dalla stringa “/”, dobbiamo creare una directory che l’utente può cliccare per passare
alla directory genitore. Aggiungiamo questa cartella al controllo iconview chiamato ivwExplorer
utilizzando il metodo Add:
IF $sPath <> "/" THEN ivwExplorer.Add("D..", "..", hPictParDir)
Nella dichiarazione di cui sopra, il metodo .Add accetta tre parametri. Il primo è il nome della
chiave, in questo caso “D..”, la nostra chiave per le directories. Il secondo è il testo posto sotto
l’icona nel controllo IconView, e il parametro finale è il nome della variabile che è un identificativo
per il nome del file dell’icona che vogliamo visualizzare con questa voce. Adesso si possono scorrere
tutti i files nella directory corrente per vedere se si tratta di un file nascosto oppure no e individuare
per ogni nome di file, se si tratta di una directory o di un file.
2 Attualmente
sono presenti questi riferimenti: http://gambasdoc.org/help/lang/inc e http://gambasdoc.org/
help/comp/gb.qt/application/busy?view. Probabilmente al tempo della pubblicazione del libro la documentazione
ufficiale era mancante di tali istruzioni.
4
FOR EACH sFile IN Dir($sPath)
Quando viene creata, Gambas inizializza la stringa al valore NULL, quindi la prima volta, il valore
di $bHidden non sarà TRUE e l’istruzione IF verrà eseguita nel codice seguente:
IF NOT $bHidden THEN
La linea di codice successiva è un po’ difficile da codificare. La funzione Stat prende la stringa del
nome del file come parametro. In questo caso, il percorso corrente risiede in una variabile globale
$sPath concatenata con la stringa di lavoro sFile utilizzando la combinazione di simboli &/.
Quest’ultimo è un simbolo speciale di concatenazione utilizzato in Gambas per concatenare i nomi
dei files. La funzione Stat viene chiamata con il nome del file concatenato passato come parametro
e, contemporaneamente, viene selezionata la proprietà Stat.Hidden. Se la proprietà Stat.Hidden
è TRUE, viene eseguita l’istruzione CONTINUE, costringendo il flusso del programma alla
successiva iterazione del ciclo FOR. Questo processo obbliga il programma ad ignorare tutti i files
nascosti che incontra.
IF Stat($sPath &/ sFile).Hidden THEN ’is it hidden?
CONTINUE ’ if so, go to next loop iteration
ENDIF ’IF Stat
ENDIF ’IF NOT $bHidden
Se abbiamo raggiunto questo punto nel codice, il file non verrà nascosto. Ora useremo la funzione
incorporata di Gambas per la gestione dei file: IsDir, per vedere se il percorso corrente e la stringa
file (concatenata nella chiamata Stat) sono una directory o un file. Se abbiamo una directory,
aggiungeremo essa all’array stringa cDir, mettendo davanti una lettera “D” per le directories o
una ’F’ per i files e concatenando il nome del file alla stringa di lavoro sFile:
IF IsDir($sPath &/ sFile) THEN ’it was a directory
cDir.Add("D" & sFile) ’we add it to the directories key
ELSE ’not a directory and we add it to the "F" key as a file
cDir.Add("F" & sFile)
ENDIF
NEXT ’this is the end of the FOR loop...
Una volta che il tutto è stato memorizzato nell’array stringa cDir, con il ciclo FOR/NEXT chiamiamo il metodo Sort per ordinare l’array di stringhe:
cDir.Sort
Adesso che l’array cDir è ordinato, scorriamo l’array utilizzando l’istruzione FOR EACH appositamente impiegata per numerare gli oggetti negli array.
FOR EACH sFile IN cDir
Per ogni stringa dell’array cDir, si riempirà la stringa di lavoro sName con il nome del file.
Tuttavia, dobbiamo rimuovere la prima etichetta. Useremo la funzione stringa Mid$ per prendere
tutte le lettere della stringa dopo il primo carattere (la nostra etichetta) a partire dalla posizione
2 nella stringa:
sName = Mid$(sFile, 2)
Adesso controlliamo l’etichetta del nome del file utilizzando la funzione stringa Left$:
IF Left$(sFile) = "D" THEN
Se viene trovata l’etichetta “D”, allora si tratta di una directory e aggiungeremo una directory
al controllo IconView utilizzando il metodo Add e la nostra immagine “cartella” come ultimo
parametro della chiamata.
5
ivwExplorer.Add(sFile, sName, hPictDir)
ELSE ’otherwise it was a file and we add it with a file icon
ivwExplorer.Add(sFile, sName, hPictFile)
ENDIF
Vogliamo anche impostare la proprietà .Edit del controllo IconView su TRUE in modo che l’utente
possa rinominare l’oggetto:
ivwExplorer.Item.Editable = TRUE
NEXT ’exit the FOR EACH Loop
Le dichiarazioni di seguito sono state commentate e sembrano essere state utilizzate per alterare
l’ordine del controllo IconView. Ignoriamo questi commenti e andiamo all’istruzione FINALLY:
’ivwExplorer.Sorted = FALSE
’ivwExplorer.Ascending = TRUE
’ivwExplorer.Sorted = TRUE
FINALLY ’this is the last instruction to execute in the subroutine
L’ultima cosa che abbiamo bisogno di fare è impostare l’Application.busy allo stato normale:
DEC Application.busy
Se si verifica un errore potremmo tracciarlo con la clausola seguente:
CATCH
Se si verifica un errore dovrebbe comparire una MessageBox con il testo dell’errore visualizzato:
Message.Error(Error.Text)
END ’of our RefreshExplorer routine
Questa subroutine viene chiamata se il form FExplorer è ridimensionato generando un evento resize
(ridimensionamento). Il controllo IconView si sposterà in alto a sinistra regolando la larghezza e
l’altezza per accogliere la nuova dimensione della finestra:
PUBLIC SUB Form_Resize()
ivwExplorer.Move(0, 0, ME.ClientW, ME.ClientH)
END
Se l’utente sceglie l’opzione quit dal menù viene eseguita la routine:
PUBLIC SUB mnuQuit_Click()
ME.Close
END
Se l’utente seleziona l’opzione Refresh viene chiamata la subroutine RefreshExplorer descritta
precedentemente:
PUBLIC SUB mnuViewRefresh_Click()
RefreshExplorer
END
Questa subroutine viene chiamata quando l’evento activate viene attivato da un utente con un
doppio click su una cartella nel controllo IconView:
PUBLIC SUB ivwExplorer_Activate()
6
Dobbiamo dichiarare le variabili locali. Dichiariamo sNewPath come stringa contenente il percorso
del file cliccato dall’utente (o una nuova cartella o la cartella principale). Inoltre, si dichiara un
nuovo form per visualizzare il contenuto di destinazione, hForm, in una finestra separata quando
viene premuto il tasto di controllo (Ctrl ).
DIM sNewPath AS String
DIM hForm AS Form
Questo è necessario per scoprire se l’etichetta che abbiamo messo sulla stringa, controlla se la
destinazione è una directory o il livello root di sistema. Se siamo al livello root, abbiamo semplicemente un avanti indietro. In caso contrario, il codice assegna i valori concatenati di $sPath
e il valore dichiarato da LAST.Current.Key del controllo IconView. Questo si ottiene con la
chiamata di Mid$ a partire dalla posizione 2 (per bypassare il nostro carattere etichetta).
IF LAST.Current.Key = "D.." THEN
IF $sPath = "/" THEN RETURN
sNewPath = File.Dir($sPath)
ELSE
sNewPath = $sPath &/ Mid$(LAST.Current.Key, 2)
ENDIF
Verifichiamo il tipo di dato che abbiamo appena assegnato per assicurarci che sia, in realtà, una
directory e, se lo è, verifichiamo se l’utente tiene premuto il tasto di controllo(Ctrl ). Ricordiamo
che tenendo premuto il tasto di controllo (Ctrl ) nel nostro programma, si aprirà una nuova finestra,
ragion per cui abbiamo dichiarato la variabile locale hForm.
IF IsDir(sNewPath) THEN
Se è stato premuto il tasto di controllo (Ctrl ), si porterà il valore a FALSE prima di un’istanza
ad una nuova finestra. Sposteremo il nostro controllo per compensare 16 pixel a destra e sotto la
finestra corrente, avendo la stessa altezza e larghezza utilizzando il metodo hForm.Move. Infine,
mostriamo il form e aggiorniamo l’Explorer con la nostra subroutine RefreshExplorer.
IF $bCtrl THEN
$bCtrl = FALSE
hForm = NEW FExplorer(sNewPath)
hForm.Move(ME.X + 16, ME.Y + 16, ME.W, ME.H)
hForm.Show
ELSE
In caso contrario, il tasto di controllo (Ctrl ) non è stato premuto in modo da assegnare il valore
sNewPath a $sPath e aggiornare l’Explorer :
$sPath = sNewPath
RefreshExplorer
ENDIF
ENDIF
END
Quando l’utente fa clic su questa routine, si chiama la subroutine per visualizzare i files nascosti
e se si stanno già visualizzando, si disattiva la loro visualizzazione:
PUBLIC SUB mnuViewHidden_Click()
ToggleViewHidden
END
Se l’utente sceglie di visualizzare i files nascosti nell’Explorer, selezionando l’opzione Show Hidden
Files, viene eseguita la routine corrispondente. La prima linea di codice controlla il valore della
7
proprietà mnuViewHidden.Checked facendo il NOT logico di $bHidden qualunque sia il valore
logico di mnuViewHidden.Checked al momento in cui viene selezionato. Si assegna quindi il valore
alla proprietà e si aggiorna la vista chiamando la routine RefreshExplorer. Il risultato è che vengono
visualizzati i file nascosti.
PRIVATE SUB ToggleViewHidden()
$bHidden = NOT mnuViewHidden.Checked
mnuViewHidden.Checked = $bHidden
RefreshExplorer
END
La subroutine successiva viene eseguita quando viene cliccato l’about del menù. Esso visualizza
semplicemente una MessageBox dell’ideatore di Gambas, B. Minisini:
PUBLIC SUB mnuAbout_Click()
Message("IconView example written by\nBenoit Minisini")
END
La subroutine successiva viene eseguito quando l’utente esegue un click singolo su un elemento
dell’explorer e sceglie di rinominare l’elemento. Come è stato scritto all’inizio, non controlla se la
rinomina modifica effettivamente la voce. Ad esempio, se l’utente preme ESC, la voce dovrebbe
tornare al suo nome originale.
PUBLIC SUB ivwExplorer_Rename()
Message("’" & Mid$(LAST.Item.Key, 2) &
"’ has been renamed to ’" & LAST.Item.Text & "’")
END
Siamo in grado di porre rimedio a questa svista cambiando semplicemente il codice in questo
modo:
PUBLIC SUB ivwExplorer_Rename()
IF Mid$(LAST.Item.Key,2) <> Last.Item.Text THEN
Message("’" & Mid$(LAST.Item.Key,2) &
"’ has been renamed to ’" & LAST.Item.Text & "’")
ELSE
Message("’" & Mid$(LAST.Item.Key,2) & "’ was left unchanged.’")
ENDIF
END
Le ultime due subroutine cambiano la variabile globale $bCtrl ogni volta che viene premuto o
rilasciato il tasto di controllo.
PUBLIC SUB ivwExplorer_KeyPress()
IF Key.Control THEN $bCtrl = TRUE
END
PUBLIC SUB ivwExplorer_KeyRelease()
IF Key.Control THEN $bCtrl = FALSE
END
Fin qui tutto quello che dovete sapere sull’utilizzo del controllo IconView, successivamente, guarderemo il controllo ListView.
0.2
Controllo ListView
Il controllo ListView eredita Control e implementa un elenco di elementi di testo selezionabile
con le icone. Gli elementi ListView sono indicizzati da una chiave. Essi visualizzano una stringa
8
Figura 2: Form dell’esempio ListView.
e un’icona. Questo controllo ha un cursore interno utilizzato per l’accesso ai suoi elementi. È necessario utilizzare i metodi Move (MoveAbove, MoveBelow, MoveCurrent, MoveFirst, MoveLast,
MoveNext, MovePrevious, MoveTo) per spostare il cursore interno, ed è necessario utilizzare la
proprietà Item per ottenere il testo della voce sul quale punta il cursore. Questa classe si può
creare e la sintassi standard del linguaggio Gambas è la seguente:
DIM hListView AS ListView
hListView = NEW ListView ( Parent AS Container )
Il codice di cui sopra crea un nuovo controllo ListView che agisce come un array in sola lettura.
Creiamo un programma che implementerà il controllo ListView. Creare un nuovo progetto denominato ListView con interfaccia grafica utente. Al termine della procedura guidata per la
creazione del progetto, realizzare un semplice form come quello di figura 2. A partire dalla parte
superiore sinistra della figura 2, abbiamo il nostro controllo ListView chiamato ListView1, una
Textbox chiamata Textbox1 e il pulsante Insert Item chiamato Button1. Ci sono due RadioButtons,
chiamati RadioButton1 e RadioButton2 e il pulsante Remove Item chiamato Button2. Nella parte
inferiore del form c’è una TextLabel chiamata textLabel1 e il pulsante Quit chiamato Button3.
Dopo aver creato il form ed averne fatto la classe di avvio, abbiamo bisogno di aggiungere il
seguente codice per vedere come implementare un controllo ListView:
sStatus as String
PUBLIC SUB Form_Open()
DIM picSquare AS NEW Picture
DIM picCircle AS NEW Picture
picCircle.Load("circle.png")
picSquare.Load ("square.png")
’This will add an item to the ListView with a starting entry
ListView1.Add ("ListItem1","ListItem1", picSquare)
TextLabel1.Text = ListView1.Item.Text
ListView1_Click
END
Quando si avvia il programma e il form viene visualizzato sullo schermo, viene eseguita la routine
di cui sopra. Noi creiamo due variabili locali per le nostre icone che verranno utilizzate nella lista
e caricate in memoria. Successivamente, aggiungeremo una chiave di default e un elemento per
l’elenco utilizzando il metodo ListView1.Add, specificando l’icona picSquare associata a questo
elemento. Non preoccupiamoci per ora delle icone, ce ne occuperemo più avanti. Successivamente,
9
avremo bisogno di creare un evento per aggiornare l’elenco ogni volta che un elemento viene
aggiunto o è cliccato dall’utente.
PUBLIC SUB ListView1_Click()
ListView1.MoveCurrent
ListView1.Item.Selected = TRUE
TextLabel1.Text = ListView1.Item.Text & sStatus
END
Nella subroutine ListView1 Click, la prima riga di codice sposta il cursore sull’elemento attuale
evidenziandolo e nella seconda riga imposta su TRUE la proprietà Item.Selected. La terza linea
infine, aggiorna il valore della proprietà textLabel1.Text con il testo della selezione corrente (o
appena aggiunta) e lo stato corrente (contenuto nella variabile globale sStatus As String) allegato.
Se l’utente fa clic sul pulsante Insert Item (l’abbiamo chiamato Button1 ), viene eseguita la seguente
routine:
PUBLIC SUB Button1_Click()
Dichiarare una variabile locale, picToUse, per visualizzare la nostra icona:
DIM picToUse AS NEW Picture
Successivamente, controlliamo se RadioButton è stato cliccato. Se è stato cliccato il primo pulsante,
si caricherà l’immagine square.png, altrimenti, viene caricata circle.png.
IF Textbox1.Text <> NULL THEN
IF RadioButton1.Value THEN
picToUse.Load("square.png")
ELSE
picToUse.Load("circle.png")
END IF
Adesso aggiungiamo una nuova voce con una chiave e il nome nella casella di testo:
ListView1.Add(Textbox1.Text,Textbox1.Text,picToUse)
Il codice seguente pulisce la casella di testo:
TextBox1.Text = ""
sStatus = " current." ’set status to \current"
La chiamata della subroutine ListView1 Click aggiorna (refresh) il nostro controllo ListView :
ListView1_Click
Successivamente, dobbiamo assicurarci che l’elemento nuovo sia nell’area visibile del controllo:
ListView1.Item.EnsureVisible
END IF
END
La subroutine Button2 Click viene chiamata ogni volta che l’utente decide di eliminare l’elemento
corrente selezionato nel controllo ListView.
La linea di codice successiva rimuove il cursore corrispondente alla selezione corrente. Il metodo
MoveCurrent sposta il cursore interno sull’elemento corrente. Esso restituisce un valore TRUE se
non ci sono elementi correnti, nel qual caso si limiterà a restituire che non vi è nulla da eliminare:
IF ListView1.MoveCurrent() THEN RETURN
10
Se abbiamo raggiunto questo punto, abbiamo spostato il cursore ed è necessario rimuovere la voce
corrente del cursore:
ListView1.Remove(ListView1.Item.Text)
Puliamo il nostro display TextLabel1.Text col seguente codice:
TextLabel1.Text = ""
Ora, abbiamo bisogno di aggiornare la posizione del cursore per il nuovo elemento corrente. In
primo luogo, abbiamo bisogno di controllare la proprietà .Count per vedere se abbiamo eliminato
l’ultimo elemento della lista. Se il conteggio è maggiore di zero, allora abbiamo lasciato degli
elementi nella lista. In caso contrario, l’istruzione dell’IF non sarà vera e il codice seguente non
sarà eseguito:
IF ListView1.Count > 0 THEN
ListView1.MoveCurrent
ListView1.Item.Selected = TRUE ’Selects the current item
sStatus = \ selected."
ListView1_Click ’this will force an update
END IF
END
Se l’utente fa clic col mouse su un elemento nel controllo ListView, viene chiamata questa routine.
Abbiamo semplicemente aggiornato la proprietà TextLabel1.Text con il testo della voce selezionata
e aggiornato il controllo ListView chiamando la nostro subroutine ListView1 Click.
PUBLIC SUB ListView1_Select()
TextLabel1.Text = ListView1.Item.Text
sStatus = \ selected."
ListView1_Click
END
Se l’utente effettua un doppio-clic del mouse su un elemento nel controllo ListView, intende richiamare l’evento Activate, indicando all’utente che ha scelto questo per qualche azione che si deve
verificare. In questo caso, abbiamo semplicemente aggiornato la proprietà TextLabel1.Text con
il testo della voce selezionata, allegando la parola “attivato”, e aggiornato il controllo ListView
chiamando la subroutine ListView1 Click.
PUBLIC SUB ListView1_Activate()
TextLabel1.Text = ListView1.Item.Text & \ activated."
sStatus = \ activated."
ListView1_Click
END
Se l’utente fa clic col mouse sul pulsante Button3 (Quit), viene chiamata questa routine. Vogliamo
uscire dal form in maniera elegante richiamando il metodo Close utilizzando la chiamata Me.Close.
ME.Close
END
0.3
Lo strumento Icon Edit di Gambas
A questo punto, abbiamo creato tutto il codice per il programma d’esempio ListView. Abbiamo
ancora bisogno di creare le icone circle.png e square.png. Per farlo useremo il Gambas Icon
Editor. Per aprire l’editor delle icone, andiamo nella finestra del progetto nell’IDE. Dal TreeView
11
Figura 3: Creazione di una nuova immagine icona.
andiamo nella cartella Dati e facciamo clic destro col mouse. Scegliamo la voce Nuovo e la voce
del sottomenù Immagine. Vedremo la finestra di pop up della figura 3. Scrivere square nel
campo Name e cliccare su Ok. Appare l’editor delle icone per poterne creare una. Con l’opzione
rettangolo dal menù dello strumento Icon View, disegnamo un quadrato di colore blu e salviamo
l’icona. Ripetiamo il processo creando un’altra icona chiamata circle.png e salviamo anche questa.
È tutto. Il nostro programma è pronto per lavorare.
Eseguiamolo e vediamo come funziona il controllo ListView (figure 4, 5, 6).
0.4
Il controllo TreeView
Il controllo TreeView funziona in modo quasi identico al controllo ListView. La differenza principale è che il controllo TreeView supporta “figli” nidificati e consente di espandere da un livello
interno verso l’esterno dell’elemento, tutta la struttura dell’albero a partire dalla parte superiore.
Questo controllo, aggiunge un paio di metodi specifici per gestire l’espansione del genitore/figlio.
TreeView, come tutti gli altri controlli, eredita i suoi attributi dalla classe Control. Questo
controllo implementa una vista di elementi testuali in una struttura ad albero selezionabile con
le icone. Gli elementi della struttura sono indicizzati per mezzo di una chiave. Essi mostrano
una stringa e un’icona per ogni voce. Questo controllo ha un cursore interno utilizzato per accedere ai suoi elementi. Utilizziamo i metodi Move (Move, MoveAbove, MoveBack, MoveBelow,
MoveChild, MoveCurrent, MoveFirst, MoveLast, MoveNext, MoveParent, MovePrevious, MoveTo) per spostare il cursore interno e la proprietà Item per ottenere l’elemento selezionato. Questa
classe si può creare. La sintassi del linguaggio Gambas standard è la seguente:
DIM hTreeView AS TreeView
hTreeView = NEW TreeView ( Parent AS Container )
Il codice di cui sopra crea un nuovo controllo TreeView. Questa classe si comporta come un array
in sola lettura.
DIM hTreeView AS TreeView
DIM hTreeViewItem AS .TreeViewItem
hTreeViewItem = hTreeView [ Key AS String ]
12
Figura 4: Icona quadrato.
Figura 5: Icona cerchio.
Figura 6: Strumento editor icone.
13
Figura 7: Finestra del progetto TreeView.
L’ultima riga di codice restituisce un elemento TreeView a partire dalla sua chiave. Il cursore
interno viene spostato sull’elemento corrente. Ora, proviamo ad utilizzare un altro programma
di esempio dall’IDE di Gambas. Avviare Gambas e selezionare l’esempio TreeView dalla sezione
Basic 3 . Quando l’IDE si apre, si dovrebbe vedere qualcosa di simile alla figura 7. Adesso facciamo
doppio clic sul form TreeViewExample per accedere al codice del modulo. Analizziamo il codice
riga per riga per capire come funziona il controllo:
PUBLIC intEventNumber AS Integer
La variabile globale intEventNumber viene utilizzata per tenere traccia del numero di eventi che
si verificano per il nostro evento stack. Ad ogni processo di evento verrà incrementata questa variabile. Noi dichiariamo due variabili Picture locali, picMale e picFemale e caricate nella memoria
del programma utilizzando il metodo Picture.Load.
DIM picMale AS NEW Picture
DIM picFemale AS NEW Picture
picFemale.Load("Female.png")
picMale.Load ("Male.png")
’This will populate our TreeView with our starting entries
’Note: I’ll keep the entries text and its key the same to keep
’it simple
Di seguito aggiungeremo i valori di partenza del nostro controllo TreeView. Aggiungeremo quattro
elementi al controllo. Ogni elemento chiave avrà lo stesso nome dell’oggetto. Le voci Ted e Sally
saranno i bambini della voce Bill, mentre la voce Frank è figlio di Sally.
TreeView1.Add
TreeView1.Add
TreeView1.Add
TreeView1.Add
("Bill","Bill", picMale)
("Ted","Ted",picMale,"Bill")
("Sally","Sally",picFemale,"Bill")
("Frank","Frank",picMale,"Sally")
Dopo aver aggiunto gli elementi, potremo spostare il cursore sull’ultimo elemento aggiunto utilizzando il metodo TreeView1.MoveCurrent ed evidenziarlo impostando la proprietà TreeView1.Item.Selected
su TRUE. Infine, impostiamo la proprietà TreeView1.Item.Expanded su TRUE per consentire al3 Nota
del traduttore. Nelle ultime versioni di Gambas2 è possibile trovare l’esempio nella sezione Controls.
14
l’elemento di comprimersi o espandersi quando l’utente fa clic sull’icona più/meno 4 (NOTA: la
documentazione Wiki Gambas per questa struttura parla di Expand, not Expand.5 )
TreeView1.MoveCurrent
TreeView1.Item.Selected = TRUE
TreeView1.Item.Expanded = TRUE
END
Se l’utente fa clic su un elemento del controllo TreeView, si desidera registrare l’evento Click nel
nostro evento stack e aggiornare lo stack di visualizzazione (TextArea1.Text). Vogliamo anche
incrementare il numero di evento di una unità. Si noti che per l’aggiornamento del valore di
TextArea1.Text, ci limiteremo a prendere il nuovo evento aggiungendo tutto il resto nella memoria
di TextArea1.Text dopo il carattere di avanzamento riga, Chr(10). L’effetto di questa chiamata
inserisce il nuovo evento nella parte superiore del testo visualizzato.
PUBLIC SUB TreeView1_Click()
’This just updates our event stack
TextArea1.Text = "Event(" & intEventNumber & "): Click" & Chr(10) &
TextArea1.Text
intEventNumber = intEventNumber + 1
Successivamente, vogliamo scoprire se l’elemento selezionato è un genitore (determinato dal fatto
che abbia o meno figli). Se il numero dei figli è maggiore di uno, vogliamo che la nostra etichetta
(TextLabel1.Text) usi la forma plurale della voce figlio. Se c’è un solo figlio, la nostra etichetta
comunicherà figlio e se non ce ne sono, vogliamo che ci sia la voce non ha figli. Per fare queste
cose utilizziamo un costrutto IF THEN/ELSE:
’This little check just updates our label so
’children an entry has.
IF TreeView1.item.Children > 1 THEN
textlabel1.Text = (TreeView1.Item.Text & "
TreeView1.Item.Children & " children.")
ELSE IF TreeView1.item.Children = 0 THEN
ELSE
END IF
END
that we know how many
has " &
has no children.")
has 1 child.")
Se l’utente inserisce i dati nel controllo TextBox e fa clic sul pulsante Insert Name (Button1), viene
eseguito l’evento-clic seguente. Si dichiarano prima due variabili locali. La variabile picToUse
determinerà quale immagine è stata caricata sulla base del valore del RadioButton al momento del
clic sul pulsante Insert Name. Alla variabile stringa, sParent, viene assegnato il valore della chiave
dell’elemento corrente. Se il metodo MoveCurrent tenta di spostare il cursore interno sull’elemento
corrente e non vi è alcun elemento, restituisce TRUE. In caso contrario, sarà restituito il valore
FALSE e assegneremo alla stringa sParent il valore della chiave corrente.
DIM picToUse AS NEW Picture
DIM sParent AS String
IF Textbox1.Text <> NULL THEN
IF RadioButton1.Value THEN
picToUse.Load("Male.png")
4 Nota
del traduttore. Nelle ultime versioni di Gambas2 è probabile la presenza dell’icona triangolino rotante al
posto del più/meno.
5 Nota del traduttore. Controllare eventuali cambiamenti nella Wiki.
15
ELSE
picToUse.Load("Female.png")
END IF
’Gets the parent item: the current item, or nothing is the TreeView
’is void
IF NOT TreeView1.MoveCurrent() THEN
sParent = TreeView1.Key
ENDIF
Adesso, abbiamo bisogno di aggiungere la nuova voce con una chiave e un nome uguale al contenuto
della casella di testo. Inseriamo la voce nel controllo TreeView con gerarchia figlio. Si noti che i
nomi delle chiavi devono essere unici altrimenti si verifica un crash del programma. Notare che
avremmo anche potuto utilizzare il metodo Exist per scoprire se esiste una chiave con il nome del
contenuto TextBox1.Text prima di effettuare la chiamata al metodo Add. In quest’ultimo caso, il
codice sarebbe stato simile a questo:
IF Exist(Textbox1.Text) <> TRUE THEN
TreeView1.Add(Textbox1.Text,Textbox1.Text,picToUse, sParent)
ENDIF
Tuttavia, il codice nel programma forza semplicemente il metodo Add a prendere il contenuto del
TextBox1.Text ed inserirlo nella lista:
TreeView1.Add(Textbox1.Text,Textbox1.Text,picToUse, sParent)
TextBox1.Text = "" ’This empties out textbox
La prossima riga di codice aggiornerà la nostra etichetta per riflettere il nuovo numero di figli:
TreeView1_Click
Il richiamo a EnsureVisible farà in modo che la voce che abbiamo appena aggiunto alla lista
sia visibile nell’area del controllo. Se necessario, scorrere il controllo in modo che l’elemento sia
visibile.
TreeView1.Item.EnsureVisible
END IF
END
Se l’utente desidera rimuovere un nome dal controllo TreeView, è sufficiente che faccia clic sul
pulsante Remove Name (Button2) in modo da richiamare la seguente subroutine:
Prima di tutto, dobbiamo prendere il cursore allineato alla nostra selezione corrente e assicurarci
che l’elemento corrente non abbia valore nullo. Se il metodo MoveCurrent restituisce un valore
vero, la lista è vuota e va bene cosı̀. Il codice invoca la chiamata del comando RETURN e ci fa
tornare indietro alla chiamata del processo. In caso contrario, qualunque sia l’elemento corrente,
quest’ultimo sarà rimosso chiamando il metodo Remove nella seconda riga, come di seguito:
IF TreeView1.MoveCurrent() THEN RETURN
’Lets remove the current cursor item
TreeView1.Remove(TreeView1.Item.Text)
Ora dobbiamo spostare il cursore sulla voce corrente (visto che adesso puntiamo su un elemento
eliminato). Prima di fare questo abbiamo bisogno di controllare la proprietà Count per essere
sicuri di non eliminare l’ultimo elemento della lista. Se l’abbiamo fatto, ovviamente, non verrà
eseguita questa parte di codice. L’istruzione IF verifica se Count è un numero maggiore di zero e,
se è TRUE (vero), sposta l’elemento corrente, selezionandolo in modo che il cursore sia evidenziato,
e aggiorna il controllo con una chiamata alla subroutine TreeView1 Click.
16
IF TreeView1.Count > 0 THEN
TreeView1.MoveCurrent
’This selects or ’highlights’ our current item
TreeView1.Item.Selected = TRUE
’This will update our label and reflect the new number of kids
TreeView1_Click
END IF
END
Se l’utente fa clic sull’icona meno, nel controllo TreeView, si innesca l’evento Collapse. Viene
chiamata la routine successiva. Essa aggiorna l’evento stack, come descritto in precedenza e
incrementa il contatore di eventi, intEventNumber, di una unità.
PUBLIC SUB TreeView1_Collapse()
TextArea1.Text = "Event(" & intEventNumber & "): Collapse" & Chr(10)
& TextArea1.Text
END
Se l’utente esegue un doppio clic su un elemento del controllo TreeView, si innesca l’evento
Dbl Click. Sostanzialmente ha lo stesso comportamento dell’evento Activate. Viene chiamata
la routine successiva. Essa aggiorna l’evento stack, come descritto in precedenza, e incrementa il
contatore di eventi, intEventNumber, di una unità.
PUBLIC SUB TreeView1_DblClick()
TextArea1.Text = "Event(" & intEventNumber & "): Double Click" & Chr
(10) & TextArea1.Text
END
PUBLIC SUB TreeView1_Select()
TextArea1.Text = "Event(" & intEventNumber & "): Select" & Chr(10) &
TextArea1.Text
END
La routine successiva contiene codice che non viene mai eseguito perché la subroutine Button2 Click
si prende cura della rimozione di un elemento. Per utilizzare il codice in modo efficace, dovrebbe
essere chiamata la subroutine Button2 Click subito prima della riga di codice che chiama la subroutine TreeView1 Click. Se questo viene fatto, l’evento stack dovrebbe essere opportunamente
aggiornato, prima con l’eliminazione e poi con gli eventi clic.
PUBLIC SUB TreeView1_Delete()
TextArea1.Text = "Event(" & intEventNumber & "): Delete" & Chr(10) &
TextArea1.Text
END
Se l’utente fa clic sull’icona più nel controllo TreeView, si innesca un evento Expand. Viene chiamata la routine successiva. Si aggiorna semplicemente l’evento stack, come descritto in precedenza,
e viene incrementato il contatore di eventi, intEventNumber, di una unità.
PUBLIC SUB TreeView1_Expand()
17
TextArea1.Text = "Event(" & intEventNumber & "): Expand" & Chr(10) &
TextArea1.Text
END
TextArea1.Text = ""
’IntEventNumber = 0
END
La voce About del menù Help genera un evento clic che chiama la subroutine successiva. Essa si
limita ad informare sui crediti dell’autore di questo esempio, C. Packard.
PUBLIC SUB About_Click()
Message.Info ("TreeView example written by C. Packard." & Chr(10) &
"Aug 2004")
END
Se l’utente esegue un doppio clic su un elemento del controllo TreeView, si innesca l’evento Activate.
Sostanzialmente ha lo stesso comportamento dell’evento Dbl Click. Viene chiamata la routine
successiva. Essa aggiorna l’evento stack, come descritto in precedenza e incrementa il contatore
di eventi, intEventNumber, di una unità.
PUBLIC SUB TreeView1_Activate()
TextArea1.Text = "Event(" & intEventNumber & "): Activate" & Chr(10)
& TextArea1.Text
END
La routine successiva contiene codice che non viene mai eseguito perché nessun evento richiama
il codice della subroutine. Per utilizzare il codice in modo efficace, dovrebbe essere aggiunta una
voce di menù Rename al menù Help e dovrebbe essere chiamata dall’evento MenuItem.Click. Se
questo viene fatto, allora viene generato l’evento richiesto e si potrebbe scrivere del codice per
ottenere il nuovo nome da parte dell’utente e modificarlo. L’evento stack sarebbe adeguatamente
aggiornato, prima con l’evento rinomina e poi con l’evento clic.
PUBLIC SUB TreeView1_Rename()
TextArea1.Text = "Event(" & intEventNumber & "): Rename" & Chr(10) &
TextArea1.Text
END
Questo è tutto per quanto riguarda il programma TreeView. Si potrebbe tentare d’implementare
il codice per realizzare le proposte avanzate precedentemente. Una volta che siete in grado di
capire come utilizzare questi controlli in modo efficace, le interfacce di Gambas diventeranno
più sofisticate. Successivamente, daremo uno sguardo agli ultimi due controlli di visualizzazione
avanzata, i controlli GridView e ColumnView.
0.5
Controllo GridView
Il controllo GridView, come tutti gli altri controlli nel pannello degli strumenti, eredita i suoi
attributi dalla classe Control. GridView implementa un controllo che visualizza i dati in una
griglia. Questa classe si può creare. La sintassi standard del linguaggio Gambas per GridView è:
DIM hGridView AS GridView
hGridView = NEW GridView ( Parent AS Container )
18
Figura 8: Progetto GridView.
Il codice di cui sopra crea un nuovo GridView. Questa classe si comporta come un array in sola
lettura. Per recuperare il contenuto di una cella della griglia, utilizzare il codice seguente che
dichiara una variabile GridCell in grado di leggere la matrice GridView (la gridcell è una classe
virtuale):
DIM hGridView AS GridView
DIM hGridCell AS .GridCell
hGridCell = hGridView [ Row AS Integer, Column AS Integer ]
La riga precedente restituisce una cella a partire dalla sua riga e dalla sua colonna. Il nostro
programma di esempio per questo controllo crea una griglia di quattro righe e tre colonne. Riempiremo le prime tre righe con testo e l’ultima riga con immagini. Prenderemo l’ultima riga di
testo per dimostrare il comportamento della proprietà di allineamento per i dati testuali. Il nostro
programma avrà tre pulsanti, Quit, Clear, e Reset.
Il pulsante Quit si limiterà a chiudere il programma. Clear invocherà il metodo GridView.Clear
per cancellare il contenuto della griglia e visualizzare celle vuote. Il pulsante Reset sarà destinato
a ripristinare il contenuto della griglia con i dati iniziali presenti al primo avvio del programma.
Il nostro programma sarà simile a quello della figura 8. Per iniziare, avviare Gambas e selezionare
l’opzione Nuovo Progetto con Interfaccia Grafica Utente. Rendere il progetto traducibile e i
controlli pubblici per mezzo delle due caselle di controllo nella procedura guidata. Chiamare il
progetto GridView e metterlo nella directory GridView. All’avvio dell’IDE, dobbiamo accedere
nella finestra del progetto e portarci nell’editor delle icone. Creeremo tre icone, chiamate GridPic,
GridPic1, e GridPic2. Cerchiamo di renderle ragionevolmente simili a quelle della figura 8 per
quanto possibile. Creiamo un nuovo form come classe di avvio e collochiamo il controllo GridView,
chiamato GridView1 sul form come indicato nella figura 8. Aggiungiamo al form i tre pulsanti,
chiamati Button1, Button2 e Button3 e scrivere infine nelle proprietà Button.Text ciò che viene
mostrato nella figura 8.
Adesso abbiamo il form come ci aspettiamo che sia. Iniziamo adesso la codifica. Facciamo
doppio clic sul form, non su un controllo, in modo da visualizzare la subroutine Form Open nella
finestra del codice. Impostiamo l’intestazione (caption) del form con il nome del programma:
Form1.Caption = " GridView Example
END
"
All’avvio del programma, se esiste un costruttore, viene eseguito per primo. Il nostro costruttore
carica le nostre tre icone per compilare la griglia. In primo luogo, dichiariamo tre variabili locali
per le immagini, hPic1, hPic2, e hPic3, come illustrato di seguito:
PUBLIC SUB
DIM hPic1
DIM hPic2
DIM hPic3
_new()
AS Picture
AS Picture
AS Picture
19
Adesso bisogna creare un’istanza per le variabili immagini e caricare quest’ultime:
hPic1 = NEW Picture
hPic1.Load("GridPic.png")
hPic2 = NEW Picture
hPic2.Load("GridPic2.png")
hPic3 = NEW Picture
hPic3.Load("GridPic1.png")
La prossima cosa che dobbiamo fare è definire le dimensioni della griglia. La nostra griglia avrà tre
colonne e quattro righe, quindi dobbiamo impostare le proprietà Columns e Rows utilizzando le
proprietà della loro classe virtuale gridcolumn e gridrow in Count, impostando il numero di righe
e di colonne come illustrato di seguito:
GridView1.Columns.Count = 3
GridView1.Rows.Count = 4
Possiamo anche definire le dimensioni di larghezza e altezza delle colonne e delle righe della griglia.
Tenete presente che è possibile impostare valori di altezza differenti per ogni riga e valori di
larghezza differenti per ogni colonna. Impostiamo le proprietà Width e Height per le nostre righe
e colonne, come illustrato di seguito:
GridView1.Columns.Width = 72
GridView1.Rows.Height = 36
Adesso possiamo riempire la griglia con qualche dato, semplicemente assegnando il testo alla riga
e colonna corrispondente:
GridView1[0,0].Text = "0,0"
Per l’ultima riga, vediamo di applicare la proprietà Alignment:
GridView1[2,0].Alignment = Align.Center
GridView1[2,1].Alignment = Align.BottomLeft
GridView1[2,2].Alignment = Align.TopRight
Dopo aver impostato la proprietà di allineamento per ogni cella della riga, si aggiungera il testo:
Infine, aggiungeremo le nostre tre icone alla griglia:
GridView1[3,0].Picture = hPic1
END
Il costruttore è completato. Ora, doppio clic sul pulsante Quit per ottenere la subroutine per
l’evento Button1 Click, nella quale si aggiungerà la nostra chiamata Me.Close per chiudere il
programma:
20
Figura 9: Esempio ColumnView.
ME.Close
END
Il pulsante Clear è il prossimo. Doppio clic sul pulsante Clear per ottenere la subroutine per
l’evento Button2 Click, dove aggiungeremo il codice per ripristinare la griglia sui valori in bianco
(cancellare i valori delle celle):
GridView1.Clear
END
Il modo più semplice per ripopolare i dati è quello di richiamare di nuovo il costruttore. Allora
aggiungiamo il seguente codice:
_new
END
Il nostro programma è completato. Eseguiamolo per vedere come funziona. Dopo aver verificato che funziona come previsto, chiuderlo per passare ad esaminare il controllo successivo:
ColumnView.
0.6
Il controllo ColumnView
Nel nostro prossimo esempio, ci occuperemo di creare un programma in grado di visualizzare i dati
impiegando un controllo ColumnView come in figura 9. Il nostro semplice esempio crea tre colonne
e cinque righe. Riempiamo i dati delle celle con gli indici colonna-riga, delle celle corrispondenti.
Per fare questo, avremo bisogno d’impostare la larghezza di ciascuna colonna in modo dinamico
calcolato in base alla larghezza del controllo e il numero di colonne specificato. Lo faremo nel
costruttore. Quando il programma si avvia, vogliamo chiamare la subroutine Form Open nella
quale impostiamo il titolo della finestra, come mostrato di seguito:
Form1.Caption = " ColumnView Example
END
"
Il metodo del costruttore è dove risiede tutto il lavoro per popolare (animare) il controllo. Abbiamo
bisogno di dichiarare tre variabili intere locali, iwidth per contenere il valore della larghezza della
colonna calcolata, irowcounter e icolcounter, utilizzate nelle strutture di loop.
21
PUBLIC SUB _new()
’ declare our local vars
DIM iwidth AS Integer
DIM irowcounter AS Integer
DIM icolcounter AS Integer
’set the number of columns to 3
ColumnView1.Columns.Count = 3
’calculate the column width based on the number of columns set
iwidth = ColumnView1.Width / ColumnView1.Columns.Count
’for the first column, set the column width and add a column title
ColumnView1.Columns[0].Width = iwidth
ColumnView1.Columns[0].Text="FirstCol"
’for the second column, set the column width and add a column title
ColumnView1.Columns[1].Text="SecondCol"
’for the third column, set the column width and add a column title
ColumnView1.Columns[2].Text="ThirdCol"
Ora, abbiamo bisogno di creare il loop (ciclo) esterno (per la riga) e interno (per la colonna).
Sostanzialmente, ci sarà un ciclo per ogni riga del controllo e, per ogni riga, si riproduce ciclicamente ogni colonna, riempiendo l’array ColumnView1[riga][colonna] con una stringa di testo
costruita dinamicamente che rappresenta la posizione corrente all’interno del ciclo interno ed
esterno.
FOR irowcounter = 0 TO 4 ’for all five of our rows
’call the Add method with [row][col] to add to ColumnView1 control
ColumnView1.Add(irowcounter, icolcounter)’start outer (row) loop
FOR icolcounter = 0 TO ColumnView1.Columns.Count { 1
’add text to the [row][col] item
ColumnView1[irowcounter][icolcounter] = "Col: " & icolcounter & "
Row: " & irowcounter
NEXT ’column
NEXT ’row
END ’our constructor
Il pulsante Quit agisce esattamente come nell’esempio precedente. Per ottenere la subroutine per
l’evento Button1 Click, facciamo dobbio clic e aggiungiamo la chiamata Me.Close per chiudere il
programma:
ME.Close
END
Il pulsante Clear è il prossimo. Doppio clic sul pulsante Clear per ottenere la subroutine per
l’evento Button2 Click, dove aggiungeremo il codice per ripristinare la griglia sui valori in bianco
(cancellare i valori delle celle):
ColumnView1.Clear
END
Per il pulsante Reset, il modo più semplice per ripopolare i dati è quello di richiamare di nuovo il
costruttore. Allora aggiungiamo il seguente codice:
_new
END
22
Questo è tutto per ciò che riguarda il controllo ColumnView. Successivamente, daremo uno sguardo
su come utilizzare i vari controlli di layout in Gambas.
0.7
Controlli per il layout – HBox, VBox, HPanel e Vpanel
Tutti i controlli di questo gruppo sono simili in quanto cercano di organizzare automaticamente i
controlli contenuti. Lo fanno utilizzando la proprietà .Arrangement, che si basa su costanti definite
nella classe Arrange. Le costanti utilizzate dalla proprietà .Arrangement sono: Fill, Horizontal,
LeftRight, None, TopBottom e Vertical. Se non si specifica un valore della proprietà Arrangement, allora vengono utilizzate le impostazioni di default, per esempio, HBox dispone i controlli
orizzontalmente, VBox verticalmente, . . .
0.7.1
HBox e VBox
Entrambe queste classi sono contenitori che organizzano i loro contenuti orizzontalmente o verticalmente. Come tutti gli altri controlli del ToolBox, ereditano i loro attributi dalla classe Container.
Entrambi questi comandi agiscono come un Pannello, senza un bordo, la cui proprietà Arrangement sarebbe impostata da Arrange.Horizontal. Queste classi si possono creare. La sintassi
standard del linguaggio Gambas per creare una nuova Hbox è:
DIM hHBox AS HBox
DIM hVBox AS VBox
hHBox = NEW HBox ( Parent AS Container )
hVBox = NEW VBox ( Parent AS Container )
0.7.2
HPanel e Vpanel
Entrambe queste classi sono contenitori che organizzano i propri contenuti dall’alto verso il basso
e da sinistra a destra per la Hpanel e da sinistra a destra e dall’alto verso il basso per la VPanel.
Entrambi agiscono come un normale controllo Panel, senza un bordo, la cui proprietà Arrangement
sarebbe impostata da Arrange.TopBottom (dove un contenitore impila i suoi contenuti dall’alto
in basso, se i contenuti non possono adattarsi in verticale, una nuova colonna di controlli viene
inizializzata subito dopo la colonna precedente) o Arrange.LeftRight (dove un contenitore impila
i suoi contenuti da sinistra a destra, se i contenuti non possono adattarsi in orizzontale, una
nuova riga di controlli viene inizializzata sotto la riga precedente). Entrambi i tipi di controlli
ereditano i loro attributi dalla classe Container. Questa classe si può creare. La sintassi standard
del linguaggio Gambas è:
DIM hHPanel AS HPanel
DIM hVPanel AS VPanel
hHPanel = NEW HPanel ( Parent AS Container )
hVPanel = NEW VPanel ( Parent AS Container )
Creiamo un semplice programma che intende dimostrare ciascuno di questi controlli e mostrare
come essi possono essere utilizzati in un’applicazione. Per questa applicazione, avviamo Gambas e
creiamo un programma con interfaccia grafica utente. Chiamiamola Layouts e creiamo una classe
form d’avvio, Form1. Per questa applicazione, avremo bisogno di utilizzare alcune icone. La
maggior parte delle distribuzioni Linux memorizza i file icona nella cartella denominata:
file:/usr/share/icons/defaultkde/32x32/actions
Il tuo sistema operativo potrebbe essere diverso. Indipendentemente da dove risiedono le icone,
individuare sette icone e copiarle nella cartella Layout. Per i nostri scopi, qualunque icona delle
sette andrà bene, ma se si possono trovare undo, redo, help, colorize, printer, e l’icona exit sarà
più facile. Nella figura 10 ci sono quelle scelte per questo progetto. Il nostro programma è molto
23
Figura 10: Icone del progetto Layout.
Figura 11: Il Form1 in modalità progetto.
semplice. Stiamo per creare un HBox, un VBox, un HPanel, e un VPanel per mettere alcuni
semplici controlli in ogni contenitore. Dobbiamo aggiornare un’etichetta di testo per mostrare
cosa accade ad ogni clic del mouse. La figura 11 mostra il nostro modulo nella modalità progetto.
Dalla parte superiore sinistra della figura 11, si comincia con una VBox e una TextLabel. Sotto
la TextLabel c’è una HBox. Quando si creano questi controlli, Gambas suggerisce nomi di default
per ogni controllo. Lasciamo i nomi di default per ogni controllo, poiché il nostro programma
utilizza le impostazioni predefinite. Piazziamo tre ToolButtons nelVBox e quattro ToolButtons
nell’HBox. Successivamente, impostiamo le proprietà delle immagini per ogni ToolButton per le
icone che abbiamo scelto di utilizzare (si spera siano le stesse di quelle della figura 11) per il
nostro progetto. Una volta che abbiamo le icone visualizzate, occupiamoci del primo ToolButton
della VBox facendo doppio clic per aprire la finestra del codice. Ripetiamo questa procedura per
ciascuna delle sette icone aggiungendo il seguente codice:
PUBLIC SUB ToolButton1_Click()
TextLabel1.Text = "Vert Undo clicked."
END
TextLabel1.Text = "Vert Redo clicked."
END
TextLabel1.Text = "Vert Help clicked."
END
TextLabel1.Text = "Horiz Configure Btn clicked."
24
END
TextLabel1.Text = "Horiz Color Button clicked."
END
TextLabel1.Text = "Horiz Printer Btn clicked."
END
TextLabel1.Text = "Horiz Exit Button clicked."
WAIT 0.5
ME.Close
END
Il contenitore del controllo successivo che creiamo è HPanel, come mostrato nella figura 11. Aggiungeremo quattro RadioButton e tre pulsanti per gestire questo controllo. Proviamo ad organizzare
il contenitore disponendo i pulsanti come mostrato in figura 11. Si vedrà perché quest’ultima
azione sia importante una volta che si esegue il programma e vedremo come l’HPanel riorganizza
i controlli. Ancora una volta, facciamo doppio clic su ogni pulsante e aggiungiamo il seguente
codice:
PUBLIC SUB RadioButton1_Click()
TextLabel1.Text = "RadioBtn 1 clicked."
END
TextLabel1.Text = "RadioBtn 2 clicked."
END
TextLabel1.Text = "RadioButton 3 clicked."
END
TextLabel1.Text = "RadioButton 4 clicked."
END
TextLabel1.Text = "Button 1 clicked."
END
END
END
L’ultima cosa che faremo è creare un VPanel con tre caselle di controllo. Ricordiamoci di organizzare le caselle di controllo del form, come si vede nella figura 11 per vedere come il controllo
li risistema automaticamente. Aggiungiamo questo codice quando abbiamo sistemato le caselle di
controllo nella VPanel :
PUBLIC SUB CheckBox1_Click()
IF CheckBox1.Value = TRUE THEN
TextLabel1.Text = "Checkbox 1 checked."
ELSE
TextLabel1.Text = "Checkbox 1 unchecked."
ENDIF
END
25
Figura 12: Il programma Layout in esecuzione.
TextLabel1.Text = "Checkbox 2
ELSE
ENDIF
END
ELSE
ENDIF
END
checked."
unchecked."
checked."
unchecked."
Ora salvare il lavoro ed eseguire questo semplice programma. Si dovrebbe vedere qualcosa di
simile alla figura 12. Notate come i RadioButtons nell’HPanel sono allineati verticalmente dalla
RadioButton4 a RadioButton1 e, poiché non c’era spazio, il programma ha collocato il pulsante
di controllo a destra e ha continuato l’allineamento dall’alto in basso, da sinistra a destra. Per
il VPanel, notare come le caselle di controllo si siano allineate. Questi tipi di controlli sono imprevedibili nel senso della disposizione dei contenuti. È meglio utilizzare questi controlli in maniera
dinamica nel codice, quando si devono creare form all’occasione, senza necessità di collocarli in un
pannello fisso in modalità progettazione.
I controlli VBox e HBox tenendo premuto i ToolButtons consentono di creare barre degli
strumenti che funzionano bene con controlli iconici guidati, come quelli raffigurati con le nostre
icone. Terminata la fase di test per questa applicazione, chiudiamo il programma per occuoparci
dei controlli TabStrips.
0.8
Controllo TabStrip
Il controllo TabStrip di Gambas implementa un controllo del tipo contenitore a schede. Come per
gli altri controlli, eredita gli attributi dalla classe Container. Questa classe si può creare. Questa
classe si comporta come un array in sola lettura. La sintassi standard del linguaggio Gambas è:
DIM hTabStrip AS TabStrip
hTabStrip = NEW TabStrip ( Parent AS Container )
DIM hTab AS .Tab
hTab = hTabStrip [ Index AS Integer ]
26
Figura 13: Il controllo tabstrip.
Figura 14: Il progetto Tab in fase di progettazione.
Invocando il codice di cui sopra, viene restituito un oggetto scheda virtuale a partire da un indice.
I TabStrips sono utili per organizzare e presentare le informazioni in unità auto contenenti. I
TabStrips consentono di ottenere input da parte degli utenti per mezzo di un’interfaccia in grado di
guidarli attraverso un processo d’installazione o di configurazione. La figura 13 mostra un esempio
di TabStrip. Per dimostrare quanto sia facile creare un TabStrips, potremmo costruire una piccola
applicazione che implementa l’interfaccia a schede della figura 13. La nostra applicazione mostrerà
come utilizzare i controlli a schede per presentare le informazioni ad un utente e risponderà ad esso
nella nostre applicazione. Avviamo Gambas e creiamo un nuovo programma con interfaccia grafica
utente. Chiamiamo il progetto Tabs, scegliendo la creazione guidata del progetto e quando si avvia
l’IDE Gambas, creiamo un nuovo form come classe di avvio. Successivamente, sarà necessario
inserire un controllo TabStrip per il nuovo Form. Una volta collocato il TabStrip, si vedrà soltanto
una scheda visualizzata. Per avere un controllo con l’aspetto della figura 13 bisogna impostare la
proprietà Count a 5 nella finestra Proprietà. Si noti che la numerazione delle schede in Gambas
incomincia da zero. Ogni scheda si comporta come un contenitore per i controlli che risiedono in
esso. Avremo anche bisogno di aggiungere una TextLabel e un pulsante per il nostro Form. La
TextLabel verrà utilizzata per mostrare le azioni dell’utente in risposta alla nostra interfaccia a
schede. Il pulsante sarà un pulsante Quit che useremo per terminare l’applicazione. La figura
14 mostra come dovrebbe apparire il Form, in fase di progettazione dell’interfaccia. Sarà inoltre
necessario copiare le icone per la configurazione, l’help e l’uscita dal progetto Layout nella cartella
del progetto Tabs in modo da poterli utilizzare con questo progetto. Gambas è stato progettato
per contenere tutto il lavoro del progetto, contenuto nell’IDE, nella cartella che si crea quando si
lavora ad un progetto. A tal fine, è necessario uscire dall’IDE per copiare i files da un’altra cartella
al progetto in corso. Ad ogni modo, andiamo avanti in questo progetto. Per la Tab0 aggiungere
un frame e collocare su di esso due RadioButton come mostrato nella figura 15. Adesso, doppio
clic su ogni RadioButton e sciviamo il seguente codice:
TextLabel1.Text = "You have clicked: <center>RadioButton1"
END
27
Figura 15: Output della Tab0.
TextLabel1.Text = "You have clicked: <center>RadioButton2"
END
Per la Tab1 otterremo quello mostrato nella figura 16. Adesso doppio clic su ciascuna CheckBox
e inseriamo questo codice:
TextLabel1.Text = "You have checked: <center>CheckBox1"
ELSE
TextLabel1.Text = "You have unchecked: <center>CheckBox1"
ENDIF
END
TextLabel1.Text = "You have checked: <center>CheckBox2"
ELSE
TextLabel1.Text = "You have unchecked: <center>CheckBox2"
ENDIF
END
Il codice di cui sopra dovrà stabilire se l’utente ha selezionato o deselezionato il controllo di un
elemento, a partire dalla proprietà Value. Se è TRUE, allora la casella è già selezionata come
confermato dall’aggiornamento della TextLabel1.Text. In caso contrario, se si sta deselezionando
il controllo dovremo aggiornare l’etichetta per indicare tale fatto.
Per la Tab2, dobbiamo posizionare un pannello di controllo sulla Tab e aggiungere tre ToolButtons. Non commettere l’errore d’inserire un ToolButton cercando di copiare e spostare la copia nel
28
pannello. Non sarà riconosciuto come elemento-figlio del pannello di controllo. Apparirà su tutte
le schede. Per far in modo che il pannello di controllo accetti i ToolButtons come elementi-figli, è
necessario scegliere individualmente il ToolButton sulla barra degli strumenti (ToolBox ) e creare
ognuno di esso come abbiamo fatto con il primo ToolButton. Per ogni ToolButton, assegnare la
proprietà picture (immagine) con il nome dell’icona che stiamo utilizzando per tale pulsante, come
illustrato nella figura 17. Il prossimo passo è fare doppio clic su ogni toolButton e aggiungere il
seguente codice:
TextLabel1.Text = "You clicked: <center>the Configure Icon"
END
TextLabel1.Text = "You have clicked: <center>the Help Icon"
END
TextLabel1.Text = "You have clicked: <center>the Exit Icon"
END
Ora, andiamo ad aggiungere un controllo ComboBox sulla Tab3. Nulla di più di un semplice
ComboBox con tre elementi. Selezionare il controllo ComboBox e posizionarlo sulla scheda, come
illustrato nella figura 19. Ricordo, al fine d’impostare le voci nella ComboBox, che è necessario
andare nella finestra proprietà e selezionare la proprietà List. Vedremo un pulsante con tre puntini
(indicano la List Editor ), ed è necessario fare clic su Add inserendo le seguenti voci nella lista:
“Scegli qualcosa” (il nostro testo di default), “Questa cosa”, “Quella cosa” e “qualche altra cosa”.
Infine, abbiamo bisogno d’impostare un evento per il ComboBox facendo clic singolo col tasto
destro del mouse sul controllo. Scegliamo la voce Events e selezioniamo l’evento Change. Ad
ogni scelta della ComboBox, desideriamo visualizzare il testo modificato nella TextLabel. Ora,
aggiungere questo codice nell’editor del codice per l’evento ComboBox1 Change():
PUBLIC SUB ComboBox1_Change()
29
DIM comboitem AS String
comboitem = ComboBox1.Text
TextLabel1.Text = "You picked item: <center> " & comboitem
END
Per la nostra ultima scheda, la Tab4, vogliamo semplicemente visualizzare l’ora corrente. Ciò
richiede l’uso del controllo Timer. Stiamo andando ad aggiungere una Label e un controllo Timer
per la Tab4, come illustrato nella figura 19. Per permettere al timer di funzionare, dobbiamo
attivarlo prima che si avvii il Form. Doppio clic su un punto del Form che non appartenga ad
un controllo e vediamo la subroutine Form Open() nella finestra di codice. Aggiungiamo questo
codice:
Form1.Caption = " Playing with TabStrips "
Timer1.Enabled = TRUE
TextLabel1.Text = ""
END
Per utilizzare realmente il timer, è necessario impostare un evento. Facciamo clic singolo sul
controllo Timer poi tasto destro del mouse. Scegliamo la voce Events e selezioniamo l’evento
Timer. Dobbiamo aggiungere una sola riga di codice:
PUBLIC SUB Timer1_Timer()
Label1.Text = Str$(Now)
END
Questa riga di codice aggiorna il campo Label1.Text ogni secondo che viene visualizzata la Tab4.
In pratica, abbiamo creato un orologio sulla scheda. Questo è tutto per quanto riguarda l’esempio.
Eseguiamo il programma e vediamo come lavorano i TabStrips. Successivamente, passeremo alle
operazioni con i files.

Capitolo 8 - Sito Web di Emanuele Maria Latorre

Transcript

Documenti analoghi

inglese

inglese - iis bachelet

K-Lite installazione pacchetto codec Scarichiamo il pacchetto dei

Ora esatta con Windows XP

The Enchanted Island: The Libretto

Capitolo 9 Lavorare con i files

Guida rapida alla configurazione del router Linksys WRT54GL con

Corso WordPress IASF - Pegotest

lezione 29-05-13

Text 6 Social Psychology

ATTACHMENT 1 CLIL Teaching of Philosophy Planning of the Units