Windows Phone 7 Programming

Approfondimenti tematici
PROGRAMMING
Windows Phone 7
Il corso per imparare a programmare con il S.O. Microsoft dedicato agli smartphone
Windows Phone 7 programming

Il mobile il futuro. E Windows Phone 7 sar sicuramente uno dei protagonisti del film che verr proiettato sul mercato. Questo approfondimento tematico stato pensato per chi vuole scoprire tutti i segreti del nuovo sistema operativo di Redmond; stato concepito per chi desidera imparare a programmare e creare software per smartphone. La prima parte funge da introduzione e mette in evidenza tutte le caratteristiche di base del software. La seconda mostra come operare con lambiente operativo del sistema: gestire la rubrica e le telefonate, interagire con la video/fotocamera, avviare browser e ricerche. Infine, la terza parte spiega come creare da zero un progetto pratico e sviluppare software e videogame.
SVILUPPARE PER WINDOWS PHONE 7 . . . . . . . . . . . . . 4 La proposta microsoft nel mondo della telefonia mobile rompe gli schemi con il passato e si presenta come una vera rivoluzione per quanto riguarda la user experience e il modello di sviluppo basato su silverlight e sul runtime XNA WINDOWS PHONE 7: API E SENSORI . . . . . . . . . . . . . 13 La proposta microsoft nel mondo della telefonia mobile pronta al lancio. In questo articolo vedremo le api esposte per interagire con lhardware e il software della piattaforma, utilizzando il runtime di silverlight IL TELEFONO LEGGE I TUOI MOVIMENTI . . . . . . . . 22 In questo articolo ci concentriamo sulle librerie native che consentono di interagire con laccelerometro. realizzaremo un progetto per approfittare della eccellente interazione con il mondo reale offerta da windows phone 7 METRO: LINNOVATIVO LINGUAGGIO DI DESIGN . . . 29 Metro definisce le linee guida relative alla progettazione di user interface per windows phone 7. la sua filosofia, attuale e moderna, si adatta perfettamente anche ad applicazioni desktop e web di nuova generazione XNA MOBILE PER I VIDEOGAME . . . . . . . . . . . . . . . . . 35 Windows Phone 7 si presenta con una user interface completamente nuova e con un ambiente di sviluppo basato su Silverlight e XNA. in questo articolo introduciamo XNA e le sue grandi potenzialit in ambito mobile UN VIDEOGIOCO PER WINDOWS PHONE 7 . . . . . . . . 40 Lo sviluppo di un videogioco per gli smartphone dotati di windows phone 7 ora semplice ed immediato grazie al framework xna. in questa prima parte impareremo a conoscerne e sfruttarne le potenzialit di base UN VIDEOGIOCO PER WINDOWS PHONE 7 - 2 PARTE . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 La seconda parte dellarticolo dedicato allo sviluppo di un videogioco per gli smartphone Windows Phone 7 tramite il framework xna. in questo articolo vedremo come aggiungere al gioco, scrolling, nemici, proiettili e riproduzione di suoni
Windows COVER Phone 7STORY programming
Introduzione allambiente di sviluppo per Win SVILUPPARE PER WINDOWS PHONE 7 Phone 7
SVILUPPARE PER WINDOWS PHONE 7

Q
CD WEB
ThinkAhead.IoProgrammo.zip
cdrom.ioprogrammo.it
LA PROPOSTA MICROSOFT NEL MONDO DELLA TELEFONIA MOBILE ROMPE GLI SCHEMI CON IL PASSATO E SI PRESENTA COME UNA VERA RIVOLUZIONE PER QUANTO RIGUARDA LA USER EXPERIENCE E IL MODELLO DI SVILUPPO BASATO SU SILVERLIGHT E SUL RUNTIME XNA
uesto articolo ha lobiettivo di introdurre tutti coloro che vogliono essere parte della rivoluzione Microsoft nel mondo della telefonia mobile al nuovo ambiente di programmazione. Inizieremo con una descrizione delle caratteristiche hardware del dispositivo per poi concentrarci sulle feature del telefono stesso, prima di affrontare largomento principale, ovvero lo sviluppo di una semplice applicazione utilizzando gli strumenti di sviluppo, gratuiti, e il runtime di Silverlight. Nel corso dellarticolo vedremo insieme alcune specifiche per lo sviluppo di applicazioni.
IL DEVICE
A febbraio 2010, Microsoft ha reso pubbliche le sue intenzioni nel mondo della telefonia mobile e nei mesi successivi ha reso disponibili, gratuitamente, varie versioni CTP e Beta dellambiente di sviluppo. Il nome finale del prodotto Windows Phone 7 e, da tutti i punti di vista, il nuovo dispositivo rompe gli schemi con il passato, sia rispetto ai prodotti Microsoft stessi come Windows Mobile 6.5, sia rispetto ai diretti concorrenti. Anche il modo di presentare il prodotto nelle varie conferenze diverso rispetto al passato. Seguiamo lo sviluppo mobile dal 1997 quando acquistammo un device con a bordo Windows CE 1.0 in occasione della Microsoft Professional Developer Conference 97 a San Diego: neanche allora, quando, veniva lanciato un prodotto destinato ad un successo strepitoso e che tuttoggi fa da base per il nuovo device era stata data cos tanta enfasi alla presentazione come oggi accade per Windows Phone 7. Del nuovo device fondamentale comprenderne la filosofia di progettazione e le linee guida che hanno ispirato la nascita di questa nuova user experience. Con il termine user experien-
REQUISITI
Conoscenze richieste Conoscenza di .NET e Visual Studio Software necessario installare i Windows Phone Developer Tools, scaricabili gratuitamente a partire dallindirizzo http://tinyurl.com/ winp7dev Impegno
Tempo di realizzazione
ce, da qualche anno, si fa riferimento proprio allesperienza che lutente vive durante lutilizzo di un prodotto software. La user interface una delle componenti pi importanti della user experience, e non un suo sinonimo. La user experience (UX) riguarda il feeling dellutente con un sistema e comprende lesperienza, laffetto, il significato e il valore dellinterazione uomo-macchina e della propriet del prodotto stesso; inoltre, la percezione degli aspetti pratici e dellefficienza fanno parte dellesperienza dellutente. Il primo errore che pu fare lo sviluppatore di applicazioni per Windows Phone 7 ignorare queste linee guida, raccolte nel documento Application Phone UI Design and Interaction Guide , e progettare la user experience per la propria applicazione non in sintonia con il resto del device: non stiamo affermando che non possiamo avere fantasia e che le applicazioni saranno tutte uguali, anzi, stiamo affermando il contrario: le linee guida servono per evitare che lutente disperda il suo tempo alla ricerca di un tasto o di una funzionalit, servono per dare una base comune per facilitare lutilizzo delle applicazioni, riducendo i tempi di apprendimento e la dimensione delleventuale testo di help. Le applicazioni mobile sono utilizzate in contesti diversi rispetto alle applicazioni tradizionali. Lesempio pi classico : se lutente sta camminando e intanto usa il telefono, non possiamo fargli interrompere la passeggiata per farlo entrare in una opzione complicata da trovare o per costringerlo a leggere venti righe di testo di aiuto; se lutente si deve fermare non abbiamo scritto una buona applicazione e se invece lutente si distrae e attraversa la strada mentre legge... abbiamo fatto ancora peggio! Le linee guida si scaricano a partire da questo link http://developer.windowsphone.com/ windows-phone-7/ , dove si trova anche una guida per la costruzione di siti web con inter-
4 14 / Ottobre 2010
h ttp ://www ro mm .ig t Wi nd ows Phone.io 7p pr og grra am mo in
Introduzione allambiente sviluppo per Win 7 Phone 7 Windows COVER SVILUPPARE PERdi WINDOWS PHONE PhoneSTORY 7 programming
faccia mirata allo schermo e alla user experience con Windows Phone 7. Sempre a partire dal link indicato, troveremo altre due cose utilissime: la prima la documentazione sulla piattaforma che andremmo a introdurre da subito e la seconda, sono gli strumenti, gratuiti, per sviluppare applicazioni. probabile alluscita di questo articolo, vi consigliamo di fare una passeggiata su Channel 9 ( channel9.msdn.com ), dove sono disponibili vari filmati introduttivi che mostrano praticamente quasi tutte le funzionalit del telefono e linterazione dellutente con la stessa. Linsieme delle funzionalit hardware e software esposte allo sviluppatore riassunto in Fig.1, presa direttamente dalla documentazione installabile a partire dal link indicato. Come abbiamo accennato, nella parte in alto a sinistra, troviamo i due runtime, il primo dei quali, Silverlight, destinato ad applicazioni tradizionali, ovvero applicazioni la cui interfaccia utente sia basata sul classico paradigma di pagine che lutente pu navigare e su cui interagisce tramite controlli quali TextBox, ListBox e cos via. Il runtime di XNA nasce invece per sviluppare giochi, ma non da sottovalutare per gestire animazioni complesse o interazioni complesse dellutente con il device. In realt sarebbe possibile creare un gioco in Silverlight (ne troviamo diversi sul web) e una applicazione pi tradizionale in XNA, ma le librerie e soprattutto il modo di sviluppare dei due ambienti si adattano meglio per servire il compito per cui sono nate. Come si pu notare sempre dal riquadro in blu, entrambi gli ambienti hanno a disposizione una serie di librerie comuni come i sensori del telefono, il supporto alle notifiche push e possono utilizzare le API della libreria Microsoft. Phone per interagire con le funzionalit del telefono. Nel riguadro verde, troviamo invece strumenti di sviluppo gi disponibili da tempo in ambiente Desktop: Visual Studio, destinato agli sviluppatori ed Expression Blend, destinato ai designer. Visual Studio non ha bisogno di presentazioni, cos come Blend ormai il prodotto con cui si realizzano le interfacce utente per applicazioni WPF e Silverlight da qualche anno.
LA PIATTAFORMA
Per piattaforma si intende linsieme delle caratteristiche hardware e software che compongono il device: lutente finale utilizzer il telefono sfruttando le caratteristiche hardware (si pensi alla fotocamera digitale o al sistema GPS) e utilizzando il software presente sul device. Il sistema operativo del telefono , come accennato allinizio dellarticolo, una versione di Windows CE su cui installata una versione del .NET Compact Framework. Il .NET Compact Framework non per utilizzabile direttamente dagli strumenti di sviluppo, in quanto il codice si appoggia, tramite le classiche reference nei progetti, alle librerie di Silverlight o del Framework XNA. Da quando stato presentato Windows Phone 7, Silverlight non pi soltanto il potente runtime per applicazioni web, ma diventato anche lambiente di programmazione per le applicazioni mobile oltre al runtime che far girare il codice sul device. Rispetto allambiente Silverlight tradizionale, in cui le applicazioni vengono raggiunte dallutente da un browser e possono poi essere installate in locale e fatte girare fuori dal browser stesso, nellambiente Windows Phone 7 le applicazioni si installano dal Marketplace. Il software che sviluppiamo deve essere infatti inviato al Marketplace (come accadeva per Windows Mobile nel caso di applicazioni da distribuire al pubblico), che ne controlla la validit e laderenza alle specifiche per poi renderlo disponibile allacquisto o al semplice download nel caso di applicazioni gratuite o versioni trial, gestendo tutti gli aspetti di commercializzazione, compresa leventuale pubblicit e le statistiche di vendita. Le nostre applicazioni possono sfruttare le librerie messe a disposizione dalla piattaforma di sviluppo per interagire con la piattaforma stessa. Ad esempio possibile utilizzare le classi della libreria System.Net in quanto esposte dal runtime di Silverlight per effettuare richieste HTTP, cos come possibile interagire con i dispositivi hardware come il GPS o laccelerometro tramite, rispettivamente, la libreria System.Device e System.Device.Sensors . Se non avete a disposizione un device, cosa
NOTA
ARCHITETTURA APPLICAZIONI
Windows Phone 7, nella sua prima versione, offre uno spazio per la memorizzazione dei dati denominato Isolated Storage. Il codice per utilizzare lIsolated Storage segue le stesse tecniche di qualunque applicazione Silverlight. Nelle versioni successive potremmo avere supporti locali pi evoluti, quindi, per evitare di riprogettare lapplicazione o modi carla pesantemente, consigliabile utilizzare una forma di disaccoppiamento fra la user interface, lo strato di logica di business e laccesso ai dati. Questo disaccoppiamento consente di sostituire un singolo componente, nel nostro caso ad esempio laccesso al supporto di memorizzazione, senza dover modi care una sola riga nello stato UI o nel Business Layer. Si veda il blog (http://blogs.devleap. com/rob) per informazioni sullarchitettura delle applicazioni.
Fig. 1: Quadro riassuntivo della piattaforma di sviluppo
h ttp :/ / www.io pr 7 o gr am W indo w s P h o ne pr o gmo. r a mit m in g
Ottobre 2010 / 15 5
Microsoft su internet, per la precisione tramite applicazioni basate su Windows Azure che consentono di utilizzare il sistema di gestione degli utenti, le mappe, i servizi di localizzazione, meccanismi per inviare notifiche allutente e, non ultimi, i servizi esposti da Xbox Live.
NOTA
USER EXPERIENCE
Spesso lo sviluppatore sottovaluta molti degli aspetti legati alla user interface e alla user experience: non intendiamo dire che non sia in grado di costruire user interface carine o accattivanti, ma che sottovaluti limportanza di aderire alle linee guida della piattaforma. Su una interfaccia di dimensioni ridotte e su un dispositivo che fa della user experience un suo punto di forza fondamentale rispettare le linee guida: vi consigliamo caldamente di leggere la UI Design & Interaction Guide che trovate a partire dalla home page per gli sviluppatori http://developer.windowsphone.com/ windows-phone-7/.
Gli strumenti di sviluppo comprendono anche un emulatore e una tonnellata di esempi completi o esempi da costruire passo passo, e la documentazione sullintera piattaforma. Sul device (e sullemulatore) ovviamente presente un browser internet, per la precisione una versione di Internet Explorer allineata alle funzionalit della versione 7 presente sul desktop, quindi possibile optare anche per la scrittura di applicazioni web, magari ospitate su una piattaforma di cloud computing come Windows Azure di cui abbiamo avuto modo di parlare in vari articoli apparsi nei numeri precedenti. Le varie possibilit offerte dalla nuova piattaforma comprendono : 1. Silverlight 3 (con alcune feature della versione 4) per la creazione di moderne user interface basate su eventi 2. XNA per realizzare giochi e animazioni complesse 3. HTML/XHTML/AJAX/JQuery per applicazioni web basate su Internet Explorer 4. Applicazioni miste in cui, ad esempio, la parte principale scritta in Silverlight, ma sfrutta alcune animazioni fatte con XNA e per alcuni contenuti web sfrutta il controllo Web Browser. Tranne nel caso di applicazioni basate su browser, possibile utilizzare le API presenti sul telefono e una serie di servizi esposti da
IL MERCATO DI RIFERIMENTO
La distribuzione delle applicazioni viene fatta tramite Windows Phone Marketplace che, da svariati anni, il contenitore in cui pubblicare e pubblicizzare le applicazioni rivolte al pubblico. Non possibile, almeno per adesso, installare una applicazione direttamente su un device, se non per portarne avanti lo sviluppo. Lapproccio molto simile a Windows Mobile, dove, da sempre necessario firmare le applicazioni con il certificato del marketplace per renderle sicure e installabili senza blocchi di security sui vari device. Si possono fare paragoni anche con le piattaforme concorrenti come iPhone e Android. Ogni applicazione installata gira in modo isolato dalle altre con lo stesso paradigma utilizzato da Silverlight su piattaforma web: possibile appoggiare dati e impostazioni applicative sullIsolated Storage senza doversi preoccupare di gestire lo spazio dati su disco per le varie applicazioni. Isolated Storage consente di memorizzare settaggi applicativi persistenti e temporanei. Le caratteristiche hardware possono essere diverse da device a device in base alle scelte del produttore, ma necessario che il device rispetti linsieme delle caratteristiche minime definite dalle specifiche per poter essere considerato un device Windows Phone 7. Microsoft ha scelto infatti una strada pi aperta rispetto a Apple che fornisce anche lhardware. Ad oggi sono previsti (e su internet si trovano varie immagini) device LG, Samsung e HTC. Avremo quindi la possibilit di scegliere il device che pi ci piace o che si adatta maggiormente alle nostre esigenze (con tastiera o senza, con pi storage o meno), ma dal punto di vista dello sviluppatore, avremo a disposizione uninsieme di caratteristiche comuni su cui poter contare. Ad esempio lo schermo sar sempre 480x800 (dimesioni in Portrait), avremmo a disposizione una quantit di RAM che farebbe impallidire un classico notebook di 3 anni fa, una fotocamera digitale, un servizio GPS, una scheda Wi-Fi, laccelerometro e altre caratteristiche
Fig. 2: Applicazioni in fase di sviluppo: menu start e menu programmi
6 16 / Ottobre 2010
che vi consigliamo di controllare dopo luscita della versione finale degli strumenti che, essendo prevista per il 16 settembre, dovrebbero gi essere disponibili quando leggerete questo articolo. Iniziamo a costruire una semplice applicazione e poi proveremo ad utilizzare qualche API esposta dalla piattaforma.
PARTIRE CON IL PIEDE GIUSTO

I vari template creano un classico progetto Visual Studio 2010 contenente una serie di reference verso le librerie che abbiamo inquadrato nella prima parte dellarticolo, una pagina principale denominata MainPage.xaml , il classico file App.xaml e relativo code-behind per la definizione delle risorse e del codice dellapplicazione e, non ultime, tre immagini. La prima immagine, ApplicationIcon.png consente di definire licona dellapplicazione, Background.png invece, a discapito del suo nome, licona per la defizione del Tile dellapplicazione (ovvero licona pi grande da utilizzare nella schermata principale se lutente decide di inserire lapplicazione nel menu start), SplashScreen.png invece la schermata che viene utilizzata durante la partenza dellapplicazione stessa. Per darvi una idea, in Fig.2 ci sono due screenshot dellemulatore: a destra la schermata iniziale, dove sono ospitate tre applicazioni reali che stiamo sviluppando, e a sinistra la schermata di riepilogo di tutte le applicazioni installate. Lutente pu decidere di spostare una applicazione nella schermata principale, effettuando il tap sullapplicazione e scegliendo pin to start dal menu contestuale. ThinkAhead. IoProgrammo invece lesempio che stiamo costruendo in questo articolo. Tornando subito al codice creato dal template di progetto, oltre alle pagine che ospiteranno la definizione della user interface, nella directory Properties viene inserito un file fondamentale per lapplicazione stessa. La definizione dei nomi delle risorse, come le immagini appena descritte, del titolo dellapplicazione, del tile da usare nella schermata principale sono infatti ospitate nel file WMAppManifest.xml. Questo file contiene anche le capabilities dellapplicazione, ovvero le feature del telefono che lapplicazione desidera utilizzare. Ogni applicazione deve dichiarare se accede alla rete oppure ai servizi di notifiche o ancora se utilizza il phone dialer .
<?xml version=1.0 encoding=utf-8?> <Deployment xmlns=http://schemas. microsoft.com/windowsphone/2009/deployment AppPlatformVersion=7.0> <App xmlns= ProductID={c0aeef79-341e4485-9e60-87edee5fbdfb} Title=ThinkAhead.IoProgrammo RuntimeType=Silverlight Version=1.0.0.0
NOTA
GLI STRUMENTI DI SVILUPPO

Se avete una versione di Visual Studio 2010 gi presente sulla macchina, linstallazione degli strumenti di sviluppo aggiunge una serie di template per la creazione di applicazioni Windows Phone 7 sia per il runtime di Silverlight che per lambiente XNA. Se non avete una versione di Visual Studio 2010 installata, nessun problema, verr installata contestualmente la versione gratuita, demoninata Express for Windows Phone 2010 che comprende tutto il necessario per sviluppare. Ovviamente la versione Express non ha gli strumenti della versione Ultimate di Visual Studio, ma consente di sviluppare con le stesse feature della versione Express tradizionale applicazioni Silverlight e XNA per Windows Phone 7. Linstallazione degli strumenti di sviluppo in entrambe le forme, attiva anche linterazione con lemulatore su cui possibile testare le applicazioni tramite il classico F5 da Visual Studio. Gli strumenti installati prevedono anche, oltre alla versione Express di Blend 4 per la parte di disegno delle applicazioni, anche l Application Deployment , in grado di installare su emulatore o device fisico una applicazione compilata nel classico package XAP, e il Phone Registration Tool che consente di sbloccare un device fisico per linstallazione di applicazioni in test. Negli esempi che seguono costruiremo una semplice applicazione Silverlight per Windows Phone 7 e poi vedremo allopera il controllo Panorama . Per prima cosa occorre creare un progetto scegliendo uno dei template Windows Phone nella sezione Silverlight for Windows Phone . Nella versione attuale, i progetti disponibili prevedono una applicazione Portrait o una applicazione Landscape (il supporto alla rotazione poi gestibile allinterno dellapplicazione), una dll per Windows Phone, ovvero il classico assembly .NET dove inserire il codice riutilizzabile da pi applicazioni, e due applicazioni basate su due nuovi controlli specifici della piattaforma: Panorama e Pivot .
BLOG, FORUM E ESEMPI

La community www.thinkmobile.it, nata in occasione della prima conferenza italiana sullo sviluppo mobile nel luglio di cinque anni fa, da aprile 2010 ha aperto una nuova sezione dedicata a Windows Phone 7: sono disponibili forum speci ci per trattare lo sviluppo, vari blog che forniscono informazioni continue sulle novit per gli sviluppatori e nella sezione media si trovano numerosi esempi sullutilizzo dei sensori e delle varie funzionalit del device.
Fig. 3: Visual Studio Designer: linterfaccia delle applicazioni segue la metafora della navigazione Web, per cui si pu sempre tornare alla schermata precedente con un tap sul pulsante back
Ottobre 2010 / 17 7
Genre=apps.normal
Author=ThinkAhead Description=Sample description Publisher=ThinkAhead> <IconPath IsRelative=true IsResource=false> ApplicationIcon.png</IconPath> <Capabilities> <Capability Name=ID_CAP_GAMERSERVICES/> <Capability Name=ID_CAP_IDENTITY_DEVICE/> <Capability Name=ID_CAP_IDENTITY_USER/> <Capability Name=ID_CAP_LOCATION/> <Capability Name=ID_CAP_MEDIALIB/> <Capability Name=ID_CAP_MICROPHONE/> <Capability Name=ID_CAP_NETWORKING/> <Capability Name=ID_CAP_PHONEDIALER/> <Capability Name=ID_CAP_PUSH_ NOTIFICATION/> <Capability Name=ID_CAP_SENSORS/> <Capability Name=ID_CAP_ WEBBROWSERCOMPONENT/> </Capabilities> <Tasks> <DefaultTask Name =_default NavigationPage=MainPage.xaml/> </Tasks> <Tokens> <PrimaryToken TokenID=ThinkAhead. IoProgrammoToken TaskName=_default> <TemplateType5> <BackgroundImageURI IsRelative=true IsResource=false>Background.png</ BackgroundImageURI> <Count>0</Count> <Title>ThinkAhead.IoProgrammo</Title> </TemplateType5> </PrimaryToken> </Tokens> </App> </Deployment>
DEFINIRE LASPETTO
Il nuovo progetto, appena aperto, presenta il designer Silverlight che, come per le applicazioni web, divide il codice XAML dal designer visuale. Abbiamo solamente modificato il titolo dellapplicazione e il titolo della pagina principale ( MainPage.xaml ) nellestratto di codice seguente:
<phone:PhoneApplicationPage x:Class=ThinkAhead.IoProgrammo.MainPage xmlns=http://schemas.microsoft.com/winfx/2006/ xaml/presentation xmlns:x=http://schemas.microsoft.com/winfx/2006/ xaml xmlns:phone=clr-namespace:Microsoft.Phone. Controls;assembly=Microsoft.Phone xmlns:shell=clr-namespace:Microsoft.Phone. Shell;assembly=Microsoft.Phone xmlns:d=http://schemas.microsoft.com/expression/ blend/2008 xmlns:mc=http://schemas.openxmlformats.org/ markup-compatibility/2006 mc:Ignorable=d d:DesignWidth=480 d:DesignHeight=768 FontFamily={StaticResource PhoneFontFamilyNormal} FontSize={StaticResource PhoneFontSizeNormal} Foreground={StaticResource PhoneForegroundBrush} SupportedOrientations=Portrait Orientation=Portrait shell:SystemTray.IsVisible=True>  <Grid x:Name=LayoutRoot Background=Transparent> <Grid.RowDenitions> <RowDenition Height=Auto/> <RowDenition Height=*/> </Grid.RowDenitions>  <StackPanel x:Name=TitlePanel Grid.Row=0 Margin=12,16,0,27> <TextBlock x:Name=ApplicationTitle Text=THINKAHEAD FOR IOPROGRAMMO Style={StaticResource PhoneTextNormalStyle}/> <TextBlock x:Name=PageTitle Text=main Margin=9,-8,0,0 Style={StaticResource PhoneTextTitle1Style}/> </StackPanel>  <Grid x:Name=ContentPanel Grid.Row=1 Margin=12,0,12,0/>
Fig. 4: Il primo test della nostra nuova app
Fig. 5: Software Input Panel (SIP)
Nel codice precedente possibile notare la definizione dellapplicazione ThinkAhead. IoProgrammo , il runtime di tipo Silverlight, la versione e il tipo di applicazione, alcune informazioni su autore, descrizione e publisher. Licona applicativa definita immediatamente sotto la definizione dellapplicazione e precede a sua volta la definizione, lasciata ai valori di default, delle capabilities. Nella sezione Task vediamo il puntatore alla pagina di default (MainPage.xaml ) che stata creata allinterno del progetto e che andremo a descrivere fra un attimo. Chiude il file la definizione del Tile di default, ovvero il puntatore al titolo, allimmagine e ad un eventuale contatore di notifiche che il dispositivo utilizzer quando lutente decide di effettuare il pin to start dellapplicazione.
8 18 / Ottobre 2010
Fig. 6: Codice reale XAML del controllo Panorama
</Grid>   </phone:PhoneApplicationPage>
sante back , rappresentato in basso a sinistra anche nella finestra di design di Visual Studio 2010 mostrata in Fig. 3. La seconda informazione importante che si evince dal codice della pagina principale lutilizzo del costrutto StaticResource per le varie impostazioni grafiche della pagina. Ogni elemento proposto dal template viene rappresentato secondo uno stile; lo stile ha lo scopo di centralizzare la
Molti sono gli elementi da comprendere nel codice della maschera prima di iniziare a costruire la nostra user interface: per prima cosa importante notare che ci troviamo allinterno di una PhoneApplicationPage . Questa classe si trova nellassembly Microsoft.Phone e rappresenta il contenitore di controlli per questa maschera: ogni maschera viene rappresentata da una pagina, in quanto lutente si muove da una pagina allaltra e ha la possibilit, come ormai ci ha abituato il web, di ripercorrere la sua navigazione allindietro tramite il pul-
Fig. 7: Il controllo Panorama in una applicazione reale
Ottobre 2010 / 19 9
ra Microsoft Expression Blend 4 (incluso nel setup degli strumenti), possiamo posizionare qualche controllo nella pagina per provare a verificarne il funzionamento sullemulatore. Tralasciamo in questo primo articolo qualunque elemento grafico o di impaginazione, andando a posizionare i controlli direttamente nella griglia. Aggiungiamo, come esempio, il codice seguente per preparare una listbox con le applicazioni che stiamo sviluppando.
<Grid x:Name=ContentPanel Grid.Row=1 Margin=12,0,12,0> <ListBox Height=244 HorizontalAlignment=Left Margin=14,31,0,0 Name=appListBox VerticalAlignment=Top Width=460> <ListBoxItem Content=kiss and hug /> <ListBoxItem Content=kind love /> <ListBoxItem Content=save the planet /> </ListBox> </Grid>
Fig. 8: Phone Call da codice
definizione delle informazioni di layout e presentazione in modo da renderne pi semplice la modifica a posteriori. Nel caso del template base di Visual Studio, le risorse, contrariamente alle prime beta di cui abbiamo parlato in articoli precedenti, vengono centralizzate allinterno delle librerie referenziate, ma possibile modificarle allinterno, ad esempio, del file App.xaml . Una successiva modifica al file App.xaml si riflette in tutte le pagine della nostra applicazione. La terza cosa da notare nel listato di codice XAML la presenza di un controllo Grid per definire il layout della pagina. La griglia divide il contenuto in due righe, la prima delle quali destinata al titolo e sottotitolo della pagina stessa; anche queste informazioni sono posizionate allinterno di una griglia ( TitleGrid ) che si posiziona a sua volta nella prima riga sfruttando la propriet Row della Grid LayoutRoot . La griglia posizionata nella seconda riga della griglia principale a nostra disposizione per il disegno della pagina. Chiude il listato una parte commentata in cui viene proposta la A pplication Bar , ovvero, la modalit con cui presentare allutente le azioni da fare sulla pagina corrente. La Application Bar rappresenta il menu contestuale della pagina dove proporre allutente le azioni possibili. Utilizzando il designer di Visual Studio, oppure direttamente il codice XAML, o anco-
Immediatamente sotto la listbox inseriamo un TextBox e un pulsante per aggiungere altre applicazioni alla lista:
<Button Content=Aggiungi HorizontalAlignment=Left Margin=1,344,0,0 Name=addButton VerticalAlignment=Top Width=445 /> <TextBox HorizontalAlignment=Left Margin=6,266,0,0 Name=applicationTextBox Text= VerticalAlignment=Top Width=440 />
Facendo doppio clic sul pulsante aggiungi ( addButton ) Visual Studio o Blend ci preparano levent handler nel code behind della pagina xaml dove aggiungeremo un nuovo elemento a appListBox con il contenuto della propriet Text del controllo applicationTextBox . possibile generare gli event handler anche dal designer del codice XAML semplicemente digitando Click= per poi premere il tasto Tab che, come suggerisce lintellisense, consente di creare tutto il necessario per agganciare levento con il metodo che scriveremo nel code behind.
using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation;
Fig. 9: Interfaccia in azione con il Phone Number Chooser
20 / Ottobre 2010 10
using System.Windows.Shapes; using Microsoft.Phone.Controls; namespace ThinkAhead.IoProgrammo { public partial class MainPage : PhoneApplicationPage { // Constructor public MainPage() { InitializeComponent(); } private void addButton_Click(object sender, RoutedEventArgs e) { appListBox.Items.Add(textBox1.Text); } } }
COSA SUCCEDE DIETRO LE QUINTE

Il code behind semplice e, come Visual Studio ci ha abituati sin dalla versione 2002, prevede una derivazione dalla classe base del form, in questo caso una page rappresentata dalla classe PhoneApplicationPage (la stessa indicata nel file MainPage.xaml che abbiamo analizzato in precedenza), lutilizzo di un costruttore che verr autogenerato nel file mainpage.g.cs , oltre al codice del metodo addButton_Click che abbiamo inserito noi per gestire linserimento dellelemento nella listbox. Provando a digitare la keyword override noterete vari metodi utilizzabili per entrare nel ciclo di vita di una pagina, come ad esempio OnNavigatingFrom e OnNavigatedFrom per intercettare la navigazione verso altre pagine, OnNavigatedTo per intercettare la navigazione verso questa pagina, OnBackKeyPress per intercettare la pressione del tasto back, tasto che sar presente obbligatoriamente su tutti i device Windows Phone 7. Non ci resta che premere F5 per vedere il nostro lavoro sullemulatore: Visual Studio si preoccupa di attivare lemulatore, effettuare il deploy dellapplicazione e il debug dellapplicazione stessa (provare a metttere un breakpoint per verificarne il funzionamento). A destra, in verticale, sono rappresentate una serie di informazioni di debug rispetto alla user interface. Lapplicazione dovrebbe presentarsi (pixel pi, pixel meno) come in Fig. 4. Abbiamo aggiunto Office fra le applicazioni tramite la TextBox e la pressione del nostro pulsante per
verificare il funzionamento del codice introdotto nella pagina. Come abbiamo accennato, le librerie Microsoft offrono una serie di risorse per indicare lo stile di default dei vari controlli che possiamo utilizzare nella user interface. Selezionando ad esempio un elemento nella listbox, questa assume lo stile di default che riprende lo stile che lutente ha scelto per il suo device. Tutti i campi in cui lutente pu inserire del testo, quando ottengono il focus, presentano il Software Input Panel ( SIP ) che, chi lavora in ambiente mobile conosce molto bene sin dai tempi di Embedded Visual Basic ( eVB ). Lidea semplificare la digitazione dei dati visto che lutente usa spesso il device in condizioni di movimento o mentre pu essere distratto delle condizioni dellambiente in cui si trova. La Fig. 6 mostra lemulatore durante la scrittura del testo in un campo textbox. Lemulatore consente di eseguire altre operazioni come la rotazione dello schermo, lavvio di Internet Explorer, lo zoom e, come vedremo nei prossimi articoli, molte funzionalit nascoste dai menu della interfaccia utente. Questo semplice esempio ha messo in evidenza linterfaccia proposta per una applicazione fatta di varie pagine in cui lutente naviga attraverso le funzionalit applicative. A fianco a questa modalit di navigazione sono stati proposti su CodePlex sin dalle prime beta e previsti per la versione RTM allinterno del prodotto, due controlli che gli esperti di user experience definiscono come killer control. Si tratta di Panorama e Pivot . Il primo, Panorama , come indica il termine stesso, viene usato per presentare allutente un panorama: si pensi al panorama nel pi classico dei significati, dove presentare vari scorci, ognuno delle quali presenta informazioni allutente e fa parte del panorama stesso. Lutente pu interagire con i vari scorci effettuando lo scrolling direttamente dallinterfaccia.
LA BELLEZZA DEL PANORAMA

Visto che lapplicazione localizzata in pi lingue, abbiamo utilizzato il binding verso le nostre risorse localizzate (con un classico converter Silverlight) per le intestazioni e i vari TextBlock inseriti nel primo PanoramaItem . Il controllo Panorama consente di impostare un titolo per lapplicazione visto che il controllo occupa lintera superficie dello schermo, consente di intercettare tramite leven-
Ottobre 2010 / 21 11
private void numberChooser_Click(object sender, RoutedEventArgs e) { PhoneNumberChooserTask task = new PhoneNumberChooserTask(); task.Show(); }
Fig. 10: Save Phone Number Task
GLI AUTORI Roberto e Luca sono consulenti che operano nel mondo .NET sin dalla presentazione dellambiente nel luglio 2000. Luca specializzato nella de nizione della user interface, mentre Roberto si dedica allarchitettura e prestazioni della soluzione. La loro azienda, we.ThinkAhead.it, societ del gruppo DevLeap, specializzata nella realizzazione di soluzioni cloud-based su Windows Azure, applicazioni WPF/Silverlight e applicazioni mobile sia per Windows Mobile 6.5 che per Windows Phone 7. Sul sito si trovano i riferimenti ai progetti e alle aree tecnologiche coperte.
to SelectionChanged lo scrolling dellutente, e ha una immagine di sfondo denominata PanoramaBackground.png . Nel nostro caso limmagine alta 800 pixel, come lo schermo del telefono, e larga 1850 pixel in modo da formare il panorama in cui lutente pu spostarsi. I cinque elementi interni (da 0 a 4) contengono le varie interfacce dei 5 scorci di panorama, come si nota nella Fig. 7 dove sono state affiancate la pagina 4 (ovvero lultima) alla pagina 0 (ovvero la prima). Come si pu notare, la pagina a sinistra presenta il suo contenuto, ha il titolo dellapplicazione allineato in alto, e, lascia intendere che esiste un secondo scorcio del panorama alla sua destra. Quando lutente trascina la pagina verso sinistra, cosa possibile anche con lemulatore nel caso in cui si utilizzi un PC con schermo touch, il panorama scorre e mostra lo scorcio a destra, dal titolo summary , togliendo lo scorcio settings dalla vista dellutente. A sua volta la pagina summary e lascia intendere la presenza a destra di uno scorcio successivo. Lutente pu anche tornare indietro ripercorrendo il panorama scoperto. Il controllo Pivot invece il classico Tab Control in chiave moderna: utilizzabile sfruttando le stesse gesture del controllo Panorama e, in pi, consente di cliccare sul tab per scegliere una voce: ne parleremo in un prossimo articolo. Chiudiamo vedendo alcune API che consentono di interagire con le feature del telefono. Non occorrono reference aggiuntive in questa versione.
private void dialButton_Click(object sender, RoutedEventArgs e) { PhoneCallTask task = new PhoneCallTask(); task.DisplayName = From ThinkAheadApp; task.PhoneNumber = 055-1111111; task.Show(); }
Altre Task consentono di memorizzare informazioni sul telefono, come ad esempio un numero di telefono, attraverso gli oggetti relativi. Nel codice seguente il salvataggio di un numero di telefono da una applicazione e in Fig. 10 lo screenshot relativo.
private void savePhone_Click(object sender, RoutedEventArgs e) { SavePhoneNumberTask task = new SavePhoneNumberTask(); task.PhoneNumber = 055-1111111; task.Show(); }
Sul sito www.thinkmobile.it sono disponibili esempi monotematici sullutilizzo di Acceletometro, ApplicationBar , InputScope , IsolatedStorage , Location Service, PushNoti cation e Manipulation. Sul sito trovate anche mini-articoli di una solo pagina con esempi mirati e forum per scambiare informazioni sullo sviluppo mobile. In questo primo articolo abbiamo cercato di evidenziare da una parte le caratteristiche pi importanti del nuovo Windows Phone 7 e dallaltra cercato di fornire i passi per la creazione di una semplice applicazione.
CONCLUSIONI, E AVVERTENZE...
Ribadiamo il consiglio che abbiamo dato qualche mese fa sulla prima beta degli strumenti: chiunque arrivi da Windows Mobile 6.x o da Windows CE e ha lavorato per anni con Windows Forms, di capire a fondo XAML e Silverlight prima di scrivere la prima vera applicazione. Silverlight in realt riprende una serie di idee e concetti venuti alla luce con Windows Presentation Foundation (WPF) nel lontano 2006, quando, a novembre, fu rilasciata la prima versione; senza fare il salto mentale verso questi ambienti si rischia di usare un ambiente estremamente potente come Silverlight al 10 percento delle sue possibilit, potenzialit e manutenibilit. Roberto Brunetti e Luca Regnicoli
Non possibile attivare la chiamata direttamente da una applicazione, almeno in questa prima release. Il PhoneCallTask consente di attivare la maschera nativa che lutente utilizzerebbe per effettuare una chiamata precompilata con le due informazioni che appaiono normalmente. Un secondo Task , che come si nota dal codice seguente, ha il suffisso Chooser consente invece di attivare la scelta di un contatto dalla maschera nativa del device, far scegliere allutente (da qui il nome Chooser ) un contatto e ottenere il numero di telefono.
22 / Ottobre 2010 12
Windows Phone 7 MOBILE WINDOWS PHONE 7: API E SENSORI
WINDOWS PHONE 7: API E SENSORI

uesto articolo introduce le API esposte allo sviluppatore di applicazioni Windows Phone 7 che consentono di interagire sia con lhardware presente sul device, come ad esempio la fotocamera o il dialer, sia con il software esposto dalla piattaforma come il Media Player oppure i contatti presenti. Ricordiamo che gli strumenti di sviluppo in versione finale si possono scaricare gratuitamente da http://developer.windowsphone.com.
LA PROPOSTA MICROSOFT NEL MONDO DELLA TELEFONIA MOBILE PRONTA AL LANCIO. IN QUESTO ARTICOLO VEDREMO LE API ESPOSTE PER INTERAGIRE CON LHARDWARE E IL SOFTWARE DELLA PIATTAFORMA, UTILIZZANDO IL RUNTIME DI SILVERLIGHT
CD WEB
ThinkAhead.PhoneAPI.zip
applicazioni ovvero Silverlight e XNA. Il codice delle applicazioni si appoggia al runtime di Silverlight o al runtime di XNA e vede solo le API esposte da questi ambienti: impossibile, ripeto, in questa versione, accedere direttamente alle API sottostanti. Lo schema architetturale cui faremo riferimento in questo articolo quello illustrato in Fig.1: .NET Framework managed code sandbox rappresenta il framework di base che espone funzionalit ai tutti i compo librerie referenziabili.
LA PIATTAFORMA
Il sistema operativo alla base di Windows Phone 7 una nuova versione di Windows CE, il sistema operativo nato nel 1997 e che ha fatto da base, nelle sue varie versioni, a decine di dispositivi diversi, che vanno da device impiegati in campo industriale alla serie di device orientati allutente finale, da device subacquei impiegati anche in campo militare a headless device che controllano macchine a controllo numerico o gli stessi navigatori di molte auto. Sopra il sistema operativo troviamo una nuova versione del famoso .NET Compact Framework, inaccessibile, almeno in questa prima versione, al codice delle applicazioni. Il .NET Compact Framework fornisce, quindi, API e servizi, non direttamente alle applicazioni, ma ai due ambienti con cui possiamo scrivere le nostre
REQUISITI
Conoscenze richieste Conoscenza di .NET e Visual Studio Software necessario installare i Windows Phone Developer Tools, scaricabili gratuitamente a partire dallindirizzo http://developer.windowsphone.com.
Fig.2: Unocchiata allassembly

Impegno
Fig.1: Schema riassuntivo della piattaforma
La libreria, referenziata per default, Microsoft. Phone , contiene gran parte delle funzionalit del dispositivo come ad esempio le classi base
W indo w s P h o ne 7 pr o g r a m m in g
50 / Novembre 2010
h ttp ://www .io p r o g r a m m o .i t
13

per le pagine e lapplicazione, la vibrazione, il controllo per gestire la radio FM e i servizi generali. Il namespace System.Windows contiene tutti i controlli base come TextBox , ListBox , Image e le classi per effettuare richieste in rete. Aggiungendo anche Microsoft.Device.Sensors e System.Device possiamo utilizzare anche le API dellaccelerometro e dei servizi di Location. Molte di queste funzionalit possono essere testate anche sullemulatore, macchina fotografica compresa, oppure possono essere simulate usando le Reactive Extension o delle classi proprietarie. Sulla communitiy italiana dedicata allo sviluppo mobile, raggiungible allindirizzo www.thinkmobile.it , abbiamo pubblicato due componenti per simulare laccelerometro via mouse/touchscreen e il servizio di location via mouse. Quando una applicazione utilizza i servizi esposti dal telefono necessario indicare la relativa capability nel file WMAppManifest. xaml . Le impostazioni possibili allinterno del file di manifest sono le seguenti:
<Capabilities> <Capability Name=ID_CAP_PHONEDIALER/> <Capability Name=ID_CAP_GAMERSERVICES/> <Capability Name=ID_CAP_IDENTITY_DEVICE/> <Capability Name=ID_CAP_IDENTITY_USER/> <Capability Name=ID_CAP_LOCATION/> <Capability Name=ID_CAP_MEDIALIB/> <Capability Name=ID_CAP_MICROPHONE/> <Capability Name=ID_CAP_NETWORKING/> <Capability Name=ID_CAP_PUSH_ NOTIFICATION/> <Capability Name=ID_CAP_SENSORS/> <Capability Name=ID_CAP_ WEBBROWSERCOMPONENT/> </Capabilities>
Windows Phone 7: 7 API E SENSORI MOBILE WINDOWS PHONE
AL TELEFONO!
Il primo esempio che costruiremo insieme riguarda linterazione con il telefono. Linterfaccia presenta, nella pagina principale, quattro pulsanti a questo scopo: il primo per comporre un numero, il secondo per inviare un SMS, il terzo per salvare un numero nella rubrica dei contatti, il quarto per recuperare un numero dalla rubrica. Il codice per comporre un numero di telefono il seguente:
private void callButton_Click(object sender, RoutedEventArgs e) { PhoneCallTask task = new PhoneCallTask(); task.DisplayName = Roberto Brunetti; task.PhoneNumber = 123-4546; task.Show(); }
In questo caso stiamo componendo un numero non presente nella rubrica: linterfaccia si presenta come mostrato a sinistra in Fig. 3. Lutente ha la possibilit di accettare o rifiutare linizio della chiamata. La Fig. 3 mostra a destra la chiamata in corso.
NOTA
MARKETPLACE
Una applicazione pu utilizzare il marketplace in varie modalit. Ad esempio unapplicazione pu attivare un task di ricerca di applicazioni o brani musicali in base ad un criterio di ricerca testuale oppure richiedere lapertura sui dettagli di unapplicazione o di un brano musicale cos come invocare lapertura della pagina di valutazione dellapplicazione stessa.
Ad esempio, se lapplicazione utilizza, come faremo fra un attimo, il Phone Dialer per attivare una telefonata occorre aggiungere la prima riga mostrata nel codice precedente allelenco delle feature del telefono. Ogni progetto Visual Studio presenta per default lelenco completo delle feature, quindi, sufficiente rimuovere quelle che non usiamo. In ogni caso, durante la verifica effettuata dal marketplace per firmare lapplicazione, saranno ricontrollate le funzionalit e il file di manifest finale viene ricreato direttamente dal personale del marketplace stesso. Il codice dellarticolo verr allegato alla rivista: non abbiamo usato nessuna finezza grafica nellesempio e, ad ogni pulsante, corrisponde un esempio che vedremo nel corso dellarticolo.
Fig.3: Linterfaccia del Phone Dialer
Il metodo Show asincrono: attiva il task per eseguire la chiamata e restituisce immediatamente il controllo allapplicazione, il cui codice prosegue. Non quindi possibile sapere se lutente ha portato a termine la chiamata o meno. Il secondo estratto di codice mostra come comporre un sms, da inviare anche in questo caso, ad un numero non presente in rubrica. Il codice molto semplice e soprattutto simile al precedente:
private void smsButton_Click(object sender, RoutedEventArgs e) {
h ttp :/ / www.io pr o gr am m o. it
14
Wi nd ows Phone 7 pr r am m in g Novembre 2010 /o g 51

SmsComposeTask task = new SmsComposeTask(); task.Body = Messaggio da ThinkAhead; task.To = 123-456; task.Show(); }

porta la creazione di una nuova istanza: il servizio di riattivazione ricarica automaticamente la pagina xaml in cui luente si trovava, ma su una nuova istanza applicativa. Torniamo sulla rotta tracciata allinizio di questo articolo: possibile salvare un numero di telefono nella rubrica dei contatti; il processo segue quando abbiamo appena accennato. Il metodo show, asincrono, attiva la maschera di salvataggio nei contatti: questa operazione disattiva lapplicazione, e, quando lutente termina loperazione di salvataggio, lapplicazione viene riattivata. Il task SavePhoneNumberTask, inoltre, scatena un evento che possiamo intercettare, non appena lapplicazione viene riattivata, per ottenere il risultato del salvataggio. Il codice quindi un attimo pi complesso dei precedenti:
private SavePhoneNumberTask _savePhoneTask; public MainPage() { InitializeComponent(); this._savePhoneTask = new SavePhoneNumberTask(); this._savePhoneTask.Completed += new EventHandler<TaskEventArgs>(savePhoneNumberTa sk_Completed); } private void saveContact_Click(object sender, RoutedEventArgs e) { this._savePhoneTask.PhoneNumber = 123456; this._savePhoneTask.Show(); } void savePhoneNumberTask_Completed(object sender, TaskEventArgs e) { if (e.TaskResult == TaskResult.OK) { MessageBox.Show(Salvato); } }
Anche in questo caso il controllo passa al telefono per linvio dellSMS: maschera dalla quale lutente, come si pu notare nellimmagine centrale della Fig. 4, pu aggiungere allegati prima di inviare il messaggio. Per tornare allapplicazione lutente deve premere il pulsante Back del telefono. Il comportamento quindi in realt diverso dal Phone Dialer, dove lapplicazione riprende il controllo non appena lutente ha terminato la chiamata (o se ha rinunciato a effettuarla). Questa differenza introduce un argomento che tratteremo meglio nei prossimi articoli: quando lapplicazione richiede alcune funzionalit al telefono, viene disattivata (tombstoned nella documentazione) per essere poi riattivata quando lutente torna ad essa premendo il tasto back. Questa disattivazione sullapplicazione corrente avviene normalmente quando un utente preme il pulsante Start, come si pu verificare dalla documentazione ufficiale. Nel codice allegato abbiamo inserito una Message Box nellevento Deactivate e nellevento Activate dellapplicazione proprio per aiutare a comprendere questo comportamento. Limmagine 4 mostra le tre fasi, disattivazione, maschera di invio sms esterna allapplicazione, riattivazione. importante sottolineare che una applicazione disattivata deve essere considerata terminata e, infatti, molto probabile che il sistema operativo termini il processo che la ospita. Riattivare una applicazione non significa necessariamente riprendere listanza precedente anzi, spesso, com-
Fig.4: Interfaccia per la gestione degli Sms
Il codice del metodo saveContact_Click semplicissimo, ma sfrutta un oggetto definito allinterno della pagina in modo da poterlo istanziare nel costruttore e utilizzarlo per abbonarsi allevento di completamento del task. fondamentale abbonarsi a questo evento nel costruttore in quanto, come abbiamo evidenziato, lapplicazione, quando viene riattivata, potrebbe essere una nuova istanza. Levento savePhoneNumberTask_Completed, veri-
52 / Novembre 2010
h ttp ://w w w .io p r o g r a m m o .i t
15

fica il risultato, affermativo se lutente ha salvato il contatto e negativo se lutente ha annullato loperazione, e visualizza semplicemente un messaggio. Il flusso completo di aggiunta di un contatto, e salvataggio del contatto stesso mostrato in Fig. 5 nella quale, per ragioni di spazio, non ho mostrato laggiunta del nome, della foto e i messaggi Deactivate/Activate. Per ritornare allapplicazione lutente deve premere il pulsante Back. Analogamente possiamo salvare un indirizzo
{
WindowsPHONE Phone 7: 7 API E SENSORI MOBILE WINDOWS
public partial class MainPage : PhoneApplicationPage { private PhoneNumberChooserTask _phoneNum berChooserTask; public MainPage() { InitializeComponent(); this._savePhoneTask = new SavePhoneNumberTask(); this._savePhoneTask.Completed += new EventHandler<TaskEventArgs>(savePhoneNumberTa sk_Completed); } private void readNumberButton_Click(object sender, RoutedEventArgs e) { this._phoneNumberChooserTask.Show(); } void phoneNumberChooserTask_Completed(object sender, PhoneNumberResult e) { if (e.TaskResult == TaskResult.OK) { resultTextBlock.Text = e.PhoneNumber; } } } }
NOTA
USER INTERFACE
Spesso lo sviluppatore sottovaluta molti degli aspetti legati alla userinterface e alla userexperience: non intendiamo dire che non sia in grado di costruire userinterface carine o accattivanti, ma che sottovaluti limportanza di aderire alle linee guida della piattaforma. Su una interfaccia di dimensioni ridotte e su un dispositivo che fa della userexperience un suo punto di forza fondamentale rispettare le linee guida: vi consigliamo caldamente di leggere la UI Design &Interaction Guide che trovate a partire dalla home page per gli sviluppatori http://developer.windowsphone.com/ windows-phone-7/.
Fig.5: I passaggi del SavePhoneNumberTask
email tramite la classe SaveEmailAddressTask: il comportamento e il codice, nome della classe e relativo evento di completamento a parte, assolutamente identico. Oltre alloperazione di inserimento/aggiornamento di un contatto, una applicazione pu anche recuperare numero di telefono e/o indirizzo di email di un contatto tramite alcuni componenti denominati Chooser: il termine Chooser deriva dal fatto che il componente consente, appunto, di scegliere qualcosa dal telefono per restituirlo allapplicazione. Come per le Task precedenti, quando viene invocato un Chooser, lapplicazione viene disattivata, viene aperta la relativa applicazione e, solo quando lutente ha effettuato la scelta o ha annullato la selezione, il controllo ritorna allapplicazione. Il codice per attivare il Chooser per recuperare un numero di telefono il seguente:
using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; using Microsoft.Phone.Controls; using Microsoft.Phone.Tasks; namespace ThinkAhead.PhoneAPI
Dopo aver definito loggetto PhoneNumberChooser Task, il costruttore crea una istanza e si abbona al relativo evento. Nellevent handle possibile sapere se lutente ha effettuato la scelta controllando la propriet TaskResult: in caso affermativo,
Fig.6: Le tre fasi necessarie al completamento del PhoneNumberChooserTask
http :/ /w ww.io pr o gr am m o. it
16
Wi nd ows Phone 7 pr g r am m in g Novembre 2010 /o53

recuperiamo il numero di telefono dallinstanza della classe PhoneNumberResult ricevuta come argomento e, nel nostro esempio, visualizziamo il numero in una TextBlock della pagina. Il risultato a video mostrato in Fig. 6: sto recuperando il contatto salvato con lesempio precedente a cui avevo assegnato il mio nome.

this._photoChooserTask.Completed += new EventHandler<PhotoResult>(photoTask_Completed); private void photoButton_Click(object sender, RoutedEventArgs e) { this._photoChooserTask.Show(); } void photoTask_Completed(object sender, PhotoResult e) { if (e.TaskResult == TaskResult.OK) { BitmapImage bmp = new BitmapImage(); bmp.SetSource(e.ChosenPhoto); photoImage.Source = bmp; } }
CAMERA E IMMAGINI
Gli stessi concetti esposti nella sezione precedente, si applicano anche allutilizzo delle immagini, sia quelle gi presenti negli album dellutente, sia le immagini richieste direttamente alla fotocamera, ovvero scattate al volo. Per quanto riguarda la ricerca e selezione di immagini presenti sul device, utilizzeremo un Chooser, che, come abbiamo capito, sospender lapplicazione corrente (che verr tombstoned dal sistema ed eventualmente terminata) per attivare la selezione delle immagini nei vari album dellutente. Quando lutente avr eseguito la sua scelta oppure avr annullato loperazione, il sistema riattiver lapplicazione inviando un evento in cui possibile conoscere loperazione effettuata dallutente. Nella pagina principale della nostra applicazione abbiamo inserito altri due pulsanti e un controllo Image per accogliere leventuale selezione. Come per il resto dellarticolo non ci occuperemo di creare una user interface accattivante, ma ci concentriamo sul codice necessario:
private PhotoChooserTask _photoChooserTask; public MainPage() { InitializeComponent(); this._photoChooserTask = new PhotoChooserTask();
SUL WEB
UN BLOG DA SEGUIRE
La community www.thinkmobile.it, nata in occasione della prima conferenza italiana sullo sviluppo mobile nel luglio di cinque anni fa, da Aprile 2010 ha aperto una nuova sezione dedicata a Windows Phone 7: sono disponibili forum specifici per trattare lo sviluppo, vari blog che forniscono informazioni continue sulle novit per gli sviluppatori e nella sezione media si trovano numerosi esempi sullutilizzo dei sensori e delle varie funzionalit del device.
Il codice definisce loggetto _photoChooserTask allinterno della classe che rappresenta la pagina di default della nostra applicazione, ne crea una istanza nel costruttore per poi abbonarsi al relativo evento di scelta da parte dellutente. Il codice dellevent hander, dopo aver controllato se lutente ha scelto una foto, crea un oggetto BitmapImage per trasformare lo stream (classe System.IO.Stream) restituito dal Photo Chooser in qualcosa di assegnabile alla sorgente dati del controllo photoImage. Qualunque altra tecnica di passaggio da un System.IO.Stream ad un ImageSource ugualmente efficace.Limmagine 7 mostra il risultato dellattivazione del Photo Chooser, la scelta della foto e la relativa visualizzazione. Nel caso si utilizzi lemulatore, possibile salvare immagini da Internet Explorer, eseguendo il tap prolungato sullimmagine stessa: dal menu contestuale possibile condividere limmagine sui social network oppure, salvarla in un album locale.
SCATTIAMO UNA FOTO

Il prossimo esempio, funzionante anche sullemulatore grazie al simulatore della macchina fotografica, consente di scattare una foto e restituirla allapplicazione richiedente. Il flusso identico a quanto abbiamo ormai imparato e prevede il tombstoning dellapplicazione durante lattivazione della fotocamera. Occorre quindi utilizzare la classe CameraCaptureTask definendola a livello di pagina, istanziarla nel costruttore abbonandosi al relativo evento di completamento, e definire un event handler. Possiamo anche utilizzare, come nellesempio di codice seguente, lo stesso event handler utilizzato per il Photo Chooser; il risultato sar infatti identico: una immagine di tipo System.IO.Stream da conver-
Fig.7: La sequenza per il completamento del PhotoChooserTask
54 / Novembre 2010
h ttp ://ww w .io p r o g r a m m o .i t
17

tire in immagine sullo pagina applicativa. Ovviamente, alla pressione del pulsante occorre invocare il metodo Show del Task.
private CameraCaptureTask _cameraCaptureTask; public MainPage() { InitializeComponent(); this. _cameraCaptureTask = new CameraCaptureTask (); this._ _cameraCaptureTask.Completed += new EventHandler<PhotoResult>(photoTask_Completed); private void shotButton_Click(object sender, RoutedEventArgs e) { this._cameraCaptureTask.Show(); }
WindowsPHONE Phone 7: 7 API E SENSORI MOBILE WINDOWS

o9/mix/09/wmv/ key01.wmv, UriKind.Absolute); // Se contenuti nello XAP //mediaPlayerLauncher.Location = MediaLocationType.Install; mediaPlayerLauncher.Show(); }
Questo screenshot richiede due righe di spiegazione: come si nota, nella prima e seconda immagine non si vede nessuna foto, mentre nella terza, ovvero nella pagina che visualizza lo scatto, appare uno sfondo bianco con un quadratino nero. Vi invitiamo a provare lesempio per capire meglio il funzionamento della fotocamera simulata. Durante lattivazione della fotocamera, lemulatore muove un rettangolo nero su sfondo bianco in modo da simulare limmagine inquadrata dal finto obiettivo. Alla pressione del pulsante di scatto, quello in alto a destra, per un attimo si nota limmagine scattata, che composta di un rettangolo nero nella posizione in cui stato premuto il pulsante di scatto.
Fig.8: Le tre schermate del CameraCaptureTask
MEDIA PLAYER
Le applicazioni che fanno uso di contenuti multimediali possono interagire con le feature del telefono in tre modalit. La prima invocare il task per lattivazione del Media Player, che, come abbiamo imparato in questo articolo, prender il controllo del telefono fino a quando lutente non preme Back per tornare sullapplicazione. Il codice per attivare il media player dallapplicazione il seguente:
private void mediaPlayerButton_Click(object sender, RoutedEventArgs e) { MediaPlayerLauncher mediaPlayerLauncher = new MediaPlayerLauncher(); mediaPlayerLauncher.Controls = MediaPlaybackControls.All; mediaPlayerLauncher.Media = new Uri( http://mschannel9.vo.msecnd.net/
Dopo aver instanziato il Launcher, ovvero il task che attiva il Media Player del device, disattivando (ed eventualmente terminando la nostra applicazione), possiamo decidere quali controlli visualizzare. La propriet Media indica al Media Player il path completo verso il video che, come nellesempio di codice precedente pu essere recuperato via http, oppure il path pu puntare ad un video in locale. La propriet, di tipo Uri, pu essere relativa o assoluta come da tradizione. Nel caso che il video sia locale possibile utilizzare la riga che assegna la propriet Location per indicare al Media Player se il video fornito con linstallazione oppure un video salvato precedentemente nellIsolated Storage del device. Il Media Player, attivato dallapplicazione, si presenta esattamente come se fosse stato aperto dallinterfaccia del telefono: si faccia riferimento alla Fig. 9. La seconda modalit consente di fornire una
Fig.9: Ecco il risultato del MediaPlayerLauncher
http :/ /w ww.io pr o gr am m o. it
18
Wi nd ows Phone 7 pr g r am m in g Novembre 2010 /o55

esperienza pi personalizzata per riprodurre contenuti: sufficiente inserire un controllo MediaElement allinterno dellapplicazione per riprodurre contenuti direttamente allinterno del controllo. Il controllo MediaElement pu essere posizionato allinterno di altri controlli per fornire linterfaccia desiderata: nellesempio seguente abbiamo inserito il controllo in un Border ruotato di qualche grado in modo da darvi lidea senza complicare lesempio.
<Border> <Border.RenderTransform> <RotateTransform Angle=32 CenterY=150 /> </Border.RenderTransform> <MediaElement Height=166 HorizontalAlignment= Left Margin=34,33,0,0 Name=mediaElement VerticalAlignment=Top Width=401 Source=TA.wmv > </MediaElement> </Border>

else radio.PowerMode = RadioPowerMode.Off; }
IL CONTROLLO PER LE RICERCHE

Un componente particolarmente utile nelle applicazioni che consentono allutente di ricercare termini, immagini e informazioni il launcher del servizio di ricerca, che, dietro le quinte, sfrutta il motore di Bing per la ricerca. Lutente ha sempre a disposizione il pulsante Search del telefono, ma applicativamente possibile guidare la ricerca partendo dallapplicazione. Il codice autoesplicativo:
private void searchButton_Click(object sender, RoutedEventArgs e) { SearchTask searchTask = new SearchTask(); searchTask.SearchQuery = ThinkAhead Firenze; searchTask.Show(); }
Fig.10: Il controllo MediaElement
Il risultato, senza grandi pretese estetiche, visibile nella Fig. 10. La terza modalit, che analizzeremo meglio in un articolo dedicato, consiste nellinserire la propria applicazione nel Music + Video Hub: questo componente il punto centralizzato per gestire musica e video sul device. Le applicazioni integrate possono, anzi, devono, utilizzare le classi MediaHistory e MediaHistoryItem gestire la storia dei brani ascoltati in modo da fornire allutente una esperienza consistente con le altre applicazioni musicali integrate.
Il risultato visibile nella Fig.11:
LA RADIO FM
Una feature non troppo conosciuta consiste nella possibilit di controllare la radio del telefono. Ad esempio, il codice seguente accende e spegne la radio alla pressione del pulsante relativo:
private void radioButton_Click(object sender, RoutedEventArgs e) { FMRadio radio = FMRadio.Instance; radio.CurrentRegion = RadioRegion.Europe; radio.Frequency = 102.50; if (radio.PowerMode == RadioPowerMode.Off) radio.PowerMode = RadioPowerMode.On;
Fig.11: SearchTask attivato
56 / Novembre 2010
19
Windows Phone 7: 7 API E SENSORI MOBILE WINDOWS PHONE
WEB BROWSER
Le applicazioni che fanno uso di contenuti informativi reperiti attraverso internet, possono sfruttare il controllo Web Browser direttamente allinterno delle pagine applicative. Il controllo, come da tradizione, pu essere pilotato da codice oppure pu essere configurato nel codice XAML. Un esempio di codice il seguente:
private void goButton_Click(object sender, RoutedEventArgs e) { webBrowser1.Navigate(new Uri(http:// we.thinkahead.it)); }
NOTA
Alla pressione del pulsante, il controllo denominato WebBrowser1 , gi inserito e configurato, viene fatto navigare verso un sito web. In questo caso, come abbiamo visto per il MediaElement , lutente rimane nellapplicazione e ottiene una esperienza di utilizzo consistente con lapplicazione stessa, come si nota dalla figura seguente: In alternativa possibile attivare il task WebBrowserTask per lanciare lesperienza consistente con il resto del telefono. Se vi sembra che abbia usato troppe volte il termine esperienza, probabilmente avete assolutamente ragione, ma volevo stressare uno dei concetti base di Windows Phone 7. Per chi non ha letto larticolo di copertina del numero precedente, con il termine user experience , da qualche anno, si fa riferimento proprio allesperienza che lutente vive durante lutilizzo di un prodotto software. La user interface una delle componenti pi importanti della user experience, e non un suo sinonimo. Da Wikipedia, la user experience (UX) riguarda il feeling dellutente con un sistema e comprende lesperienza, laffetto, il significato e il valore dellinterazione uomo-macchina e della propriet del prodotto stesso; inoltre, la percezione degli aspetti pratici e dellefficienza fanno parte dellesperienza dellutente. Il termine usato abbondantemente in tutta la documentazione di Windows Phone 7 dove si trova, ad esempio, la frase far partire una nuova esperienza per lutente intendendo la partenza di una applicazione. Torniamo agli aspetti tecnici: il codice per attivare il task di apertura del browser il seguente.
private void webBrowserTaskButton_Click(object sender, RoutedEventArgs e) {
USER EXPERIENCE
Con la locuzione user experience, da qualche anno, si fa riferimento proprio allesperienza che lutente vive durante lutilizzo di un prodotto software. La user interface una delle componenti pi importanti della user experience e non un suo sinonimo. La userexperience (UX) riguarda il feeling dellutente con un sistema e comprende lesperienza, laffetto, il significato e il valore dellinterazione uomo-macchina e della propriet del prodotto stesso; inoltre, la percezione degli aspetti pratici e dellefficienza fanno parte dellesperienza dellutente.
Fig.12: Il controllo WebBrowser in azione
WebBrowserTask webBrowserTask = new WebBrowserTask(); webBrowserTask.URL = http://we.thinkahead. it; webBrowserTask.Show(); }
Il risultato una finestra di Internet Explorer aperta sullindirizzo indicato. Ricordatevi che, anche in questo caso, lapplicazione viene disattivata per essere riattivata solo e se lutente preme Back fino a tornare alla nostra applicazione.
IL MARKETPLACE
Una applicazione pu utilizzare il marketplace in varie modalit. Il marketplace verr poi trattato in un articolo separato. Ad esempio unapplicazione pu attivare un task di ricerca di applicazioni o musica in base ad un criterio di ricerca testuale:
Wi nd ows Phone 7 pr r am m in g Novembre 2010 /o g 57
h ttp :/ / www.io pr o gr am m o. it
20

private void marketplaceSearchTaskButton_ Click(object sender, RoutedEventArgs e) { MarketplaceSearchTask marketplaceSearchTask = new MarketplaceSearchTask(); marketplaceSearchTask.SearchTerms = thin kahead; marketplaceSearchTask.ContentType = MarketplaceContentType.Applications; marketplaceSearchTask.Show(); }

esso una applicazione: sufficiente passare il ContentIdentifier per attivare la task. Il codice il seguente:
MarketplaceDetailTask marketplaceDetailTask = new MarketplaceDetailTask(); // Default su Application marketplaceDetailTask.ContentIdentifier = <ID>; marketplaceDetailTask.Show(); // Alternativa per contenuti musicali
GLI AUTORI Roberto e Luca sono consulenti che operano nel mondo .NET sin dalla presentazione dellambiente nel luglio 2000. Luca specializzato nella definizione della user interface, mentre Roberto si dedica allarchitettura e prestazioni della soluzione. La loro azienda, we.ThinkAhead.it, societ del gruppo DevLeap, specializzata nella realizzazione di soluzioni cloudbased su Windows Azure, applicazioni WPF/Silverlight e applicazioni mobile sia per Windows Mobile 6.5 che per Windows Phone 7. Sul sito si trovano i riferimenti ai progetti e alle aree tecnologiche coperte.
Il risultato della ricerca, sul marketplace beta, disponibile alla scrittura di questo articolo (18 settembre 2010) lo potete vedere in Fig.13: Tenete presente che limmagine e linterazione sul Marketplace non definitiva ed inserita nellarticolo a scopo illustrativo. Le due applicazioni mostrate sono reali e di nostra propriet, ma il contesto in cui sono elencate, pu cambiare nel tempo. Una applicazione pu richiedere altre tre operazioni sul Marketplace: la prima, Marketplace DetailTask consente di aprire il dettaglio di un contenuto, sia esse un brano musicale, sia
MarketplaceDetailTask marketplaceDetailTask = new MarketplaceDetailTask(); marketplaceDetailTask.ContentType = MarketplaceContentType.Music; marketplaceDetailTask.ContentIdentifier = <ID>; marketplaceDetailTask.Show();
La seconda operazione riguarda la richiesta di utilizzo dellapplicazione client denominata Marketplace hub tramite la relativa classe MarketplaceHubTask . sufficiente impostare il tipo di contenuto e invocare il metodo Show :
MarketplaceHubTask marketplaceHubTask = new MarketplaceHubTask(); marketplaceHubTask.ContentType = MarketplaceContentType.Music; marketplaceHubTask.Show();
La terza e ultima operazione, almeno nella versione RTM degli strumenti di sviluppo, la possibilit di attivare lapplicazione client sulla pagina della revisione dellapplicazione corrente in modo da consentire allutente. Il codice autodescrittivo:
MarketplaceReviewTask marketplaceReviewTask = new MarketplaceReviewTask(); marketplaceReviewTask.Show();
Una applicazione pu interagire con Accelerometro, Location Service ovvero il servizio di posizionamento via GPS, Wi-Fi o Cellulare e, non ultimo i canali Push per linvio di notifiche al client. Vista la complessit dellargomento, tratteremo le API relative ai tre servizi in un articolo dedicato. Alla prossima Roberto Brunetti e Luca Regnicoli
Fig.13: Ed ecco il MarketplaceTask
58 / Novembre 2010
21
di Windows Phone 7MOVIMENTI MOBILE IL TELEFONO LEGGE I TUOI Windows Phone 7 programming Laccelerometro
IL TELEFONO LEGGE I TUOI MOVIMENTI

IN QUESTO ARTICOLO CI CONCENTRIAMO SULLE LIBRERIE NATIVE CHE CONSENTONO DI INTERAGIRE CON LACCELEROMETRO. REALIZZAREMO UN PROGETTO PER APPROFITTARE DELLA ECCELLENTE INTERAZIONE CON IL MONDO REALE OFFERTA DA WINDOWS PHONE 7
uesto articolo introduce le API che consentono di lavorare con una importante funzionalit hardware e software di Windows Phone 7: laccelerometro. Come per gli articoli precedenti, il testo sar accompagnato dal codice per dimostrare in pratica come utilizzare delle classi e il relativo risultato. Ricordo che gli strumenti di sviluppo in versione finale si possono scaricare gratuitamente da http://developer.windowsphone. com. Prima di iniziare bene ricordare che Windows Phone 7 consente allo sviluppatore di realizzare applicazioni Silverlight e applicazioni XNA. In questi esempi utilizzeremo Silverlight per interagire con le classi esposte dalla piattaforma, ma, il codice per utilizzare laccelerometro risulta identico: sar invece profondamente diverso il codice di gestione dellapplicazione. Le relative classi si appoggiano alla sandbox in cui viene fatto girare il codice del .NET Framework (pi precisamente del .NET Compact Framework). La Fig. seguente mostra lo schema architetturale:
CD WEB
Demo.zip
zarne le relative API, dobbiamo spendere qualche riga per capire bene il suo funzionamento. Un accelerometro un sensore che misura le forze di accelerazione: una forza di accelerazione pu essere rappresentata dal movimento di un device con a bordo un accelerometro, ma il punto fondamentale rappresentato dal fatto che laccelerometro non misura lo spostamento in quanto tale, ma la forza di accelerazione dello spostamento stesso. Una seconda forza di accelerazione rappresentata semplicemente dalla forza di gravit terrestre: questo significa che laccelerometro sente sempre una accelerazione quando viene usato sul nostro pianeta; anche se il device tenuto saldamente in una mano oppure appoggiato su un piano, come
REQUISITI
Conoscenze richieste Conoscenza di .NET e Visual Studio Software necessario installare i Windows Phone Developer Tools, scaricabili gratuitamente a partire dallindirizzo http://developer.windowsphone.com. Impegno
Fig.1: I diversi layer della piattaforma
COME FUNZIONA LACCELEROMETRO

Il termine accelerometro stato utilizzato in modo improprio in molti blog e articoli su internet, quindi prima di vedere allopera il sensore, di simularne il comportamento su un personal computer e analizFig.2: LAssembly di riferimento per questo articolo
48 / Dicembre 2010 22
h ttp ://www.io ro mm .ig t Wi nd ows Phone 7 p pr og grra am mo in
Laccelerometro diMOVIMENTI Windows Phone 7 Windows MOBILE IL TELEFONO LEGGE I TUOI Phone 7 programming
ad esempio la nostra scrivania, laccelerometro rivela comunque una accelerazione verticale. Ogni dispositivo Windows Phone 7 ha almeno un sensore di accelerazione a bordo. Il sensore viene ascoltato da una semplice API che pu fornire ad una applicazione i dati sulle forze che governano il device. Visto che spesso una applicazione viene testata sullemulatore, vedremo, dopo aver capito bene come il nostro codice pu sentire queste forze, la costruzionee di un simulatore di accelerometro che senta gli spostamenti del mouse del personal computer. ovvio che poi andranno fatte prove reali su un device per calibrare bene il codice rispetto ai dati che le API forniscono. La classe esposta alle applicazioni Silverlight e XNA inclusa nella piattaforma quindi sufficiente referenziare il relativo assembly senza dover distribuire librerie aggiuntive. Nella versione finale degli strumenti di sviluppo le API disponibili sono evidenziate in Fig.2. La freccia in Fig.2 indica la libreria che contiene le seguenti classi direttamente collegate con laccelerometro:
namespace Microsoft.Devices.Sensors { public sealed class Accelerometer : IDisposable public class AccelerometerFailedException : Exception [StructLayout(LayoutKind.Sequential)] internal struct AccelerometerNativeSample public class AccelerometerReadingEventArgs : EventArgs [SecurityCritical] internal static class NativeMethods public enum SensorState internal static class TimeUtil }
andremo ad aggiungere una reference allassembly indicato in modo che il progetto stesso si presenti come in Fig. 3.
Fig.3: I reference necessari alla nostra solution
NOTA Allinterno del form principale inseriamo una TextBlock che verr pilotata da codice per mostrare le informazioni di stato dellaccelerometro e due pulsanti per avviare e fermare laccelerometro stesso. Nel prosieguo dellarticolo visualizzeremo anche tre informazioni che rappresentano le forze di accelerazione captate dal sensore: inseriamo da subito, quindi, altre tre TextBlock aldlinterno della griglia assegnando il ralativo name a XText, YText e ZText. In pratica il codice della pagina principale (MainPage.xaml) si presenta cos allinterno della griglia proposta per default:
<Grid x:Name=LayoutRoot Background=Transparent> <Grid.RowDefinitions> <RowDefinition Height=Auto/> <RowDefinition Height=*/> </Grid.RowDefinitions> <Grid x:Name=TitleGrid Grid.Row=0> <TextBlock Text=ThinkAhead & Pialorsi Sistemi x:Name=textBlockPageTitle Style={StaticResource PhoneTextNormalStyle}/> <TextBlock Text=Accelerometer x:Name=textBlockListTitle Style={StaticResource PhoneTextTitle1Style}/> </Grid>  <Grid x:Name=ContentGrid Grid.Row=1> <Button Content=Start Height=70
MARKETPLACE
Al momento in cui questo articolo arriver in edicola, il marketplace sar ufficialmente aperto. Sar possibile pubblicare applicazioni aprendo una sottoscrizione. Ogni sottoscrizione aziendale o privata (gli studenti hanno particolari privilegi) consente di pubblicare un numero illimitato di applicazioni a pagamento e fino ad un massimo di 5 applicazioni gratuite. possibile inoltre pubblicare applicazioni in versione trial cos come utilizzare il Microsoft Advertising SDK per inserire banner pubblicitari dentro le applicazioni ricevendo una fee corrispondente.
Come si pu immaginare, la classe Accelerometer rappresenta laccelerometro, leccezione AccelerometerFailedException ci consente di intercettare le eccezioni relative al suo funzionamento, lenum SensorState indicher lo stato del sensore dellaccelerometro, e la classe AccelerometerReadingEventArgs contiene le informazioni sulle forze di accelerazione che il sensore rileva. Vediamo subito un esempio di codice che attiva e spegne laccelerometro per poi tornare a introdurre alcuni concetti teorici importanti alla comprensione del codice successivo.
PRIMI PASSI NEL PROGETTO

Per iniziare con il nostro esempio, occorre creare un progetto Silverlight per Windows Phone 7 il cui template diventa disponibile dopo linstallazione degli strumenti di sviluppo. Al progetto Visual Studio
Dicembre 2010 / 49 23
HorizontalAlignment=Left Margin=37,80,0,0 Name=startButton VerticalAlignment=Top Width=160 Click=startButton_Click /> ...
Preparato il form iniziamo a vedere il codice del code behind per definire, far partire e fermare il sensore dellaccelerometro:
using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media;
Provando lapplicazione, a questo punto si pu verificare il corretto Start e Stop del sensore: nelle prime versioni beta degli strumenti di sviluppo, lemulatore non era in grado di avviare laccelerometro, ma, ovviamente, nella versione finale, laccelerometro disponibile anche nellemulatore: il codice precedente, quindi, pu essere testato anche sul personal computer. La prossima operazione da eseguire abbonarsi allevento che abbiamo accennato allinizio dellarticolo per ricevere sia le informazioni di stato sul sensore, sia le informazioni che riguardano le forze che agiscono su di esso. Il codice per effettuare questa operazione evidenziato di seguito, e sostuisce quanto abbiamo visto per il pulsante di avvio:
private void startButton_Click(object sender, RoutedEventArgs e) { this.statusText.Text = Starting...; this.accelerometer = new Accelerometer(); this.accelerometer.ReadingChanged += new EventHandler<AccelerometerReadingEventArgs>(acceler ometer_ReadingChanged); try { this.accelerometer.Start(); } catch (AccelerometerFailedException) { this.statusText.Text = Problema; } }
NOTA
using System.Windows.Media.Animation; using System.Windows.Shapes; using Microsoft.Phone.Controls; using Microsoft.Devices.Sensors; namespace _10_Accelerometer { public partial class MainPage : PhoneApplicationPage { private Accelerometer accelerometer; public MainPage() { InitializeComponent(); } private void startButton_Click(object sender, RoutedEventArgs e) ...
ACCELEROMETRO
importante comprendere a fondo come funziona questo sensore che, a prima vista, ha un comportamento diverso da quanto la maggior parte delle persone pensano. Un accelerometro non misura gli sponstamenti nello spazio, ma laccelerazione impressa al device durante questi spostamenti. Il sensore non infatti denominato Posizionometro! Maggiori dettagli possono essere recuperati dalla documentazione su MSDN e, una consultazione di Wikipedia aiuta nella comprensione delle forze gravitazionali che il sensore consente di misurare.
Il nome del nostro progetto, pubblicato anche sul sito www.thinkmobile.it, 10_Accelerometer. Allinterno del namespace, il template di progetto di Visual Studio ci ha preparato una classe MainPage che eredita le funzionalit dalla classe base presente nella libreria Microsoft.Phone. La riga successiva definisce il componente accelerometer a livello di pagina in modo da poterlo utilizzare sia nel metodo startButton_Click che nel metodo stopButton_Click. Il metodo di avvio dellaccelerometro, dopo aver impostato la TextBlock al valore di Starting, instanzia laccelerometro e, allinterno di un blocco try/catch prova ad avviare il sensore. Come si nota, laccelerometro potrebbe non avviarsi correttamente, scatenando una AccelerometerFailedException. Questa eccezione, nella classica propriet Message conterr lerrore scatenato dal codice invocato dietro le quinte, ed espone una propriet ErrorId che fornisce il codice di errore nativo. La stessa eccezione potrebbe verificarsi anche durante la chiamata al metodo Stop.
Levento denominato ReadingChanged passa una classe di tipo AccelerometerReadingEventArgs al metodo indicato (nel nostro caso accelerometer_ ReadingChanged). La definizione di questa classe, decompilata con Reflector, la seguente:
public class AccelerometerReadingEventArgs : EventArgs { // Fields [CompilerGenerated] private DateTimeOffset <Timestamp>k__ BackingField; private double x; private double y; private double z; // Methods internal AccelerometerReadingEventArgs(Acceleromet erNativeSample accNativeSample); // Properties public DateTimeOffset Timestamp {
50 / Dicembre 2010 24
[CompilerGenerated] get; [CompilerGenerated] private set; } public double X { get; } public double Y { get; } public double Z { get; } } }); this.XText.Text = e.X.ToString(); this.YText.Text = e.Y.ToString(); this.ZText.Text = e.Z.ToString(); } State.ToString(); this.TimeStampText.Text = e.Timestamp. ToString();
La propriet Timestamp fornisce loffset temporale (sotto forma di DateTimeOffset) ovvero indica il momento in cui stata presa la rilevazione sul sensore, mentre X,Y,Z sono i valori che rappresentano la forza di accelerazione sui vari assi. bene rimarcare che questi tre valori non rappresentano lo spostamento sullasse X, Y o Z, ma la forza di accelerazione percepita dal device sui tre assi. I valori di queste tre propriet che riceviamo negli argomenti del nostro metodo rappresentano infatti valori di tipo double che indicano la direzione dellaccelerazione per ogni asse in unit gravitazionali comprese fra -2 e 2. In pratica se riceviamo il valore 1 nellasse X vuol dire che il device ha sentito una forza gravitazionale pari a 1 ovvero lutente ha spostato il telefono verso sinistra imprimendo una forza pari a 1. Se invece riceviamo un valore pari a -1, lutente ha spostato il telefono con la stessa forza dellesempio precedente, ma spostando il device verso destra. Lasse Y lavora sullasse terrestre, ovvero sente laccelerazione in avanti e indietro, mentre lasse Z lavora sullasse verticale ovvero sente laccelerazione verso lalto o verso il basso. Provando lesempio sullemulatore, il valore di Z sar -1 in quanto rappresenta la forza di gravit. Se lutente gira il telefono con lo schermo verso il basso, gli assi restano immutati ma i valori ricevuti dovranno essere letti al contrario: un valore di -1 sullasse X rappresenta una accelerazione sul movimento verso sinistra. Il codice che visualizza i valori delle forze e, se avete un device sotto mano, dimostra anche il comportamento del sensore, molto semplice come si nota nellestratto seguente. Lunica complessit, ben nota a chi ha lavorato con WPF, Silverlight, Windows Forms la necessit di richiedere al thread principale, lowner dei controlli, lesecuzione delle operazioni di assegnazione. Questa necessit deriva dal fatto che laccelerometro richiama da un thread secondario il metodo indicato per ricevere levento di segnalazione dellaccelerazione captata dal sensore.
void accelerometer_ReadingChanged(object sender, AccelerometerReadingEventArgs e) { Deployment.Current.Dispatcher.BeginInvoke(() => { this.statusText.Text = this.accelerometer.
Il metodo BeginInvoke esposto dal Dispatcher e recuperato dal contesto di deploy corrente consente di eseguire loperazione sul thread principale. Il metodo anonimo, rappresentato dalla lambda expression (caratteristica di C# 3.0 2008) inserisce nelle tre TextBlock della pagina principale i valori del sensore. La prima riga di codice utilizza la propriet State per visualizzare lo stato del sensore (Ready quando stato avviato ed pronto a lavorare), mentre la seconda riga di codice recupera il timestamp che indica il momento della rilevazione. Come si nota il valore della propriet Y -1 in quanto lemulatore, essendo fermo, rileva solo la forza di gravit terrestre che, in condizioni stabili, a livello del mare, e su un parallelo medio, , appunto 1G negativo. Lo stesso codice, lanciato su un device reale, produce, con il device appoggiato sul tavolo, il risultato di Fig.6. Alla prima esecuzione, il comportamento solimente sembra ancora strano: visto che il device appoggiato su un tavolo non dovrebbe subire nessuno spostamento; il device in effetti non subisce nessuno spostamento in quanto ben appoggiato sulla superficie, ma le forze gravitazionali agiscono su di esso sui vari assi e possono variare se il device si trova su una montagna oppure a livello del mare, su un parallelo vicino allequatore oppure pi vicino ai poli. Ricordate, inoltre, che la Terra ruota, come disse qualcuno quando ancora Windows Phone 7
NOTA
USER EXPERIENCE
Con user experience si fa riferimento proprio allesperienza che lutente vive durante lutilizzo di un prodotto software. La user interface una delle componenti pi importanti della user experience, e non un suo sinonimo. Da Wikipedia, la user experience (UX) riguarda il feeling dellutente con un sistema e comprende lesperienza, il significato e il valore dellinterazione uomo-macchina e della propriet del prodotto stesso; inoltre, la percezione degli aspetti pratici e dellefficienza fanno parte dellesperienza dellutente. Il termine usato abbondantemente in tutta la documentazione di Windows Phone 7 dove si trova, ad esempio, la frase far partire una nuova esperienza per lutente intendendo la partenza di una applicazione.
Fig.4: Rappresentazione visuale degli assi X, Y, Z
Dicembre 2010 / 51 25
non era uscito. Se avete un device provate a tenerlo il pi possibile fermo in mano e noterete che le forze diminuiscono o aumentano: diminuiscono se la vostra mano si muove contro le forze terrestri o aumentano se vi muovete nella stessa direzione. Il fatto che il valore Z sia negativo significativo del fatto che sta resitendo alla forza gravitazionale che lo vorrebbe invece spingere verso il pavimento. Aggiungendo una Debug.WriteLine(e.Z) allinterno del codice del metodo di visualizzazione siamo in grado di tracciare i valori continui forniti dal sensore e capire meglio il funzionamento dellaccelerometro stesso. Provando ad esempio ad alzare il device con una certa energia e fermandosi bruscamente dopo un breve tratto otteniamo il trace seguente: -0,88671875 -0,87109375 -0,87109375 -0,85546875 -0,88671875 -1,078125 -1,3046875 -1,54296875 -1,76171875 -1,80859375 -1,71875 -1,55078125 -1,05859375 -0,5546875 -0,26953125 -0,1015625 0,05859375 0,1015625 0,1015625 -1,04296875 -1,046875 -1,12890625 -0,90234375 -1 -0,98046875 -0,9375 -0,921875 -0,89453125 -0,86328125 -0,90625 -0,87109375 -0,84375 -0,859375 -0,84375 -0,85546875 -0,859375 -0,81640625 -0,828125 -0,83984375 -0,83203125 -0,84765625 -0,87890625 -0,87109375 contro la forza di gravit e come il momento di stop brusco corrisponda ad una sempre minore resistenza alla forza gravitazionale sino ad arrivare a valori leggermente positivi per poi riassestarsi sui valori di gravit iniziali.
Fig.6: Grafico di unaccelerazione veloce verso lalto
SIMULATORE DI ACCELEROMETRO (REACTIVE EXTENSIONS)

La documentazione ufficiale, sin dalle primissime versioni Beta, riporta un modo semplice e interessante per testare le applicazioni sullemulatore, che, come abbiamo avuto modo di dire, non ovviamente in grado di sentire le forse gravitazionali e, anche se lo fosse, sarebbe complicato muovere il PC che lo ospita con 2G di forza senza disintegrarlo contro qualcosa nella stanza. Tramite .NET Reactive Extensions (Rx), possibile inviare una sequenza di dati simulati allaccelerometro per eseguire test oppure anche possibile generare dati random compresi in intervalli specifici: il primo scenario molto utile anche per eseguire unit test, mentre il secondo si avvicina di pi a quanto potrebbe accadere quando un utente avr in mano un device con il nostro codice. Il codice proposto nella documentazione ufficiale (http://msdn.microsoft.com/en-us/library/ ff637521(VS.92).aspx), nel punto pi importante, si presenta cos:
static IEnumerable<Vector3> EmulateAccelerometerReading() { // Create a random number generator Random random = new Random(); // Loop indefinitely for (double theta = 0; ; theta+=.1 ) { // Generate a Vector3 in which the values of each axes slowly drift between -1 and 1 and // then normalize the vector Vector3 reading = new Vector3((float)Math. Sin(theta), (float)Math.Cos(theta * 1.1), (float)Math. Sin(theta * .7));
Fig.5: Lettura dati sullemulatore
importante notare come laccelerazione rilevata sia un po diversa da quanto ci aspettavamo e, ovviamente, il sensore ad aver ragione. Quando alziamo il device notiamo uno spostamento sullasse Z che incrementa il valore negativo fino ad accelerare a -1.80: il movimento continuo, perch giustamente rileva una accelerazione progressiva sino al massimo. I valori, dopo il valore minimo, cominciano ad aumentare (nel senso che tornano verso numeri positivi) indicandoci che stiamo rallentando la nostra corsa. Molte persone a cui abbiamo fatto training sul device si aspettavano invece che a fronte di una fermata il valore si fermasse: giustamente invece il sensore rileva che ci stiamo fermando in quanto molto pi sensibile di quanto possiamo aspettarci. Non solo: il sensore prima di ristabilizzarsi sul valore della gravit terrestre, esegue una leggera accelerazione in discesa. Infatti, anche una frenata ha una forza di accelerazione. Nella figura seguente, in cui ho ribaltato il grafico, vediamo il movimento della mano verso lalto con una impennata del grafico (ricordatevi che un movimento verso lalto significa andare contro la gravit). Il grafico mostra chiaramente come il nostro movimento verso lalto corrisponda ad un movimento
52 / Dicembre 2010 26
reading.Normalize(); // At random intervals, generate a random spike in the data if (random.NextDouble() > .95) { reading = new Vector3((float)(random. NextDouble() * 3.0 - 1.5), (float)(random.NextDouble() * 3.0 - 1.5), (float)(random.NextDouble() * 3.0 - 1.5)); } // return the vector and then sleep yield return reading; Thread.Sleep(100); } }
are un simulatore troppo raffinato con il rischio di cestinare il tutto dopo poco tempo. Questo il codice reale che abbiamo usato per qualche mese prima di far diventare il simulatore una applicazione reale com oggi. La prima cosa che ci interessa fare quindi modificare una riga di codice nel chiamante per utilizzare un nostro factory che scelga laccelerometro in base alla configurazione e alle condizioni: il factory restituir un accelerometro reale se esiste oppure laccelerometro simulato. Il codice del metodo Start diventa questo:
// CHANGE: Uso nostra interfaccia IAccelerometer accelerometer; private void startButton_Click(object sender, RoutedEventArgs e) { axesListBox.Items.Clear(); statusText.Text = Starting...; // CHANGE: chiamo helper per avere Normal o Mouse accelerometer = AccelerometerHelper. GetAccelerometer(); // CHANGE: uso evento e eventhandler dellinterfaccia accelerometer.ReadingChanged += new EventHandler<AccelerometerEventArgs> (accelerometer_ReadingChanged); accelerometer.Start(); statusText.Text = Started; }
Allinterno del loop, come si pu notare, viene utilizzata una variabile di tipo double (theta) su cui vengono applicati seno e coseno per creare una istanza della classe Vector3 che, a sua volta, viene restituita nella colletion IEnumerable<Vector3>. Il codice chiamante pu quindi costruire una ObservableCollection e invocare il metodo di lettura dei dati dellaccelerometro mentre questi sono generati nella collection stessa. Non abbiamo lo spazio per approfondire questo aspetto e, soprattutto, la documentazione ufficiale sufficientemente completa. Vi rimandano al link indicato nel box a fianco per eventuali approfondimenti. Vi vorrei invece proporre una soluzione alternativa e, a mio avviso, pi utile nel caso in cui vogliate simulare vari comportamenti dellutente.
SUL WEB
BLOG/FORUM/ SAMPLE
La community www.thinkmobile.it, nata in occasione della prima conferenza italiana sullo sviluppo mobile nel luglio di cinque anni fa, da Aprile 2010 ha aperto una nuova sezione dedicata a Windows Phone 7: sono disponibili forum specifici per trattare lo sviluppo, vari blog che forniscono informazioni continue sulle novit per gli sviluppatori e nella sezione media si trovano numerosi esempi sullutilizzo dei sensori e delle varie funzionalit del device.
SIMULATORE DI ACCELEROMETRO
Lidea ci venuta a giugno 2010 quando in una riunione di progetto avevamo bisogno di creare una applicazione basata sullaccelerometro e non avevamo ancora una device fisico. Inoltre, la necessit di avere dei dati per testare una applicazione molto sentita in un team di sviluppo, dove non detto che tutti i developer o i designer abbiamo un device reale per fare le prove. Con il mouse relativamente semplice simulare dei dati che, non essendo pi casuali o nella stessa sequenza come con le Reactive Extension, consentono di testare qualunque scenario in modo interattivo. La prima idea alla base del nostro ThinkAhead Accelerometer Simulator era non dover cambiare il codice dellapplicazione che usa le classi dellaccelerometro reale rispetto al simulatore e, come bene sempre fare secondo le pratiche Agile, siamo partiti creando un simulatore semplice che, un domani potr essere reso ancora pi configurabile e pluggabile nella soluzione: a giugno gli strumenti erano ancora in CTP e non avrebbe avuto senso cre-
La modifica effettuata al metodo molto semplice: richiamiamo il metodo GetAccelerometer, che restituisce un tipo IAccelerometer, interfaccia che andremo a vedere fra un attimo e che rappresenta, come si nota nella prima riga di codice, una definizione di accelerometro. In pratica il nostro metodo GetAccelerometer restituir laccelerometro simulato o laccelerometro reale in base alla configurazione che scegliamo. Il resto del codice identico a quanto visto in precedenza. Da notare che usiamo la nostra classe AccelerometerEventArgs e il nostro evento ReadingChanged che abbiamo deciso di chiamare in modo identico alle classi dellaccelerometro di default. Il codice della classe helper legge la configurazione e, in base al valore Default o Mouse crea una istanza di accelerometro. Il metodo GetAccelerometer tenta di avviare laccelerometro internamente in modo da restituire laccelerometro via mouse se ci fossero problemi con laccelerometro reale quando siamo in una sessione di debug. La nostra classe Utility non fa altro che leggere i valori di configurazione.
Namespace ThinkAhead.Library { public static class AccelerometerHelper
Dicembre 2010 / 53 27
{ public static IAccelerometer GetAccelerometer() { String accelerometer = Utility.GetAppSettings( Accelerometer); IAccelerometer sensor = null; switch (accelerometer) { case Default: { // Provo a avviare laccelerometro sensor = new AccelerometerProxy(); #if DEBUG try { sensor.Start(); sensor.Stop(); } catch (AccelerometerFailedException) { sensor = new MouseAccelerometer(); } #endif break; } case Mouse: { sensor = new MouseAccelerometer(); break; } } return sensor; }}} { AccelerometerEventArgs args = new AccelerometerEventArgs() { X = this._x, Y = this._y, Z = this._z }; public event EventHandler<AccelerometerEvent Args> ReadingChanged; private FrameworkElement target; private bool isMouseLeftDown; private bool isKeyDown; private Point mouseDownLoc; private double tolerance = Convert. ToDouble(Utility.GetAppSettings(Tolerance)); private Double _x = 0; private Double _y = 0; private Double _z = 0; private SensorState _state = SensorState.NoData; } } this.ReadingChanged(this, args); if (!isKeyDown) this._y = -(position.Y - this. mouseDownLoc.Y) * this.tolerance; else this._z = -(position.Y - this. mouseDownLoc.Y) * this.tolerance; if (this.ReadingChanged != null) { if (!this.isMouseLeftDown) return; Point position = e.GetPosition(this.target); this._x = (position.X - this.mouseDownLoc.X) * this.tolerance;
e isKeyDown per inviare informazioni sullasse Z al posto dellasse Y; il mouse in effetti ha solo due direzioni possibili: quando lo sviluppatore preme il tasto sinistro del mouse inviamo X e Y durante lo spostamento del mouse, mentre se preme anche un tasto sulla tastiera, inviamo X e Z. Nel codice seguente, il metodo HandleMouseMove, infatti, controlla la pressione del tasto sinistro e, solo in caso positivo, recupera la posizione del mouse sullasse X per valorizzare il membro privato _x e la posizione sullasse Y per valorizzare _y. Se invece lo sviluppatore sta premendo un tasto, valorizziamo la propriet _z al posto della propriet _y. Dopo aver calcolato i valori di _x, _y e _z, facciamo scattare levento AccelerometerEventArgs fornendo tali dati al chiamante:
private void HandleMouseMove(object sender, MouseEventArgs e)
Fig.7: Lettura dati sul device
Ovviamente potete modificare il codice come preferite. Il codice del nostro accelerometro il seguente:
public class MouseAccelerometer : IAccelerometer {
La classe contiene una serie di informazioni private che utilizzeremo per inviare i dati allapplicazione. Oltre alle propriet X,Y,Z e lo stato del sensore, abbiamo utilizzato isMouseLeftDown per sapere se lutente sta premendo il pulsante sinistro
Il codice completo della nostra libreria in versione 1 scaricabile dal sito www.thinkmobile.it, nella sezione Media: ci sono due versioni allineate agli strumenti di aprile 2010 e agli strumenti di luglio 2010. Potete ovviamente modificarle e arricchirle a vostro piacimento visto che le abbiamo rilasciate senza nessun copyright o licenza. Adesso il nostro ThinkAhead.Accelerometer ha fatto altri passi avanti ed diventato un progetto reale insieme al progetto a cui servito visto che, appunto, ancora non tutti nel nostro team hanno un telefono a disposizione. Roberto Brunetti
54 / Dicembre 2010 28
Windows Phone 7: linterfaccia MOBILE LINGUAGGIO METRO: LINNOVATIVO DI DESIGN
METRO: LINNOVATIVO LINGUAGGIO DI DESIGN

A
fine ottobre Microsoft ha lanciato ufficialmente Windows Phone 7, il nuovo device per la telefonia mobile. Il nuovo device, sin dalle sue prime apparizioni di febbraio 2010, sempre stato presentato da Microsoft calcando la mano sulla filosofia di progettazione, le linee guida che hanno ispirato la nascita di questa nuova user experience e sul valore dellinterfaccia rispetto allutente finale. Con il termine user experience, da qualche anno, si fa riferimento proprio allesperienza che lutente vive durante lutilizzo di un prodotto software. La user interface una delle componenti pi importanti della user experience, e non un suo sinonimo. Da Wikipedia, la user experience (UX) riguarda il feeling dellutente con un sistema e comprende lesperienza, laffetto, il significato e il valore dellinterazione uomo-macchina e della propriet del prodotto stesso; inoltre, la percezione degli aspetti pratici e dellefficienza fanno parte dellesperienza dellutente. Il primo errore che pu fare lo sviluppatore di applicazioni per Windows Phone 7 ignorare queste linee guida, raccolte nel documento Application Phone UI Design and Interaction Guide, e progettare la user experience per la propria applicazione non in sintonia con il resto del device: non stiamo affermando che non possiamo avere fantasia e che le applicazioni saranno tutte uguali, anzi, stiamo affermando il contrario: le linee guida servono per evitare che lutente disperda il suo tempo alla ricerca di un tasto o di una funzionalit, servono per dare una base comune per facilitare lutilizzo delle applicazione, riducendo i tempi di apprendimento e la dimensione delleventuale testo di help. Le applicazioni mobile sono utilizzate in contesti diversi rispetto alle applicazioni tradizionali. Lesempio pi classico : se lutente sta camminando e intanto usa il telefono, non possiamo fargli interrompere il suo cammino per farlo entrare in una opzione complicata da trovare o per costringerlo a leggere venti righe di testo di aiuto; se lutente si deve fermare non abbiamo scritto una buona applicazione e se invece lutente si distrae e attraversa la strada mentre legge...abbiamo fatto ancora peggio. Le linee guida si scaricano a partire da questo link http:// developer.windowsphone.com/windows-phone-7/, dove si trova anche una guida per la costruzione di siti web con interfaccia mirata allo schermo e alla user experience con Windows Phone 7. Sempre a partire dal link indicato, ci sono altri due cose utilissime, la prima la documentazione sulla
METRO DEFINISCE LE LINEE GUIDA RELATIVE ALLA PROGETTAZIONE DI USER INTERFACE PER WINDOWS PHONE 7. LA SUA FILOSOFIA, ATTUALE E MODERNA, SI ADATTA PERFETTAMENTE ANCHE AD APPLICAZIONI DESKTOP E WEB DI NUOVA GENERAZIONE
piattaforma che andremmo a introdurre da subito e la seconda, sono gli strumenti, gratuiti, per sviluppare applicazioni. Con ThinkAhead, la societ del gruppo DevLeap specializzata nello studio e realizzazione di user experience, abbiamo avuto la fortuna di partecipare al programma di early adoption e, durante questo periodo, siamo arrivati alla conclusione che sia di vitale importanza apprendere le specifiche dettate dalle linee guida prima di sviluppare le applicazioni. Le specifiche sono raccolte nella UI Design and Interaction Guide for Windows Phone 7, guida attualmente giunta alla versione 2.0 che comprende quanto oggi conosciamo con il termine Metro. fondamentale conoscere i concetti base della piattaforma Silverlight: pannelli, controlli, stili, template, binding e protocolli di comunicazione, ovviamente mixati in unarchitettura flessibile, estendibile, robusta e testabile, ma decisamente importante saper rappresentare al meglio la nostra user experience applicativa: lusabilit di un software importante quanto la sua architettura.
NON SOLO SOFTWARE

Corsi e ricorsi della storia, una serie di avvenimenti che si susseguono uno dopo laltro, levoluzione in un campo segue una rivoluzione in un altro, ormai linformatica contaminata continuamente da eventi esterni, in qualunque sua forma: arte, architettura, musica e caratteristiche sociali e di costume. Questo preambolo per affermare che ormai le applicazioni devono seguire non solo londa tecnologica ma devono essere fedeli al concetto di attualit e modernit. Molti parlano, o parlavano, di Web 2.0, secondo noi sono gli utenti che sono diventati 2.0, non subiscono passivamente le idee grafiche di programmatori o architetti software ma ricercano interfacce utente al passo con i tempi; importante, quindi, guardare non solo al codice XAML ma affacciarsi sul mondo reale e capire quali sono le idee che si stanno affermando in questi ultimi anni. Adesso la vera eleganza fatta di essenzialit, una regola che vale per tutto, dal software allabbigliamento, dallarchitettura al design passando per larredamento, la comunicazione e la pubblicit. Un design senza fronzoli fatto di linee pulite e leggere declinato con forme e colori che si armonizzano con
Conoscenze richieste nessuna Software nessuna Impegno
2011 W indo w sAprile P h o ne 7 pr o g r a m m in g
52 /
http://ww w.iop r o g r am m o . it
29
PhoneLINNOVATIVO 7: linterfaccia LINGUAGGIO MOBILE DI DESIGN METRO: Windows Phone 7 programming Windows
il nostro stile di vita. Proviamo a confermare queste idee con alcuni esempi reali. Anche negli allestimenti di mostre contemporanee si tende a valorizzare solo le opere e non lallestimento stesso, si ritorna a pareti bianche che ospitano gli elementi dellesposizione; un esempio linstallazione Shot di Wolfgang Tillmans alla Serpentine Gallery di Londra. Sommando tutte queste considerazioni arriviamo quindi a definire unidea di gusto, eleganza e modernit basata sulla semplicit, essenzialit e valorizzazione del contenuto rispetto al contenitore, minimizzando gli sprechi in ogni loro forma.
Fig. 1: Windows Phone 7 UI
NOTA
USER EXPERIENCE
Non solo Microsoft, ma anche molte altre importanti aziende di software stanno progettando le loro interfacce utilizzando icone essenziali, semplici e definite, dando rilevanza al contenuto rispetto alla cornice ed eliminando immagini 3D e sfondi gradienti, in definitiva semplici. Il nuovo Skype, unapplicazione di HP per la gestione del backup, linterfaccia del nuovo TomTom sono solo alcuni degli esempi che troveremo con maggior frequenza sui nostri dispositivi fissi o mobili. Finora abbiamo compreso in generale le attuali tendenze in campo di user interface, lorigine e le idee che hanno inspirato Metro e i vari campi applicativi del nuovo linguaggio di design, passiamo adesso ad analizzare i principi su cui si basa.
LA FILOSOFIA
Labitudine, anche nel mondo dellinformatica, di riutilizzare idee che funzionano bene e lucidarle per farle apparire personali, fenomeno che in campo marketing viene definito come me too. Nel mondo dei device mobili, dopo linnovazione iPhone si assistito a una serie di interfacce utenti molti simili luna allaltra che non hanno portato innovazione ma solo piccole evoluzioni del prodotto originale. Microsoft, nello sviluppo dellinterfaccia di Windows Phone 7 si discostata da questa tendenza creando un nuovo modo di intendere la presentazione e la fruizione di contenuti. Migliaia di prototipi e di casi duso hanno portato alle attuali specifiche e linee guida, un vero e proprio linguaggio di design, nome in codice Metro. Se lobiettivo quello di arrivare prima possibile alle informazioni necessarie, mantenendo alti gli standard di eleganza e stile, non si pu prescindere dalla semplicit, caratteristica fondamentale del nuovo concetto di immagine e comunicazione, che si sta affermando in questi anni in diversi campi quali architettura, design, arte e pubblicit, come evidenziato in precendenza in questo articolo. Segue uno screenshot dellinterfaccia utente di Windows Phone 7, nello specifico della pagina Start (lhome page del sistema), contatti e calendario Metropolitane, aereporti, stazioni ma anche strade, diventano il punto di partenza per un linguaggio basato sulla semplicit e sul movimento, che prende spunto dallimmediatezza visiva dei codici dei luoghi metropolitani e dagli stessi ne prende il nome. Le idee di Metro, trovano una naturale collocazione anche per applicazioni desktop o web, in quanto i principi fondamentali non sono dipendenti da una specifico sistema o piattaforma, potremmo infatti usare gli stessi concetti sia tramite XAML che con CSS/HTML, Java, Flash ecc. In casa Microsoft troviamo Zune, applicazione desktop per la gestione di contenuti multimediali, applicazioni Windows Phone 7 e altro, realizzata adattando le linee guida di Metro a un contesto desktop. In ambiente web possiamo evidenziare la nuova interfaccia di amministrazione di Windows Azure, realizzata interamente in Silverlight, scontato sottolineare che i concetti di chiarezza, linearit, semplicit di Metro si applicano anche a tale scenario.
PULITO, LEGGERO, APERTO E VELOCE

Per realizzare uninterfaccia veloce e reattiva, dobbiamo porre unattenzione particolare alle attivit principali del software, mettendole in evidenza. Ad esempio, nel caso di una maschera di gestione contatti deve essere immediatamente riconoscibile la funzione di aggiunta di un contatto. Oppure, in unapplicazione di consultazione di blog, la funzione di refresh dovr essere immediatamente riconoscibile e utilizzabile Di conseguenza, per mantenere la leggerezza dellinterfaccia sicuramente meglio concentrarci sulle funzionalit fondamentali dellapplicazione senza appesantirla con pulsanti o controlli che distraggono lutente dalla sua attivit principale. Le funzionalit secondarie saranno poste in secondo piano, posizionate in menu alternativi o pagine specifiche. Ad esempio, la pagina di informazione del publisher sar richiamata da un link posto in un menu secondario. In un ambiente ristretto come quello di un device mobile diventa fondamentale un altro principio di Metro: fare tanto con poco; cerchiamo quindi di nascondere dietro semplici gesture delle complesse logiche di business o applicative. Un esempio di questa tecnica rappresentato dalla funzionalit di comunicazione asincrona e transazionale con i web service, sincronizzazione dei dati offline e calcolo delle statistiche online e offline con un semplice tap su una listbox. Un altro esempio quello delluso di pannelli densi di logica applicativa, in grado di posizionare gli elementi in funzione del peso di ogni item, ma di immediata comprensione e utilizzo da parte dellutente finale. Come abbiamo detto in precedenza Metro tende a eliminare il superfluo, quindi evitiamo gli sprechi in ogni loro forma, in
Spesso lo sviluppatore sottovaluta molti degli aspetti legati alla user interface e alla user experience: non intendiamo che non sia in grado di costruire user interface carine o accattivanti, ma che sottovaluti limportanza di aderire alle linee guida della piattaforma. Su una interfaccia di dimensioni ridotte e su un dispositivo che fa della user experience un suo punto di forza fondamentale rispettare le linee guida: vi consigliamo caldamente di leggere la UI Design & Interaction Guide che trovate a partire dalla home page per gli sviluppatori http://create. msdn.com.
NOTA
XAML
Presentato pubblicamente a novembre 2003, il linguaggio eXtensible Application Markup Language, consente di definire tramite tag XML una gerarchia di oggetti di qualunque tipo. Attualmente XAML, viene utilizzato per la definizione degli elementi dellinterfaccia utente con WPF e Silverlight, per la creazione di documenti XPS e per la gestione di workflow creati con Workflow Foundation.
h ttp : //w w w . io pr o g r a m m o .it
30
Aprile Wi nd ows Phone 7 2011 pr o g r am m in g
/ 53
Windows Phone 7: linterfaccia Windows Phone 7 programming MOBILE LINGUAGGIO METRO: LINNOVATIVO DI DESIGN
termini di user experience ci significa ridurre al minimo gli elementi sullo schermo. Spesso ci troviamo di fronte ad applicazioni piene zeppe di funzionalit accessorie che potrebbero essere utili solo al 2% degli utenti, mentre il rimanente 98% vivrebbe benissimo senza; appesantire linterfaccia utente con pulsanti o altri controlli non strettamente necessari allapplicazione ne diminiusce drasticamente lusabilit. Questa tendenza non solo importante per la realizzazione di applicazioni mobili ma anche per interfacce desktop o web, molto spesso infatti per accontentare quel 2% rendiamo pi scomoda la fruibilit allaltro 98%. IPhone un classico esempio di questo concetto: le funzionalit necessarie alla maggioranza degli utenti sono esposte in modo estremamente chiaro e usabile, altre funzioni pi complesse e meno utilizzate non sono state inserite nel sistema. Tornando a Metro, prendiamo ad esempio un pannello di configurazione delle impostazioni di unapplicazione, che potrebbe contenere mille controlli di personalizzazione e setup, ma dobbiamo scegliere con cura e inserire solo le parametrizzazioni pi importanti per rendere pi facile e semplice lutilizzo da parte dellutente. Per sostenere il concetto di leggerezza fondamentale non temere gli spazi vuoti, aiutano la leggibilit dei testi, limmediata comprensione delle funzionalit e danno anche risalto agli elementi chiave: semplice capire infatti che aumentando la dimensione dello spazio fra due elementi, entrambi acquistano importanza sullo schermo. Nellesempio di Fig.7, i vari radio button sono spaziati notevolmente fra di loro come suggeriscono le linee guida; questo non solo per rendere gli item facilmente toccabili ma anche per dargli la giusta importanza. Microsoft per Windows Phone 7 ha progettato un nuovo font ad alti DPI in grado di supportare a pieno questo principio: Segoe WP. Consigliamo di utilizzarlo nei suoi vari pesi (bold, semibold, semilight ecc.) nelle applicazioni Silverlight che andrete a sviluppare. Mostriamo lesempio di una dialog che consente allutente
Fig. 3: Dimensione dei caratteri tipografici
PRINCIPI DI TIPOGRAFIA
Usare il carattere tipografico come elemento grafico, non solo come semplice testo ma sostituirlo allutilizzo di immagini iconografiche che spesso non sono comprensibili da parte dellutente. Un bel carattere ha lo stesso impatto e la stessa forza di unimmagine e sicuramente pi esplicativo. In questo modo linterfaccia utente non sar un collage di testo e immagini, cos frequente in ambito web, ma sar omogenea, semplice, lineare e chiara; concetti chiave di Metro.
la scelta di un item allinterno di una listbox. In questo caso abbiamo usato una pagina separata per supportare il concetto di dialog, e scelto di utilizzare caratteri tipografici al posto di una cascata di icone, leffetto finale sicuramente pi comprensibile ed elegante. Acquista quindi unimportanza fondamentale anche la scelta della dimensione del font, non solo per ovvi motivi di touch, ma anche per mettere in evidenza gli elementi principali. Nel caso della maschera del contatto, infatti pi importante lazione di call mobile, che il dettaglio sul numero di telefono. Usando correttamente la tipografia, carattere, peso e dimensione aumenter lusabilit della nostra applicazione.
PRINCIPI DI MOVIMENTO
La transizione fra pagine fondamentale come la progettazione delle stesse; lutente esegue una serie di azioni fra applicazioni diverse, creando una vera e propria storia di navigazione, importante quindi far comprendere chiaramente dove si trovava e dove sta andando. Pur riducendo al minimo i pulsanti hardware, Windows Phone 7 non ha rinunciato ai pulsante hardware Start e Back che consentono allutente una facile navigazione fra le pagine di unapplicazione e fra software diversi. Il runtime di Windows Phone 7 ad ogni resume o launch delle nostre applicazioni creer automaticamente unanimazione in grado di far capire allutente il cambiamento di contesto mantenendo uniforme la user experience. Tale animazione, oltre ad essere ottimizzata da un punto di vista dei consumi hardware, poco invasiva e non rende
Fig. 2: Navigazione fra applicazioni
W indo w s Aprile P h o ne2011 7 pr o g r a m m in g
54 /
http://ww w.iop r o g r am m o . it
31
Phone LINNOVATIVO 7: linterfaccia LINGUAGGIO MOBILE DI DESIGN METRO: Windows Phone 7 programming Windows
noiosa la transizione fra i diversi stati. impossibile esprimere il concetto di movimento con immagine statiche. Le animazioni in Windows Phone 7 acquistano un ruolo importante, non solo per dare dei feedback immediati allutente a fronte di gesture di touch, ma anche per mostrare cambiamenti di stato o evidenziare dei controlli di interfaccia utente. diretti, ma anche amichevoli, come se fosse un nostro amico a comunicarci leccezione. Da evitare quindi impossibile connettersi al server. Errore 0x028271C, meglio un non posso inviare questa informazione su Internet, hai controllato se hai segnale?. Prendiamo sempre ad esempio Save the Planet: se non si riesce a invocare il servizio di salvataggio su internet, lapplicazione presenta un messaggio utile per lutente.
CONTENUTO NON CONTENITORE

Tutto quello che abbiamo visto finora, ovvero i principi di leggerezza, pulizia, spazio, tipografia, elementi in primo piano sono alla base del principio Metro Content, not Chrome (non inteso come browser), ovvero dare importanza al contenuto al posto della cornice. Il contenuto linterfaccia utente! Evitiamo il superfluo, ovvero evitiamo delle decorazioni che non hanno una diretta corrispondenza con le informazioni, renderemo cos le nostre applicazioni non solo pi utilizzabili ma anche pi leggere. Ad esempio, nel caso di una playlist, inutile utilizzare unicona generica a fianco di ogni titolo, il solo testo sufficiente per interagire con lapplicazione. Diverso per il caso di una lista di album, in cui limmagine della copertina dellalbum pi immediata del titolo.
Fig. 5: Personale, rilevante e connesso: i fili rossi della UX
LINEE GUIDA: FILI ROSSI

Vengono definiti fili rossi tre importanti concetti su cui si fonda la user experience di un device di nuova generazione come Windows Phone 7: 1) Personale. Ad esempio, lutente che sceglie quali sono le informazioni importanti da visualizzare nello Start, home page di Windows Phone 7. 2) Rilevante. Se prendiamo come esempio lApp Meteo, questa visualizza in primo piano le informazioni in base alla nostra attuale posizione GPS. 3) Connesso. La stessa applicazione meteo visualizza le informazioni relative al tempo nelle citt dove risiedono i nostri principali contatti.
Fig. 6: Ridurre al minimo gli elementi sullo schermo
CONSIGLI, NON IMPOSIZIONI

Fig. 4: Il contenuto come elemento dellinterfaccia utente
AUTENTICAMENTE DIGITALE
In Windows Phone 7 niente nascosto, gli elementi e le funzionalit sono facilmente visibili e rintracciabili e fanno solo quello per cui sono state progettate. Nel realizzare la nostra applicazione dobbiamo, non solo esplicitare gli elementi e le funzionalit senza inutili accessori, sia essi grafici che logici, ma anche essere autentici e coerenti con limmagine che vogliamo trasmettere della nostra azienda. Essere diretti, questo lultimo consiglio di questo importante principio; ad esempio, un link verso una pagina di richiesta di username/password deve avere come testo login o sign in e non un confuso prova lapplicazione, inizia o vai . Anche per i messaggi di errore fondamentale essere s
Le linee guida di Metro devono servire come traccia, come inspirazione per le nostre applicazioni, non devono essere lette per come una serie di leggi che ci impediscono di dare sfogo alla nostra creativit. Ci sono sicuramente un insieme di regole oggettive per quanto riguarda, ad esempio, la superficie minima di touch o lo spazio minimo tra controlli, lidea di user experience, i concetti formali e stilistici sono comunque una scelta del progettista. Nel prossimo esempio vedremo due applicazioni meteo per Windows Phone 7, entrambe utilizzano completamente i concetti di Metro (tipografia, spazio fra gli elementi, semplicit, movimento, riduzione del superfluo ecc.) ma con scelte stilistiche diverse. Una domanda che viene spontanea a questo punto : se sono consigli, perch dovrei seguirli a prescindere? Perch unapplicazione vincente unapplicazione immediata, semplice, chiara e sopratutto che si integra perfettamente nellecosistema di Windows Phone 7.
Fig. 7: Utilizzo degli spazi vuoti
Fig. 8: Utilizzo dei caratteri tipografici
h ttp : //w w w . io pr o g r a m m o .it
32
Aprile72011 Wi nd ows Phone pr o g r am m in g
/ 55
Windows Phone 7: linterfaccia Windows Phone 7 programming MOBILE LINGUAGGIO METRO: LINNOVATIVO DI DESIGN
Un utente che usa il device si trover pi a suo agio con applicazioni basate sugli stessi concetti, ed eviter o user controvoglia interfacce dispersive o riciclate da altri ambienti; ad esempio una user interface creata per Windows Mobile 6.5 usata su Windows Phone 7 risulterebbe obsoleta e quindi difficilmente vendibile. Expression Blend ha una comoda funzionalit in grado di poter cambiare al volo i temi e il colore daccento direttamente dalla superficie di design, senza dover mandare in esecuzione lapplicazione.
GESTURE SUPPORTATE
Windows Phone 7 utilizza solo gesture touch per comunicare input verso il sistema, diventa quindi importante comprendere quali sono le gesture supportate da utilizzare nelle nostre applicazioni. Per aumentare il senso di familiarit del nostro software, che ovviamente si traduce in maggior vendibilit, importante inoltre comprendere come il dispositivo utilizza tali gesture e in quali contesti. Le gesture supportate sono le seguenti: NOTA
Fig. 9: Applicazioni meteo a confronto
EXPRESSION BLEND 4
Se Visual Studio resta lo strumento principe per lo sviluppatore Silverlight e Windows Presentation Foundation, le applicazioni moderne non possono prescindere dalla realizzazione di interfacce utenti usabili, ricche e interattive. Microsoft ha realizzato la suite Microsoft Expression Studio, che comprende, fra gli altri, Expression Blend, lo strumento destinato a designer e creativi per la realizzazione di interfacce basate su XAML.
COLORE DELLE APP

Windows Phone 7 consente lutilizzo di due temi: dark e light. Il primo usa come background delle applicazioni il colore nero e come colore del font il bianco. Il tema light sar ovviamente lopposto. Il tema di default dark, tale scelta non solo dettata da considerazioni stilistiche ma anche da un consumo minore della batteria, problema sentito dalla maggioranza degli utenti di smartphone. Durante la fase di sviluppo fondamentale ricordarsi tale funzionalit, creando quindi uninterfaccia utente utilizzabile con entrambi i temi. Per le applicazioni Silverlight il runtime mette a disposizione stili gi pronti in grado di cambiare il colore in base al tema scelto, in termini tecnici la piattaforma inietter un ResourceDictionary a runtime che conterr la definizione degli stili pi appropriata. sufficiente utilizzare come brush PhoneForegroundBrush. Oltre ai temi, lutente pu scegliere, da una lista predefinita, un colore in primo piano, o colore daccento; tale colore verr usato dal sistema e dalle nostre applicazioni per porre in evidenza contenuti specifici. Se usiamo Silverlight basta utilizzare come brush PhoneAccentBrush.
Fig. 11: Gesture supportate in Windows Phone 7
1) Tap. Es: unazione su un pulsante, checkbox, radiobutton o un item della listbox. 2) Double Tap. Es: per switchare rapidamente lo stato di zoom di unapplicazione. 3) Touch and Hold. Es: per visualizzare i menu contestuali. 4) Pan. Es: per muovere il contenuto tramite manipolazioni dirette (il contenuto rimane incollato al dito e lo segue). 5) Flick. Es: per eseguire lo scrolling di una listbox. 6) Pinch and Stretch. Es: per effettuare uno zoom continuo.
TOUCH DI UN OGGETTO
Un elemento toccabile dallutente deve avere una dimensione minima di 7mm, raccomandata di 9mm, lo spazio fra due elementi deve essere di almeno 2mm e la dimensione visuale di un controllo deve essere tra il 60 e il 100% della superficie toccabile dello stesso. Si consiglia di leggere il documento UI Design and Interaction Guide for Windows Phone 7 v2.0 per maggiori dettagli sullargomento.
I CONTROLLI A DISPOSIZIONE
Fig. 10: Expression Blend offre delle funzioni che permettono di cambiare al volo i temi e il colore daccento
La piattaforma Silverlight for Windows Phone 7 mette a disposizione una serie di controlli comuni, ad esempio
W indo w s Aprile P h o ne 2011 7 pr o g r a m m in g
56 /
http://www.io p r o g r am m o . it
33
Phone LINNOVATIVO 7: linterfaccia LINGUAGGIO MOBILE DI DESIGN METRO: Windows Phone 7 programming Windows
Button, Slider, CheckBox, TextBox, RadioButton ecc., gi aderenti alle specifiche Metro in termini di user experience, tipografia, colori e layout. Segnaliamo inoltre il toolkit messo a disposizione da Microsoft sul sito http://silverlight.codeplex.com/, che contiene un set di controlli gi pronti che estendono le funzionalit di base del runtime, in tale libreria troviamo oggetti interessanti quali ContextMenu, DatePicker, TimePicker, ListPicker, LongListSelector e un semplice pattern per intercettare le gesture supportate dal sistema. Windows Phone 7 introduce il concetto di Application Bar, ovvero una toolbar applicativa in grado di contenere pulsanti e un menu. I pulsanti sono le azioni principali dellinterfaccia, mentre i menu, nascosti a prima vista e visibili solo dopo unazione di espansione, contengono le operazioni secondarie dellinterfaccia, tutto questo si riallaccia al concetto espresso in precedenza sullimportanza di rendere immediatamente visibili solo le azioni principali. Metro consiglia di inserire nellApplication Bar fino a quattro icone. Limplementazione di un controllo tab in Metro acquista il nome di Pivot, da utilizzarsi per mostrare visualizzazioni diverse della stessa entit, ad esempio e-mail lette, non lette, con flag ecc., oppure oroscopo del giorno, di domani o di ieri. Il controllo ha gi abilitate le gesture di flick e tap per spostarsi da un tab allaltro. Visual Studio e Expression Blend hanno un template di progetto denominato Windows Phone Pivot Application, per realizzare facilmente applicazioni che utilizzano tale controllo. Windows Phone 7 e Metro introducono un nuovissimo paradigma di user experience, denominato Panorama application, al posto di progettare interfacce costrette allinterno dei confini dello schermo del device, le applicazioni panoramiche offrono un modo unico per visualizzare controlli, dati e servizi utilizzando un unico contenitore orizzontale che si estende oltre i confini dello schermo. Tali applicazioni dinamiche usano animazioni su layer diversi in modo da spostare fluidamente il contenuto rispetto al contenitore a velocit diverse per simulare un effetto parallasse. Il contesto di utilizzo di tale controllo molteplice, si basa per sul concetto di hub, ovvero di raccoglitore/aggregatore di diverse fonti, ad esempio: video, musica, foto oppure notizie di oggi, previsioni meteo e informazioni sul traffico. Il controllo ha gi abilitate le gesture di flick e pan per spostarsi tra le varie sezioni o muovere larea visibile. Visual Studio e Expression Blend hanno un template di progetto denominato Windows Phone Panorama Application, per realizzare facilmente applicazioni che utilizzano tale controllo. Di seguito mostriamo unapplicazione legata al mondo della vela in cui ogni sezione visualizza un contenuto applicativo differente: condizioni meteo, itinerari, punti di interessi e alert. Anche in questo caso, vi rimandiamo alla lettura del documento UI Design and Interaction Guide for Windows Phone 7 v2.0 per avere maggiori dettagli in materia di controlli, pivot e panorama, sopratutto per quanto riguarda le specifiche di dimensionamento dei vari oggetti. da Windows Phone 7, che racchiude tutti i principi di Metro spogliata da colori e forme superflue, prende spunto come detto allinizio dellarticolo dai codici della metropoli e si presenta allutente con un semplice ma comprensibile segno grafico riconducibile ai cartelli stradali, alle indicazioni di metropolitane, aereporti e stazioni. importante evidenziare che le icone dellApplication Bar cambiano di colore in base al tema utilizzato, noi dovremmo solo creare i file grafici per un tema (ad esempio foreground bianco e background nero), ci penser il sistema a invertire i colori a runtime in base alla scelta dellutente. Allinterno dellSDK troviamo una serie di icone gi pronte allutilizzo; Expression Blend, inoltre, ha un comodo browsing di tali immagini allinterno della dialog di personalizzazione dellApplication Bar.
Fig. 12: Iconografia utilizzata in Windows Phone 7
LAUTORE
CONCLUSIONI
Metro il nuovo linguaggio di design per applicazioni Windows Phone 7, oltre a contenere una serie di linee guida, suggerimenti e regole per la user experience offre diversi spunti riflessivi e creativi che possono essere trasportati anche in ambiente desktop e web su qualsiasi piattaforma. Metro si basa su concetti di semplicit, pulizia, chiarezza, evita lo spreco in ogni sua forma, mette lutente al primo posto. La tipografia acquista un ruolo fondamentale allinterno dellinterfaccia utente, non semplice testi ma elementi grafici con profondit e spessore; luso del colore non mai eccessivo, quindi il suo uso, relegato ad accenti applicativi, ne aumenta limportanza. Due nuovi controlli Pivot e Panorama consentono di creare contesti applicativi che vivono in sinergia con lecosistema del device dando vita a una nuova user experience decisamente moderna e innovativa. Luca Regnicoli e Katia Egiziano
ICONOGRAFIA
A differenza degli altri device mobili, liconografia utilizzata
h ttp: //w w w . io pr o g r a m m o .it
Luca Regnicoli uno dei componenti del gruppo DevLeap con il quale eroga formazione e consulenza di alto livello sulle tematiche tecniche inerenti la user experience: si occupa di WPF dal 2003 e di Silverlight dal 2006. E entrato nel programma beta di Windows Phone 7 a marzo 2010. Katia Egiziano collabora stabilmente con ThinkAhead, societ del gruppo DevLeap, per la realizzazione di user experience innovative. La sua esperienza pluriennale come architetto consente di guardare oltre i dettagli tecnici e ispirare lo sviluppo di applicazioni con influenze di altri movimenti artistici.
34
Aprile72011 Wi nd ows Phone pr o g r am m in g
/ 57
XNA nuovi PER device Windows Phone 7 Windows MOBILE XNA sui MOBILE I VIDEOGAME Phone 7 programming
XNA MOBILE PER I VIDEOGAME

G
razie anche al recente debutto del nuovo sistema operativo per dispositivi mobili Windows Phone 7, che supporta unicamente applicazioni Silverlight e XNA, il framework nato per facilitare la vita a coloro che volevano cimentarsi nellimpresa di sviluppare un videogioco sta vivendo un rinnovato interesse da parte della comunit informatica. Tradizionalmente, programmare un videogioco non mai stato un lavoro semplice. Prima che Microsoft rilasciasse le ormai celebri librerie DirectX, i programmatori erano costretti a sporcarsi le mani per dialogare direttamente con le diverse schede video, schede audio, periferiche di input, e cos via discorrendo (possibilit peraltro esclusa sotto Windows 95, che imponeva severe restrizioni agli sviluppatori per quanto riguardava laccesso alle risorse hardware). solo grazie alle librerie DirectX che i programmatori hanno potuto cominciare a scrivere videogiochi in ambiente Windows che potessero andare bene su qualunque PC, a prescindere dal tipo di hardware di volta in volta presente sulla singola macchina. Nel 2002, Microsoft decide di spingersi pi avanti, rilasciando la prima API DirectX compatibile con lallora emergente piattaforma .NET. Questa API, conosciuta con il nome di Managed DirectX (o MDX), permetteva di sfruttare le funzionalit DirectX direttamente in ambiente .NET, usandone i relativi linguaggi managed, come C# o VB.NET. Ampliata e perfezionata nella versione 2.0, questa libreria stata tuttavia abbandonata da Microsoft nellautunno 2006 a vantaggio di un nuovo e promettente framework, appositamente dedicato allo sviluppo di videogiochi e perfettamente integrato nellambiente .NET: XNA, appunto. Rispetto ai suoi predecessori, XNA consente un livello di astrazione assai pi elevato, consentendo agli sviluppatori di concentrarsi sul contenuto e la logica del gioco, piuttosto che sui dettagli implementativi di basso livello. Allo stesso tempo, la possibilit di creare propri shaders (oltre a quelli messi a disposizione dal framework) utilizzando lHigh Level Shader Language (HLSL) di casa Microsoft, consente di realizzare applicazioni 3D di grande qualit.
WINDOWS PHONE 7 SI PRESENTA CON UNA USER INTERFACE COMPLETAMENTE NUOVA E CON UN AMBIENTE DI SVILUPPO BASATO SU SILVERLIGHT E XNA. IN QUESTO ARTICOLO INTRODUCIAMO XNA E LE SUE GRANDI POTENZIALIT IN AMBITO MOBILE
IL PRIMO PROGETTO IN XNA

Per prendere un p di familiarit con questo framework, proviamo a creare il nostro primo progetto XNA (File New Project). Come si vede (Fig. 1), lIDE ci permette di scegliere tra una serie predefinita di template, distinti in base alla piattaforma su cui vogliamo sviluppare (Windows Phone 7, Windows o Xbox 360) e alla natura del progetto, a seconda che ci interessi realizzare il gioco vero e proprio nella forma del classico eseguibile (per una delle tre piattaforme disponibili), creare una libreria da referenziare nei nostri progetti, ovvero estendere e/o personalizzare la Content pipeline, cio quella parte del framework XNA che si preoccupa di importare e processare tutti i contenuti unmanaged (vedremo pi avanti di che cosa si tratta).
CD WEB
windowsphonegame1.zip
REQUISITI
Conoscenze richieste Conoscenza di .NET e Visual Studio Software necessario installare i Developer Tools, scaricabili gratuitamente a partire dallindirizzo http:// developer.windowsphone.com/windowsphone-7/ Impegno
Fig. 1: Nuovo progetto XNA
Per la nostra piccola dimostrazione, scegliamo Windows Phone Game (4.0) come progetto iniziale. Occorre tenere tuttavia presente che, per quanto riguarda la scelta della piattaforma di gioco, uno
Gennaio 2011 / 59 35
nuovi devicePER Windows Phone 7 MOBILE XNA MOBILE I VIDEOGAME Windows Phone 7 programming XNA sui
dei vantaggi pi significativi nello sviluppo in XNA dato proprio dallestrema portabilit di unapplicazione da una piattaforma ad unaltra. In pratica, sufficiente cliccare con il tasto destro sul progetto che intendiamo convertire e scegliere la piattaforma su cui vogliamo migrare (Fig. 2), lasciando al framework il compito di apportare le necessarie modifiche. lizzato a raccogliere, importare e processare (tramite una Content pipeline) tutte le risorse esterne (definite asset) che utilizzeremo nel nostro gioco, quali ad esempio immagini e texture 2D, modelli 3D, suoni e audio etc. Un progetto di tipo Content associato al progetto principale tramite la cartella Content References (Fig. 4). possibile condividere lo stesso progetto Content fra giochi diversi (consentendo il riutilizzo di sprite, modelli e suoni tra diverse applicazioni), cos come possibile avere pi progetti Content per uno stesso gioco (nel caso, ad esempio, che due giochi condividano alcune risorse, ma necessitino anche di risorse ulteriori diverse per ciascun gioco). In XNA, logica e contenuti si presentano dunque nettamente separati, non solo da un punto di vista concettuale, ma anche dal punto di vista architetturale, dal momento che danno vita a progetti distinti e (in una certa misura) autonomi. Vediamone brevemente le caratteristiche salienti.
NOTA
Fig. 2: Portabilit tra piattaforme Windows e XBOX 360
STRUMENTI NECESSARI
Installare il pacchetto Windows Phone Developer Tools (http://www.microsoft.com/downloads/ en/ details.aspx?FamilyID= 04704acf-a63a-4f97952c- 8b51b34b00ce& displaylang=en), il quale include, oltre a Visual Studio Express for Windows Phone, lemulatore del nostro telefonino, Silverlight 4 Tools ed Expression Blend 4 for Windows Phone, anche lapposita IDE denominata XNA Game Studio, attualmente giunta alla versione 4.0 (per i requisiti minimi si rinvia alla relativa documentazi one MSDN).
Una volta creato il nostro progetto, se tutto andato a buon fine nella solution troveremo non uno, ma ben due progetti (Fig. 3). Il primo (nel nostro caso denominato WindowsPhoneGame1), costituisce il gioco vero e proprio e, come tale, destinato a ospitare il codice e la logica necessari alla nostra applicazione per funzionare; il secondo (contraddistinto dal suffisso Content aggiunto automaticamente al nome del nostro progetto principale) invece fina-
Fig. 4: La cartella Content References
IL PROGETTO PRINCIPALE
Una volta scelto su quale piattaforma vogliamo far girare la nostra applicazione, e assegnato un nome al progetto, ci troviamo di fronte a una serie di file e cartelle creati di default da Visual Studio. La cartella Properties contiene i file che descrivono il tipo di applicazione e che, di conseguenza, variano a seconda della piattaforma prescelta. Nel nostro caso, avendo scelto di realizzare un gioco per Windows Phone 7, i file sono ben tre: AssemblyInfo.cs (lunico presente in un progetto per Windows e Xbox 360), che contiene le informazioni sullassembly, AppManifest.xml che descrive le caratteristiche di deploy dellapplicazione (in modo analogo a quanto avviene per un progetto Silverlight per WP7) e WMAppManifest.xml che contiene informazioni specifiche su titolo, immagine dellapplicazione, immagine per il tile, la versione applicativa e il tipo di runtime (XNA nel nostro caso). Nel progetto principale troviamo anche la cartella Content references descritta sopra, oltre a due immagini, Background.png e GameThumbnail.png, che rappresentano le icone della nostra applicazione sulla piattaforma di nostra scelta. Infine, come in qualunque applicazione .NET, Program.cs costituisce lentry point dellapplicazio-
Fig. 3: La nuova solution
60 / Gennaio 2011 36
ne, istanziando la classe Game1 (creata di default dal framework e definita nel file Game1.cs) e invocando il relativo metodo Run. Chiariti gli aspetti per cos dire di contorno del nostro progetto XNA, vediamo pi da vicino quella che costituisce la vera e propria architrave destinata a sorreggere lintera struttura di gioco, ossia la classe Game1, a sua volta derivata dalla classe base Microsoft.Xna.Framework.Game. Ed proprio qui che emerge la differenza fondamentale rispetto ad altri ambiti di programmazione in ambiente .NET. Mentre infatti questi ultimi sono generalmente basati su controlli in grado di scatenare eventi, in XNA il concetto chiave rappresentato dal game loop, ossia dalla continua iterazione fra laggiornamento della logica di gioco (come, ad esempio, la posizione e lo stato del giocatore e dei nemici, la posizione e lorientamento della telecamera, la ricerca di eventuali input da parte dellutente, etc.) e le operazioni di disegno a schermo. Questa struttura ciclica, a ben vedere, connaturata con lessenza stessa di gioco, che deve potersi svolgere anche a prescindere da (o addirittura in assenza di) input da parte dellutente. In XNA, il compito di iterare continuamente tra i diversi momenti di gioco (in particolare quello della logica e quello del disegno) interamente demandato al framework, che vi provvede invocando i diversi metodi esposti dalla classe base Game secondo un preciso ordine, i cui passaggi principali possono essere cos riassunti (Fig. 5): Questi sono gli stessi metodi che trovate anche nella classe Game1, che provvede alla loro concreta implementazione (tramite ovveride). I metodi Initialize, LoadContent e UnloadContent sono invocati una sola volta, allinizio o subito prima delluscita dal gioco. Il loop vero e proprio riguarda dunque due soli metodi: Update e Draw, chiamati ininterrottamente dal framework a intervalli di tempo pi o meno regolari. Per lesattezza, XNA ci lascia scegliere se preferiamo chiamare i due metodi a passo fisso o a passo variabile (con risultati che possono influire significativamente sullesperienza di gioco) semplicemente impostando la propriet IsFixedTimeStep (di default true). Nel primo caso, i due metodi verranno chiamati a intervalli di tempo il pi possibile regolari (che possible specificare tramite la propriet TargetElapsedTime). In questo caso, se il carico di lavoro dovessere rendere impossibile rispettare lintervallo prefissato, XNA provveder per noi a regolare literazione tra i due metodi (saltando, ad esempio, alcune operazioni di disegno a schermo). Nel secondo caso, i due metodi verranno chiamati alternativamente nel mimimo intervallo di tempo possibile rispetto alla configurazione hardware della nostra macchina (e con conseguente fluttuazione del framerate in base al carico di lavoro di CPU e scheda grafica). Vediamo adesso la funzione dei suindicati metodi nel relativo ordine. Per prima cosa viene chiamato il costruttore di Game1, che si occupa di inizializzare loggetto GraphicsDeviceManager, cui compete la gestione della grafica del nostro device, di indicare la root in cui andare a cercare le risorse multimediali aggiunte al nostro progetto Content e, nel caso di unapplicazione per Windows Phone 7, di fissare il framerate a 30 frame per secondo (fps) tramite la propriet TargetElapsedTime:
publicGame1() { graphics=newGraphicsDeviceManager(this); Content.RootDirectory=Content; //Framerateis30fpsbydefaultfor WindowsPhone. TargetElapsedTime=TimeSpan. FromTicks(333333); }
NOTA
ACRONIMO XNA
Il nome XNA rappresenta un caso particolare di acronimo ricorsivo (molto in voga nel campo informatico), vale a dire un acronimo che, al suo interno, continene se stesso. XNA sta infatti per XNAs Not Acronymed. A parte i giochi di parole (un acronimo che sta per qualcosa che is not acronymed), la sua particolarit nasce dal fatto che nel logo di XNA la parte arancione rappresenta la parola XNA in codice morse (linea punto punto linea).
Logo XNA
Subito dopo la volta del metodo Initialize, nel quale trova posto linizalizzazione di una serie di risorse utili ai fini del nostro gioco, come componenti e servizi:
protectedoverridevoidInitialize()
Fig. 5: Schema di funzionamento del Game Loop
Gennaio 2011 / 61 37
nuovi devicePER Windows Phone 7 MOBILE XNA MOBILE I VIDEOGAME Windows Phone 7 programming XNA sui
//TODO:Addyourinitializationlogichere base.Initialize(); }
mo (GraphicsDevice.Clear) prima di qualunque altra operazione di scrittura a video e a impostare il colore del background (di default CornflowerBlue):
protectedoverridevoidDraw(GameTimegameTime) { GraphicsDevice.Clear(Color.CornflowerBlue); base.Draw(gameTime); }
Il terzo metodo ad essere invocato in ordine temporale LoadContent, tramite il quale viene creato un oggetto di tipo SpriteBatch (al quale sono delegate le operazioni di disegno vero e proprio) e vengono caricate in memoria tutte le risorse di cui il nostro gioco necessita per poter funzionare (sprite, modelli 3D, shader, suoni, font, ecc.). Loperazione inversa invece affidata al metodo UnloadContent, che provvede a scaricare dalla memoria le risorse prima di uscire dal gioco.
protectedoverridevoidLoadContent() { base.Initialize(); }
LA CONTENT PIPELINE
Si detto prima come ogni asset (immagini, modelli 3D, suoni, ecc.), per essere utilizzato nel nostro gioco, deve essere prima importato e processato tramite una content pipeline. Questultima provvede ad associare ad ogni file aggiunto nel progetto di tipo Content due particolari classi: un importer e un processor. Limporter ha il compito di tradurre questi file in un formato standard, che potr essere successivamente interpretato dal processor, in modo da arrivare ad una forma che sia facilmente consumabile dal runtime. La ragione per cui XNA ricorre ad una content pipeline, risiede nellincremento delle prestazioni. Senza di questa, le risorse dovrebbero essere caricate nel loro formato originario e il gioco, prima di poterle utilizzare, dovrebbe convertirle a runtime in una forma che possa essere utilizzata allinterno dellapplicazione, aumentando molto i tempi di attesa. La content pipeline rimedia appunto a questo problema, anticipando la conversione degli asset al momento della compilazione dei sorgenti. Per importare un asset nel nostro gioco sufficiente cliccare con il tasto destro sul progetto di tipo Content, selezionare Add Existing Item e scegliere il file da aggiungere (oppure, pi semplicemente, possiamo trascinare il file direttamente nel nostro progetto). Sar lo stesso framework a scegliere per noi il tipo di importer e di processor adeguati, come mostrato in Fig. 6:
SUL WEB
FORUM SPECIFICI SU WINDOWS PHONE 7

Su www.thinkmobile.it sono disponibili forum specifici per trattare lo sviluppo su Windows Phone 7; due blog che forniscono informazioni continue sulle novit per gli sviluppatori e nella sezione media si trovano numerosi esempi sullutilizzo dei sensori e delle varie funzionalit del device.
Il terzo metodo ad essere invocato in ordine temporale LoadContent, tramite il quale viene creato un oggetto di tipo SpriteBatch (al quale sono delegate le operazioni di disegno vero e proprio) e vengono caricate in memoria tutte le risorse di cui il nostro gioco necessita per poter funzionare (sprite, modelli 3D, shader, suoni, font, ecc.). Loperazione inversa invece affidata al metodo UnloadContent, che provvede a scaricare dalla memoria le risorse prima di uscire dal gioco.
protectedoverridevoidLoadContent(){ spriteBatch=newSpriteBatch(GraphicsDevice); }
Nel metodo Update trova spazio tutto ci che concerne la logica del gioco, dalla posizione degli sprite sullo schermo, al rilevamento delle collisioni fra oggetti, dallintelligenza artificiale dei nemici sino alla gestione degli eventuali input da parte dellutente. Nella sua forma di default, il metodo Update si limita a gestire linput strettamente necessario per uscire dal gioco (la pressione del tasto Back, nel caso di un gioco per Windows Phone 7):
protectedoverridevoidUpdate(GameTimegameTime){ //Allowsthegametoexit if(GamePad.GetState(PlayerIndex.One).Buttons. Back==ButtonState.Pressed) this.Exit(); //TODO:Addyourupdatelogichere base.Update(gameTime); }
Il metodo Draw, invece, si preoccupa di tutte le operazioni di disegno a schermo di sprite bidimensioanli, modelli 3D e persino scritte. Di default, ad ogni chiamata il metodo provvede a cancellare lo scher-
Fig. 6: Content Pipeline importers
62 / Gennaio 2011 38
LA PRIMA APP XNA

Ora che abbiamo capito i fondamenti di funzionamento di XNA, proviamo a sviluppare una semplicissima applicazione per il nostro telefonino con Windows Phone 7. Per prima cosa, abbiamo bisogno di aggiungere al nostro progetto Content una texture per il nostro sprite 2D (possibilmente in formato png per sfruttarne la trasparenza, ove presente) e di un effetto sonoro (in formato .mp3) per rendere la nostra demo pi interessante (Fig. 7). importante notare come, una volta importati allin-
dedicata a studenti e aziende. Il suono invece un file wav che produce un semplice beep. A questo punto non ci rimane altro che animare il nostro sprite. In questa semplice demo, ci limiteremo a farlo muovere lungo lo schermo a velocit costante. Nel momento in cui lo sprite raggiunger un bordo, inoltre, lo faremo rimbalzare (invertendo la velocit lungo lasse corrispondente) e riprodurremo un beep per indicare lavvenuto contatto con il bordo (divertente eh?). Per fare questo sono sufficienti poche righe di codice. Innanzitutto, preoccupiamoci di definire la logica nel metodo Update come segue:
position+=speed; if(position.X<=0||position.X>=Graphics Device.Viewport.Width-sprite.Width){ speed.X*=-1;beep.Play();} if(position.Y<=0||position.Y>=Graphics Device.Viewport.Height-sprite.Height){ speed.Y*=-1;beep.Play();}
NOTA Da notare luso della propriet GraphicsDevice. Viewport.Width e GraphicsDevice.Viewport.Height per recuperare le dimensioni dello schermo. Ci fatto, possiamo procedere a disegnare il nostro sprite a schermo. Per far questo ci avvarremo dello speciale metodo Draw esposto dalla classe SpriteBatch, ossia la classe del framework che si occupa proprio di disegnare sprite a due dimensioni (per il testo, invece, occorre usare il metodo DrawString). Come parametri passeremo la texture del nostro sprite, la sua posizione sullo schermo e il colore. Ogni chiamata al metodo spriteBatch.Draw deve essere necessariamente preceduta da una chiamata al metodo spriteBatch.Begin, che permette di impostare alcune importanti propriet relative, ad esempio, alla gestione delle trasparenze e allordine con il quale i nostri sprite devono essere disegnati (nel nostro esempio, ci limiteremo a utilizzare le impostazioni di default, senza effettuare alcun overload), e deve concludersi con una chiamata al metodo spriteBatch.End, che provvede a resettare il device al suo stato originario:
protectedoverridevoidDraw(GameTimegameTime){ GraphicsDevice.Clear(Color.CornflowerBlue); spriteBatch.Begin(); spriteBatch.Draw(sprite,position,Color.White); spriteBatch.End(); base.Draw(gameTime); }
EMULATORE WINDOWS PHONE 7

Questa prima versione dellemulatore non fornisce tutte le applicazioni che troveremo sul device fisico e sulle prossime versione degli emulatori stessi. Non quindi lo strumento ad oggi pi adatto a capire come verranno disposte e gestite le applicazioni. Per avere una idea precisa fate riferimento ai video presenti sul sito Channel 9: trovate i puntatori alle informazioni a partire dallindirizzo http://developer.windowsphone.com/ windows-phone-7/.
Fig. 7: Importiamo gli asset
terno del progetto, gli asset assumano come nome di default quello del file originale, ma privo della relativa estensione (visto che sono stati importati e processati dalla Content Pipeline). Da questo momento in poi, sar solo il nome dellasset a identificare le risorse utilizzate allinterno del progetto. Adesso che i nostri asset sono stati importati, possiamo usarli nella nostra applicazione. A livello di classe, aggiungiamo dunque una variabile per la nostra texture a due dimensioni e una per il nostro effetto sonoro; aggiungiamo anche una variabile di tipo Vector2(float x, float y) per memorizzate le coordinate del nostro sprite sullo schermo (inizialmente posizionato allorigine degli assi), nonch una seconda variabile dello stesso tipo per settare la velocit con cui muovere lo sprite:
Texture2Dsprite; SoundEffectbeep; Vector2position=Vector2.Zero; Vector2speed=newVector2(1.0f,3.0f);
Dopodich, nel metodo LoadContent, carichiamo in memoria i relativi asset:

sprite=Content.Load<Texture2D>(logo); beep=Content.Load<SoundEffect>(beep);
Se adesso premete F5, vedremo il vostro sprite prendere vita (ricordatevi di inclinare il vostro emulatore, dal momento che, di default, il nostro device assume un orientamento di tipo landscape): Roberto Brunetti, Vanni Boncinelli
Nellesempio allegato, limmagine fa riferimento alla conferenza gratuita che organizziamo come DevLeap
Gennaio 2011 / 63 39
XNA e Windows Phone 7 PER WINDOWS PHONE 7 MOBILE UN VIDEOGIOCO Windows Phone 7 programming
UN VIDEOGIOCO PER WINDOWS PHONE 7

ultimo sistema operativo dedicato al mondo mobile di casa Microsoft ha apportato novit significative rispetto ai suoi predecessori, quelli della serie Windows Mobile. Linterfaccia stata totalmente ridisegnata, cos come nuovo il modo di utilizzare il dispositivo, di conseguenza anche gli strumenti per lo sviluppo di software sono totalmente nuovi. Per sviluppare su Windows Phone 7 necessario installare innanzitutto il pacchetto denominato Windows Phone Developer Tools (vedi box) e poi utilizzare lIDE di casa Microsoft, Visual Studio 2010, anche nella versione Express. I tool suddetti aggiungono a Visual Studio una serie di template, dedicati alla programmazione Silverlight oppure a quella XNA, oltre a permettere di simulare perfettamente lesecuzione di applicazioni o videogame mediante un nuovo emulatore. Questo articolo ha lobiettivo di introdurre il lettore allo sviluppo di videogiochi per i dispositivi basati su Windows Phone 7 mediante il framework XNA, mostrando innanzitutto quali sono le caratteristiche e le possibilit messe a nostra disposizione, fino ad arrivare a creare un vero e proprio videogame, semplice ma completo e pronto ad essere eventualmente pubblicato sul portale Microsoft.
LO SVILUPPO DI UN VIDEOGIOCO PER GLI SMARTPHONE DOTATI DI WINDOWS PHONE 7 ORA SEMPLICE ED IMMEDIATO GRAZIE AL FRAMEWORK XNA. IN QUESTA PRIMA PARTE IMPAREREMO A CONOSCERNE E SFRUTTARNE LE POTENZIALIT DI BASE
CD
videogame_xna_parte1.zip
WEB
nel seguito di questo articolo (anche se lo stesso Silverlight consentirebbe lo sviluppo di un videogame con meno requisiti grafici). XNA tenta di semplificare la maggior parte dei compiti necessari nello sviluppo di un videogioco, fornendo le classi per gestire il ciclo di vita del gioco, laggiornamento del suo stato e la visualizzazione ed interazione con gli oggetti grafici sullo schermo. Naturalmente, tutte le caratteristiche del dispositivo sono disponibili e utilizzabili allinterno di un videogame: pensate ad esempio cosa potreste fare sfruttando il display multitouch e laccelerometro.
CREIAMO IL PROGETTO
Dopo aver installato i Windows Phone Developer Tools, lambiente di sviluppo Visual Studio 2010 sar arricchito da nuove caratteristiche e funzionalit che ci permetteranno facilmente di entrare nel mondo dello sviluppo Windows Phone in generale. Creare un progetto per un videogame a questo punto semplicissimo. Basta utilizzare il menu File -> New Project , quindi dalla sezione XNA Game Studio 4.0 , scegliere il template Windows Phone Game . Date un nome al vostro videogame, (abbiamo
COS XNA
Conoscenze richieste Conoscenza di base del .NET Framework e di C# Software Visual Studio 2010, Windows Phone Developer Tools Impegno
La piattaforma di sviluppo WindowsPhone fornisce due differenti framework per svilupapre applicazioni per i nuovi dispositivi dotati del nuovo sistema operativo: Il Silverlight Framework per applicazioni eventdriven e basate su XAML, che consente di creare qualunque tipo di applicazioni e XNAFramework per lo sviluppo di videogiochi loop-based, con grafica, animazioni, suoni, che permettano di immergere il giocatore in una nuova esperienza di intrattenimento e divertimento. Il secondo logicamente la scelta che faremo
Fig. 1: I template per creare applicazioni Windows Phone 7
66 / Marzo 2011 40
http://www.iopr . it Wi nd ows Phone 7 pro og gr ram amm mo in g
XNA ePHONE Windows MOBILE UN VIDEOGIOCO PER WINDOWS 7 Phone 7 Windows Phone 7 programming
scelto un originale ShootemUp per lesempio), e quindi confermate con un clic sul pulsante OK. Visual Studio 2010 si occuper di creare per noi una soluzione contenente diversi file e ci mostrer subito una finestra con il codice della classe Game1 . Potete subito provare a eseguire il gioco, per verificare che tutto funzioni. Avviando il gioco in modalit Debug (premete F5 ) infatti verr avviato lemulatore di Windows Phone e dopo qualche secondo sar mostrata sullo schermo virtuale del dispositivo una schermata interamente blu. Al momento inutile, ma che confermer la corretta esecuzione del tutto. progetto che derivi da Game , quindi essa rappresenta il punto di ingresso dellapplicazione stessa, in questo caso del videogioco. Per porre delle solide fondamenta alla conoscenza del Framework e al suo funzionamento, analizzeremo ora la struttura della classe Game1 , cos come stata creata per noi dal template. La classe inizia con una sezione dichiarativa contenente due campi:
GraphicsDeviceManager graphics; SpriteBatch spriteBatch;
Loggetto graphics fornisce laccesso alle funzionalit video, mentre loggetto di classe SpriteBatch permetter di disegnare sullo schermo immagini 2D (dette sprite ) in maniera molto rapida ed efficiente. Il costruttore della classe si occupa di istanziare loggetto graphics ed imposta la directory di default per loggetto Content , che sar utilizzato per caricare immagini, suoni e altri contenuti necessari per lesecuzione del gioco. Infine imposta la velocit di aggiornamento del gioco, cio lintervallo di tempo utilizzato per invocare il metodo Update , che di default di 30 frame/secondo per Windows Phone:
public Game1() { graphics = new GraphicsDeviceManager(this); Content.RootDirectory = Content; // Frame rate is 30 fps by default for Windows Phone. TargetElapsedTime = TimeSpan. FromTicks(333333); }
NOTA
WINDOWS PHONE DEVELOPER TOOLS

Per preparare la propria piattaforma di sviluppo in maniera da poter immediatamente iniziare a sviluppare per i dispositivi dotati di Windows Phone 7, occorre scaricare e installare i Windows Phone Developer Tools. Basta visitare il sito dedicato http://create.msdn.com/en-us/ home/getting_started e quindi cliccare il link Install Now nella sezione download the free tools. Linstaller intelligente e installer solo i componenti mancanti. Per esempio, se non si possiede una versione di Visual Studio 2010, verr installata la versione Express, cos come se non si ha a disposizione Expression Blend, verr installato Expression Blend for Windows Phone. Gli altri componenti necessari e che verranno eventualmente installati sono il .NET Framework 4.0, Silverlight, XNA Game Studio 4.0 ed il Windows Phone Emulator.
Fig. 2 Lemulatore di Windows Phone 7 in azione
Il file game1.cs , la classe in esso contenuta Game1 , al momento il cuore del nostro progetto. Anzi, al momento contiene tutto il codice necessario allesecuzione del gioco. La classe Game1 deriva infatti dalla classe Microsoft.Xna. Framework.Game , che fornisce i metodi base per linizializzazione delle funzioni grafiche del dispositivo, per la gestione della logica del gioco e per il codice che si occuper del rendering grafico. Il framework XNA, se si esegue lapplicazione su Windows Phone, va alla ricerca di una classe del
Dopo lesecuzione del costruttore verr invocato il metodo Initialize , allinterno del quale possibile inizializzare ogni oggetto necessario allesecuzione, per esempio verificando la presenza di servizi esterni o caricando risorse grafiche e non. Il metodo Initialize invocher implicitamente anche il metodo LoadContent , che si occupa di recuperare e caricare tutti gli elementi multimediali del gioco. Allinterno del metodo LoadContent viene inizializzato loggetto SpriteBatch che sar utilizzato per disegnare gli oggetto del gioco sullo schermo nel metodo Draw che vedremo a breve. Una volta che il metodo LoadContent termina il suo compito, il videogame entra in un ciclo infinito, nel quale verr tentato di invocare un metodo di aggiornamento a intervalli regolari, stabiliti dal valore di TargetElapsedTime impostato nel
http: / /w ws wP w . io pr o r ao m o .it W indo h o ne 7gpr gm ra m m in g
Marzo 2011 / 67 41
costruttore. Il metodo di aggiornamento il metodo Update , che serve per esempio per verificare e gestire lo stato, leggere leventuale input dellutente, calcolare punteggi, riprodurre effetti sonori, rilevare collisioni fra gli oggetti, o altre cose del genere:
protected override void Update(GameTime game Time) { // Allows the game to exit if (GamePad.GetState(PlayerIndex. One).Buttons.Back == ButtonState.Pressed) this.Exit(); // TODO: Add your update logic here base.Update(gameTime); }
SUL WEB
LINEE GUIDA E RISORSE

Allinterno del sito dedicato allo sviluppo Windows Phone, http:// create.msdn.com, possibile trovare diversa documentazione da cui partire per iniziare a sviluppare per la nuova piattaforma mobile. In particolare vi consigliamo di dare unocchiata al Windows Phone 7 Developer Training kit, i video della sezione Windows Phone 7 Jump Start, e di non trascurare le linee guida dettate da Microsoft per la progettazione dellinterfaccia utente, raccolte nel documento UI Design and Interaction Guide for Windows Phone 7 v2.0.
Il codice creato da Visual Studio verifica se il giocatore ha premuto il tasto Back del dispositivo, ed in questo caso interrompe il gioco. Mediante il parametro gameTime possibile determinare lintervallo di tempo trascorso dal precedente Update o dallinizio del gioco, e quindi intraprendere azioni come uscire dal gioco se il tempo a disposizione del giocatore fosse esaurito. Il metodo Draw infine si occupa naturalmente di disegnare sullo schermo del dispositivo tutti gli oggetti grafici. Nel nostro caso come abbiamo gi visto, disegna solo uno sfondo blu, anzi esattamente CornflowerBlue :
protected override void Draw(GameTime game Time) { GraphicsDevice.Clear(Color.CornflowerBlue); // TODO: Add your drawing code here base.Draw(gameTime); }
Fig. 3 La propriet Content Root directory del progetto Content
tutti i file di contenuti che verranno utilizzati nel gioco: immagini, suoni e cos via. Il progetto Content referenziato dallaltro progetto, allinterno della sezione Content References , ed abbiamo gi visto come allinterno del costruttore della classe Game1 venga impostata la propriet RootDirectory delloggetto Content :
Generalmente, il metodo Draw viene invocato subito dopo il metodo Update , a meno che per qualunque motivo sia necessario velocizzare il tutto saltando il metodo Draw , invocando pi volte Update .
TUTTE LE RISORSE DEL NOSTRO GIOCO

Anche i pi distratti si saranno accorti che la soluzione Visual Studio 2010 creata dal template, comprende un secondo progetto, denominato nel nostro caso ShootemUpContent . Questo progetto inizialmente vuoto ma destinato a contenere
Fig. 4 Limmagine utilizzata come sprite del giocatore
68 / Marzo 2011 42
Content.RootDirectory = Content;
Tale valore corrisponde a quello impostato nella finestra delle propriet, selezionando il nodo del progetto Content nel Solution Explorer di Visual Studio 2010. In tal modo possibile creare delle sottocartelle nel progetto Content e caricarne i contenuti a partire dalla directory Root . Proviamo subito a importare unimmagine e utilizzarla nel nostro gioco, disegnandola sullo sfondo blu. Supponiamo di voler creare un classico sparatutto a scorrimento verticale, cio il classico videogame con una navicella o un aereo che spara e distrugge tutto quello che si muove, mentre il paesaggio scorre verso il basso. Intanto necessario procurarsi o creare una immagine che rappresenti il nostro velivolo. Se non avete voglia di farlo o non riuscite a trovarne una, potete sempre aprire il codice in allegato e cercare il file player.png . Per aggiungere limmagine al progetto Content , fate clic con il tasto destro sul progetto e poi scegliete dal menu contestuale il comando Add Existing Item, cercate limmagine sullhard disk e confermate limportazione nel progetto.
DISEGNARE IMMAGINI E INSERIRE TESTO NELLAREA DI GIOCO

Una volta importato il file immagine, esso pu essere referenziato mediante la stringa impostata nella propriet Asset Name , che di default sar uguale al nome del file senza estensione, per esempio player . Nella nostra classe Game1 aggiungiamo ora un campo di tipo Texture2D :
Texture2D player;
Il metodo Draw di SpriteBatch ha diversi overload, in questo caso si usato quello che permette di indicare loggetto da disegnare, cio loggetto Texture2D contenente limmagine, le coordinate della posizione di disegno, e il colore da utilizzare per il disegno delloggetto (se si vuol mantenere la colorazione originale basta utilizzare il bianco, cio Color.White ). La posizione delloggetto da disegnare viene indicata mediante un vettore a due dimensioni, su un sistema di coordinate cartesiane, che ha come origine prefissata quella in alto a sinistra, con le ascisse che crescono verso destra e le ordinate crescenti verso il basso. Allinterno del metodo Draw di Game1 possibile disegnare diversi elementi grafici, quindi le chiamate al metodo SpriteBatch.Draw vengono raggruppate allinterno di un blocco, che inizia con la chiamata al metodo Begin e termina con il metodo End . Naturalmente, la posizione delloggetto sar dinamica e controllata esclusivamente dal giocatore interessato, ma per il momento abbiamo visto come disegnare loggetto in una posizione predefinita. Dando per unocchiata a quanto proposto nellimmagine di Fig. 5, noterete come limmagine venga disegnata in una posizione diversa, a seconda dellorientamento dello schermo, ed in particolare, come comportamento predefinito, XNA presenta ogni gioco in modalit Landscape , cio con orientamento di tipo orizzontale. Se invece si preferisce utilizzare lorientamento verticale, che sarebbe forse pi adatto per un gioco a scrolling verticale, possibile fissare le nuove dimensioni allinterno del metodo Initialize o del costruttore, procedendo indicando una altezza di 800 pixel ed una larghezza di 480. Questo avviene utilizzando le seguenti due propriet PreferredBackBufferWidth e PreferredBackBufferHeight:
Ora possibile utilizzare il metodo Load allinterno di LoadContent , per caricare la risorsa:
player = this.Content. Load<Texture2D>(Graphics/player);
Come noterete dal codice proposto, per caricare limmagine dal progetto Content , bisogna necessariamente utilizzare lAsset Name , indicando anche il percorso rispetto alla directory radice. Nel metodo Draw della classe Game1 ora possibile disegnare il nostro aereo sullo schermo:
spriteBatch.Begin(); spriteBatch.Draw(player, new Vector2(0, 100), Color.White); spriteBatch.End();
Fig. 5 Limmagine disegnata sullo schermo
Marzo 2011 / 69 43
graphics.PreferredBackBufferWidth = 480; graphics.PreferredBackBufferHeight = 800;
Inoltre, possibile eseguire il gioco a schermo intero (senza alcuna barra del titolo, cos come avverrebbe in una normale applicazione) impostando a true la propriet IsFullScreen .
graphics.IsFullScreen = true;
redistribuibili liberamente con i vostri giochi. A questo punto per utilizzare il carattere cos definito basta creare un oggetto SpriteFont mediante il gi visto metodo LoadContent :
SpriteFont font = Content. Load<SpriteFont>(@Fonts\CourierNew);
Per scrivere una stringa sullo schermo, si utilizzer invece il metodo DrawString di SpriteBatch :
string gameTime= String.Format(time {0:00}:{1:00}, gameTime.TotalGameTime. TotalMinutes, gameTime.TotalGameTime. TotalSeconds); spriteBatch.DrawString(font, gameTime, new Vector2(10,10), Color.Red);
Analogamente a quanto visto per le immagini, possibile anche scrivere del testo, cosa utile per esempio per scrivere in un videogioco il tempo rimanente oppure i punti guadagnati o le vite a disposizione. A differenza di una normale applicazione per Windows, XNA non pu utilizzare i font installati. Bisogna prima creare un oggetto di classe SpriteFont che una rappresentazione grafica del carattere. Per creare ed aggiungere un oggetto SpriteFont , fate clic con il tasto destro sul progetto Content e scegliete la voce Add New Item. Quindi assegnate un nome che sia riconducibile al font originale e premete OK . Verr creato un file con estensione .spritefont , che in realt un file XML. Basta ora modificare le caratteristiche del carattere da importare, quindi essenzialmente il nome e la dimensione. Per esempio, per creare un oggetto SpriteFont per il font Courier New, di dimensione 20, baster modificare come segue le corrispondenti sezioni del file:
<FontName>Courier New</FontName> <Size> 20 </Size>
In questo caso verranno mostrati i minuti e i secondi trascorsi dallinizio.
GESTIONE DELLINPUT DA PARTE DELLUTENTE

Linterazione dellutente una componente fondamentale di qualsiasi videogame. I dispositivi dotati di Windows Phone 7 sono tutti dotati di pannello touch screen ed quindi questo il principale meccanismo di input usato dallutente. Inoltre, alcuni dispositivi potrebbero essere dotati anche di tastiera, che permetterebbero per esempio di usare dei tasti come le frecce direzionali per interagire con il gioco. Cominciamo a vedere come gestire la posizione dellaereo. Innanzitutto conveniente aggiungere un campo di tipo Vector2D che manterr la posizione corrente:
private Vector2 playerPosition;
Ricordate che molti font sono sottoposti a licenza commerciale, quindi non sono liberamente utilizzabili in un videogame XNA. Microsoft ha messo a disposizione diversi font
Allinterno del metodo Update potremo impostare i valore delle coordinate X e Y , in base allinput, in maniera che la seguente chiamata a Draw disegni laereo in una nuova posizione, quella voluta dal giocatore. Cominciamo con lusare la classe Keyboard che permette di leggere i tasti premuti, mediante il suo unico metodo GetState . Per verificare che il tasto premuto sia uno delle freccie, e aggiornare di conseguenza le coordinate, scriveremo qualcosa del tipo:
if (Keyboard.GetState().IsKeyDown(Keys.Up)) { playerPosition.Y -= 5; }
Fig. 6 Creazione di un elemento SpriteFont
if (Keyboard.GetState().IsKeyDown(Keys.Down))
70 / Marzo 2011 44
{ playerPosition.Y += 5; } if (Keyboard.GetState().IsKeyDown(Keys.Left)) { playerPosition.X -= 5; } if (Keyboard.GetState().IsKeyDown(Keys.Right)) { playerPosition.X += 5; } if (tc[0].Position.Y - playerPosition.Y < -5) { playerPosition.Y -= 5; } else if (tc[0].Position.Y - playerPosition.Y > 5) { playerPosition.Y += 5; } } } } else if (tc[0].Position.X - playerPosition.X > 5) { playerPosition.X += 5; { if (tc[0].Position.X - playerPosition.X < -5) { playerPosition.X -= 5;
Bisogna per controllare che la posizione sia allinterno del rettangolo di gioco, cio dello schermo, ed eventualmente correggerla, quindi subito dopo scriveremo:
if (playerPosition.X < 0) playerPosition.X = 0; if (playerPosition.X > graphics. PreferredBackBufferWidth- player.Width) playerPosition.X = graphics. PreferredBackBufferWidth - player.Width; if (playerPosition.Y < 0) playerPosition.Y = 0; if (playerPosition.Y > graphics. PreferredBackBufferHeight - player.Height) playerPosition.Y= graphics. PreferredBackBufferHeight - player.Height;
A questo punto, calcolata la posizione, nel metodo Draw potremo posizionare laereo utilizzando il campo playerPosition :
spriteBatch.Draw(player, playerPosition, Color. White);
In tal modo, per esempio, si evita che laereo vada troppo a sinistra o a destra e troppo in alto o in basso. Come detto, per, non tutti i dispositivi avranno una tastiera, quindi meglio assicurarsi che anche con il solo touch screen sia possibile giocare. In questo caso la classe messa a disposizione da XNA si chiama TouchPanel , che fornisce due diverse modalit per leggere linput: la prima permette di sapere il punto toccato dallutente, la seconda di interpretare movimenti pi articolati, come il trascinamento, il multi touch e cos via. Sullemulatore non sar possibile utilizzare questa seconda modalit, a meno di non possedere un monitor touch screen e Windows 7. Per il momento, quindi, ci limiteremo a leggere i punti toccati mediante il mouse e aggiornare come prima il valore di playerPosition . La classe TouchPanel mette anchessa a disposizione il metodo GetState , che restituisce la collezione dei punti toccati. In questo caso verificheremo che essa ne contenga almeno uno e quindi, tramite la propriet Position verificheremo la sua posizione rispetto a quella attuale dellaereo:
TouchCollection tc = TouchPanel.GetState(); if (tc.Count == 1)
Per testare il funzionamento con lemulatore bisogna abilitare linput da tastiera, dopo lavvio del gioco premete il tasto Pag Su (per disabilitarlo possibile utilizzare invece Pag Gi ). A questo punto potete usare le frecce per muovere laereo. Si noti che un altro requisito obbligatorio dei telefoni Windows Phone laccelerometro, che si potrebbe usare come ulteriore metodo di input, per esempio muovendo laereo a destra o sinistra a seconda dellinclinazione del dispositivo. Ma per il momento ne possiamo fare a meno.
LAUTORE
CONCLUSIONI
In questa prima parte dellarticolo abbiamo posto le basi per iniziare a sviluppare un semplice videogame, di genere sparatutto, per Windows Phone 7. Per giungere a tale scopo abbiamo fatto uso del Framework XNA. Nella seconda e conclusiva parte dedicata allargomento, continueremo lo sviluppo del nostro progetto, aggiungendo questa volta tutto il codice necessario a rendere il gioco quanto pi giocabile possibile. A titolo di esempio, vedremo come sar possibile aggiungere i nemici e rilevare eventuali collisioni con i proiettili o altri oggetti, calcolando i punti guadagnati dalla distruzione degli aerei nemici. Antonio Pelleriti
Antonio Pelleriti, ingegnere informatico, sviluppa software da pi di dieci anni e si occupa di .NET sin dalla prima versione Beta. chief software architect di DynamiCode s.r.l., software factory in cui progetta e sviluppa soluzioni custom ed in outsourcing (www.dynamicode. it). Pu essere contattato per suggerimenti, critiche o chiarimenti allindirizzo e-mail antonio.pelleriti@dotnetarchitects.it
Marzo 2011 / 71 45
XNA e Windows Phone 7. Lo sviluppo di un videogame MOBILE UN VIDEOGIOCO PER WINDOWS PHONE 7- 2 PARTE Windows Phone 7 programming
UN VIDEOGIOCO PER WINDOWS PHONE 7

N
CD
videogame_xna_parte2.zip
2 parte
LA SECONDA PARTE DELLARTICOLO DEDICATO ALLO SVILUPPO DI UN VIDEOGIOCO PER GLI SMARTPHONE WINDOWS PHONE 7 TRAMITE IL FRAMEWORK XNA. IN QUESTO ARTICOLO VEDREMO COME AGGIUNGERE AL GIOCO, SCROLLING, NEMICI, PROIETTILI E RIPRODUZIONE DI SUONI
WEB
ella prima parte dellarticolo, pubblicata in ioProrammo 160, abbiamo avuto modo di introdurre il lettore nel mondo dello sviluppo di videogiochi per Windows Phone e di XNA in particolare; XNA il framework di programmazione creato da Microsoft e messo a disposizione degli sviluppatori di videogame e non, per Windows Phone, ma anche per XBOX e Windows. Continuiamo ora lo sviluppo del videogioco, un semplice shootem up (o sparatutto), partendo dallo sfondo di gioco, che al momento un desolato rettangolo bianco, che rappresenta il mondo su cui volava il nostro protagonista, un aereo da combattimento.
una e poi laltra immagine, dando lillusione di movimento mediante la variazione della posizione Y. Il campo backgroundSpriteOffsetY, quindi, manterr tale posizione e sar incrementata durante lupdate del gioco, allinterno del metodo ScrollBackground:
private void ScrollBackground() { if (scroll) { backgroundSpriteOffsetY++; } }
SCROLLING DELLO SFONDO

Gli sparatutto utilizzano molto spesso uno sfondo che si muove al di sotto del personaggio principale e degli altri protagonisti del gioco: nemici e missili per esempio. Innanzitutto abbiamo bisogno di qualche immagine, che, per comodit, abbiamo recuperato in giro su Internet da alcune immagini satellitari, siete liberi di scegliere o creare le vostre immagini. Supponiamo, intanto, di avere due sole immagini, che mostreremo una dopo laltra, di dimensioni 480x2048. 480 pixel la larghezza dello schermo del dispositivo, mentre laltezza di 2048 pixel maggiore di quella standard dello schermo di 800 pixel, quindi lo sfondo scorrer in altezza per un totale di 4096 pixel e poi ricomincer dalla prima immagine. Per utilizzare le due immagini di sfondo, dobbiamo innanzitutto inserirle nel progetto Content e poi caricarle come gi abbiamo avuto modo di imparare nella scorsa puntata, basta invocare il metodo Content.Load e salvarle in due campi della classe Game di tipo Texture2D.
backgroundTextureA = Content. Load<Texture2D>(@Graphics\background_a); backgroundTextureB = Content. Load<Texture2D>(@Graphics\background_b); Tempo di realizzazione
Il metodo incrementa il campo backgroundSpriteOffsetY di una unit per volta, ma solo se il campo booleano scroll true. In questo modo potremo, per esempio, fermare lo scorrimento in determinate occasioni di gioco, per esempio quando il giocatore ha ultimato le vite, oppure quando verr visualizzato un nemico di fine livello. Allinterno del Draw faremo i conti per posizionare le immagini di sfondo: il valore di backgroundSpriteOffsetY parte da un valore pari a -4096 + 800, cio il totale delle due altezze pi laltezza dello schermo. In questa maniera i due sfondi vengono disegnati contemporaneamente, ma uno ricadr fuori dallo schermo, e solo quando il primo sta uscendo dallo schermo in basso, il secondo inizier ad apparire dallalto:
backgroundSpriteA.Begin(); //i due background da disegnare contemporaneamente //disegna lo sfondo b if (backgroundSpriteOffsetY > -2048 ){ backgroundSpriteA.Draw(backgroundTextureB, backGroundPosition = new Vector2(0, backgroundSpriteOffsetY ), backgroundTexturePosSource, Color.White); } //disegna lo sfondo a if (backgroundSpriteOffsetY > -4096 + this.graphics. PreferredBackBufferHeight && backgroundSpriteOffsetY < -2048 + this.graphics.PreferredBackBufferHeight)// verifica se ha raggiunto la fine { backgroundSpriteA.Draw(backgroundTextureA, backGroundPosition = new Vector2(0,
Conoscenze richieste Conoscenza di base di .NET Framework e C# Software Visual Studio 2010, Windows Phone Developer Tools Impegno
Il metodo che si occupa del disegno del gioco Draw. Non ci resta che fare due conti per poter disegnare prima
62 / Maggio 2011 46
XNA e Windows Phone 7. Lo sviluppo un videogame Windows MOBILE UN VIDEOGIOCO PER WINDOWS PHONE 7- 2di PARTE Phone 7 programming
backgroundSpriteOffsetY + 2048), background TexturePosSource, Color.White); } if (backgroundSpriteOffsetY > 0)//ricomincia a disegnare lo sfondo { backgroundSpriteA.Draw(backgroundTextureA, backGroundPosition = new Vector2(0, back groundSpriteOffsetY - 2048), backgroundTexture PosSource, Color.White); } //ricomincia da zero if (backgroundSpriteOffsetY > this.graphics. PreferredBackBufferHeight) { backgroundSpriteOffsetY = -4096 + this.graphics. PreferredBackBufferHeight; } backgroundSpriteA.End(); Texture2D texture; Vector2 position; Vector2 direction; float speed; int startTime; public Mig51(Game game) : base(game) { this.position = new Vector2(GameHelper. RandomNext(10, game.Window.ClientBounds. Width-10),-100); this.direction = new Vector2(GameHelper. RandomNext(-0.5f, 0.5f), GameHelper. RandomNext(0.5f, 1.0f)); this.direction.Normalize(); speed = GameHelper.RandomNext(4,6); } public Mig51(Game game, Vector2 position, Vector2 direction, float speed, int secondsAfter) : base(game) { this.position = position; this.direction = direction; this.direction.Normalize(); this.speed = speed; startTime = secondsAfter; }
be tutto di una noia mortale oltre che un gioco troppo semplice da finire!. Supponiamo, quindi, che il nemico sia rappresentato da aerei russi e dopo esserci procurati delle immagini appropriate, cominciamo a strutturare una classe Mig51 derivandola da DrawableGameComponent, che rappresenta un componente di gioco che necessita di essere disegnato sullo schermo. Tale classe consente di eseguire gli override dei metodi Initialize, Draw, Update e LoadContent:
public class Mig51 : Microsoft.Xna.Framework. DrawableGameComponent { private Vector2 spriteOrigin;
NOTA
WINDOWS PHONE DEVELOPER TOOLS

Per preparare la propria piattaforma di sviluppo, in maniera da poter immediatamente iniziare a sviluppare per i dispositivi dotati di Windows Phone 7, occorre scaricare ed installare i Windows Phone Developer Tools. Basta visitare il sito dedicato http://create.msdn.com/en-us/ home/getting_started e quindi cliccare il link Install Now nella sezione download the free tools. Linstaller intelligente, ed installer solo i componenti mancanti. Per esempio, se non si possiede una versione di Visual Studio 2010, verr installata la versione Express, cos come se non si ha a disposizione Expression Blend, verr installato Expression Blend for Windows Phone. Gli altri componenti necessari, e che verranno eventualmente installati, sono il .NET Framework 4.0, Silverlight, XNA Game Studio 4.0 e il Windows Phone Emulator.
La classe SpriteBatch si occupa, poi, del disegno vero e proprio, prima indicando linizio delle operazioni con il metodo Begin, poi posizionando le immagini mediante il metodo Draw, nel quale possono essere indicati pi sprite da renderizzare, ed infine mandando il tutto allo schermo mediante il metodo End. Da notare che le istruzioni di disegno dello sfondo devono avvenire prima di qualunque altra, perch, altrimenti, le immagini del nostro aereo e dei nemici o dei proiettili non verranno visualizzate, o meglio sarebbero
La classe dispone di due costruttori, di questi uno per posizionare laereo nemico in maniera casuale sullo schermo, e con una direzione e una velocit altrettanto casuali, ma limitando i possibili valori. Per ottenere dei numeri casuali si utilizza la classe GameHelper (il cui codice presente nel supporto Cd-Rom allegato) che, per esempio, possiede il metodo RandomNext, a cui possono essere passati due valori rappresentanti lintervallo minimo e massimo allinterno del quale generare un numero a caso appunto.
private static Random _rand; public static float RandomNext(float minValue, float maxValue) {
Fig. 1: Scrolling dello sfondo di gioco
if (_rand == null) _rand = new Random(); return (float)_rand.NextDouble() * (maxValue - minValue) + minValue; }
sovrascritte dallo sfondo stesso.
ARRIVA IL NEMICO
Il nostro aereo attualmente lunico elemento nel mondo del videogioco. Se non aggiungiamo dei nemici sareNel primo costruttore per esempio la velocit dellaereo (rappresentata mediante un numero intero) viene generaMaggio 2011 / 63 47
ta invocando cos il metodo:
speed = GameHelper.RandomNext(4,6);
Per caricare limmagine da utilizzare come sprite dellaereo nemico, utilizziamo ancora una volta il metodo Content. Load, e poi impostiamo il valore del campo spriteOrigin, che rappresenter il centro di rotazione dellaereo stesso, nel caso in cui la sua direzione non sia proprio verticale:
protected override void LoadContent() { texture = this.Game.Content. Load<Texture2D>(Graphics/mig-51S); spriteOrigin = new Vector2(texture.Width /2, texture.Height / 2); }
SUL WEB
LINEE GUIDA E RISORSE

Allinterno del sito dedicato allo sviluppo Windows Phone, http:// create.msdn.com, possibile trovare diversa documentazione da cui partire per iniziare a sviluppare per la nuova piattaforma mobile. In particolare vi consigliamo di dare unocchiata al Windows Phone 7 Developer Training kit, i video della sezione Windows Phone 7 Jump Start, e di non trascurare le linee guida dettate da Microsoft per la progettazione dellinterfaccia utente, raccolte nel documento UI Design and Interaction Guide for Windows Phone 7 v2.0. Per quanto riguarda invece XNA consigliamo la lettura e lo studio dellapposita sezione su MSDN (http://msdn.microsoft.com/ en-us/library/bb200104.aspx).
La Fig.2 mostra limmagine utilizzata come aereo nemico. Si noti come essa sia rivolta verso lalto, mentre nel gioco sar opportunamente ruotata in base al valore di direction. Allinterno del metodo Update, viene calcolata la posizione dellaereo e quindi creato il suo movimento nel mondo virtuale. Il campo initTime, che al momento potete anche trascurare, viene eventualmente inizializzato nel costruttore per indicare listante di partenza in secondi del nuovo aereo nemico, in tal modo possiamo per esempio creare pi aerei da mandare allattacco in diversi istanti. Nel metodo viene poi controllato il valore della ordinata Y di position, che indica il punto in cui si trova laereo, ed eventualmente la posizione stessa viene aggiornata, utilizzando il valore ricavato dal prodotto di direction * speed (cio un vettore per uno scalare). In tal modo si ottengono le nuove coordinate del punto in cui si ridisegner lo sprite.
public override void Update(GameTime gameTime) { if (initTime == null) initTime = gameTime.TotalGameTime; if ((gameTime.TotalGameTime - initTime. Value).TotalSeconds >= startTime) { if (position.Y < this.Game.Window. ClientBounds.Height + texture.Height) { position += direction * speed; } else Removed = true; base.Update(gameTime); } }
Fig. 2: Limmagine originale e ingrandita, utilizzata come aereo nemico
vogliamo data limmagine originale in Fig. 2:

private float Rotation { get { float angle = (float)(180 - MathHelper. ToDegrees((float)Math.Atan(direction.X/direction.Y))); return angle; } }
A questo punto, per disegnare laereo sullo schermo, basta utilizzare nel metodo Draw i classici metodi della classe SpriteBatch.
public override void Draw(GameTime gameTime) { base.Draw(gameTime); if (Removed || position.Y<100) return; SpriteBatch spriteBatch = new SpriteBatch(this. GraphicsDevice); spriteBatch.Begin(); if (Exploded) spriteBatch.Draw(texture, position, null, Color. White, MathHelper.ToRadians(Rotation), spriteOrigin,1,SpriteEffects.None, 0); spriteBatch.End(); }
Per rendere pi avvincente il gioco, e non avere soltanto aerei che scendono dallalto in verticale, abbiamo previsto la gestione di una direzione diversa dallangolo di 180 (che indica appunto la verticale verso il basso). Con un po di trigonometria, che esula dagli scopi di questarticolo, ma niente di trascendentale, possiamo calcolarci langolo di rotazione con cui disegnare lo sprite. Si noti che, nel caso di direzione perfettamente verticale, quindi con direction= (0,1), si avr un angolo di rotazione di 180, che quello che
Nei metodi precedenti avrete notato lutilizzo di una classe MathHelper, che contiene diversi metodi utili per fare dei calcoli matematici molto comuni nei videogame. Ad esempio, la classe contiene il metodo ToRadians, che consente di trasformare langolo in gradi calcolato nella propriet Rotation, nellangolo in radianti che voluto dal metodo Draw di SpriteBatch. Per visualizzare sullo schermo delle ondate di aerei nemici, creeremo un metodo che, in base al tempo di gioco, ne
64 / Maggio 2011 48
XNA e Windows Phone 7. Lo sviluppo un videogame Windows MOBILE UN VIDEOGIOCO PER WINDOWS PHONE 7- 2di PARTE Phone 7 programming
crea un numero variabile, per esempio il metodo seguente, verifica quanti secondi sono passati dallinizio del gioco stesso, e dopo 3 secondi (vedi ultimo else if) crea due oggetti Mig51 conservandoli nellarray enemies, che poi si potr utilizzare nel resto del gioco per verificare il numero di nemici in volo, quelli esplosi e cos via.
private void UpdateEnemies(GameTime gameTime) { //ondata di nemici con 5 aerei in fila if (gameTime.TotalGameTime.TotalSeconds >= 60 && NoEnemies()) { enemies = new Mig51[10]; enemies[0] = new Mig51(this, new Vector2(100, -100), new Vector2(0,1), 4, 5); enemies[1] = new Mig51(this, new Vector2(150, -100), new Vector2(0, 1), 4, 6); enemies[2] = new Mig51(this, new Vector2(200, -100), new Vector2(0, 1), 4, 7); enemies[3] = new Mig51(this, new Vector2(250, -100), new Vector2(0, 1), 4, 8); enemies[4] = new Mig51(this, new Vector2(300, -100), new Vector2(0, 1), 4, 9); } else if (gameTime.TotalGameTime. TotalSeconds >= 3 && NoEnemies()) { enemies = new Mig51[2]; enemies[0] = new Mig51(this); enemies[1] = new Mig51(this); } for (int i = 0; i < enemies.Length; i++) { if (enemies[i] != null) { enemies[i].Update(gameTime); if (enemies[i].Removed) { enemies[i] = null; } } } } if (i % 2 == 0) { pos.X += player.Width / 2; } else pos.X -= player.Width / 2; Missile missile = new Missile(this, pos); this.Components.Add(missile); missili[i]=missile; break;} } }
sparare dei missili basta avere un metodo tipo il seguente, FireMissile, in cui intanto si determina la posizione di partenza del proiettile, sparandone uno da destra e uno da sinistra, e poi, creata listanza di Missile, la si aggiunge alla collezione Components. In tal modo i metodi della classe DrawableGameComponent saranno automaticamente invocati quando necessario:
private void FireMissile() { for (int i = 0; i < MAX_MISSILI; i++) { if (missili[i] == null) { Vector2 pos= new Vector2(playerPosition.X+player. Width/2, playerPosition.Y);
La costante MAX_MISSILI consente di gestire un numero massimo di missili che si possono sparare e avere contemporaneamente in volo. Perch sia possibile disegnare un missile sullo schermo per sempre necessario avere a disposizione uno SpriteBatch. Ecco qui di seguito come gestire comodamente tale necessit senza creare una nuova istanza. Nella classe Game1, ad esempio dopo la creazione dello spriteBatch principale nel metodo Initialize, aggiungiamo un servizio al GameServiceContainer ricavabile mediante la propriet Services:
spriteBatch = new SpriteBatch(GraphicsDevice); Services.AddService(typeof(SpriteBatch), spriteBatch);
Il for finale invoca il metodo Update su ogni oggetto, e nel caso in cui la propriet Removed sia true (evento che si verifica dopo che laereo esploso o dopo che esce dallo schermo), rimuove loggetto impostando a null la rispettiva locazione del vettore. Il metodo UpdateEnemies verr invocato nellupdate generale della classe Game1.
Allinterno della classe Missile, invece, possiamo utilizzare il servizio per ricavare loggetto SpriteBatch. Operiamo semplicemente cos:
spriteBatch = this.Game.Services. GetService(typeof(SpriteBatch)) as SpriteBatch;
RISPONDERE AL FUOCO
Dopo aver creato la classe per rappresentare i nostri nemici, dobbiamo essere in grado di rispondere al fuoco sparando dei missili. Limplementazione della classe Missile molto simile a quella di Mig51, derivandola sempre da DrawableGameComponent, ma per mostrare qualcosa di diverso, mostreremo come gestire oggetti di tipo Missile e trattarli come componenti di gioco da aggiungere alla collezione Components della classe Game. Dopo aver creato la classe, e implementato i metodi Update, Draw, Initialize e LoadContent (date unocchiata al codice in allegato), per
RILEVARE LE EVENTUALI COLLISIONI DI GIOCO

Laereo protagonista principale del gioco pu ora sparare dei missili, ma se non rileviamo in qualche maniera le collisioni fra gli oggetti del gioco, nessun aereo nemico verr mai abbattuto, e certamente nessuno potr colpirci! Per rilevare se un missile ha colpito un aereo nemico, necessario intanto stabilire quali sono le aree da considerare colpite, ed il modo pi semplice sicuramente quello di considerare i rettangoli contenenti gli oggetti, quindi rilevare la loro intersecazione; questo lo si fa mediante il metodo Maggio 2011 / 65 49
Intersects della classe Rectangle. Il seguente metodo della classe Mig51, cicla tutti gli oggetti registrati nella collezione Components, verifica se sono di classe Missile, quindi chiama il metodo Intersects per verificarne la collisione:
public DrawableGameComponent HasCollided() { if (!this.Exploded) { foreach (GameComponent comp in Game.Components) { if (comp is Missile) { Missile missile = comp as Missile; if (!missile.Removed) { if (this.Bounds.Intersects(missile.Bounds)) { missile.Explode(); return missile; } }} }} return null; }
riga di codice:
SoundEffects[Missile].Play(0.75f, 0.2f, 0.0f);
Il primo parametro rappresenta il volume, variabile fra 0 e 1, ed indica il livello percentuale rispetto al volume Master. Il secondo il pitch del suono, e pu essere variato fra -1 (1 ottava in basso) e 1 (1 ottava in alto), mentre il terzo il bilanciamento e varia anchesso fra -1 (sinistra) e +1 (destra).
La rilevazione delle collisioni non cos precisa, soprattutto nel caso di sprite ruotati, come possono essere quelli degli aerei nemici. Un altro metodo, sicuramente pi pesante ma anche infinitamente pi preciso, prevede, invece, la verifica pixel per pixel, in tal caso vengono ricavati i colori di tutti i pixel e poi si verifica se ci sono dei pixel non trasparenti sovrapposti. La classe GameHelper gi citata, implementa un apposito metodo IntersectPixels, che verifica lintersezione di due pixel, inoltre considera anche le eventuali trasformazioni di rotazione applicate agli oggetti. Suggeriamo, ancora una volta, di aprire il codice in allegato e magari eseguirlo in debug, con Visual Studio 2010. La Fig. 3 mostra il gioco quasi completo, perlomeno per gli scopi di questarticolo, con degli aerei in volo, e un paio di esplosioni.
LAUTORE
GESTIONE DEI SUONI E DELLE ESPLOSIONI

Un videogame senza suoni e musiche non il massimo della vita; XNA permette di caricare e gestire tali risorse con la stessa semplicit ed efficacia vista per le immagini. Per esempio, basta caricare dei file .wav nel progetto Content, e poi utilizzare ancora una volta il metodo Content.Load per creare degli oggetti SoundEffect:
SoundEffects.Add(Missile, this.Content. Load<SoundEffect>(@Sounds\MissileSound));
Fig. 3: Il gioco in esecuzione sullemulatore
Antonio Pelleriti, ingegnere informatico, sviluppa software da pi di dieci anni e si occupa di .NET sin dalla prima versione Beta. chief software architect di DynamiCode s.r.l., software factory in cui progetta e sviluppa soluzioni custom ed in outsourcing (www. dynamicode.it), ed autore del libro Silverlight 4 Guida alla programmazione, Edizioni FAG. Pu essere contattato per suggerimenti, critiche o chiarimenti tramite il sito www.antoniopelleriti.it.
MIGLIORIE DA APPORTARE AL NOSTRO VIDEOGAME

Dato lesiguo spazio rimasto, indichiamo alcune possibili migliorie che potrete apportare, e che serviranno per studiare ancora pi a fondo il framework XNA. Manca sicuramente nel gioco la gestione delle vite a disposizione, un menu da cui selezionare lavvio di una nuova partita, la visualizzazione dei punteggi, e altri tanti dettagli che tutti gli appassionati di videogame non faranno fatica a immaginare. Antonio Pelleriti
Per riprodurre il suono si utilizza il metodo Play , che permette di determinare il volume, laltezza del suono, e il bilanciamento stereo. Ad esempio, allinterno del gi visto metodo FireMissile, al lancio di un missile, possiamo eseguire il suono semplicemente cos scrivendo la seguente
66 / Maggio 2011 50
Il mobile il futuro. E Windows Phone 7 sar sicuramente uno dei protagonisti del film che verr proiettato sul mercato. Questo approfondimento tematico stato pensato per chi vuole scoprire tutti i segreti del nuovo sistema operativo di Redmond; stato concepito per chi desidera imparare a programmare e creare software per smartphone. La prima parte funge da introduzione e mette in evidenza tutte le caratteristiche di base del software. La seconda mostra come operare con lambiente operativo del sistema: gestire la rubrica e le telefonate, interagire con la video/fotocamera, avviare browser e ricerche. Infine, la terza parte spiega come creare da zero un progetto pratico e sviluppare software e videogame.
www.punto-informatico.it

Windows Phone 7 Programming

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Windows Phone 7 Programming

Diunggah oleh

Hak Cipta:

Format Tersedia

Approfondimenti tematici

Windows Phone 7 programming

Windows COVER Phone 7STORY programming

SVILUPPARE PER WINDOWS PHONE 7

h ttp ://www ro mm .ig t Wi nd ows Phone.io 7p pr og grra am mo in

Fig. 1: Quadro riassuntivo della piattaforma di sviluppo

h ttp :/ / www.io pr 7 o gr am W indo w s P h o ne pr o gmo. r a mit m in g

Windows COVER Phone 7STORY programming

Fig. 2: Applicazioni in fase di sviluppo: menu start e menu programmi

h ttp ://www ro mm .ig t Wi nd ows Phone.io 7p pr og grra am mo in

PARTIRE CON IL PIEDE GIUSTO

GLI STRUMENTI DI SVILUPPO

BLOG, FORUM E ESEMPI

h ttp :/ / www.io pr 7 o gr am W indo w s P h o ne pr o gmo. r a mit m in g

Windows COVER Phone 7STORY programming

Fig. 4: Il primo test della nostra nuova app

Fig. 5: Software Input Panel (SIP)

h ttp ://www ro mm .ig t Wi nd ows Phone.io 7p pr og grra am mo in

Fig. 6: Codice reale XAML del controllo Panorama

Fig. 7: Il controllo Panorama in una applicazione reale

h ttp :/ / www.io pr 7 o gr am W indo w s P h o ne pr o gmo. r a mit m in g

Windows COVER Phone 7STORY programming

Fig. 8: Phone Call da codice

Fig. 9: Interfaccia in azione con il Phone Number Chooser

h ttp ://www ro mm .ig t Wi nd ows Phone.io 7p pr og grra am mo in

COSA SUCCEDE DIETRO LE QUINTE

LA BELLEZZA DEL PANORAMA

h ttp :/ / www.io pr 7 o gr am W indo w s P h o ne pr o gmo. r a mit m in g

Windows COVER Phone 7STORY programming

Fig. 10: Save Phone Number Task

h ttp ://www ro mm .ig t Wi nd ows Phone.io 7p pr og grra am mo in

Windows Phone 7 MOBILE WINDOWS PHONE 7: API E SENSORI

Windows Phone 7 programming

WINDOWS PHONE 7: API E SENSORI

Fig.2: Unocchiata allassembly

Fig.1: Schema riassuntivo della piattaforma

h ttp ://www .io p r o g r a m m o .i t

Windows Phone 7 programming

Windows Phone 7: 7 API E SENSORI MOBILE WINDOWS PHONE

Fig.3: Linterfaccia del Phone Dialer

Wi nd ows Phone 7 pr r am m in g Novembre 2010 /o g 51

Windows Phone 7 MOBILE WINDOWS PHONE 7: API E SENSORI

Windows Phone 7 programming

Fig.4: Interfaccia per la gestione degli Sms

h ttp ://w w w .io p r o g r a m m o .i t

Windows Phone 7 programming

WindowsPHONE Phone 7: 7 API E SENSORI MOBILE WINDOWS

Fig.5: I passaggi del SavePhoneNumberTask

Fig.6: Le tre fasi necessarie al completamento del PhoneNumberChooserTask

Wi nd ows Phone 7 pr g r am m in g Novembre 2010 /o53

Windows Phone 7 MOBILE WINDOWS PHONE 7: API E SENSORI

Windows Phone 7 programming

SCATTIAMO UNA FOTO

Fig.7: La sequenza per il completamento del PhotoChooserTask

h ttp ://ww w .io p r o g r a m m o .i t

Windows Phone 7 programming

WindowsPHONE Phone 7: 7 API E SENSORI MOBILE WINDOWS

Fig.8: Le tre schermate del CameraCaptureTask

Fig.9: Ecco il risultato del MediaPlayerLauncher

Wi nd ows Phone 7 pr g r am m in g Novembre 2010 /o55

Windows Phone 7 MOBILE WINDOWS PHONE 7: API E SENSORI

Windows Phone 7 programming

IL CONTROLLO PER LE RICERCHE

Fig.10: Il controllo MediaElement