TutorialDesktop

2013 Release 1 Xojo, Inc.

Capitolo 1

Introduzione

Benvenuto in Xojo, lo strumento più semplice per creare applicazioni multipiattaforma per il desktop ed il web.

Questo Tutorial Desktop è dedicato a chi si avvicina alla programmazione e non conosce Xojo. È un’introduzione all’ambiente di sviluppo Xojo che ti illustrerà come realizzare una vera applicazione per desktop.

Dovresti completare la lettura di questo tutorial in un’ora circa.

Nota: Se hai esperienza con altri linguaggi di programmazione, ti consigliamo di leggere il Manuale Utente e la Guida al Linguaggio.

CopyrightTutti i contenuti sono coperti da copyright 2013 di Xojo, Inc. Tutti i diritti riservati. Sono vietate la riproduzione anche parziale di questo documento e la trasmissione in qualsiasi forma e attraverso ogni mezzo (elettronico, fotocopiatura o altro) senza la preventiva autorizzazione del detentore dei diritti.

Marchi registratiXojo è un marchio registrato di Xojo, Inc.

Questa guida cita nomi di prodotti e servizi coperti da trademark (marchio registrato). L'utilizzo di tali nomi è a semplice scopo editoriale. Inoltre i termini coperti o presumibilmente coperti da trademark sono indicati in maiuscolo, nonostante Xojo, Inc. non possa confermarne l'accuratezza. L'utilizzo di un nome coperto da trademark all'interno di questa guida non vuole ledere i diritti del

Sezione 1

AVVIO DI XOJO

1. Scarica l’installer per il tuo sistema operativo da:http://www.xojo.com/downloads

2. Avvia l’installer.

3. Avvia Xojo.

4. Nella Scelta Progetto, seleziona Desktop e clicca OK.

Informazioni sul Tutorial Desktop

2

proprietario. Xojo, Inc. non è collegata ad alcun prodotto e azienda citati in questa guida.

3

Il Tutorial utilizza screenshot delle versioni Windows, OS X e Li-nux di Xojo. L’impostazione dell’interfaccia e le funzionalità sono identiche in tutte le piattaforme, per cui sussistono solo minime differenze tra le varie piattaforme, dovute alle diverse interfacce utente in Windows, OS X, e Linux.

• Il grassetto è utilizzato per enfatizzare il primo utilizzo di un nuovo termine e per evidenziare concetti importanti. Inoltre, i titoli dei libri, come Manuale Utente Xojo, sono in corsivo.

• Quando verrà richiesto di selezionare un elemento da un me-nu, leggerete una frase come “scegliere File ↠ Nuovo Proget-to”. Questo equivale a “scegliere Nuovo Progetto dal menu Fi-le.”

• Le scorciatoie da tastiera sono una sequenza di tasti da preme-re nell’ordine illustrato. In Windows e Linux, il modificatore è il tasto Ctrl; in OS X, il modificatore è il tasto ⌘ (Command). Ad esempio, la scorciatoia “Ctrl+O” o “⌘-O” significa tenere pre-muto il tasto Control su un computer Windows o Linux e quindi premere il tasto “O” oppure tenere premuto il tasto ⌘ su OS X quindi premere il tasto “O”. Il tasto modificatore va rilasciato so-lo dopo aver premuto il tasto scorciatoia.

• Quando viene richiesto di digitare qualcosa, il testo è incluso tra doppi apici, ad esempio “GoButton”.

• In alcuni passi è richiesto l’inserimento di codice nell’Editor del Codice, evidenziato da un riquadro grigio:

ShowURL(SelectedURL.Text)

Quando si inserisce del codice, vanno osservate queste indicazio-ni:

• Ad ogni riga di codice stampata deve corrispondere una riga nell’Editor del Codice. Non cercare di accorpare due o più ri-ghe stampate nella stessa linea o dividere una riga lunga in due o più righe.

• Non aggiungere spazi quando non sono indicati nel codice stampato.

• È possibile anche copiare ed incollare il codice.

Quando l’applicazione viene avviata, Xojo analizza il codice e ri-cerca eventuali errori di sintassi. Se questa verifica rileva un erro-

Sezione 2

Convenzioni Tipografiche

4

re, apparirà un pannello sul fondo della finestra principale per la revisione degli errori.

5

Se non è già stato fatto, questo è il momento di avviare Xojo.

Fai doppio click sull’icona di Xojo per avviarlo. Terminato il caricamento, apparirà la finestra Scelta Progetto.

Xojo consente di creare tre diversi tipi di applicazione (Desktop, Web e Console). In questo Tutorial verrà realizzata un’applicazione desktop, quindi fai click su Desktop.

Apparirà la richiesta di inserimento di tre campi: Nome Applicazione, Nome Azienda e Identificativo Applicazione.Nome Applicazione è il nome della tua applicazione. Sarà anche il nome dell’eseguibile dell’applicazione che verrà creata.Nome Azienda è il nome della tua azienda. Può essere lasciato vuoto.Identificativo Applicazione è un identificativo univoco per questa applicazione. Verrà automaticamente completato utilizzando il Nome Applicazione ed il Nome Azienda, ma può essere modificato a piacimento.Digita "URLManager" come Nome Applicazione. Il Nome Azienda può essere modificato a piacimento.

Clicca OK per aprire la finestra principale di Xojo (chiamata Workspace), nella quale puoi iniziare a progettare la tua applicazione.

Sezione 3

Come iniziare

6

Figure 1.1 Scelta progetto

L’area di lavoro di Xojo appare con la finestra predefinita selezionata nel Navigator e visualizzata nell’Editor di Layout.

Navigator: L’area in alto a sinistra mostra tutti gli elementi del tuo progetto. Nell’impostazione predefinita viene presentata Window1 (selezionata), l’oggetto App e l’oggetto MainMenuBar. Puoi utilizzare il Navigator per selezionare gli elementi del tuo progetto.

Editor di Layout: L’area centrale è l’Editor di Layout. Viene utilizzato per realizzare l’interfaccia utente delle finestre dell’applicazione. Mostra un’anteprima di come appaiono le finestre quando l’applicazione viene avviata. In figura la finestra è vuota, perché non sono ancora stati aggiunti controlli dalla Libreria.

Libreria: L’area sulla destra è la Libreria e raccoglie i controlli e gli elementi dell’interfaccia che possono essere aggiunti ad una finestra o al progetto. L’interfaccia viene creata trascinando i controlli dalla Libreria alla finestra. È anche possibile aggiungere un controllo alla finestra facendo doppio click su di esso.Puoi cambiare la modalità di visualizzazione dei controlli nella

Libreria cliccando l’icona con l’ingranaggio e scegliendo una diversa impostazione.Nota: Se la Libreria non è visibile, fai click sul pulsante Libreria sulla barra degli strumenti per visualizzarla.

Inspector: L’Inspector, che permette di visualizzare e modificare le proprietà del controllo selezionato, non è mostrato in figura.

Sezione 4

Area di lavoro

7

Figure 1.2 L’area di lavoro di Xojo

Quest’area della finestra principale è condivisa con la Libreria. L’Inspector viene visualizzato cliccando il pulsante Inspector sulla barra degli strumenti. L’Inspector mostra le informazioni relative all’elemento selezionato nel Navigator o nell’Editor. Il contenuto dell’Inspector cambia quando si clicca sui diversi elementi. È possibile modificare un valore nell’Inspector digitandolo nel campo a destra dell’etichetta.

8

In questo tutorial realizzerai un’applicazione per gestire URL ed indirizzi email. Normalmente un URL comincia con “http://” per indicare l’indirizzo di una pagina web.

Un URL che inizia con “mailto:” è utilizzato per inviare una email con l’applicazione predefinita.

URL ManagerNell’applicazione URL Manager, inserisci un URL nel campo testo e clicca il bottone “Mostra” per visualizzare la pagina nel browser predefinito. Clicca il bottone “Aggiungi” per salvare l’indirizzo nella lista. Per visualizzare un indirizzo contenuto nella lista, devi selezionarlo e cliccare il bottone “Mostra”.

Per rimuovere l’indirizzo, devi selezionarlo e cliccare il bottone “Rimuovi”.

URL Manager utilizza tre tipi di controlli:

ListBox: Un controllo che contiene una lista scorrevole. Può visualizzare una o più colonne e scorre sia verticalmente che orizzontalmente.

TextField: Un controllo che contiene una singola riga di testo.

Button: Un semplice bottone. In genere è utilizzato per eseguire un’azione.

Sezione 5

Informazioni sull’Applicazione

9

Figure 1.3 Applicazione URL Manager

Capitolo 2

Disegnare l’Interfaccia UtenteOra realizzerai l’Interfaccia Utente dell’applicazione URL Manager.

Aggiungere la lista degli indirizziXojo ora dovrebbe essere avviato, con la finestra dell’Editor di Layout in primo piano. Se non vedi la finestra, torna al Capitolo 1, Sezioni 3 e 4.

Adesso dovrai aggiungere una ListBox all’interno della finestra. La ListBox è utilizzata per contenere gli indirizzi salvati.

1. Aggiungi la ListBox:Nella Libreria, clicca sull’oggetto ListBox e trascinalo sull’angolo in alto a sinistra dell’Editor di Layout.Avvicinandoti ai bordi della finestra, noterai gli indicatori di allineamento che ti aiuteranno a posizionare l’oggetto. Rilascia la ListBox nella posizione preferita.

2. Ridimensiona la ListBox:Clicca la ListBox per visualizzare gli indicatori di ridimensionamento. Trascina l’indicatore in basso a destra per allargare la lista fino ad occupare circa 2/3 della finestra.

3. Ora la finestra dovrebbe apparire come nell’immagine:

Sezione 1

Lista degli indirizzi

11

Figure 2.1 La finestra con la ListBox

Aggiungere i pulsantiOra aggiungerai i pulsanti alla finestra.

1. Aggiungi il pulsante “Rimuovi”:Nella Libreria, clicca sull’oggetto Default Button (contenuto nel gruppo Pulsanti) e trascinalo nella finestra sotto l’angolo destro della lista.Usa gli indicatori di allineamento per posizionare il pulsante in linea con il bordo della lista.

2. Aggiungi il pulsante “Aggiungi”:Nella Libreria, seleziona ancora l’oggetto Default Button e trascinalo in basso a sinistra nella finestra.Anche in questo caso, utilizza gli indicatori di allineamento per posizionare il pulsante vicino ai margini.

3. Aggiungi il pulsante “Mostra”:

Trascina l’oggetto Button nell’angolo in basso a destra della finestra.

4. Ora la tua finestra dovrebbe assomigliare alla seguente immagine:

Sezione 2

Pulsanti

12

Figure 2.2 La finestra con i pulsanti

Aggiungere il campo per gli indirizziIl campo per gli indirizzi è utilizzato dall’utente per inserire un indirizzo nella lista.

1. Nella Libreria, clicca sull’oggetto TextField e trascinalo nella finestra, posizionandolo tra il pulsante “Rimuovi” ed il pulsante “Aggiungi”.

2. Ridimensiona il campo. Seleziona l’indicatore di ridimensionamento a destra per allargare il campo fino a raggiungere le dimensioni della lista.Aiutati con gli indicatori di allineamento per allineare correttamente tutti gli oggetti.

3. Ora la tua finestra assomiglierà alla seguente immagine:

Sezione 3

Campo testo

13

Figure 2.3 La finestra con il campo per gli indirizzi

Cos’è una proprietà?Una proprietà è un valore di una classe. Modificare i valori delle proprietà consente di modificare il comportamento della classe.

Per questo progetto, dovrai modificare varie proprietà della finestra e dei suoi controlli. Alcuni dei passi da completare includono:

• Rinominare tutti i controlli (e la finestra) con nomi che descrivano il loro comportamento e a cui sia facile riferirsi nel codice.

• Aggiungere un’etichetta al controllo Button.

• Impostare le proprietà di Locking in modo che i controlli si ridimensionino correttamente quando la finestra viene ridimensionata.

InspectorL’Inspector viene utilizzato per modificare le proprietà della finestra e dei controlli. Esso condivide la stessa area della Libreria, sulla destra

della finestra principale. Per visualizzare l’Inspector, clicca il pulsante Inspector sulla barra degli strumenti o premi ⌘-I (Ctrl+I su Windows e Linux).

Sezione 4

Proprietà

14

Figure 2.4 La finestra Proprietà nell’Inspector

Se non l’hai già fatto, clicca sul pulsante Inspector nella barra degli strumenti per visualizzarlo.

Devi modificare le proprietà Nome e Titolo:

1. Nell’Editor di Layout, clicca sulla barra del titolo della finestra per selezionarla. In questo modo l’Inspector mostrerà le proprietà della finestra.

2. Nel campo Nome (che si trova nel gruppo ID), cambia il nome da “Window1” a “URLManagerWindow”. Premi Invio ed il nome verrà modificato anche nel Navigator.

3. Nel campo Titolo (che si trova nel gruppo Frame), cambia il nome da “SenzaTitolo” a “URL Manager”. Premi Invio ed

il nome verrà modificato anche nella barra del titolo della finestra.

Sezione 5

Proprietà della finestra

15

Figure 2.6 Il Nome cambiato nel Navigator

Figure 2.5 Cambiare il titolo della finestra

Figure 2.7 La finestra con il nuovo titolo

La ListBox contiene gli indirizzi salvati nell’applicazione. Puoi modificare le proprietà Nome e Locking.

Innanzitutto, nell’Editor di Layout clicca sulla ListBox per selezionarla. L’Inspector mostrerà le proprietà associate.1. Nel campo Name (all’interno del gruppo ID), cambia il nome

da “Listbox1” a “URLList”. Premi Invio per visualizzare il cambiamento nel Navigator.

2. Ora devi modificare il Locking per legare il ridimensionamento della lista a quello della finestra.Nel gruppo Locking è presente un’immagine della finestra con lucchetti chiusi in alto e a sinistra e con lucchetti aperti in basso e a destra.Clicca sui lucchetti per chiuderli tutti.

Sezione 6

Proprietà della ListBox

16

Figure 2.8 Proprietà Locking di URLList

I tre pulsanti sono utilizzati per eseguire delle azioni. Dovrai cambiare le proprietà Nome, Etichetta e Locking.

Pulsante RimuoviIl pulsante “Rimuovi” è utilizzato per rimuovere gli indirizzi dalla lista.

1. Innanzitutto, nell’Editor di Layout, clicca sul pulsante “Rimuovi” per selezionarlo (è il pulsante sotto alla lista). L’Inspector ora mostra le proprietà del pulsante.

2. Nel campo Nome dell’Inspector (all’interno del gruppo ID), cambia il nome da “PushButton1” a “DeleteButton”. Premi Invio per applicare il cambiamento nel Navigator.

3. Nel campo Etichetta (nel gruppo Aspetto), cambia il testo da “Button” a “Rimuovi”. Premi Invio per vedere applicare il cambiamento nella finestra.

4. Ora devi cambiare le proprietà di Locking in modo che il pulsante “Rimuovi” rimanga in basso a destra quando la finestra viene ridimensionata.

Nel gruppo Locking è presente un’immagine della finestra con lucchetti chiusi in alto e a sinistra e con lucchetti aperti in basso e a destra.Clicca sui lucchetti per aprire quelli in alto e a sinistra e chiudere quelli in basso e a destra.

Pulsante AggiungiIl pulsante “Aggiungi” è utilizzato per aggiungere l’indirizzo contenuto nel campo testo alla lista.

1. Nell’Editor di Layout clicca sul pulsante “Aggiungi” per selezionarlo (è il pulsante in basso a sinistra). L’Inspector ora mostra le proprietà del pulsante.

2. Nel campo Nome dell’Inspector (all’interno del gruppo ID), cambia il nome da “PushButton1” a “AddButton”. Premi Invio per applicare il cambiamento nel Navigator.

Sezione 7

Proprietà dei pulsanti

17

Figure 2.9 Locking del DeleteButton

3. Nel campo Etichetta (nel gruppo Aspetto), cambia il testo da “Button” a “Aggiungi”. Premi Invio per vedere applicare il cambiamento nella finestra.

4. Ora devi cambiare le proprietà di Locking in modo che il pulsante “Aggiungi” rimanga in basso a sinistra quando la finestra viene ridimensionata.Nel gruppo Locking è presente un’immagine della finestra con lucchetti chiusi in alto e a sinistra e con lucchetti aperti in basso e a destra.Clicca sui lucchetti per aprire quelli in alto e a destra e chiudere quelli in basso e a sinistra.

Pulsante MostraIl pulsante “Mostra” è utilizzato per aprire l’indirizzo indicato con il browser predefinito.

1. Innanzitutto, nell’Editor di Layout, clicca sul pulsate “Mostra” per selezionarlo (è il bottone in basso a destra). L’Inspector ora mostra le proprietà del pulsante.

2. Nel campo Nome dell’Inspector (all’interno del gruppo ID), cambia il nome da “PushButton1” a “ShowButton”. Premi Invio per applicare il cambiamento nel Navigator.

3. Nel campo Etichetta (nel gruppo Aspetto), cambia il nome da “OK” a “Mostra”. Premi Invio per vedere applicare il cambiamento nella finestra.

4. Ora devi cambiare le proprietà di Locking in modo che il pulsante “Mostra” rimanga in basso a destra quando la finestra viene ridimensionata.Nel gruppo Locking è presente un’immagine della finestra con lucchetti chiusi in alto e a sinistra e con lucchetti aperti in basso e a destra.Clicca sui lucchetti per aprire quelli in alto e a sinistra e chiudere quelli in basso e a destra.

18

Figure 2.10 Locking dell’AddButton

Figure 2.11 Locking di ShowButton

Il TextField è utilizzato per scrivere l’indirizzo da aggiungere alla lista. Inoltre visualizza l’indirizzo selezionato nella lista. Dovrai cambiare le proprietà Nome e Locking.

1. Innanzitutto, nell’Editor di Layout clicca sul TextField per selezionarlo. L’Inspector mostrerà le proprietà associate.

2. Nel campo Nome (nel gruppo ID), cambia il nome da “TextField1” a “URLField”. Premi Invio per visualizzare il cambiamento nel Navigator.

3. Ora devi modificare il Locking per legare il ridimensionamento del campo a quello della finestra.Nel gruppo Locking è presente un’immagine della finestra con lucchetti chiusi in alto e a sinistra e con lucchetti aperti in basso e a destra.Clicca sui lucchetti per chiuderli tutti.

Sezione 8

Proprietà del TextField

19

Figure 2.12 Locking di URLField

Salvare il progettoDovresti salvare periodicamente il tuo progetto e sempre prima di avviare l’applicazione.

1. Salva il progetto scegliendo File ↠ Salva.

2. Chiama il progetto “QuickStartDesktop” e clicca Salva.

Avvia l’applicazioneOra puoi testare la tua applicazione:

L’interfaccia utente è ora completa perciò è il momento di testarla. Clicca sul pulsante Avvia nella barra degli strumenti.

Quando l’applicazione URL Manager comparirà, potrai interagire con i pulsanti e gli altri controlli. Inoltre potrai ridimensionare la finestra per verificare il riposizionamento dei vari controlli.

L’applicazione non fa ancora niente. Dovrai prima aggiungere del codice, argomento affrontato nel prossimo capitolo.

Sezione 9

Testare il progetto

20

Figure 2.13 Il layout completato

Capitolo 3

Aggiungere il codice

L’ultimo passo della creazione dell’applicazione URL Manager è l’aggiunta del codice.

Aggiungere il codice al pulsante MostraIl primo controllo da modificare è il pulsante “Mostra”. Quando l’utente clicca il pulsante, il browser predefinito deve visualizzare l’indirizzo contenuto nel campo testo.

Segui i seguenti passi per aggiungere il codice:

1. Nella finestra, fai doppio-click sul controllo ShowButton, chiamato “Mostra”.La finestra di dialogo Aggiungi Gestore Evento apparirà.

Quando un utente cliccherà un PushButton, verrà eseguito il codice scritto all’interno del gestore dell’evento Action.Ciò significa che devi scrivere il codice all’interno di Action, perciò selezionalo dalla lista e clicca OK.Noterai che il Navigator si aggiornerà mostrando l’evento Action all’interno del controllo.

2. Il comando per aprire un indirizzo con il browser predefinito è ShowURL. Per testare il pulsante, scrivi il codice:

ShowURL(“http://www.xojo.com”)

ShowURL è un metodo globale perché non appartiene a nessun oggetto. Può essere invocato in qualsiasi punto dell’applicazione.

3. Avvia l’applicazione e clicca sul pulsante “Mostra”. Il browser predefinito si aprirà visualizzando l’home page di Xojo. Non è

Sezione 1

Il pulsante Mostra

22

Figure 3.1 Finestra di dialogo Aggiungi Gestore Evento

Figure 3.2 Evento Action di ShowButton

particolarmente utile, perciò dovrai modificare il codice per aprire l’indirizzo visualizzato nel campo testo. Chiudi l’applicazione e torna allo spazio di lavoro (seleziona File ↠

Esci su Windows o Linux o URLManager.debug ↠ Esci su OS X).

4. Ritorna nell’Editor del Codice dell’evento Action di ShowButton e cancella il codice precedentemente inserito.Ora devi recuperare l’indirizzo contenuto nel campo testo. Penserai di poter recuperare l’indirizzo semplicemente riferendoti al nome del campo, URLField. Hai quasi indovinato!Ciò di cui invece hai bisogno è una proprietà del campo URLField. Quando devi utilizzare una proprietà di un oggetto, è sufficiente scrivere il nome dell’oggetto, seguito da un punto, seguito dal nome della proprietà. In altre parole, viene utilizzata la sintassi NomeOggetto.NomeProprietà. Questa è chiamata “dot notation” ed è molto utilizzata nella programmazione orientata agli oggetti.Nel nostro caso l’oggetto è URLField e la proprietà è Text (usa la Guida al Linguaggio per scoprire tutte le proprietà di un oggetto TextField).Ora potrai aggiungere il codice:

ShowURL(URLField.Text)

(Se non riesci a scrivere il codice, assicurati di aver chiuso l’applicazione di test)

5. Salva il progetto con File ↠ Salva.

6. Avvia l’applicazione e scrivi un indirizzo nel campo testo. Scrivi qualcosa di diverso, come “http://www.xojoblog.com”, e clicca sul pulsante “Show”.Il tuo browser predefinito dovrebbe aprire la pagina web indicata.Chiudi l’applicazione per tornare all’Editor (scegli File ↠ Esci su

Windows o Linux o URLManager.debug ↠ Esci su OS X).

23

Aggiungere il codice al pulsante AggiungiIl pulsante “Aggiungi” aggiunge gli indirizzi alla lista. Il codice dovrà recuperare l’indirizzo nel campo testo ed aggiungerlo come nuova riga nella lista.

Segui i seguenti passi per aggiungere il codice:

1. Nella finestra, fai doppio-click sul controllo AddButton, chiamato “Aggiungi”.La finestra Aggiungi Gestore Evento apparirà. Come precedentemente descritto dovrai aggiungere il codice all’evento Action per eseguirlo al click del bottone.Seleziona Action dalla lista e clicca su OK.Noterai che il Navigator si aggiornerà mostrando l’evento Action all’interno del controllo.

2. Per aggiungere una riga alla lista, devi utilizzare il metodo AddRow. Sai già come recuperare il testo nel campo.

Combina il codice per ottenere:

URLList.AddRow(URLField.Text)

Come hai imparato, gli oggetti hanno alcune proprietà. Hanno anche alcuni metodi, come abbiamo appena visto. AddRow è uno dei molti metodi dell’oggetto ListBox.

3. Salva il progetto con File ↠ Salva.

4. Avvia l’applicazione per testarla. Scrivi l’indirizzo nel campo e clicca sul bottone “Aggiungi” per aggiungerlo alla lista.Chiudi l’applicazione per tornare all’Editor (scegli File ↠ Esci

su Windows o Linux o URLManager.debug ↠ Esci su OS X).

Sezione 2

Il pulsante Aggiungi

24

Figure 3.3 Evento Action per AddButton

Aggiungere il codice al pulsante RimuoviIl pulsante “Rimuovi” è utilizzato per rimuovere gli indirizzi dalla lista. Il codice che aggiungerai al pulsante dovrà individuare la riga selezionata e rimuoverla.

Segui i seguenti passi per aggiungere il codice:

1. Nella finestra, fai doppio-click sul controllo DeleteButton, chiamato “Rimuovi”.Apparirà la finestra Aggiungi Gestore Evento. Come hai già visto, dovrai utilizzare l’evento Action per eseguire il codice al click del pulsante.Seleziona Action dalla lista e clicca OK.Noterai che il Navigator si aggiornerà mostrando l’evento Action all’interno del controllo.

2. Per rimuovere una riga dalla lista, dovrai prima determinare se e quale riga è selezionata.Nella ListBox, la riga selezionata è contenuta nella proprietà ListIndex.

3. Usa il metodo RemoveRow per rimuovere una riga dalla ListBox. Devi passare il numero di riga come parametro a RemoveRow. Il codice sarà perciò:

URLList.RemoveRow(URLList.ListIndex)

4. Salva il progetto con File ↠ Salva.

5. Avvia l’applicazione per testarla. Scrivi un indirizzo nel campo testo ed aggiungilo alla lista con il pulsante “Aggiungi”.Ora seleziona l’indirizzo nella lista e clicca sul pulsante “Rimuovi”. L’indirizzo verrà rimosso.C’è però un bug nella tua applicazione. Cosa succede se l’utente clicca sul bottone “Rimuovi” senza alcuna riga selezionata? Prova. La tua applicazione tornerà all’Editor evidenziando una riga di codice. Il codice è andato in crash a causa di un’eccezione OutOfBoundsException e ora sei nel debugger.L’errore è accaduto perché hai tentato di rimuovere una riga

Sezione 3

Il pulsante Rimuovi

25

che non esiste.

Quando nessuna riga è selezionata, la proprietà ListIndex contiene il valore -1. Se clicchi sul bottone “Riprendi” nella barra degli strumenti del debugger, vedrai il messaggio d’errore.

6. Chiudi l’applicazione per tornare all’editor (scegli File ↠ Esci su

Windows o Linux o URLManager.debug ↠ Esci su OS X)

7. Ora dovrai modificare il codice per prevenire l’errore. Dovrai, in pratica, chiamare il metodo RemoveRow solo se una riga è selezionata.Il codice sarà:

If URLList.ListIndex >= 0 Then

URLList.RemoveRow(URLList.ListIndex)

End If

Il codice verifica che una riga sia selezionata controllando che la proprietà ListIndex contenga un valore valido. In caso positivo, la riga viene rimossa.

8. Salva il progetto con File ↠ Salva.

9. Avvia nuovamente l’applicazione e clicca il pulsante “Rimuovi” senza alcuna riga selezionata. Nessun crash!

26

Figure 3.5 Un errore a runtime nel Debugger

Figure 3.4 Messaggio d’errore a runtime

Aggiungere il codice alla ListBoxL’ultimo controllo da modificare è la ListBox. Tutti gli indirizzi aggiunti sono elencati nella ListBox. Quando un utente clicca su un indirizzo, l’applicazione deve mostrarlo nel campo testo.

Segui questi passi per aggiungere il codice:

1. Nella finestra, fai doppio-click sul controllo URLList.La finestra Aggiungi Gestore Evento apparirà con una diversa lista di eventi (rispetto a ciò che hai visto con i pulsanti). Dovrai aggiornare l’indirizzo contenuto nel campo testo quando un utente clicca su una riga. L’evento Change gestisce la selezione di una nuova riga.Seleziona Change dalla lista e clicca OK.Noterai che il Navigator si aggiornerà mostrando l’evento Change all’interno del controllo.

2. Il testo della riga selezionata è contenuto nella proprietà Text della ListBox. Sai già che la proprietà TextField.Text contiene ciò che l’utente scrive nel campo testo. Puoi anche assegnare un valore a questa proprietà attraverso il codice.

Il codice sarà perciò:

URLField.Text = Me.Text

Nota che stai utilizzando Me.Text per recuperare il valore della riga selezionata nella Listbox. Avresti potuto utilizzare anche URLList.Text. Perché questa differenza?Sei all’interno del gestore degli eventi della ListBox, perciò puoi riferirti ai metodi e alle proprietà del controllo stesso

Sezione 4

La ListBox

27

Figure 3.6 Aggiunta dell’evento Change

utilizzando Me. Questo ti permette di cambiare il nome del controllo ListBox senza dover cambiare il nome all’interno di tutto il codice contenuto.

Salva il progetto con File ↠ Salva.

Avvia l’applicazione per testarla. Scrivi un indirizzo nel campo testo e clicca sul pulsante “Aggiungi” per aggiungerlo alla lista. Dopo aver popolato la lista con alcuni indirizzi, clicca su di loro per cambiare l’indirizzo contenuto nel campo testo.

Chiudi l’applicazione per tornare all’Editor (scegli File ↠ Esci su

Windows o Linux o URLManager.debug ↠ Esci su OS X).

Abbiamo finito. La tua applicazione è ora completa.

28

Figure 3.7 URL Manager su Windows

Capitolo 4

Prossimi passi

Ora che hai completato l’applicazione, è il momento di testarla ed aggiungere alcuni miglioramenti.

Continua a testareSolo perché hai finito di scrivere il codice, ciò non significa che tu abbia terminato il lavoro. Un bravo programmatore testa approfonditamente le proprie applicazioni alla ricerca di problemi.

Hai già scovato e corretto un problema (utilizzo del pulsante “Rimuovi” quando nessuna riga è selezionata). Pensi ci siano altri problemi da risolvere?

Avvia l’applicazione e “giocaci” un po’. Annota tutte le modifiche che vuoi fare. Nella prossima sezione, vedremo quali migliorie apportare a URL Manager.

Sezione 1

Testare URL Manager

30

Utilizzo dei pulsantiHai notato che in alcuni casi i pulsanti dovrebbero essere disabilitati per non eseguire alcuna azione? Per esempio, il bottone “Mostra” non dovrebbe tentare di aprire un indirizzo se il campo testo è vuoto. Inoltre il pulsante “Aggiungi” non dovrebbe aggiungere un testo vuoto alla lista.

Ci sono vari modi per apportare queste migliorie, il più semplice è disabilitare i pulsanti quando non sono utilizzabili.

Segui questi passi per migliorare l’applicazione:

1. Nella finestra, seleziona ShowButton, chiamato “Mostra”.Nell’Inspector, disabilita la proprietà Abilitato (nel gruppo Aspetto).

2. Fai la stessa cosa per il pulsante “Aggiungi”.

3. Ora devi aggiungere il codice per abilitare i pulsanti quando il campo testo contiene un indirizzo.

Nella finestra, fai doppio-click sul controllo URLField.Apparirà la finestra Aggiungi Gestore Evento con una nuova lista di eventi. Ogni controllo ha la propria lista. Nel nostro caso, vogliamo disabilitare AddButton e ShowButton quando

non c’è alcun indirizzo nel campo testo. L’evento TextChange è chiamato quando viene modificato il contenuto del campo

Sezione 2

Miglioramenti

31

Figure 4.1 Proprietà Abilitato

Figure 4.2 Gestori Evento del campo testo

testo, sia dall’utente tramite la tastiera sia automaticamente dall’applicazione tramite la proprietà Testo.Seleziona TextChange dalla lista e clicca su OK.Noterai che il Navigator si aggiornerà mostrando l’evento Change sotto il controllo URLField e verrà visualizzato l’Editor del Codice.

4. Il codice da aggiungere sarà:

If Me.Text <> “” Then ShowButton.Enabled = True AddButton.Enabled = TrueElse ShowButton.Enabled = False AddButton.Enabled = FalseEnd If

Questo codice verifica il contenuto della proprietà Testo del campo testo (Me.Text). Se il campo contiene del testo, sia ShowButton che AddButton verranno abilitati assegnando il valore True alla proprietà Enabled. Nel caso in cui il campo non contenga testo, entrambi i pulsanti verranno disabilitati assegnando il valore False alla proprietà Enabled.

5. Salva il progetto con File ↠ Salva.

Avvia l’applicazione per testarla. Nota che i pulsanti Aggiungi e Mostra sono disabilitati all’avvio. Inserisci un indirizzo nel campo testo ed i pulsanti verranno abilitati. Rimuovi il testo ed i pulsanti saranno nuovamente disabilitati.

32

Condividere la tua applicazioneOra che hai realizzato questa fantastica applicazione, vorrai probabilmente condividerla con il mondo. Per fare ciò devi compilarla.

Xojo ti permette di creare applicazioni per OS X, Windows e Linux. La prima cosa da fare è decidere per quale piattaforma vuoi compilare. Puoi impostare la piattaforma nella sezione BUILD del Navigator.

Spunta le piattaforme preferite. “Questo Computer” è spuntato all’avvio, per permetterti di compilare per la piattaforma che stai utilizzando.

Preferenze Comuni contiene le preferenze condivise tra le piattaforme. Per le preferenze specifiche, seleziona una piattaforma.

Preferenze ComuniLa sezione Preferenze Comuni contiene le informazioni sulla versione, le impostazioni relative alla cartella di compilazione ed alle funzioni (per il debugging).

Sezione 3

Realizzare un’applicazione standalone

33

Figure 4.3 Preferenze di compilazione

OS XLe impostazioni per OS X permettono di specificare il nome dell’applicazione per Mac, l’architettura (Carbon o Cocoa), Codice Creatore, Tipi File e Identificatore del Bundle.

WindowsLe impostazioni per Windows permettono di specificare il nome dell’applicazione per Windows, l’azienda, Nome Prodotto e Nome Interno (che compaiono nei dettagli del file), l’utilizzo di MDI (Multiple Document Interface) e l’eventuale titolo. Infine puoi abilitare l’utilizzo di GDI Plus (enhanced Graphics Device Interface).

34

Figure 4.4 Preferenze compilazione OS X

Figure 4.5 Preferenze compilazione Windows

LinuxLe impostazioni per Linux permettono solamente di cambiare il nome dell’applicazione.

Questo ComputerLa sezione Questo Computer mostra le impostazioni per la piattaforma attualmente utilizzata.

Compila la tua applicazioneUna volta scelte le piattaforme ed impostate le preferenze di compilazione, sei pronto per compilare la tua applicazione. Clicca quindi sul bottone Compila nella barra degli strumenti (o scegli Progetto ↠ Compila Applicazione dal menu). Xojo creerà un’applicazione standalone per ogni piattaforma scelta.

Testare l’applicazione compilataNella cartella contenente i tuo progetto troverai una cartella chiamata “Compilati - TutorialDesktop.rbp” al cui interno è presente una cartella per ogni piattaforma scelta.

Fai doppio-click sull’applicazione compilata per avviarla.

35

CongratulazioniHai completato il Tutorial Desktop e hai creato un’applicazione perfettamente funzionante.

Per continuare il tuo viaggio alla scoperta di Xojo, ti consigliamo di leggere la Guida Utente, che illustra Xojo nei minimi dettagli.

Ti consigliamo inoltre di leggere la Guida al Linguaggio, che descrive specificatamente il linguaggio, le classi ed altri dettagli di Xojo.

Sezione 4

Finito!

36