TutorialWeb

2013 Release 1 Xojo, Inc.

Capitolo 1

Introduzione

Questo tutorial ti mostrerà come realizzare una applicazione web.

Questo Tutorial Web è 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 Web e clicca OK.

Informazioni sul Tutorial Web

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

Task ManagerIn questo tutorial creerai un’applicazione per la gestione delle attività come indicato in figura.

Scrivi un’attività nel campo testo e clicca su Aggiungi per inserirla nella lista. Selezionando un’attività nella lista è possibile rimuoverla o segnarla come completata.

Task Manager utilizza tre controlli:

WebTextField: Un controllo WebTextField è utilizzato per scrivere del testo. In questo progetto l’attività viene digitata nella WebTextField nella parte inferiore della finestra.

WebButton: Un WebButton viene utilizzato per attivare un'azione. Questo progetto utilizza diversi pulsanti per eseguire diverse azioni.

WebListBox: Una WebListBox è utilizzata per visualizzare un elenco di voci. In questo progetto, il controllo visualizza il testo contenuto nel TextField.

Le prossime sezioni ti guideranno nella creazione dell’interfaccia utente e nell’aggiunta del codice necessario al funzionamento dell’applicazione.

Sezione 5

Informazioni sull’Applicazione

9

Figure 1.3 Applicazione Web Task Manager

Capitolo 2

Progettare l’Interfaccia UtenteOra progetterai l’interfaccia utente dell’applicazione web Task Manager.

Aggiungere la lista delle attivitàXojo 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 pagina web. La ListBox è utilizzata per contenere le attività.

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 pagina web, 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 pagina web.

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

Sezione 1

Lista delle Attività

11

Figure 2.1 Controllo ListBox

Figure 2.2 La pagina web con la ListBox

Aggiungere i pulsantiOra aggiungerai i pulsanti alla pagina web.

Il pulsante Rimuovi elimina le attività dalla Listbox, il pulsante Aggiungi le inserisce nella Listbox mentre il pulsante Completato le indica come completate.

1. Aggiungi il bottone Rimuovi:Nella Libreria, seleziona il controllo Button e trascinalo nella pagina web sotto l’angolo inferiore destro della Listbox.Usa gli indicatori di allineamento per posizionare il pulsante in linea con il bordo della lista.

2. Aggiungi il pulsante Aggiungi:Nella Libreria, seleziona il controllo Button e trascinalo

nell’angolo inferiore sinistro della pagina web.Anche in questo caso, utilizza gli indicatori di allineamento per posizionare il pulsante vicino ai margini.

3. Aggiungi il pulsante Completato:Nella Libreria, seleziona il controllo Button e trascinalo nell’angolo inferiore destro della pagina web.

4. Ora la tua pagina web dovrebbe assomigliare all’immagine a fianco.

Sezione 2

Pulsanti

12

Figure 2.3 Controllo Button Figure 2.4 La pagina web con i pulsanti

Aggiungere il campo testoIl campo testo è utilizzato dall’utente per inserire le proprie attività.

1. Nella Libreria, clicca sull’oggetto TextField e trascinalo nella pagina web, 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 pagina web assomiglierà alla seguente immagine.

Sezione 3

Campo testo

13

Figure 2.5 Controllo TextField

Figure 2.6 La pagina web completata

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 pagina web) con nomi che descrivano il loro comportamento e a cui sia facile riferirsi nel codice.

• Aggiungere un’etichetta ai pulsanti.

• 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.7 Le proprietà della pagina web 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 della pagina web:

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

2. Nel campo Nome (che si trova nel gruppo ID), cambia il nome da “WebPage1” a “TaskManagerPage”. 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 “Task Manager”. Premi Invio ed il nome verrà modificato anche nella barra del titolo della pagina web.

Sezione 5

Proprietà della pagina web

15

Figure 2.8 Il nome modificato nel Navigator

Figure 2.9 La pagina web con il titolo modificato

La ListBox contiene le attività inserite dall’utente. Ora cambieremo le seguenti proprietà: Nome, ColumnCount, Valore Predefinito, ColumnWidths e Locking.

1. Innanzitutto, Nell’Editor di Layout, clicca sulla Listbox per selezionarla. L’Inspector ora mostra le proprietà della ListBox.

2. Nel campo Nome (al’interno del gruppo ID), modifica il nome da “Listbox1” a “TaskList”. Premi Invio per cambiare il nome nel Navigatore.

3. La Listbox deve avere due colonne, una per mostrare lo stato di completamento ed una per il nome dell’attività. Nel campo ColumnCount, cambia il valore da “1” a “2”. Premi Invio per applicare il cambiamento.

4. Ora cambia il titolo delle colonne della lista. Clicca sul bottone “Imposta il valore predefinito di TaskList...” nella barra degli

strumenti dell’Editor di Layout ( ). La finestra di Modifica dei Valore apparirà.

a. Fai doppio-click su “Column 1” nell’editor per modificare il valore. Scrivi “Completato” e premi Invio.

b. Fai doppo-click sul titolo (vuoto) della seconda colonna per modificare il valore. Scrivi “Attività” e premi Invio.

Sezione 6

Proprietà della ListBox

16

Figure 2.10 Valori predefiniti di TaskList

c. Clicca nuovamente sul bottone “Imposta il valore predefinito di TaskList...” per chiudere la finestra ed applicare le modifiche.

5. Poiché la colonna Completato conterrà una semplice spunta, possiamo stringerne la larghezza. Nel campo ColumnWidths, cambia il valore da “*” a “100,*”. Premio Invio per applicare le modifiche.L’utilizzo di “100,*” indica che la prima colonna della Listbox sarà sempre larga 100 pixel, mentre la seconda si adatterà alla larghezza della pagina.

6. Infine devi modificare le proprietà di Locking per adattarne le dimensioni al ridimensionamento della pagina.Nel gruppo Locking è presente un’immagine della pagina con lucchetti chiusi in alto e a sinistra e con lucchetti aperti in basso e a destra.Clicca sui lucchetti per chiuderli tutti.

17

Figure 2.11 Locking di TaskList

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

Pulsante RimuoviIl pulsante Rimuovi è utilizzato per rimuovere le attività 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 “Button1” 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 pagina web.

4. Ora devi cambiare le proprietà di Locking in modo che il pulsante Rimuovi rimanga in basso a destra quando la pagina viene ridimensionata.Nel gruppo Locking è presente un’immagine della pagina 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’attività 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 “Button2” a “AddButton”. Premi Invio per applicare il cambiamento nel Navigator.

Sezione 7

Proprietà dei puslanti

18

Figure 2.12 Locking di DeleteButton

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

4. Ora devi cambiare le proprietà di Locking in modo che il pulsante “Aggiungi” rimanga in basso a sinistra quando la pagina viene ridimensionata.Nel gruppo Locking è presente un’immagine della pagina 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 CompletatoThe Complete button is used to mark a task as completed.

1. Innanzitutto, nell’Editor di Layout, clicca sul pulsate Completato 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 “Button3” a “CompleteButton”. Premi Invio per applicare il cambiamento nel Navigator.

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

4. Ora devi cambiare le proprietà di Locking in modo che il pulsante Completato rimanga in basso a destra quando la finestra viene ridimensionata.Nel gruppo Locking è presente un’immagine della pagina 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.

Nella Lista Progetto, I controlli rinominati sono mostrati sotto la voce Controlli di TaskManagerPage.

La pagina web ora assomiglierà all’immagine seguente.

19

Figure 2.13 Locking di AddButton

Figure 2.15 Locking di CompleteButton

Figure 2.14 I controlli nel Navigator

20

Figure 2.16 La pagina web con le etichette rinominate

Il TextField è utilizzato per scrivere l’indirizzo da aggiungere alla 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 “TaskField”. Premi Invio per visualizzare il cambiamento nel Navigator.

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

Sezione 8

Proprietà del TextField

21

Figure 2.17 Locking di TaskField

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 “TutorialWeb” 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 Task 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.

Chiudi la finestra o la scheda del browser per tornare all’Editor di Layout.

Sezione 9

Testare il progetto

22

Figure 2.18 Il layout completo di Task Manager

Capitolo 3

Aggiungere il codice

L’ultimo passo della creazione della tua applicazione è l’aggiunta del codice.

Aggiungere il codice al pulsante AggiungiIl pulsante Aggiungi inserisce l’attività nella lista. Il codice dovrà recuperare l’attività scritta nel campo testo ed aggiungerla 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 di dialogo Aggiungi Gestore Evento apparirà. Quando un utente cliccherà su un pulsante, 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 su OK.

Noterai che il Navigator si aggiornerà mostrando l’evento Action all’interno del controllo.

2. Ora devi recuperare il testo contenuto nel campo testo. Penserai di poter recuperare l’indirizzo semplicemente

riferendoti al nome del campo, TaskField. Hai quasi indovinato!Ciò di cui invece hai bisogno è una proprietà del campo TaskField. 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 è TaskField e la proprietà è Text (usa la Guida al Linguaggio per scoprire tutte le proprietà di un

Sezione 1

Il pulsante Aggiungi

24

Figure 3.2 Gestore evento Action

Figure 3.1 La finestra eventi

TextField).La sintassi sarà:

TaskField.Text

3. Per aggiungere una riga alla lista, devi utilizzare il metodo AddRow. Sai già come recuperare il testo nel campo come descritto nel punto 2. Combina il codice per ottenere:

TaskList.AddRow(“”, TaskField.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.Il comando indicato precedentemente inserisce i valori nelle due colonne della TaskList. La prima colonna contiene lo stato di completamente ed è inizialmente vuota. La seconda colonna contiene l’attività.

4. Salva il progetto con File ↠ Salva.

5. Avvia l’applicazione per testarla. Scrivi l’attività nel campo e clicca sul bottone Aggiungi per aggiungerla alla lista.Chiudi l’applicazione per tornare all’Editor

25

Aggiungere il codice al pulsante CompletatoQuando l’utente clicca sul pulsante Completato, l’attività seleziona nella Listbox viene indicata come completata tramite una spunta (✓) nella colonna Completato.

Follow these steps to add the code:

1. Nella pagina web, fai doppio-click sul controllo CompleteButton, chiamato “Completato”.La finestra di dialogo Aggiungi Gestore Evento apparirà. Quando un utente cliccherà su un pulsante, 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 su OK.Noterai che il Navigator si aggiornerà mostrando l’evento Action all’interno del controllo.

2. Per modificare una riga, dovrai prima determinare quale riga è

selezionata.Nella ListBox, la riga selezionata è contenuta nella proprietà ListIndex.

3. Per impostare il valore di una cella della Listbox utilizza la proprietà Cell specificando riga e colonna. Il codice sarà:

TaskList.Cell(TaskList.ListIndex, 0) = "✓"

Questo codice inserisce il carattere di spunta nella colonna 0 (Completato) della riga selezionata.

4. Avvia l’applicazione ed inserisci alcune attività. Ora seleziona un’attività e clicca sul pulsante Completato. La spunta apparirà nella colonna Completato.Chiudi l’applicazione per tornare all’Editor.

Sezione 2

Il pulsante Completato

26

Figure 3.3 The Action Event Handler

Aggiungere il codice al pulsante RimuoviIl pulsante Rimuovi è utilizzato per rimuovere le attività 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 su OK.Noterai che il Navigator si aggiornerà mostrando l’evento Action all’interno del controllo.

2. Poiché verrà rimossa la riga selezionata, utilizzerai nuovamente la 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ò:

TaskList.RemoveRow(TaskList.ListIndex)

4. Salva il progetto con File ↠ Salva.

5. Avvia l’applicazione ad aggiungi alcune attività. Ora seleziona un’attività e prova a rimuoverla con il pulsante Rimuovi. L’attività verrà rimossa dalla lista.

Sezione 3

Il pulsante Rimuovi

27

Scovare i bugSebbene la tua applicazione funzioni abbastanza bene, ci sono un paio di bug da risolvere. Un bug è presente quanto il codice esegue inaspettatamente un’azione, spesso causando un crash. Hai già capito dov’è il problema?

Ecco un suggerimento: cosa succede se clicchi sul pulsante Completato o Rimuovi senza alcuna attività selezionata? Prova.

1. Avvia l’applicazione e clicca subito sul pulsante Completato.

La tua applicazione mostrerà il debugger con una linea di codice evidenziata. Il tuo codice è andato in crash a causa di un OutOfBoundsException ed ora sei nel debugger.

L’errore è avvenuto perché hai tentato di rimuovere (o completare) una riga che non esiste. Quando nessuna riga è selezionata nella Listbox, la proprietà ListIndex ritorna -1. Poiché non è una riga valida della Listbox, il metodo Cell solleva un’eccezione di tipo OutOfBoundsException.

2. Clicca sul pulsante Continua nella barra degli strumenti del debugger per visualizzare l’errore.

3. Chiudi il browser e torna all’Editor.

Sezione 4

Debugging

28

Figure 3.4 Il Debugger si blocca evidenziando la riga che ha generato l’errore

Figure 3.5 L’errore indicato nel browser

Nessuno vuole un’applicazione malfunzionante. Fortunatamente è molto semplice prevenire questo errore. Basta verificare che una riga sia selezionata prima di rimuovere o completare un’attività.

1. Conosci già il codice da utilizzare.Ecco il codice dell’evento Action di DeleteButton:

If TaskList.ListIndex >= 0 Then TaskList.RemoveRow(TaskList.ListIndex) End If

2. Il codice per il pulsante Completato è simile:

If TaskList.ListIndex >= 0 Then TaskList.Cell(TaskList.ListIndex, 0) = "✓" End If

3. In entrambi i casi, il codice verifica che una riga sia selezionata controllando che la proprietà ListIndex contenga una riga valida prima di passare all’istruzione successiva.

4. Salva il progetto con File ↠ Salva.

5. Avvia l’applicazione e clicca subito sul pulsante Completato. Nessun crash!

29

Capitolo 4

Prossimi passi

Pensavi di aver finito? Non ancora.

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” o “Completato” 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 Task Manager.

Sezione 1

Testare Task Manager

31

Utilizzo dei pulsantiHai notato che ci sono situazioni in cui i pulsanti di Task Manager non vengono utilizzati? Per esempio, il pulsante Completato non deve segnare un’attività come completata quando nessuna è selezionata. Al momento, puoi cliccare sul pulsante ma non succede niente. Inoltre il pulsante Aggiungi non dovrebbe aggiungere niente alla lista nel caso in cui non ci sia un’attività nel campo testo.

Ci sono vari modi per migliorare l’applicazione, uno di questi è disabilitare il bottone nel caso non debba essere utilizzato.

Segui i passi seguenti per aggiungere questi miglioramenti:

1. Nella pagina web, seleziona CompleteButton, chiamato “Completato”. nell’Inspector, disabilita la proprietà Abilitato (nel gruppo Aspetto).

2. Seleziona AddButton, chiamato “Aggiungi”. Nel’Inspector disabilita la proprietà Abilitato.

3. Seleziona DeleteButton, chiamato “Rimuovi”. Nel’Inspector disabilita la proprietà Abilitato.

4. Ora dovrai aggiungere il codice per abilitare il bottone Aggiungi quando un’attività viene inserita nel campo testo.Nella pagina web, fai doppio-click sul controllo TaskField.Apparirà la finestra Aggiungi Gestore Evento con una lista diversa di eventi. Ogni controllo ha una propria

Sezione 2

Miglioramenti

32

Figure 4.1 Proprietà Abilitato di CompleteButton nell’Inspector

Figure 4.2 Event Handlers for Text Field

specifica lista di eventi. Nel nostro caso, vogliamo abilitare AddButton quando un’attività viene inserita nel campo testo e disabilitarlo quando il campo è vuoto. L’evento TextChanged è chiamato quando il testo all’interno del campo viene modificato dall’utente o dal codice attraverso la proprietà Text.Seleziona TextChanged dalla lista e clicca su OK.Noterai che il Navigator si aggiornerà mostrando l’evento TextChanged all’interno del controllo.

5. Aggiungi il codice:

If Me.Text <> “” Then AddButton.Enabled = True Else AddButton.Enabled = False End If

Questo codice verifica il contenuto della proprietà Text del TextField (Me.Text). In caso sia contenuto del testo, il pulsante AddButton viene abilitato impostato la proprietà Enabled a True. Se il campo è vuoto, la proprietà Enabled è impostata a False.

6. Hai già aggiunto il codice nel Capitolo 3, Sezione 4 per eseguire il codice associato ai pulsanti Rimuovi e Completato solo in caso una riga sia selezionata nella lista. Ora devi

abilitare o disabilitare i bottoni in caso una riga sia o non sia selezionata. Utilizzerai la proprietà ListIndex della Listbox.

7. Fai doppio-click sul controllo TaskList.Apparirà la finestra Aggiungi Gestore Evento. L’evento SelectionChanged è chiamato quando la seleziona di una riga della lista cambia.Seleziona SelectionChanged dalla lista e clicca su OK.

8. Aggiungi il codice:

If Me.ListIndex >= 0 Then DeleteButton.Enabled = True CompleteButton.Enabled = True Else DeleteButton.Enabled = False CompleteButton.Enabled = False End If

9. Salva il progetto con File ↠ Salva.

10. Avvia l’applicazione per testarla. All’avvio il pulsante Aggiungi è disabilitato. Se scrivi un’attività nel campo testo il pulsante viene abilitato. Se cancelli il testo, il pulsante viene disabilitato.Allo stesso modo, quando selezioni un’attività dalla lista, i bottoni Rimuovi e Completati vengono abilitati.

33

Condividi la tua applicazioneOra che hai creato questa bella applicazione, probabilmente vuoi condividerla con il mondo. Sebbene tu possa avviarla localmente ed utilizzarla tramite il tuo browser, un’applicazione web è tipicamente installata su un server web. Per far ciò, devi compilarla ed installarla su un server web.

La tua applicazione web può essere compilata per i server Windows, OS X e Linux. La maggior parte dei server web sono Linux, perciò probabilmente vorrai compilarla per questa piattaforma.

Opzioni di installazioneIl prossimo passo è decidere se compilare la tua applicazione come Standalone o CGI.

Applicazione Web StandaloneUna applicazione standalone è un’applicazione che avvii manualmente sul tuo server. Devi far partire l’applicazione

(generalmente tramite riga di comando) e lasciarla aperta per permettere agli utenti di collegarsi alla pagina web. Inoltre un’applicazione standalone è raggiunta attraverso un porta, specificata nelle impostazioni di compilazione. In pratica una applicazione standalone consiste di una applicazione web ed un server web minimale che la fa girare.

Le applicazioni standalone utilizzano i WebSockets, una funzionalità che migliora le performance fornendo un canale di comunicazione bi-direzionale.

L’applicazione web standalone una volta installata è generalmente raggiunta tramite un’indirizzo simile a:

http://www.mywebsite.com:8080

Applicazione Web CGIUna applicazione compilata per utilizzare CGI usa Apache o IIS (Microsoft Internet Information Services) come web server. Il web server comunica con la tua applicazione tramite CGI. Per facilitare la comunicazione, uno script Perl (incluso

Sezione 3

Installare un’applicazione web

34

Figure 4.3 Build Settings

nell’applicazione compilata) gestisce le attività tra il web server e l’applicazione.

Le applicazioni CGI non possono utilizzare i WebSockets. Alcuni browser (tra cui Safari) mostrano un indicatore di caricamento anche quando la pagina è completamente caricata. Questo a causa del metodo utilizzato dal web server per comunicare con l’applicazione web.

Poiché un’installazione CGI utilizza il tuo web server esistente, non devi specificare una porta tramite la quale collegarsi. L’indirizzo è generalmente:

http://www.mywebsite.com/cgi-bin/mywebapp.cgi

InstallazioneA causa della grande varietà di server web disponibili e delle relative impostazioni, le istruzioni per l’installazione della applicazione web sul server non possono essere trattate in questo tutorial.

Ad ogni modo, in generale i passi per installare l’applicazione su un server web Linux:

1. Compila l’applicazione per la piattaforma Linux.

2. Collegati al tuo web server tramite FTP.

3. Carica la tua applicazione (inclusa la cartella Libs)

4. Verifica i permessi di esecuzione dei file appena caricati. Alcuni client FTP cambiano automaticamente i permessi al caricamento.

Le impostazioni potrebbero essere più complicate. Consulta gli articoli riguardanti l’installazione web nel Wiki per maggiori dettagli.

35

CongratulazioniHai completato il Tutorial Web 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