Italiano:Guida Rapida iOS

Benvenuto in Xojo il miglior sistema di sviluppo cross-platform di cui hai mai sentito parlare. Con Xojo puoi creare applicazioni per Windows, macOS, Linux, Raspberry Pi, iOS e per il web. Xojo è composto da un completo insieme di oggetti per creare l'interfaccia grafica, un moderno linguaggio orientato agli oggetti, un debugger integrato e un compilatore multipiattaforma. Tutti questi insieme compongono l'ambiente di sviluppo integrato o IDE di Xojo.

Con l'IDE, puoi creare l'interfaccia della tua applicazione semplicemente trascinando gli oggetti sulle view dell'applicazione che vuoi creare. In questa Guida Rapida scoprirai come è semplice farlo. Xojo ti fornisce tutti gli strumenti per creare praticamente qualsiasi applicazione ti venga in mente.

Questa Guida Rapida è dedicata a chi è alle prime armi con la programmazione o con Xojo. Ti darà una semplice introduzione all'ambiente di sviluppo di Xojo fino ad arrivare a realizare una vera applicazione per iOS (un semplice browser web). Ti occorreranno circa 15 minuti per completare questa Guida Rapida. Se hai fretta, puoi anche vedere il video di 5 minuti relativo a questo progetto o scaricare il progetto completo:

Video della Guida Rapida per iOS
Scarica il progetto SimpleBrowser per iOS

Primi passi

Se non l'hai ancora fatto, è ora di avviare Xojo.

Fai doppio click sull'icona dell'applicazione Xojo per avviarlo. Quando finisce l'avvio del programma, appare la finestra per la scelta del tipo di progetto.

Xojo ti permette di creare diversi tipi di applicazioni (Desktop, Web, Console e iOS). Con questa Guida Rapida creiamo un'applicazione per iOS, quindi fai click su iOS.
Ora dovresti vedere tre campi in cui dobbiamo inserire dei valori: Application Name (Nome dell'applicazione), Company Name (Nome dell'azienda) e Application Identifier (identificativo dell'applicazione).
- Application Name è il nome della tua applicazione. Questo diventerà il nome del file dell'applicazione che verrà creata.
- Company Name è il nome della tua azienda. Puoi anche lasciarlo vuoto.
- Application Identifier è un identificativo unico per la tua applicazione. Verrà riempito automaticamente utilizzando i valori inseriti in Application Name e Company Name, ma puoi anche cambiarlo in quello che vuoi.
Inserisci "SimpleBrowser" come nome dell'applicazione. Puoi lasciare il campo Company Name così come è o cambiarlo.
Fai click su OK per aprire la finestra principale del tuo progetto Xojo (chiamata anche Workspace o spazio di lavoro), qui è dove inizierai a creare la tua applicazione.

L'ambiente di lavoro

Xojo apre il Workspace con la view predefinita, per il tipo di applicazione, selezionata nel Navigatore e visualizzata nell'Editor del Layout.

Navigatore: (Navigator) L'area a sinistra (nella parte superiore) mostra tutti gli elementi del tuo progetto. Tipicamente troverai View1 (che è selezionata), l'oggetto App e gli elementi che definiscono lo schermo per iPhone e iPad. Puoi utilizzare il Navigatore per spostarti tra gli elementi del tuo progetto.

Editor del Layout: (Layout Editor) La parte centrale è l'Editor del Layout. Utilizzerai questo editor per progettare l'interfaccia delle view della tua applicazione. Mostra una anteprima di come apparirà la view una volta lanciata l'applicazione. In questa immagine la view è vuota perché non abbiamo ancora inserito nessun controllo dalla Libreria.

Libreria: (Library) L'area sul lato destro è la Libreria e mostra i controlli e gli elementi per l'interfaccia che puoi aggiungere ad una view o al progetto. Per aggiungere i controlli alla view basta trascinarli dalla Libreria e rilasciarli sulla view dove desideri posizionarli. Puoi aggiungere un controllo alla view anche facendo doppio click su di esso nella libreria. Puoi modificare il tipo di visualizzazione dei controlli nella Libreria facendo click sulla piccola ruota dentata e scegliendo un'impostazione differente.

Nota: Se la Libreria non è visibile, fai click sul pulsante Library nella toolbar per mostrarla.

Inspector: Non mostrato nell'immagine precedente, l'Inspector ti permette divedere e modificare le proprietà del controllo o dell'oggetto dell'interfaccia selezionato. Quest'area della finestra principale è condivisa con la Libreria. Puoi visualizzare l'Inspector facendo click sul pulsante Inspector della toolbar. L'Inspector mostra le informazioni dell'elemento selezionato nel Navigatore o nell'Editor. Il contenuto cambia a seconda dell'oggetto. Puoi cambiare i valori nell'Inspector inserendo quelli nuovi nel campo alla destra dell'etichetta del campo.

Realizziamo un semplice navigatore Web

Panoramica

Creare un'applicazione è modo migliore per imparare velocemente ad utilizzare Xojo. In questa Guida Rapida creeremo un semplice navigatore Web.

Un'applicazione Xojo è costituita da un insieme di oggetti, chiamati classi. Praticamente ogni cosa in Xojo è una classe, comprese le veiw e i controlli. Nel progetto SimpleBrowser, utilizzerai la classe View di default per creare quella necessaria al progetto a cui aggiungerai i controlli (le classi per l'interfaccia utente) per creare l'interfaccia.

L'applicazione utilizzerà questi controlli:

Text Field: Un controllo Text Field (Campo di testo) si utilizza per inserire il testo. In questo progetto, l'URL da visualizzare verrà scritto in un Text Field nella parte superiore della finestra.
Button: Un Button (Pulsante) si utilizza per avviare un'azione. Nel nostro caso, l'utente farà click sul pulsante per caricare la pagina web, il cui URL è stato inserito nel campo di testo, nel visualizzatore Web.
HTML Viewer: Un HTML Viewer (Visualizzatore Web) si utilizza per visualizzare l'HTML (come, ad esempio, una pagina web). In questo progetto, mostrerà la pagina con l'indirizzo URL indicato.

Nelle sezioni seguenti vedremo passo passo, come creare l'interfaccia e come aggiungere il codice necessario per far funzionare l'applicazione.

Creiamo l'interfaccia utente

Con Xojo in esecuzione e la View1 aperta nel Layout Editor, ora sei pronto per iniziare ad aggiungere i controlli alla view.

Iniziamo con il Text Field: Nella Libreria, fai click sull'icona del Text Fielde trascinala nell'angolo in alto a sinistra della view che si trova nell'Editor del Layout. Non appena sarai vicino ai bordi della finestra, vedrai degli indicatori di allineamento che ti aiuteranno a posizionare il controllo correttamente.
Poi, aggiungi il Button: Nella Libreria, fai click sull'icona del Default Button e trascinala nell'angolo in alto a destra della view.
'ultimo controllo è l' HTML Viewer: Trascina l'icona dell'HTML Viewer nella parte rimasta vuota della view. Ridimensiona il controllo (utilizzando le maniglie in modo da riempire la maggior parte della view sotto il Text Field il Button), utilizza le guide che compaiono per aiutarti ad allineare il controllo ai bordi della view.
L'ultimo passo è ridimensionare il Text Field in modo renderlo più largo. Fai click sul controllo in modo da mostrare le maniglie. Fai click su quella che si trova nel centro sulla destra e trascinala verso destra fino a vedere una guida d'allineamento che ti avverte che sei sufficientemente vicino al Button.

Al termine del lavoro la view nel Layout Editor dovrebbe essere come questa:

Impostiamo le proprietà

Cos'è una proprietà?

Una proprietà è un valore in una classe. Modificare i valori delle proprietà di una classe ti permette di cambiare il comportamento della classe. In questo progetto, modificherai diverse proprietà della view e dei controlli che hai aggiunto. Alcune delle cose che devi fare sono:

Rinominare tutti i controlli (e la view) in modo che descrivano meglio quello che fanno e siano quindi più semplici da indicare nel codice.
Aggiungere un'etichetta del Pulsante.
Impostare le proprietà dell'Auto-Layout in modo che i controlli si ridimensionino correttamente per le diverse dimensioni dei dispositivi iOS.

Inspector

Per modificare le proprietà delle viste e dei controlli si utilizza l'Inspector. Questo condivide la stessa area della Libreria nel Workspace e per visualizzarlo puoi fare click sul pulsante Inspector nella toolbar o premere ⌘-I (Ctrl+I su Windows e Linux).

Impostiamo le proprietà per la View

Se non l'hai già fatto, premi il pulsante Inspector nella toolbar per visualizzarlo e seleziona la View1 nel Navigatore. Modificherai le proprietà Name, NavigationBarVisible e Title.

Per prima cosa, nel Layout Editor, fai click sul bordo della view nell'iPhone per selezionarla. L'Inspector ora mostra le proprietà della view.
Nel campo Name (che si trova nella sezione ID), cambia il nome da "View1" a "BrowserView". Premi sulla tastiera il tasto Return per vedere il nuovo nome nel Navigator.
Nel campo NavigationBarVisible , imposta lo switch a ON. Questo mostra la Navigation Bar della view. Facendo questo, il Text Field e il Button potrebbero scomparire e essere coperti dalla Navigation Bar. Risolverai questo problema nei prossimi passi.
Nel campo Title , inserisci il valore “SimpleBrowser”. Premendo il tasto Return vedrai cambiare il titolo nella Navigation Bar.

Impostiamo le proprietà per il Text Field

Il Text Field è dove l'utente inserirà l'URL che vuole vedere nel browser. Nell'inspector ne cambierai le proprietà: Name, KeyboardType, PlaceHolder, Text e Auto-Layout.

Nel Navigator, seleziona il controllo TextField1 nella BrowserView. L' Inspector cambia per mostrare le proprietà del Text Field.
Nel campo Name , cambia il valore da "TextField1" a "URLField". Premi sulla tastiera il tasto Return per vedere il nuovo nome nel Navigator.
Nel campo KeyboardType , seleziona il valore "URL" dal menu popup. Questo permetterà di mostrare la tastiera per gli URL sul dispositivo quando l'utente toccherà il campo.
Nel campo Text , cambia il valore da "Untitled" a "https://www.wikipedia.org".

Se non hai allineato il Text Field utilizzando le guide, potresti aver necessità di cambiare i valore dell'Auto-Layout in modo che il Text Field diventi più largo o stretto quando la view cambia dimensione (rotazione del device) o su device con dimensioni di schermo diverse.

Nella sezione Auto-Layout vedi un elenco di regole che controllano come il Text Field deve comportarsi nella view. In particolare, cambiamo la regola Top in modo che il Text Field sia ad una distanza standard sotto la TopLayoutGuide. Per fare questo, fai click sulla regola "Top" poi sul pulsante Edit.
Imposta i valori per la regola di Auto-Layout come mostrato qui sotto e poi fai click sul pulsante Done:

Impostiamo le proprietà per il Button

Nell'applicazione in esecuzione, toccando il pulsante verrà mostrata la pagina web indicata del Text Field. Cambieremo queste proprietà: Name, Caption e Auto-Layout.

Sulla vista BrowserView, seleziona il controllo Button1. L' Inspector cambia per mostrare le proprietà del Button.
Nel campo Name , cambia il valore da "Button1" a "ShowButton". Premi sulla tastiera il tasto Return per vedere il nuovo nome nel Navigator.
Dai un'etichetta al button cambiado il valore del campo Caption da "Untitled" a "Show".

Se non hai allineato il Button utilizzando le guide, potresti aver necessità di cambiare i valore dell'Auto-Layout in modo che il Button stia sotto la navigation bar e sempre attaccato al lato destro della view quando le dimensioni di questa cambiano.

Nella sezione Auto-Layout vedi un elenco di regole che controllano come il Button deve comportarsi nella view. In particolare, cambieremo la regola Top in modo che la parte superiore del button sia allineata con quella del Text Field e la regola Right per assicurarci che pulsante rimanga sul lato destro della view.
Fai click sulla regola "Top" rule poi su Edit. Se non vedi la regola Top, la puoi aggiungere utilizzando il pulsante "+" nella parte inferiore dell'area dedicata all'Auto-Layout. Imposta i valori come mostrato qui sotto e poi fai click su Done:
Infine, fai click sulla regola Right e poi su Edit. Imposta i valori come indicato sotto e fai click su Done:

Impostiamo le proprietà per l'HTML Viewer

Le ultime modifiche all'interfaccia che bisogna fare sono quelle relative all'HTML Viewer. Qui cambieremo le proprietà: Name and Auto-Layout.

Nella view BrowserView, seleziona il controllo HTMLViewer1 . L' Inspector cambia per mostrare le proprietà dell'HTML Viewer.
Nel campo Name , cambia il valore da "HTMLViewer1" a "WebViewer". Premi sulla tastiera il tasto Return per vedere il nuovo nome nel Navigator.

Infine, potresti dover cambiare alcune regole dell'Auto-Layout per fare in modo che l'HTML Viewer occupi il resto della View. In particolare devi controllare le seguenti regole dell'Auto-Layout: Top, Left and Right (Se hai utilizzato le guide per posizionare il controllo, probabilmente le regole saranno già corrette).

Seleziona la regola Top, fai click su Edit e imposta i suoi valore come mostrato qui sotto:
Seleziona la regola Left, fai click su Edit e imposta i suoi valore come mostrato qui sotto:
Seleziona la regola Right, fai click su Edit e imposta i suoi valore come mostrato qui sotto:

Ricorda che se una regola che vuoi modificare non è presente nella lista delle regole, puoi aggiungerla utilizzando il pulsante "+" che trovi nella parte inferiore della sezione Auto-Layout dell'Inspector.

Aggiungiamo il codice

La tua applicazione è quasi completa. Ora bisogna aggiungere il codice che dice all'HTML Viewer (a cui hai dato il nome WebViewer) quale pagina web mostrare. Xojo utilizza un linguaggio di programmazione orientato agli oggetti che molto semplice da padroneggiare. Hai bisogno di una sola riga di codice per terminare il tuo progetto!

I passi da seguire sono:

Capire quando l'utente tocca il pulsante ShowButton, che ha l'etichetta “Show” nella view.
Leggere l'URL che l'utente ha inserito nel campo URLField.
Fare in modo che il WebViewer mostri la pagina richiesta.

Segui i seguenti passi per aggiungere il codice:

Nella BrowserView, fai doppio click sul controllo ShowButton, quello con l'etichetta "Show".
Si apre la finestra Add Event Handler. Gli Event Handlers vengono richiamati quando l'utente inizia un azione. In questo caso, quando l'utente tocca un pulsante, l'applicazione eseguirà il codice presente nel gestore d'evento Action del pulsante. Quindi devi aggiungere il tuo codice al gestore d'evento Action, per fare questo seleziona Action dalla lista degli Event Handler e fai click su OK. Nota come il Navigatore si aggiorni per mostrare l'evento Action sotto il controllo ShowButton e che viene mostrato il Code Editor. Questo passo risolve il primo problema: capire quando l'utente fa click sul pulsante ShowButton.
Ora devi ottenere l'URL che l'utente ha inserito. Il valore inserito dall'utente in un Text Field è memorizzato nella proprietà Text del controllo. Puoi accedere a questa proprietà in questo modo: <rbcode>URLField.Text</rbcode>
L'ultimo passo è fare in modo che il WebViewer mostri la pagina. Questo è fatto chiamando il metodo LoadURL del controllo HTML Viewer, usando come argomento l'URL che l'utente ha scritto. Il tuo codice ora è questo:<rbcode>WebViewer.LoadURL(URLField.Text)</rbcode>
Inserisci il codice nel Editor del Codice. Inizia facendo click nello spazio vuoto sotto il nome dell'evento, Action() in questo caso, e scrivendo il seguente codice (per fare pratica, scrivi invece che copiarlo e incollarlo):<rbcode>WebViewer.LoadURL(URLField.Text)</rbcode>

Questo è tutto! La tua prima applicazione è completa.

Lanciare l'applicazione

Prima di proseguire dovresti salvare il tuo lavoro:

Salva il progetto selezionando il menu File ↠ Save As.
Nella finestra di dialogo per salvare il file, nomina il progetto "SimpleBrowser" e fai click su Save.

Eseguire il progetto

Ora puoi provare la tua applicazione:

Per fare in modo di eseguire un progetto iOS, la prima volta devi assicurati di scaricare, installare e lanciare Xcode in modo di avere a disposizione il simulatore di iOS che è necessario per provare le applicazioni iOS su un Mac. Puoi scaricare gratuitamente Xcode dal Mac App Store. Dopo aver scaricato e installato Xcode, devi lanciarlo una volta per accettare il suo Accordo di Licenza. Dopo aver fatto questo, puoi chiudere Xcode in quanto non ne avrai più bisogno.
Fai click sul pulsante Run nella toolbar di Xojo per lanciare l'applicazione nel simulatore per iOS.
Scrivi un URL di tua scelta ( ma di tipo sicuro, ovvero che usi il protocollo https) o utilizza quello di default e fai click sul pulsante "Show".
Vedrai caricare la pagina web richiesta.
Quando hai finito di provare l'applicazione Simple Browser, puoi chiudere il simulatore iOS e ritornare a Xojo.

Se vuoi utilizzare un URL non sicuro (ovvero che usa il protocollo http), devi configurare l' iOS App Transport Security come descritto in questo post del blog. O guarda la pagina relativa all'iOSHTMLViewer per ulteriori informazioni.

Prossimi passi

Questa Guida Rapida ti ha introdotto all'uso di Xojo e mostrato come realizzare una semplice applicazione per iOS.

Ora puoi consultare la Guida Utente e l' iOS Language Reference.