Italiano:Guida Rapida Desktop

Benvenuto in Xojo, lo strumento più semplice per creare le tue applicazioni. 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 finestre e finestre di dialogo 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 desktop (un semplice browser web). Ti occorreranno circa 15 minuti per completare questa Guida Rapida.

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 Desktop, quindi fai click su Desktop.
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 finestra 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 Window1 (che è selezionata), l'oggetto App e l'oggetto MainMenuBar. 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 finestre della tua applicazione. Mostra una anteprima di come apparirà la finestra una volta lanciata l'applicazione. In questa immagine la finestra è 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 finestra o al progetto. Per aggiungere i controlli alla finestra basta trascinarli dalla Libreria e rilasciarli sulla finestra dove desideri posizionarli. Puoi aggiungere un controllo alla finestra 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.

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

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 finestre e i controlli. Nel progetto SimpleBrowser, utilizzerai la classe Window di default per creare la tua finestra 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 Window1 aperta nel Layout Editor, ora sei pronto per iniziare ad aggiungere i controlli alla finestra. Aggiungerai un Text Field, un Button e un HTML Viewer.

Iniziamo con il Text Field: Nella Libreria, fai click sull'icona del Text Fielde trascinala nell'angolo in alto a sinistra della finestra 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.
Il controllo successivo è il Button: Nella Libreria, fai click sull'icona del Default Button e trascinala nell'angolo in alto a destra della finestra che si trova nell'Editor del Layout.
L'ultimo controllo è l' HTML Viewer: Trascina l'icona dell'HTML Viewer nella parte rimasta vuota della window (potresti dover scorrere i controlli nella Libreria per trovare l'icona). Ridimensiona il controllo nella window, utilizzando le maniglie della selezione, in modo da riempire lo spazio sotto il Text Field e il Button, aiutandoti con le guide per l'allineamento.
L'ultimo passo è quello di ridimensionare il Text Field in modo da renderlo più largo. Fai click sul campo di testo per visualizzarne le maniglie e, utilizzando quella che si trova nel centro sulla destra, trascinala verso destra fino a vedere la guida che ti indica che sei abbastanza vicino al Button.

Al termine del lavoro la window 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 Window e dei controlli che hai aggiunto. Alcune delle cose che devi fare sono:

Rinominare tutti i controlli (e la window) in modo che descrivano meglio quello che fanno e siano quindi più semplici da indicare nel codice.
Modificare l'etichetta del Pulsante.
Modificare le proprietà di Lock in modo che il controllo si ridimensioni correttamente al ridimensionarsi della window.

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 Window

Se non l'hai già fatto, premi il pulsante Inspector nella toolbar per visualizzarlo.

Dovrai modificare le proprietà Name e Title della window:

Prima di tutto, nel Layout Editor, fai click sulla barra del titolo della window per selezionarla. Ora l'Inspector mostra le proprietà della window.
Nel campo Name (che si trova nel sezione ID), cambia il nome da “Window1” a “BrowserWindow”. Premi sulla tastiera il tasto Return per vedere il nuovo nome nel Navigator. Cambiare il nome rende più semplice l'identificazione degli elementi del progetto nel Navigator ed è una buona pratica da iniziare a seguire sin da subito.
Nel campo Title (che si trova nella sezione Frame), cambia il nome da “Untitled” a “Web Browser”. Premi il tasto Return per vedere la modifica del titolo nella window all'interno dell'editor del layout.

Impostiamo le proprietà per il Text Field

Il Text Field è dove l'utente inserirà l'URL che vuole vedere nel browser. Cambierai le proprietà: Name e Locking

Nella window, seleziona il controllo TextField1. L'Inspector si modifica al fine di mostrare le proprietà del Text Field.
Nel campo Name, cambia il valore da “TextField1” a “AddressField”. Premi Return per vedere la modifica del nome nel Navigator. Cambiare il nome rende più semplice l'identificazione degli elementi del progetto nel Navigator e quando scrivi il codice ed è una buona pratica da iniziare a seguire sin da subito.
Ora devi modificare i lock in modo che il Text Field modifichi la sua larghezza man mano che la window viene ridimensionata. Nella sezione Locking guarda l'immagine che mostra la finestra con l'icona di un lucchetto chiuso in altro e a sinistra, e quella di un lucchetto aperto in basso e a destra. Fai click sul lucchetto a destra in modo che sia chiuso e lascia quello in basso aperto.

Impostiamo le proprietà per il Pulsante

L'utente farà click sul button per visualizzare la pagina web. Cambierai le proprietà: Name, Locking e Caption.

Sulla window, seleziona il controllo PushButton1. L'Inspector si modifica al fine di mostrare le proprietà del Button.
Nel campo Name, cambia il valore da “PushButton1” a “GoButton”. Premi Return per vedere la modifica del nome nel Navigator. Cambiare il nome rende più semplice l'identificazione degli elementi del progetto nel Navigator e quando scrivi il codice ed è una buona pratica da iniziare a seguire sin da subito.
Ora devi modificare i lock in modo che il pulsante rimanga sul lato destro della window quando questa viene ridimensionata. Nella sezione Locking guarda l'immagine che mostra la finestra con l'icona di un lucchetto chiuso in altro e a sinistra, e quella di un lucchetto aperto in basso e a destra. Fai click sul lucchetto a sinistra in modo che questo rimanga aperto e automaticamente si chiude quello a destra.
Infine, diamo un etichetta al pulsante. Nel campo Caption (nella sezione Behavior), cambia il valore da “OK” a “Go”.

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 Locking

Nella finestra, seleziona il controllo HTMLViewer1. L'Inspector si modifica al fine di mostrare le proprietà dell'HTML Viewer.
Nel campo Name, cambia il valore da “HTMLViewer1” a “WebViewer”. Premi Return per vedere la modifica del nome nel Navigator. Cambiare il nome rende più semplice l'identificazione degli elementi del progetto nel Navigator e quando scrivi il codice ed è una buona pratica da iniziare a seguire sin da subito.
Infine, modifichiamo i lock in modo che il visualizzatore web continui a riempire la finestra quando questa viene ridimensionata. Nella sezione Locking guarda l'immagine che mostra la finestra con l'icona di un lucchetto chiuso in altro e a sinistra, e quella di un lucchetto aperto in basso e a destra. Fai click sui lucchetti a destra e in basso in modo da chiuderli.

Aggiungiamo il codice

La tua applicazione è quasi completa. Ora bisogna aggiungere il codice che dice all'HTML Viewer 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 fa click sul pulsante GoButton, che ha l'etichetta “Go” nella finestra.
Leggere l'URL che l'utente ha inserito in AddressField.
Fare in modo che il WebViewer mostri la pagina richiesta.

Segui i seguenti passi per aggiungere il codice:

Nella finestra fai doppio click sul controllo GoButton , quello con l'etichetta “Go”. Compare la finestra Add Event Handler. Quando un utente fa click su un pulsante, l'applicazione esegue il codice presente nel gestore d'evento (event handler) Action event. Questo vuol dire che dei aggiungere del codice al gestore d'evento Action , quindi seleziona Action nella lista degli eventi e fai click su OK.
Nota come il Navigatore si aggiorni per mostrare l'evento Action sotto il controllo GoButton e come l'Editor del Layout venga sostituito dall'editor del Codice. Questo passo risolve il primo problema: capire quando l'utente fa click sul pulsante GoButton.
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:
AddressField.Text
L'ultimo passo è fare in modo che il WebViewer mostri la pagina. Questo è fatto chiamando il metodo LoadURL del controllo, usando come argomento l'URL che l'utente ha scritto. Il tuo codice ora è questo:
WebViewer.LoadURL(AddressField.Text)
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):
WebViewer.LoadURL(AddressField.Text)

Questo è tutto! La tua prima applicazione è completa.

Lanciare l'applicazione

Dovresti sempre salvare periodicamente il tuo progetto e sicuramente prima di eseguirlo. Per farlo:

Salva il progetto selezionando il menu File ↠ Save.
La prima volta ti verrà chiesto il nome del progetto, usa “SimpleBrowser” e fai click su Save.

Ora puoi testare la tua applicazione completa:

Fai click sul pulsante Run nella toolbar per testare il tuo progetto. L'applicazione viene eseguita e appare la sua finestra.
Scrivi un indirizzo web di tua scelta, ad esempio https://www.wikipedia.org, e fai click sul puslante “Go”.
Vedrai la pagina web.
Quando hai finito di sperimentare con la tua applicazione Simple Browser, puoi chiudere la finestra per terminare l'applicazione e ritornare a Xojo. Su macOS, seleziona il menu SimpleBrowser.debug ↠ Quit per terminare l'applicazione.

Prossimi passi

Questa Guida Rapida ti ha introdotto all'uso di Xojo e hai imparato come realizzare la tua prima applicazione, progettando la finestra, aggiungendo i controlli e il codice. Come passo successivo puoi seguire il Tutorial per il Desktop e poi esplorare la Guida Utente e il Desktop Language Reference per continuare ad imparare come realizzare le tue prossime applicazioni con Xojo.