close

Enter

Log in using OpenID

2014 Release 3 Xojo, Inc.

embedDownload
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.
Sezione 1
QuickStart per iOS
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
Benvenuto 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
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
Sezione 2
Convezioni Tipografiche
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.
4
Sezione 3
Come iniziare
Avviare Xojo
Se non è già stato fatto, questo è il momento di avviare Xojo.
Application Name è il nome della tua applicazione. Sarà
anche il nome dell’eseguibile che verrà creato.
1. Fare doppio click sull’icona di Xojo per avviarlo. Terminato
il caricamento, apparirà la finestra del Project Chooser.
Company Name è il nome della tua azienda. Può essere
lasciato vuoto.
Figura 1.1 Finestra del Project Chooser
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.
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.
4. Clicca OK per aprire la finestra principale di Xojo (chiamata
Workspace), nella quale puoi iniziare a progettare la tua
applicazione.
3. Apparirà la richiesta di 3 campi da compilare:: Application
Name, Company Name e Application Identifier.
5
Sezione 4
Il Workspace
è selezionata),l’oggetto App e gli elementi screen per iPhone
iPad. Utilizzerai il Navigator per navigare tra i vari elementi
del tuo progetto.
L’ambiente di lavoro
Xojo apre il Workspace con la vista predefinita
dell’applicazione selezionata nel Navigator e visualizzata nel
Layout Editor.
Figura 1.2 Il Workspace di Xojo
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.
Navigator: L’area in alto a sinistra mostra tutti gli elementi
presenti nel tuo progetto. All’avvio puoi vedere la View1 (che
Nota: Se la Library non è visibile, clicca sul pulsante Library
nella barra degli strumenti per mostrarla.
6
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.
Sezione 1
L’applicazione
Impostiamo l’applicazione
Il 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.
Le prossime sessioni ti
guideranno lungo il
percorso della
creazione
dell’interfaccia utente e
nella scrittura del
codice necessario a
rendere l’applicazione
funzionante.
Figura 2.1 L’applicazione
SimpleBrowser completata e
visualizzata su un iPhone 6
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.
9
Sezione 2
Costruire l’interfaccia utente
Progettare la View
Dovresti 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
Figura 2.2 Scegliere il
Text Field nella Library
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.
Figura 2.3 Scegliere
l’HTML Viewer nella
Library
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
10
Button) e utilizza le guide che compaiono per aiutarti ad
allinearti agli estremi.
Figura 2.4 Il Layout dell View con i controlli
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
Sezione 3
Le proprietà
Cos’è una proprietà?
Una proprietà è il valore di una classe. Modificando i valori
delle proprietà di una classe, modificherai il comportamento
della classe.
pulsante Inspector nella barra degli strumenti o premi ⌘-I
(Ctrl+I su Windows e Linux).
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.
Inspector
L’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
12
Sezione 4
Proprietà della View
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.
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.
Figura 2.5 View Inspector
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
13
Sezione 5
Proprietà del Text Field
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.
Figura 2.6 Le proprietà del Text
1. Nel Navigator, seleziona Field nell’Inspector
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.
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.
3. Nel campo
KeyboardType,
14
6. Imposta i valori per la regola di Auto-Layout come mostrato
qui sotto e poi premi il pulsante Done:
15
Sezione 6
Proprietà del Button
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
Figura 2.7 Le proprietà del Button
nell’Inspector
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 AutoLayout 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
16
sotto e clicca Done:
6. Infine, clicca sulla regola Right, clicca Edit, e imposta i suoi
valori come qui sotto e clicca Done:
17
Sezione 7
Proprieta dell’HTML Viewer
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.
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:
Figura 2.8 Le proprietà dell’HTML
Viewer nell’Inspector
3. Infine dovrai
modificare l’AutoLayout in modo che
l’HTML Viewer
occupi tutto il resto
dello spazio a
disposizione nella
View. In particolare
18
5. Seleziona la regola Left, clicca Edit e imposta i valori come
mostrato qui sotto:
pulsante “+” che si trova sotto l’area dell’Auto-Layout
nell’Inspector.
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
19
Sezione 8
Aggiungere il Codice
L’editor del codice
Figura 2.9 La finestra Add Event Handler
La 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.
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.
3. Fare in modo che il WebViewer visualizzi questo URL.
Nota come il Navigator si aggiorna per mostrare l’evento
Action sotto il controllo ShowButton e come venga
mostrato il Code Editor.
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
Questo passo risolve il primo dei tuoi problemi, ovvero
quello di sapere quando un utente fa click su ShowButton.
20
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
Sezione 9
Testare l’applicazione Simple Browser
COSA C’È DOPO?
Salvare il tuo progetto
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 salvare periodicamente il tuo progetto, in ogni caso salvalo sempre
prima di eseguirlo.
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.
1. Salva il progetto selezionando File ↠ Save.
2. Chiama il file del progetto “SimpleBrowser” e clicca Save.
Eseguire il tuo progetto
Ora 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.
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
Author
Document
Category
Uncategorized
Views
0
File Size
1 415 KB
Tags
1/--pages
Report inappropriate content