iOS QuickStart

2014 Release 3 Xojo, Inc.

Capitolo 1

Introduzione

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

QuickStart per iOSBenvenuto in Xojo, il più semplice strumento per creare applicazioni multipiattaforma per il desktop, il web e per iOS. Xojo si basa su un insieme di oggetti grafici per creare l’interfaccia utente, un moderno linguaggio orientato agli oggetti, un debugger integrato ed un compilatore multipiattaforma. Tutti questi componenti insieme formano l’IDE Xojo.

Grazie all’IDE, è possibile creare l’interfaccia di un’applicazione semplicemente trascinando i controlli dell’interfaccia sulle viste dell’applicazione che si vuole creare. In questo QuickStart, vedremo come è semplice farlo. Xojo fornisce tutti gli strumenti di cui si ha bisogno per realizzare praticamente qualsiasi applicazione che si possa immaginare.

Questo QuickStart è dedicato a chi si cimenta per le prime volte con la programmazione e a chi è alle prime armi con Xojo, introducendo l’ambiente di sviluppo Xojo e guidando nello sviluppo di una reale applicazione per iOS (un semplice web browser). Dovresti completare questo QuickStart in meno di 20 minuti.

Copyright

Tutti i contenuti sono coperti da copyright 2014 della Xojo Inc. Tutti i diritti sono riservati. Sono vietate la riproduzione anche parziale di questo

Sezione 1

AVVIO DI XOJO

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

2. Lanciare l’installer.

3. Lanciare Xojo.

4. Nel Project Chooser, selezionare iOS fare click su OK.

QuickStart per iOS

2

documento e la trasmissione in qualsiasi forma e attraverso ogni mezzo (elettronico, fotocopia, registrazione o altro) senza il permesso preventivo del detentore dei diritti.

Marchi registrati

Xojo è un marchio registrato della 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’uso di un termine in questo documento non vuole ledere i diritti del proprietario. La Xojo Inc. non è associata a nessun prodotto o azienda menzionata in questo documento.

3

Questo QuickStart utilizza schermate prese dalle versioni per Windows, OS X e Linux di Xojo. Le impostazioni dell’interfaccia e le funzionalità sono identiche in tutte le piattaforme, per cui sussistono solo minime differenze, 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 nuovo elemento da un menu, si leggerà una frase come “selezionare File ↠ New Project”. Questo equivale a “selezionare New Project dal menu File.”

• Le scorciatoie da tastiera sono una sequenza di tasti da premere come illustrato. In Windows e Linux, il modificatore è il tasto Ctrl; su OS X, il modificatore è il tasto ⌘ (Command). Ad esempio, quando si vedrà la scorciatoia “Ctrl+O” o “⌘-O”, significa tenere premuto il tasto Control su Windows o Linux e poi premere il tasto “O” oppure tenere premuto il tasto ⌘ su OS X e premere il tasto “O”. Il tasto modificatore può essere 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, questo è evidenziato da un riquadro grigio:

ShowURL(SelectedURL.Text)

Quando si inserisce del codice, vanno osservate queste indicazioni:

• ad ogni riga 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.

• Ovviamente, è possibile anche copiare ed incollare il codice.

Quando l’applicazione viene avviata, Xojo analizza il codice e cerca eventuali errori di scrittura e di sintassi. Se questa verifica rileva un errore, apparirà un pannello in fondo alla finestra principale per la correzione degli errori.

Sezione 2

Convezioni Tipografiche

4

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

1. Fare doppio click sull’icona di Xojo per avviarlo. Terminato il caricamento, apparirà la finestra del Project Chooser.

2. Xojo permette di creare diversi tipi di applicazione (Desktop, Web, Console e iOS). In questo QuickStart realizzeremo un’applicazione iOS, quindi fai click su iOS.

3. Apparirà la richiesta di 3 campi da compilare:: Application Name, Company Name e Application Identifier.

Application Name è il nome della tua applicazione. Sarà anche il nome dell’eseguibile che verrà creato.Company Name è il nome della tua azienda. Può essere lasciato vuoto.Application Identifier è un identificativo unico per questa applicazione. Verrà riempito in automatico con quanto inserito in Application Name e Company Name, ma è sempre possibile modificarlo in quello che si desidera.Inserire "SimpleBrowser" come Application Name. Puoi lasciare Company Name come si trova o modificarlo.

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

Sezione 3

Come iniziare

5

Figura 1.1 Finestra del Project Chooser

L’ambiente di lavoroXojo apre il Workspace con la vista predefinita dell’applicazione selezionata nel Navigator e visualizzata nel Layout Editor.

Navigator: L’area in alto a sinistra mostra tutti gli elementi presenti nel tuo progetto. All’avvio puoi vedere la View1 (che

è selezionata),l’oggetto App e gli elementi screen per iPhone iPad. Utilizzerai il Navigator per navigare tra i vari elementi del tuo progetto.

Layout Editor: L’area centrale è il Layout Editor. Utilizzerai il Layout Editor per progettare l’interfaccia utente delle view della tua applicazione. Il Layout Editor mostra l’anteprima di come le view appariranno mentre l’applicazione verrà eseguita. In questa immagine, la view è vuota perché non hai ancora aggiunto nessun controllo dalla Library.

Library: L’area sulla destra è la Library e mostra i controlli e gli elementi che puoi aggiungere per creare l’interfaccia utente in una view o nel progetto. Puoi realizzare la view trascinando i controlli dalla Library alla view. Puoi aggiungere un controllo alla view anche facendo doppio click sul controllo nella Library. Puoi modificare la visualizzazione dei controlli nella Library cliccando sulla piccola icona con l’ingranaggio

e selezionando un’impostazione differente.Nota: Se la Library non è visibile, clicca sul pulsante Library nella barra degli strumenti per mostrarla.

Sezione 4

Il Workspace

6

Figura 1.2 Il Workspace di Xojo

Inspector: L’inspector non è visualizzato nell’immagine precedente, questa sezione ti permette di visualizzare e modificare le proprietà dell’oggetto selezionato. Questa area del Workspace è condivisa con la Library. Puoi visualizzare l’Inspector cliccando il pulsante Inspector nella barra degli strumenti. L’Inspector mostra le informazioni sull’elemento selezionato nel Navigator o nell’Editor. Il contentuto dell’Inspector cambia cliccando sui diversi elementi. Puoi cambiare un valore nell’Inspector inserendone uno nuovo nel campo a destra della relativa etichetta.

7

Capitolo 2

Un semplice Browser Web

Impara ad utilizzare Xojo per creare una semplice applicazione per navigare sul web.

Impostiamo l’applicazioneIl modo migliore per imparare velocemente ad usare Xojo è quello di creare un’applicazione. In questo QuickStart realizzerai un semplice navigatore web.

Un’applicazione Xojo consiste in un insieme di oggetti, chiamati classi, che comprendono le tue view e i loro controlli. Nel progetto SimpleBrowser, utilizzerai la classe View di base per creare la tua view e aggiungerai i controlli (classi per l‘interfaccia utente) alla view per realizzare il progetto.

L’applicazione utilizza tre controlli:

• Text Field: Un controllo Text Field viene utilizzato per inserire il testo. In questo progetto l’URL da visualizzare verrà scritto in un Text Field in cima alla view.

• Button: Un controllo Button è utilizzato per iniziare un’azione. L’utente clicca il pulsante per caricare la pagina web nell’HTML Viewer.

• HTML Viewer: Un HTML Viewer visualizza l’HTML (una pagina web). In questo progetto, è il controllo che visualizza il sito individuato dall’URL.

Le prossime sessioni ti guideranno lungo il percorso della creazione dell’interfaccia utente e nella scrittura del codice necessario a rendere l’applicazione funzionante.

Sezione 1

L’applicazione

9

Figura 2.1 L’applicazione SimpleBrowser completata e visualizzata su un iPhone 6

Progettare la ViewDovresti avere Xojo in esecuzioni e la View1 aperta nel Layout Editor. Se non è così, rivedi l’introduzione e le sezioni 3 e 4.

Ora sei pronto ad iniziare ad aggiungere i controlli nella view.

1. Iniziamo con il Text Field:Nella Library, clicca sull’icona del Text Field e trascinala nell’angolo in alto a sinistra della view nel Layout Editor.Man mano che ti avvicini ai bordi della view, vedrai degli indicatori di allineamento

che ti aiuteranno a posizionare il controllo.

2. Dopo aggiungi il Button:Nella Library, clicca l’icona del Button e trascinala verso l’angolo in alto a destra della view.

3. L’ultimo controllo è l’HTML Viewer:

Trascina l’icona dell’HTML Viewer verso la parte rimasta vuota

della view.Ridimensiona questo controllo (utilizzando le maniglie di selezione in modo da fargli riempire la maggior parte della view sotto il Text Field e il

Sezione 2

Costruire l’interfaccia utente

10

Figura 2.2 Scegliere il Text Field nella Library Figura 2.3 Scegliere

l’HTML Viewer nella Library

Button) e utilizza le guide che compaiono per aiutarti ad allinearti agli estremi.

4. L’ultimo passo è quello di ridimensionare il Text Field in modo da renderlo più largo. Clicca sul controllo per mostrare le sue maniglie di selezione. Clicca la maniglia centrale sulla destra e trascinala verso destra fino a far apparire le guide di allineamento che ti indicano che sei abbastanza vicino al Button.

La tua view alla fine dovrebbe apparire come questa:

11

Figura 2.4 Il Layout dell View con i controlli

Cos’è una proprietà?Una proprietà è il valore di una classe. Modificando i valori delle proprietà di una classe, modificherai il comportamento della classe.

In questo progetto, dovrai cambiare varie proprietà della view e dei suoi controlli. Alcune delle cose che dovrai fare sono:

• Rinominare tutti i controlli (e la view) in modo che descrivano il loro comportamento e siano più facili da utilizzare nel codice.

• Aggiungere un’etichetta al Button.

• Impostare le proprietà dell’Auto-Layout in modo che i controlli si possano ridimensionare correttamente a seconda delle varie dimensioni dei dispositivi iOS.

InspectorL’Inspector viene utilizzato per cambiare le proprietà della view e dei controlli. Condivide la stessa area, sulla destra del Workspace, della Library. Per visualizzare l’Inspector, clicca il

pulsante Inspector nella barra degli strumenti o premi ⌘-I (Ctrl+I su Windows e Linux).

Sezione 3

Le proprietà

12

Se non l’hai già fatto, visualizza l’Inspector cliccando il pulsante Inspector nella barra degli strumenti e seleziona View1 nel Navigator.

Dovrai cambiare le proprietà Name, NavigationBarVisible e Title:

1. Prima di tutto, nel Layout Editor, clicca sul bordo dell’iPhone della view per selezionarla. L’Inspector mostra ora le proprietà della view.

2. Nel campo Name (che si trova nel gruppo ID), cambia il nome da “View1” a “BrowserView”. Premi Return per vedere il nome cambiare nel Navigator.

3. Per il campo NavigationBarVisible, imposta l’interuttore su ON. Questo fa visualizzare la navigation bar della view. Quando farai questo, il Text Field e Button scompariranno poiché sono

nascosti dalla navigation bar. Correggerai questa cosa nelle prossime sessioni.

4. Nel campo Title, cambia il nome in “SimpleBrowser”. Premi Return e vedrai il nome cambiare nella navigation bar.

Sezione 4

Proprietà della View

13

Figura 2.5 View Inspector

Il Text Field è dove i tuoi utenti inseriscono l’URL che vogliono vedere nel browser. Cambierai le seguenti proprietà nell’Inspector: Name, KeyboardType, PlaceHolder, Text e Auto-Layout.

1. Nel Navigator, seleziona il controllo TextField1 contenuto all’interno della BrowserView. L’Inspector cambia e mostra le proprietà del Text Field.

2. Nel campo Name, cambia il nome da “TextField1” a “AddressField”. Premi Return per vedere il nome cambiato nel Navigator.

3. Nel campo KeyboardType,

seleziona nel menu popup il valore “URL”. In questo modo sul dispositivo iOS, quando l’utente toccherà il campo di testo, verrà mostrata la speciale tastiera per gli URL.

4. Nel campo Text, modifica il testo da “Untitled” a “http://www.wikipedia.org”.

5. Se non hai allineato il Text Field utilizzando le guide per il layout, probabilmente avrai bisogno di modificare i valori di Auto-Layout in modo che questo controllo diventi più largo o più piccolo a seconda delle diverse dimensioni dei device su cui viene visualizzato.Nella sezione Auto-Layout vedrai un elenco di regole che controllano il modo in cui il Text Field viene mostrato nella view. In particolare, dovrai cambiare la regola Top in modo che il Text Field sia ad una distanza standard dal lato inferiore della guida di layout superiore. Per fare questo fai click sulla regola “Top” e poi clicca il pulsante Edit.

Sezione 5

Proprietà del Text Field

14

Figura 2.6 Le proprietà del Text Field nell’Inspector

6. Imposta i valori per la regola di Auto-Layout come mostrato qui sotto e poi premi il pulsante Done:

15

I tuoi utenti toccheranno il bottone per visualizzare la pagina web. Dovrai cambiare le seguenti proprietà: Name, Caption e Auto-Layout.

1. Sulla view, seleziona il controllo Button1. L’Inspector mostrerà le proprietà del Button.

2. Nel campo Name, cambia il nome da “Button1” a “ShowButton”. Premi Return per vedere il nome cambiare nel Navigator.

3. Dài un’etichetta al tuo button modificando il

campo Caption da “Untitled” a “Show”.

4. Se non hai allineato il Button utilizzando le guide per il layout, probabilmente dovrai modificare i valori di Auto-Layout per fare in modo che il Button resti sotto la navigation bar e sia attaccato al lato destro della view anche quando cambiano le dimensione del dispositivo.Nella sezione Auto-Layout vedrai una serie di regole che controllano il modo in cui il Button viene mostrato nella view. In particolare, dovrai cambiare sia la regola Top, in modo che la parte superiore del button sia allineata con quella del Text Field, sia la regola Right, in modo da assicurarti che Button rimanga agganciato al lato destro della view.

5. Per cominciare, fai click sulla regola “Top” rule poi clicca il pulsante Edit. Se la regola Top non compare nella lista delle regole, puoi aggiungerla utilizzando il pulsante “+” che si trova sotto l’area dell’Auto-Layout. Imposta i valori dell’ Auto-Layout per questa regola come mostrato qui

Sezione 6

Proprietà del Button

16

Figura 2.7 Le proprietà del Button nell’Inspector

sotto e clicca Done:

6. Infine, clicca sulla regola Right, clicca Edit, e imposta i suoi valori come qui sotto e clicca Done:

17

L’ultima modifica all’interfaccia utente che devi fare è quella relativa all’HTML Viewer. In questo caso dovrai cambiare le proprietà: Name e Auto-Layout.

1. Sulla view, seleziona il controllo HTMLViewer1. L’Inspector mostrerà le proprietà dell’HTML Viewer.

2. Nel campo Name, cambia il nome da “HTMLViewer1” a “WebViewer”. Premi Return per vedere cambiare il nome nel Navigator.

3. Infine dovrai modificare l’Auto-Layout in modo che l’HTML Viewer occupi tutto il resto dello spazio a disposizione nella View. In particolare

cambierai queste regole dell’Auto-Layout: Top, Left e Right (Potresti non doverle cambiare tutte, se hai utilizzato le guide del layout per posizionare l’HTML Viewer).

4. Seleziona la regola Top, clicca Edit e imposta i valori come mostrato qui sotto:

Sezione 7

Proprieta dell’HTML Viewer

18

Figura 2.8 Le proprietà dell’HTML Viewer nell’Inspector

5. Seleziona la regola Left, clicca Edit e imposta i valori come mostrato qui sotto:

6. Seleziona la regola Right, clicca Edit e imposta i valori come mostrato qui sotto:

Ricorda, se qualcuna delle regole che vuoi modificare non è nell’elenco delle regole, la puoi aggiungere utilizzando il

pulsante “+” che si trova sotto l’area dell’Auto-Layout nell’Inspector.

19

L’editor del codiceLa tua applicazione è quasi completa. È ora il momento di aggiungere il codice che dirà all’ HTML Viewer quale pagina web deve mostrare. Xojo utilizza un linguaggio di programmazione orientato agli oggetti che è molto facile da imparare. In questo caso avrai bisogno di una sola linea di codice per concludere il tuo progetto!

I passi che devi seguire sono:

1. Capire quando il tuo utente tocca il pulsante ShowButton, che viene mostrato come “Show” nella view.

2. Ottenere l’URL che il tuo utente ha inserito in AddressField.

3. Fare in modo che il WebViewer visualizzi questo URL.

Segui questi passi per aggiungere il codice:

1. Sulla view, fai doppio click sul controllo ShowButton, che hai etichettato come “Show”. Appare la finestra Add Event Handler. Quando un utente

preme un pulsante, la tua applicazione esegue il codice che si trova nel gestore dell’evento Action del pulsante.Questo significa che dovrai aggiungere il tuo codice nel gestore dell’evento Action, quindi seleziona Action dalla lista dei gestori di eventi e fai click su OK.Nota come il Navigator si aggiorna per mostrare l’evento Action sotto il controllo ShowButton e come venga mostrato il Code Editor.Questo passo risolve il primo dei tuoi problemi, ovvero quello di sapere quando un utente fa click su ShowButton.

Sezione 8

Aggiungere il Codice

20

Figura 2.9 La finestra Add Event Handler

2. Ora devi ottenere l’URL che l’utente ha scritto.Il valore che l’utente scrive in un Text Field è memorizzato nella proprietà Text del Text Field.Puoi accedere alla proprietà in questo modo

AddressField.Text

3. L’ultimo passo è fare in modo che WebViewer mostri la pagina web. Questo viene ottenuto chiamando il metodo LoadURL del controllo HTML Viewer e passandogli l’URL che l’utente ha scritto.Il tuo codice diventa quindi come questo:

WebViewer.LoadURL(AddressField.Text)

4. Inserisci questo codice nel Code Editor, inizia cliccando nello spazio bianco sotto il nome dell’evento Action() e poi scrivi questo codice (scrivilo piuttosto che copiarlo e incollarlo):

WebViewer.LoadURL(AddressField.Text)

Questo è tutto! La tua prima applicazione è completa.

21

Salvare il tuo progettoDovresti salvare periodicamente il tuo progetto, in ogni caso salvalo sempre prima di eseguirlo.

1. Salva il progetto selezionando File ↠ Save.

2. Chiama il file del progetto “SimpleBrowser” e clicca Save.

Eseguire il tuo progettoOra puoi provare il funzionamento della tua applicazione:

1. Per poter eseguire un progetto iOS, hai prima bisogno di scaricare ed installare Xcode per poter avere l’applicazione iOS Simulator che ti permette di eseguire le applicazioni iOS su OS X. Puoi scaricare Xcode gratuitamente dal Mac App Store.Dopo che hai scaricato ed installato Xcode, devi lanciarlo una volta per accettare le sue condizioni di Licenza. Dopo aver fatto questo, puoi chiudere Xcode visto che non ti servirà ulteriormente.

2. Premi il pulsante Run in Xojo per eseguire l’applicazione nel Simulatore iOS.

Sezione 9

COSA C’È DOPO?

Il QuickStart ti ha introdotto all’uso di Xojo. Hai imparato come impostare una view, aggiungendo i controlli, aggiungendo il codice e poi come eseguire il tuo progetto.

Dovresti poi continuare il lavoro con il Tutorial e poi iniziare ad esplorare la Guida per l’utente e la Guida di Riferimento per continuare ad imparare come poter creare grandi applicazioni utilizzando Xojo.

Testare l’applicazione Simple Browser

22

3. Scrivi un URL che preferisci (o utilizza quello di default) e fai click sul pulsante “Show”.

4. Vedrai la pagina web.

5. Quando hai finito di provare l’applicazione Simple Browser, puoi chiudere il Simulatore iOS per tornare a Xojo.

23