Tutorial Web Release 1 Xojo, Inc.

Transcript

1 Tutorial Web 2013 Release 1 Xojo, Inc.

2 Capitolo 1 Introduzione Questo tutorial ti mostrerà come realizzare una applicazione web.

3 Sezione 1 Informazioni sul Tutorial Web AVVIO DI XOJO 1. Scarica l installer per il tuo sistema operativo da: 2. Avvia l installer. 3. Avvia Xojo. 4. Nella Scelta Progetto, seleziona Web e clicca OK. 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. Copyright Tutti 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 registrati Xojo è 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 2

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

5 Sezione 2 Convenzioni Tipografiche Il Tutorial utilizza screenshot delle versioni Windows, OS X e Linux 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 menu, leggerete una frase come scegliere File Nuovo Progetto. Questo equivale a scegliere Nuovo Progetto dal menu File. Le scorciatoie da tastiera sono una sequenza di tasti da premere 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 premuto 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 solo 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 indicazioni: Ad ogni riga di codice stampata deve corrispondere una riga nell Editor del Codice. Non cercare di accorpare due o più righe 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 ricerca eventuali errori di sintassi. Se questa verifica rileva un erro- 4

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

7 Sezione 3 Come iniziare 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. Figure 1.1 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. 6

8 Sezione 4 Area di lavoro L area di lavoro di Xojo appare con la finestra predefinita selezionata nel Navigator e visualizzata nell Editor di Layout. Figure 1.2 L area di lavoro di Xojo 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 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. 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. 7

9 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

10 Sezione 5 Informazioni sull Applicazione Task Manager In questo tutorial creerai un applicazione per la gestione delle attività come indicato in figura. Figure 1.3 Applicazione Web Task Manager 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. 9

11 Capitolo 2 Progettare l Interfaccia Utente Ora progetterai l interfaccia utente dell applicazione web Task Manager.

12 Sezione 1 Lista delle Attività 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. Figure 2.1 Controllo ListBox 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: Figure 2.2 La pagina web con la ListBox 11

13 Sezione 2 Pulsanti Aggiungere i pulsanti Ora 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. Figure 2.3 Controllo Button 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 Figure 2.4 La pagina web con i pulsanti pagina web dovrebbe assomigliare all immagine a fianco. 2. Aggiungi il pulsante Aggiungi: Nella Libreria, seleziona il controllo Button e trascinalo 12

14 Sezione 3 Campo testo Aggiungere il campo testo Il campo testo è utilizzato dall utente per inserire le proprie attività. Figure 2.6 La pagina web completata 1. Nella Libreria, clicca sull oggetto TextField e trascinalo nella pagina web, posizionandolo tra il pulsante Rimuovi ed il pulsante Aggiungi. Figure 2.5 Controllo TextField 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. 13

15 Sezione 4 Proprietà 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. Inspector L 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). Figure 2.7 Le proprietà della pagina web nell Inspector 14

16 Sezione 5 Proprietà della pagina web 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: Figure 2.9 La pagina web con il titolo modificato 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. Figure 2.8 Il nome modificato 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. 15

17 Sezione 6 Proprietà della ListBox La ListBox contiene le attività inserite dall utente. Ora cambieremo le seguenti proprietà: Nome, ColumnCount, Valore Predefinito, ColumnWidths e Locking. a. Fai doppio-click su Column 1 nell editor per modificare il valore. Scrivi Completato e premi Invio. Figure 2.10 Valori predefiniti di TaskList 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 b. Fai doppo-click sul titolo (vuoto) della seconda colonna per modificare il valore. Scrivi Attività e premi Invio. strumenti dell Editor di Layout ( dei Valore apparirà. ). La finestra di Modifica 16

18 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. Figure 2.11 Locking di TaskList 17

19 Sezione 7 Proprietà dei puslanti I tre pulsanti sono utilizzati per eseguire delle azioni. Dovrai cambiare le proprietà Nome, Etichetta e Locking. Pulsante Rimuovi Il 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 Aggiungi Il 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. Figure 2.12 Locking di DeleteButton 18

20 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. Figure 2.13 Locking di AddButton 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. Figure 2.15 Locking di CompleteButton Pulsante Completato The 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. Nella Lista Progetto, I controlli rinominati sono mostrati sotto la voce Controlli di TaskManagerPage. La pagina web ora assomiglierà all immagine seguente. Figure 2.14 I controlli nel Navigator 19

21 Figure 2.16 La pagina web con le etichette rinominate 20

22 Sezione 8 Proprietà del TextField 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. Figure 2.17 Locking di TaskField 21

23 Sezione 9 Testare il progetto Salvare il progetto Dovresti salvare periodicamente il tuo progetto e sempre prima di avviare l applicazione. 1. Salva il progetto scegliendo File Salva. Chiudi la finestra o la scheda del browser per tornare all Editor di Layout. Figure 2.18 Il layout completo di Task Manager 2. Chiama il progetto TutorialWeb e clicca Salva. Avvia l applicazione Ora 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. 22

24 Capitolo 3 Aggiungere il codice L ultimo passo della creazione della tua applicazione è l aggiunta del codice.

25 Sezione 1 Il pulsante Aggiungi Aggiungere il codice al pulsante Aggiungi Il 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. Figure 3.1 La finestra eventi 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. Figure 3.2 Gestore evento Action Nel nostro caso l oggetto è TaskField e la proprietà è Text (usa la Guida al Linguaggio per scoprire tutte le proprietà di un 24

26 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

27 Sezione 2 Il pulsante Completato Aggiungere il codice al pulsante Completato Quando 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. Figure 3.3 The Action Event Handler 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. 2. Per modificare una riga, dovrai prima determinare quale riga è 26

28 Sezione 3 Il pulsante Rimuovi Aggiungere il codice al pulsante Rimuovi Il 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. 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. 2. Poiché verrà rimossa la riga selezionata, utilizzerai nuovamente la proprietà ListIndex. 27

29 Sezione 4 Debugging Scovare i bug Sebbene 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. 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. Figure 3.5 L errore indicato nel browser 1. Avvia l applicazione e clicca subito sul pulsante Completato. Figure 3.4 Il Debugger si blocca evidenziando la riga che ha generato l errore 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. 2. Clicca sul pulsante Continua nella barra degli strumenti del debugger per visualizzare l errore. 3. Chiudi il browser e torna all Editor. 28

30 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

31 Capitolo 4 Prossimi passi Pensavi di aver finito? Non ancora.

32 Sezione 1 Testare Task Manager Continua a testare Solo 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. 31

33 Sezione 2 Miglioramenti Utilizzo dei pulsanti Hai 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). Figure 4.1 Proprietà Abilitato di CompleteButton nell Inspector 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 Figure 4.2 Event Handlers for Text Field Aggiungi Gestore Evento con una lista diversa di eventi. Ogni controllo ha una propria 32

34 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

35 Sezione 3 Installare un applicazione web Condividi la tua applicazione Ora 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 installazione Il prossimo passo è decidere se compilare la tua applicazione come Standalone o CGI. Applicazione Web Standalone Figure 4.3 Build Settings Una 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: Applicazione Web CGI Una 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 34