ios QuickStart 2014 Release 3 Xojo, Inc.

Transcript

1 ios QuickStart 2014 Release 3 Xojo, Inc.

2 Capitolo 1 Introduzione Benvenuto in Xojo, lo strumento più semplice per creare applicazioni multipiattaforma per il desktop, il web e per ios.

3 Sezione 1 QuickStart per ios AVVIO DI XOJO 1. Scaricare l installer per il tuo sistema operativo da: 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

4 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

5 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

6 Sezione 3 Come iniziare Avviare Xojo Se 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. Figura 1.1 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. 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. 3. Apparirà la richiesta di 3 campi da compilare:: Application Name, Company Name e Application Identifier. 5

7 Sezione 4 Il Workspace 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 è 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 Navigator: L area in alto a sinistra mostra tutti gli elementi presenti nel tuo progetto. All avvio puoi vedere la View1 (che e selezionando un impostazione differente. Nota: Se la Library non è visibile, clicca sul pulsante Library nella barra degli strumenti per mostrarla. 6

8 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

9 Capitolo 2 Un semplice Browser Web Impara ad utilizzare Xojo per creare una semplice applicazione per navigare sul web.

10 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. 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. Figura 2.1 L applicazione SimpleBrowser completata e visualizzata su un iphone 6 9

11 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. 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 Figura 2.3 Scegliere l HTML Viewer nella Library 10

12 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

13 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

14 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: 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. 1. Prima di tutto, nel Layout Editor, clicca sul bordo dell iphone della view per selezionarla. L Inspector mostra ora le proprietà della view. 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

15 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. 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. Figura 2.6 Le proprietà del Text Field nell Inspector 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 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

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

17 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 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 16

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

19 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. 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: 2. Nel campo Name, cambia il nome da HTMLViewer1 a WebViewer. Premi Return per vedere cambiare il nome nel Navigator. Figura 2.8 Le proprietà dell HTML Viewer nell Inspector 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 18

20 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

21 Sezione 8 Aggiungere il Codice L editor del codice 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! Figura 2.9 La finestra Add Event Handler 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. 20

22 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

23 Sezione 9 Testare l applicazione Simple Browser 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. Salvare il tuo progetto Dovresti 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 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

24 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