I primi passi con PhoneGap per Windows Phone: creiamo il primo progetto

Print Content | More

Nel post precedente abbiamo iniziato a capire che cos’è PhoneGap e cosa significa al giorno d’oggi sviluppare un’applicazione mobile cross-platform. Ora iniziamo a “sporcarci le mani” e vediamo come iniziare a lavorare con PhoneGap, creando il nostro primo progetto e scrivendo qualche riga di codice.

Installare PhoneGap

Innanzitutto occorre scaricare il pacchetto di PhoneGap dal sito ufficiale all’indirizzo http://phonegap.com/. Il package contiene le librerie per tutte le principali piattaforme: la versione Windows Phone si presenta come un template per Visual Studio, incluso nel file PhoneGapStarter.zip, da copiare all’interno della cartella C:\Users\[USERNAME]\Documents\Visual Studio 2010\Templates\ProjectTemplates\Silverlight for Windows Phone, dove [USERNAME] è ovviamente il nome del vostro account utente.

Una volta fatta questa operazione, se avviate Visual Studio e scegliete di creare un nuovo progetto, nella sezione Visual C# (sia per le versioni Express che per le versioni a pagamento) troverete un nuovo template chiamato PhoneGapStarter: date un nome al progetto, premete Ok e Visual Studio inizierà la creazione includendo tutti i file necessari a PhoneGap.

SNAGHTML53b5d18

La struttura di un progetto PhoneGap

Il progetto PhoneGap, rispetto ad un progetto tradizionale Windows Phone, include una serie di file e cartelle in più, che sono quelle utilizzate da PhoneGap. Quella più importante è la cartella www, che contiene l’applicazione web e propria e, di default, contiene:

  • il file index.html, che è la pagina che viene caricata all’avvio
  • il file master.css, che è il foglio di stile di default che viene utilizzato
  • il file phonegap-1-3-0.js, che è la libreria Javascript che funge da wrapper verso le chiamate native della piattaforma e con la quale andrete ad interagire per sfruttare le funzionalità native del device.

L’applicazione PhoneGap è a tutti gli effetti una vera e propria applicazione web, per cui all’interno  di questa cartella potete inserire tutte le risorse che volete, incluse librerie come jQuery o Knockout.js, molto conosciute nell’ambito dello sviluppo web. In automatico, all’avvio, PhoneGap compilerà un file chiamato GapSourceDictionary.xml includendo i riferimenti a tutte queste risorse, per poi poterle utilizzare.

La struttura della pagina index.html

Il file index.html non è nient’altro che una normalissima pagina HTML5 (lo riconoscete dal doctype), con già inclusi al suo interno gli script e i fogli di stile standard di PhoneGap che vi ho elencato prima.

In più, la pagina include la sottoscrizione, tramite un event listener di Javascript, all’evento deviceready, che viene invocato da PhoneGap nel momento in cui l’applicazione è stata inizializzata ed è pronta a interagire con l’utente. Tale sottoscrizione viene gestita dalla funzione onDeviceReady (definita poco sotto), in cui potete includere il codice che volete eseguire all’avvio dell’applicazione. Di default, questa funzione contiene semplicemente due righe di codice Javascript per:

  • Mostrare il classico Hello World indicando anche la versione di PhoneGap in uso sfruttando la funzione window.device.phonegap
  • Dato che fare debug di Javascript in una pagina che gira all’interno di un browser mobile non è così agevole come con un browser tradizionale, PhoneGap include una funzione Javascript che permette di scrivere nella Output Window di Visual Studio, che si chiama console.log. Di default, il progetto di PhoneGap include la scrittura di un messaggio di prova nella Output Window.

Mostriamo una MessageBox

Iniziamo a mettere mano al progetto con un esempio molto semplice: mostriamo a video una MessageBox nel momento in cui l’utente fa click su un pulsante. La parte di rendering del pulsante e di gestione del click viene affidata ad HTML e Javascript standard; la visualizzazione dell’alert invece verrà fatta utilizzando una funzione proprietaria di PhoneGap.

Vediamo l’HTML.

<body>
    <input onclick="onClick()" type="button" value="Click me" />
</body>

La pagina è composta da un semplice div, a cui abbiamo dato l’id welcomeMsg per poterlo identificare in Javascript, e un tag input, che rappresenta il nostro bottone, del quale gestiremo l’evento onclick tramite la funzione onClick(), che è così definita:

<script type="text/javascript">
    function onClick() {
        navigator.notification.alert("This is a message box");
    }
</script>

Qui entra in gioco PhoneGap: la funzione navigator.notification.alert provvede a interfacciarsi con le API native di Windows Phone e a mostrare una MessageBox con il testo che viene passato come parametro della funzione. Lanciamo l’applicazione tramite il debugger di Visual Studio, facciamo clic sul pulsante e vedrete comparire la MessageBox nativa di Windows Phone con il testo che avete scelto.

In conclusione

In questo post abbiamo visto un esempio molto semplice: nel prossimo post vedremo qualcosa di più approfondito, che ci permettà di sfruttare più a fondo le potenzialità di Windows Phone. In allegato, trovate il codice sorgente del semplice esempio realizzato in questo post.


Windows Phone , Microsoft , PhoneGap , Javascript , HTML 5

6 comments

Related Post

  1. #1 da Salvatore Di Fazio Thursday February 2012 alle 10:24

    Forse è arrivato il momento in cui svilupperò su WP7 :)

  2. #2 da Max Thursday February 2012 alle 05:02

    Ciao Matteo, complimenti !
    Per le chiamate a servizi WCF da PhoneGap, devo realizzare servizi REST ?

    Grazie

  3. #3 da Matteo Pagani Thursday February 2012 alle 05:24

    Ciao Max,
    grazie per i complimenti!

    La risposta è si, trattandosi di applicazioni web realizzate in HTML e JS i servizi REST sono sicuramente l'approccio migliore.
    Mi hai dato un'idea per uno degli argomenti da coprire nei prossimi post :-)

    Ciao!

  4. #4 da Max Thursday February 2012 alle 05:33

    Grande Matteo, magari qualche tuo articolo su PhoneGap con WCF rest... :-)

  5. #5 da yoko Monday July 2012 alle 09:35

    ciao! ho provato a seguire i passaggi di installazione che dici ma:

    1_ nell'ultima versione di visual studio (o almeno in quella che ho io) non esisteste nessuna sottocartella "Silverlight for Windows Phone". in "ProjectTemplates" ho solo 3 cartelle: visual basic, visual c#, visual veb basic. in questo caso dove metto il file PhoneGapStarter.zip????

    2_ non trovo il file PhoneGapStarter.zip ...forse sbaglio io, non so. sono andata su phonegap.come e ho scaricato la versione 2.0.0 ma all'interno quel zip proprio non c'è!

    spero riuscirai ad aiutarmi >_<

  6. #6 da Matteo Pagani Monday July 2012 alle 11:12

    Ciao, domanda banale: sul tuo computer è installata l'SDK per lo sviluppo di applicazioni per Windows Phone? La sua presenza è indispensabile per utilizzare PhoneGap.

    Come te la cavi con l'inglese? Alcune indicazioni di questo post (come il nome del file) non sono più valide perchè il progetto PhoneGap, con l'uscita delle release successive alla 1.3.0, ha cambiato nome in Apache Cardova e, di conseguenza, sono cambiati anche i nomi di molte API e dei file di progetto.
    Ti consiglio di seguire le indicazioni pubblicate sul sito ufficiale, che sono aggiornate: http://docs.phonegap.com/en/2.0.0/guide_getting-started_windows-phone_index.md.html#Getting%20Started%20with%20Windows%20Phone

    Ciao!


(will not be published)
(es: http://www.mysite.com)