Italiano:Guida Rapida Web

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 player di video YouTube). 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 Web, quindi fai click su Web.
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 "YouTubePlayer" 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 WebPage1 (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 l'applicazione YouTube Player

Creare un'applicazione è modo migliore per imparare velocemente ad utilizzare Xojo. In questa Guida Rapida creeremo un semplice applicazione web che mostra dei video di YouTube utilizzando il loro ID

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'ID del video di YouTube verrà inserito in un Text Field nella parte superiore della finestra.
Button: Un WebButton (Pulsante Web) si utilizza per avviare un'azione. L'utente farà click sul pulsante per caricare il video con lo specifico ID nel player YouTube.
YouTubeMovie: Il controllo YouTubeMovie è utilizzato per mostrare ed eseguire un video di YouTube. In questo progetto, mostrarà il video il cui ID è stato inserito nel Text Field.

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

Building the User Interface

Con Xojo in esecuzione e la WebPage1 aperta nel Layout Editor, ora sei pronto per iniziare ad aggiungere i controlli alla finestra. Aggiungerai un Text Field, un Button e un YouTube Movie.

Iniziamo con il Text Field: Nella Libreria, fai click sull'icona del Text Fielde trascinala nell'angolo in alto a sinistra della pagina web che si trova nell'Editor del Layout. Non appena sarai vicino ai bordi della pagina, 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 pagina web che si trova nell'Editor del Layout.
L'ultimo controllo è YouTube Movie: Trascina l'icona dell'YouTube Movie nella parte rimasta vuota della pagina.
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 a 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 pagina web nel Layout Editor dovrebbe essere come questa:

Impostiamo le proprietàs

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 pagina e dei controlli che hai aggiunto. Alcune delle cose che devi fare sono:

Rinominare tutti i controlli (e la la pagina) 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 i controlli si ridimensionino correttamente al ridimensionarsi della pagina.

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 Web Page

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

Dovrai modificare le proprietà Name e Title :

Prima di tutto, nel Layout Editor, fai click sulla barra del titolo della web page per selezionarla. Ora l'Inspector mostra le proprietà della web page.
Nel campo Name (che si trova nel sezione ID), cambia il nome da “WebPage1” a “PlayerPage”. 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 “YouTube Player”. Premi il tasto Return per vedere la modifica del titolo della pagina web all'interno dell'editor del layout.

Impostiamo le proprietà per il Text Field

Il Text Field è dove l'utente inserirà il codice del video da visualizare. Cambierai le proprietà: Name e Locking

Sulla Web Page, 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 “IDField”. 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 web page viene ridimensionata. Nella sezione Locking guarda l'immagine che mostra la web page 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 il video. Cambierai le proprietà: Name, Locking e Caption.

Sulla Web Page, seleziona il controllo Button1. L'Inspector si modifica al fine di mostrare le proprietà del WebButton.
Nel campo Name, cambia il valore da “Button1” a “LoadVideoButton”. 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 pagina web 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 click su quello a destra per chiuderlo.
Infine, diamo un etichetta al pulsante. Nel campo Caption (nella sezione Behavior), cambia il valore da “Untitled” a “Load Video”.

Impostiamo le proprietà per YouTube Movie

Le ultime modifiche all'interfaccia che bisogna fare sono quelle relative all'YouTube Movie. Qui cambieremo le proprietà: Name and Locking

Sulla Web Page, seleziona il controllo YouTubeMovie1. L'Inspector si modifica al fine di mostrare le proprietà dell'YouTubeMovie.
Nel campo Name, cambia il valore da “YouTubeMovie1” a “YouTubePlayer”. 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 video player continui a riempiere la pagina web 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 4 righe di codice per terminare il tuo progetto!

The steps you need to do are:

Capire quando l'utente fa click sul pulsante LoadVideoButton, che ha l'etichetta “Load Video” nella finestra.
Leggere l'ID del video che l'utente ha inserito nel campo IDField.
Fare in modo che YouTubePlayer mostri il video.

Segui i seguenti passi per aggiungere il codice:

Sulla web page, fai doppio click sul controllo LoadVideoButton, con etichetta “Load Video”. 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 LoadVideoButton 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 LoadVideoButton.
Ora devi caricare il video e sono necessarie due cose per fare questo:
- L'ID che l'utente ha inserito è memorizzato nella proprietà Text della classe Text Field. Puoi accedere ai valorei delle proprietà spcificando il nome dell'istanza della classe, seguita da “.” e poi il nome della proprietà. In questo caso il nostro Text Field ha come nome IDField pertanto scriverati: IDField.Text
- Devi convertire questo ID in un URL di un video YouTube e dire a YouTubePlayer di caricarlo.Puoi farlo con questo codice:
  YouTubePlayer.URL = "https://www.youtube.com/watch?v= " + IDField.Text

Questo è tutto! La tua prima applicazione web è 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 “YouTubePlayer” 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 lanciata e l'applicazione web viene mostrata nel tuo browser.
Inserisci l'ID di un video YouTube. Ad esempio puoi provare questo: BeW8O0GIwMo
Fai click sul pulsante “Load Video”.
Vedrai apparire il video. Fai click sul pulsante Play sul video per vederlo in esecuzione.
Quando hai finito di sperimentare con la tua applicazione web YouTubePlayer, puoi chiudere il browser (il tab o la finestra a seconda di come è impostato il browser) e ritornare così a Xojo.

Prossimi passi

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