Come in molti ormai sapranno, Microsoft ha annunciato l'uscita di Windows Phone 7 per la "holiday season 2010". Lasciando le considerazioni sul mercato e sui concorrenti esistenti a chi si occupa di marketing e strategie, in questo articolo cercheremo di capire come installare e utilizzare l'SDK disponbile attualmente (e gratuitamente) per costruire insieme la prima applicazione Windows Phone 7.
Prima di iniziare è bene ribadire due informazioni fondamentali:
- Windows Phone 7 rappresenta, per gli sviluppatori .NET, la naturale continuazione di un processo di evoluzione degli strumenti di sviluppo, evoluzione che chi sviluppa applicazioni mobile, aspetta da tempo.
- Il nuovo telefonino (termine riduttivo) consente la creazione della user interface utilizzando XAML, il linguaggio dichiarativo familiare a chi sviluppa applicazioni con Windows Presentation Foundation o con Silverlight.
Questa continuità è garantita proprio dalla presenza dal runtime di Silverlight a bordo dei dispositivi per l'esecuzione delle applicazioni; la versione utilizzata è la 3 con alcune funzionalità apparse nella versione 4.
In pratica, chi scrive applicazioni Windows o Web dal 2006 ha avuto l'opportunità di utilizzare XAML e si troverà a suo agio nella definzione della user interface. Chi invece arriva dal classico sviluppo mobile, effettuato con Windows Form e SQL CE, si troverà con una nuova opportunità e un'apparente "mancanza": da un lato potremo utilizzare un linguaggio più evoluto per la definizione dell'interfaccia utente, dall'altro sentiremo la mancanza di SQL CE, che in questa prima versione è presente sul device, ma non utilizzabile direttamente dalle nostre applicazioni.
Un'altra novità è rappresentata dalla possibilità di utilizzare XNA Game Studio 4.0: XNA è una tecnologia rivolta soprattutto a chi produce giochi, ma non è da sottovalutare per creare animazioni complesse o interagire con alcune feature del device; è possibile creare applicazioni "miste" Silverlight e XNA per ottenere il meglio da entrambe le piattaforme.
Fatte queste premesse iniziamo a sviluppare la nostra prima applicazione, partendo dall'installazione degli strumenti di sviluppo fino al deploy e test sull'emulatore. Non è necessario utilizzare un device fisico, così come non sono necessarie competenze sull'ambiente di sviluppo mobile precedente.
Installare l'SDK
Iniziamo, passo per passo, a costruire l'applicazione partendo dall'installazione dell'SDK per arrivare alla prima applicazione, semplicissima ma concreta, da provare sull'emulatore.
La prima cosa da fare è scaricare l'SDK, meglio conosciuto come Windows Phone Developer Tools. La versione attuale (April CTP Refresh) fornisce Visual Studio 2010 Express for Windows Phone CTP, un emulatore, sempre in versione CTP, per effettuare le prove, Silverlight for Windows Phone CTP ovvero il runtime di Silverlight adattato al nuovo device e, come abbiamo avuto modo di indicare nella prefazione, XNA Game Studio.
Nota: per installare l'SDK dobbiamo avere già installato il .NET Framework 4.0 e il .NET Framework 4.0 Client Profile
Il tutto non necessita di una versione già installata di Visual Studio 2010: il setup, di soli 3.2 MB, scarica poi le componenti necessarie durante il processo. Se la versione 2010 di Visual Studio è già presente sul sistema, troveremo i nuovi template di progetto a fianco dei template esistenti: vi consiglio comunque di utilizzare Visual Studio 2010 Express for Windows Phone per lo sviluppo in quanto avremo una migliore interazione con l'emulatore.
Sulla home page dedicata agli sviluppatori, si trovano molte altre informazioni importanti: la guida per la definizione della user interface così come la guida per lo sviluppo di siti web. Non è da sottovalutare l'importanza di queste linee guida per la costruzione di applicazioni che aderiscano alla filosofia generale adottata da Microsoft per la costruzione della user interface e user experience.
Il primo progetto
Una volta installati gli strumenti è possibile procedere alla creazione del primo progetto. Questa CTP offre la possibilità di creare applicazioni per le due tipologie di runtime, Silverlight e XNA, come si può notare dall'immagine seguente.
Figura 1. Tipologie di ambiente: Silverlight e XNA
(clic per ingrandire)
Per ogni tipologia di ambiente, dovremo poi effettuare la classica scelta sul tipo di progetto. L'ambiente Silverlight mette a disposizione i seguenti template:
| Template | Descrizione |
|---|---|
| Windows Phone Application | è il template che sceglieremo per questo articolo e comprende la definizione dell'applicaizone e una prima schermata libera da vincoli sul disegno |
| Windows Phone List Application | questa alternativa facilita la creazione di una interfaccia utente che si presenta come lista di opzioni sulla schermata principale con la possibilità di scegliere un elemento per vederne i dettagli |
| Windows Phone Class Library | consente di creare la classica libreria sotto forma di dll da referenziare nei progetti |
| Windows Phone Application | Testo |
Dedicheremo ai template XNA un articolo apposito in quanto richiedono una introduzione alla piattaforma prima di procedere con la descrizione dei template.
Diamo un nome al progetto e alla solution (nel mio caso ThinkAhead.HelloWorld) e confermiamo la creazione del progetto, che, grazie al template presenterà una schermata MainPage.xaml predisposta per accogliere i controlli.
Figura 2.
(clic per ingrandire)
La prima cosa da notare è la presenza di una Page di default al posto della classica Window o per chi arriva da .NET Compact Framework, Windows Form. Le applicazioni su Windows Phone 7 si basano infatti sul concetto, già presente sia in WPF che in Silverlight, di navigazione: ogni "maschera" è una pagina che compone il flusso con cui l'utente si muove sull'applicazione stessa.
La finestra di design mostra l'interfaccia del telefono dove appare il pulsante Back (il primo in basso a sinistra), tramite il quale è possibile tornare indietro di un passo.
La seconda cosa da notare è la presenza di un titolo e un sottotitolo all'interno della pagina: modifichiamo subito queste informazioni per fornire il nome dell'applicazione e dell'azienda che produce: per eseguire questa operazione si può agire dalla finestra delle proprietà oppure direttamente nel codice XAML; questa procedura è scontata per chi lavora con WPF o Silverlight, ma non lo è assolutamente per chi arriva da Windows Forms.
Modificato il titolo, il codice XAML si presenta così:
Figura 3. Codice XAML
(clic per ingrandire)
Prima di aggiungere i controlli diamo una occhiata al codice attuale: il template di progetto ci propone di gestire le informazioni all'interno di una Grid composta da due righe (RowDefinition), la prima delle quali ospita i due TextBlock del titolo che abbiamo appena modificato, mentre la seconda ospita il vero contenuto della pagina (ContentGrid, per adessa giustamente vuota).
Da notare come qualunque elemento della user interface faccia riferimento al suo style tramite una risorsa esterna (espressione StaticResource): queste risorse sono definite nel file App.xaml che compone la nostra applicazione insieme a due immagini che rappresentano rispettivamente l'icona per l'applicazione stessa e lo sfondo.
Ancora una volta chi lavora con WPF/Silverlight dovrebbe essere abituato a centralizzare gli stili, così come chi lavora sul web può fare un parallelo con i CSS (cascading style sheet).
Per chi arriva dall'ambiente mobile precedente è sufficiente pensare a come strutturiamo il codice per capire il beneficio di centralizzare gli stili in risorse: "mai scrivere la stessa riga di codice in due posti diversi" è la regola che seguiamo come sviluppatori. Progettando la user interface la regola è altrettanto valida: "mettiamo il font, la relativa dimensione e il colore del titolo in una risorsa esterna così quando lo modificheremo agiremo su qualunque elemento video punti tale risorsa".
Ad esempio il motivo per cui la scritta ThinkAhead del titolo appaia in font Segoe WP a dimensione 20, mentre il titolo dell'applicazione appaia in Segoe WP Light a dimensione 32 è dichiarato centralmente nell'applicazione (App.xaml): una modifica alla definizione centrale aggiorna tutte le pagine dell'applicazione senza richiedere un intervento su ciascuna.
Creare la User Interface
Aggiungiamo un controllo TextBox e notiamo come durante il suo posizionamento venga ancorato ai margini definiti nella griglia che lo contiene (ContentGrid)
Figura 4. Ancorare una TextBox all'interfaccia
(clic per ingrandire)
Il designer in realtà sta seguendo la definizione XAML del contenuto, definizione che si presenta così:
Torneremo sull'argomento layout e posizionamento più avanti: è bene però notare da subito come le operazioni sul designer corrispondano a elementi del codice XAML; nel nostro caso, viene utilizzato e modificato l'attributo Margin non appena si trascina un controllo sulla superficie dal designer.
Inseriamo anche un Button e un TextBlock (è l'analogo di una Label, per chi viene da Windows Forms o Web Forms) per poi creare il codice che, alla pressione del pulsante, riempia la TextBlock con il contenuto del TextBox: l'esempio, come accennato all'inizio, è volutamente molto semplice per prendere pratica con gli strumenti.
Dopo aver trascinato i due controlli, il form, o per meglio dire la Page, con il suo codice corrispondente, dovrebbero presentarsi così:
Figura 6. ia
(clic per ingrandire)
Senza fare nessuna finezza grafica o entrare nel merito di come allineare i controlli o ancora definire risorse di stile, andiamo a creare il codice nel code behind per rispondere alla pressione del pulsante da parte dell'utente.
Facendo il classico doppio click sul controllo Button otteniamo la creazione dell'event handler per l'evento Click su Button1, e senza bisogno di fare l'analisi dettagliata, semplicemente scriviamo il codice che ci siamo prefissi:
Figura 7. ia
(clic per ingrandire)
A parte il fatto di sbagliare una TextBox con una TextBlock, cosa facilissima in quanto l'intellisense ci propone l'ultima utilizzata, il codice dovrebbe presentarsi come nell'immagine precedente.
Proviamo ad eseguirlo per vedere qualche dettaglio sull'emulatore che Visual Studio chiamerà in causa alla pressione del tasto F5.
Esecuzione
Dopo la compilazione, Visual Studio 2010 Express for Windows Phone avvia l'emulatore e passato qualche secondo di inizializzazione appare la nostra applicazione: Visual Studio si preoccupa infatti di effettuare anche il deploy dell'applicazione nonchè di eseguirla.
La maschera si presenta così:
Figura 8. ia
(clic per ingrandire)
È sufficiente entrare nel campo TextBox affinchè appaia il SIP (Software Input Panel); sull'emulatore è possibile utilizzare il SIP oppure affidarsi alla tastiera fisica del PC per velocizzare le operazioni.
Figura 9. ia
(clic per ingrandire)
Per testare l'efficacia del nostro codice possiamo ovviamente premere il Button per ottenere il valore "Ciao a tutti" nel TextBlock, ma prima di farlo, o se ve lo sto comunicando troppo tardi, anche dopo averlo già fatto, torniamo in Visual Studio e proviamo a mettere un break point nel codice. Visual Studio supporta il debug del codice che gira sull'emulatore (chi lavora in ambiente mobile è abituato a questa funzionalità).
L'emulatore
L'emulatore, pur non potendo in questa prima CTP simulare le funzionalità hardware come accelerometro, bussola o GPS, consente di eseguire altre operazioni oltre al semplice test dell'applicazione corrente.
Ad esempio è possibile simulare la rotazione del device di 90 gradi verso destra o verso sinistra tramite la pressione dei pulsanti della piccola toolbar visibile nella seguente figura:
Figura 10. ia
(clic per ingrandire)
Si può ovviamente tornare alla posizione Portrait premendo il pulsante inverso. A tale proposito occorre introdurre due argomenti che poi verranno sviscerati in diversa sede.
La rotazione non è obbliagatoria
Il primo argomento è, più che altro, una considerazione: ogni applicazione può supportare o meno la rotazione dello schermo, non tutte le applicazioni infatti devono ruotare seguendo l'orientamento del device. Si pensi ad esempio ad un gioco in cui è importante definire una superficie rettangolare dall'alto verso il basso con movimento orientato verso l'alto (per i nostalgici dei giochi anni 80 potrebbe essere 1942 oppure Penguin), oppure una applicazione che usa l'accelerometro per eseguire altre operazioni.
L'esempio più classico è "teeter": disponibile su qualunque telefono, consiste nel far eseguire alla pallina un percorso "ad ostacoli" per arrivare alla buca finale; per muovere la pallina l'utente deve orientare/piegare il telefono nelle varie posizioni; pensate a cosa succederebbe se al movimento verso destra, oltre a muovere la pallina a destra lo schermo ruotasse.
In una applicazione Silverlight è possibile indicare al sistema il tipo di orientamento supportato: il template di Visual Studio 2010 Express for Windows Phone attuale ci propone di impostare il supporto direttamente nel costruttore di una page: il livello viene impostato nella page e non nell'applicazione in quanto, giustamente, ogni page di una applicazione potrebbe supportare o meno la rotazione.
Interfacce indipendenti dalla risoluzione
Il secondo argomento da tenere in considerazione è il supporto per la risoluzione video oltre alla rotazione dello schermo: è fuori dallo scopo di questo articolo evidenziare le tecniche e le modalità per realizzare user interface indipendenti dalla risoluzione, ma è fondamentale tenerne conto in questo ambiente.
Zoom
L'emulatore consente anche di impostare il livello di Zoom per adattare la finestra a diverse risoluzioni video. Il tutto si effettua premendo il pulsante "chiave inglese" e impostando il livello di zoom nella maschera rappresentata nella figura seguente.
Debug
L'emulatore può essere utilizzato per effettuare più sessioni di debug, anche di applicazioni diverse: non è necessario chiudere l'emulatore per ogni operazione di correzione del codice: è sufficiente, anzi consigliato, stoppare l'applicazione da Visual Studio lasciando l'emulatore aperto, correggere il codice e rieffettuare un deploy tramite F5.
Tenere l'emulatore aperto ci consente di risparmiare molto tempo in quanto ad ogni riavvio l'emulatore dovrebbe caricare e inizializzare una lunga serie di feature, fra cui la possibilità di agganciarsi al PC che lo ospita per navigare in rete.
Internet Explorer
Inoltre, l'emulatore, consente di aprire Internet Explorer per raggiungere indirizzi http: premendo il pulsante Start nel centro della toolbar che i pulsanti del device reale si apre la "home page" del telefono, in cui compare l'icona di Internet Explorer.
Ad esempio, digitando "http://www.html.it" nell'indirizzo, possiamo verificare come la versione mignon di Internet Explorer visualizzi l'home page di HTML.it:
L'emulatore, anche se non ha la user interface definitiva, né tutte le applicazioni che troveremo sul telefono, fornisce già le API per interagire con esse: ad esempio è possibile leggere i dati sulla location, interagire con gli elementi di Outlook e così via.
Il 23 giugno 2010, a Milano, si terrà Microsoft Remix 2010, evento gratuito organizzato direttamente da Microsoft, che prevede una intera traccia di sessioni sullo sviluppo per Windows Phone 7.
Durante il Remix verrà utilizzata un'applicazione sviluppata dalla mia società per la valutazione in tempo reale delle sessioni: uno dei client, oltre al web e agli sms, sarà ovviamente Windows Phone 7. Ci vediamo a Milano.
Alla prossima
