Coding 4 WP7 Mobile. Sfruttare i feed RSS. Come presentare I dati contenuti in un feed RSS in un App per Winddows Phone 7

Transcript

1 Coding 4 WP7 Mobile Sfruttare i feed RSS Come presentare I dati contenuti in un feed RSS in un App per Winddows Phone 7 Andrea Temporiti 1/19/2011

2 Intro Con l uscita del SDK (Software Developmet Kit) per Windows Phone 7 finalmente anche gli sviluppatori.net possono sbizzarrirsi nel creare applicazioni mobile che siano accattivanti, simpatiche e utili. Inizia la battaglia alle App del melafonino. In questo articolo voglio condividere alcune idee, spunti e prove che potrebbero essere utili nel creare la vostra prima App per Windows Phone 7. Gli strumenti del mestiere Come prima cosa, naturalmente è necessario disporre di tutto l occorrente per creare la propria App. Se siete sviluppatori.net avrete sicuramente l ultima verisone di Visual Studio (VS2010) sul vostro PC, Altrimeniti seguite quanto segue: Se siete sviluppatori.net e non avete ancora Visual Studio 2010 (INSTALLATE!!!!!!!!!!!!!!!!!!!!) Se siete sviluppatori ma avete sempre pensato che.net non fa per voi: (INSTALLATE Visual Studio 2010!!!) Se siete sviluppate applicazioni per Iphone o Ipad, buttate via X-Code e INSTALLATE VISUAL STUDIO 2010 (Vi serve un PC, non provate ad installare Visual Studio su Snow Leopard perchè anche in emulazione va bene). Se preferite le discipline umanistiche alla teconologia: Chiedetevi perchè avete scaricato questo documento, quindi INSTALLATE Visual Studio 2010, non si sa mai. Come avrete capito, per sviluppare una App per il vostro Windowsfonino dovete avere l ambiente di sviluppo. Naturalmente vi serve anche l SDK, o meglio Windows Phone Developer Toolkit e un altro pò di software a supporto. Per semplificarvi la vita, Microsoft ha creato un pacchettino che installa tutto il necessario, compreso Bland, che serve per dare un bel look and feel alla vostra interfaccia grafica. Per gli amanti del softwrae Free, quì trovate la versione gratuita del pacchetto cumulativo: Andate sulla sezione Download the free tools e premete su Install Now. L idea Se in questo momento state installando I tools avete il tempo per mettere da parte il computer per un attimo e iniziare a pensare alla vostra app. Siccome gli Hello World sono belli ma assolutamente inutili, vediamo di costruire qualcosa di un pò più gratificante. L idea per la nostra app in realtà non è molto originale, creeremo una applicazione in grado di fornirci informazioni e previsioni Meteo.

3 Recuperare i dati da visualizzare Il nostro dispositivo Windows Phone, come altri SmartPhone, dispone di sensori e telecamere, in grado di fornirci molte informazioni utili per creare le nostre applicazioni. Tuttavia non ha al suo interno dispositivi in grado di fornirci informazioni meteo o semplicemente la temperatura ambientale. E necessario quindi trovare un altro modo per recuperare i dati che ci servono. Come prima strada proviamo a collegare il nostro Windows Phone ad una statuetta metereopatica, di quelle che cambiano colore in funzione della pressione ambientale... purtroppo niente porta USB o Bluetooth sulla statuetta. Cerchiamo qualcosa di più tecnologico, radiosveglia con stazione meteo incorporata. Bella, costosa ma difficilmente interfacciabile al nosto Windows Phone. Soprattutto diventa un po complicato portarsela dietro... scartata. Ci serve qualcosa di più pratico...girando su internet vi sarà sicuaremnte capitato di imbattervi nei feed RSS. Per chi non sapesse che cosè un feed RSS: RSS (acronimo di RDF Site Summary ed anche di Really Simple Syndication) è uno dei più popolari formati per la distribuzione di contenuti Web; è basato su XML, da cui ha ereditato la semplicità, l'estensibilità e la flessibilità. L'applicazione principale per cui è noto sono i feed RSS, che permettono di essere aggiornati su nuovi articoli o commenti pubblicati nei siti di interesse senza doverli visitare manualmente uno a uno. RSS definisce una struttura adatta a contenere un insieme di notizie, ciascuna delle quali sarà composta da vari campi (nome autore, titolo, testo, riassunto,...). Quando si pubblicano delle notizie in formato RSS, la struttura viene aggiornata con i nuovi dati; visto che il formato è predefinito, un qualunque lettore RSS potrà presentare in una maniera omogenea notizie provenienti dalle fonti più diverse. Wikipedia: Dobbiamo cercare un feed RSS che faccia al caso nostro, da cui possiamo recuperare i dati meteo della nostra città. Finalmente dopo un po di ricerche trovo quello che cercavamo. Yahoo espone i propri dati metereologici via feed RSS e ci fornisce anche una chiara gudia sui come recuperarli programmaticamente. Dopo una rapida letta alla documentazione capiamo che questo feed fa al caso nostro, per fare una prova mettiamo nel browser l indirizzo di test: e riceviamo in output l XML promesso, che ci descrive la condizione del tempo a Sunnville. Siccome probabilmente non ci interessa sapre che tempo fa a Sunnville ma vorremmo avere le previsioni delle nostre città, dobbiamo trovare il nostro WOEID (Where On Earth ID) Il WOEID è un codice che identifica una città ben precisa e va passato al parametro w nella query string.

4 Come avrete capito Yahoo! ha anche un API che ci permette di interrogare il database geografico per trovare la città in base al nome. Da uno sguardo alla documentazione risulta chiaro che dobbiamo interrogare la tabelal geo.places: select * from geo.places where text = Roma In realtà l operatore = funziona da like. Piccola difficoltà, la query sopra va passata in query string all API query.yahooapis.com/v1/public/ e quindi bisogna prima passare la query inun Encoder HTML: select+*+from+geo.places+where+text%3d%22roma%22 Ora possiamo costrutire la nostra url di richiesta: rmat=xml Come risposa riceviamo un enorme XML che contiene tutte le città conosciute contenenti Roma o similari, fortunatamente il primo nodo place restituito è proprio quello desiderato, come si capisce dai nodi evidenziati. Tra i primi nodi figlio del nodo place troviamo quello che stavamo cercando ovvero il WOEID di Roma (721943). <?xml version="1.0" encoding="utf-8"?> <query xmlns:yahoo=" yahoo:count="10" yahoo:created=" t20:45:05z" yahoo:lang="en-us"> <results> <place xmlns=" xml:lang="en-us" yahoo:uri=" <woeid>721943</woeid> <placetypename code="7">town</placetypename> <name>rome</name> <country code="it" type="country">italy</country> <admin1 code="" type="region">lazio</admin1> <admin2 code="it-rm" type="province">rome</admin2> <admin3/> <locality1 type="town">rome</locality1> <locality2/> <postal/> <centroid> <latitude> </latitude> <longitude> </longitude> </centroid> <boundingbox> <southwest> <latitude> </latitude> <longitude> </longitude> </southwest> <northeast> <latitude> </latitude> <longitude> </longitude> </northeast> </boundingbox> <arearank>5</arearank> <poprank>13</poprank> </place> <place xmlns=" xml:lang="en-us"

5 yahoo:uri=" <woeid> </woeid> <placetypename code="7">town</placetypename> <name>roma</name> <country code="us" type="country">united States</country> <admin1 code="us-tx" type="state">texas</admin1> <admin2 code="" type="county">starr</admin2> <admin3/> <locality1 type="town">roma</locality1> <locality2/> <postal type="zip Code">78584</postal> <centroid> <latitude> </latitude> <longitude> </longitude> </centroid> <boundingbox> <southwest> <latitude> </latitude> <longitude> </longitude> </southwest> <northeast> <latitude> </latitude> <longitude> </longitude> </northeast> </boundingbox> <arearank>3</arearank> <poprank>1</poprank> </place>... </results> </query> Ora vediamo cosa succede se modifichiamo il parametro passato alla url di Yahoo! Weather: Ecco finalmente comparire le informazioni che ci interessano, ovvero il meteo di Roma: <?xml version="1.0" encoding="utf-8" standalone="yes"?> <rss version="2.0" xmlns:yweather=" xmlns:geo=" <channel> <title>yahoo! Weather - Rome, IT</title> <link> IT/* st/itxx0067_f.html</link> <description>yahoo! Weather for Rome, IT</description> <language>en-us</language> <lastbuilddate>wed, 19 Jan :14 pm CET</lastBuildDate> <ttl>60</ttl> <yweather:location city="rome" region="lz" country="italy"/> <yweather:units temperature="f" distance="mi" pressure="in" speed="mph"/> <yweather:wind chill="48" direction="150" speed="3" /> <yweather:atmosphere humidity="87" visibility="3.73" pressure="30.06" rising="0" /> <yweather:astronomy sunrise="7:30 am" sunset="5:06 pm"/> <image> <title>yahoo! Weather</title> <width>142</width> <height>18</height> <link> <url>

6 </image> <item> <title>conditions for Rome, IT at 9:14 pm CET</title> <geo:lat>41.9</geo:lat> <geo:long>12.5</geo:long> <link> IT/* st/itxx0067_f.html</link> <pubdate>wed, 19 Jan :14 pm CET</pubDate> <yweather:condition text="mostly Cloudy" code="27" temp="48" date="wed, 19 Jan :14 pm CET" /> <description> <![CDATA[ <img src=" /> current Conditions: Mostly Cloudy, 48 F forecast: Wed - Light Rain Late. High: 57 Low: 46 Thu - AM Light Rain. High: 52 Low: 39 <a href=" IT/* st/itxx0067_f.html">full Forecast at Yahoo! Weather</a> (provided by <a href=" >The Weather Channel</a>) ]]> </description> <yweather:forecast day="wed" date="19 Jan 2011" low="46" high="57" text="light Rain Late" code="11" /> <yweather:forecast day="thu" date="20 Jan 2011" low="39" high="52" text="am Light Rain" code="11" /> <guid ispermalink="false">itxx0067_2011_01_19_21_14_cet</guid> </item> </channel> </rss> <!-- api4.weather.ch1.yahoo.com compressed/chunked Wed Jan 19 12:44:13 PST > Notare che le unità di misura sono quelle americane. Per trasformare le letture nel sistema MKSC basta passare l ulteriore parametro u (unit) in query string impostandolo al valore c : Prepariamo la soluzione Bene, ora che abbiamo i nostri dati, possiamo iniziare a presentarli. Come prima cosa apriamo Visual Studio 2010 e creiamo un progetto : File->New->Project

7 Scegliamo come template Visual C#->Silverlight For Windows Phone, quindi Selezioniamo Windows Phone Pivot Application. Cambiamo il nome in WP7Meteo e premiamo OK e otteniamo lo scheletro del nostro progetto. Provate a mandare in esecuzione lo scheletro della vostra applicazione, vi si aprirà un emulatore che vi permette di visualizzare due pagine (first e second).

8 Per passare da una pagina all altra posizionate il puntatore del moude al centro della pagina e tenedo simulate un operazione di drag n drop verso sinsitra o destra. (simula lo schermo touch). Tornate in design mode, avrete sicuramente notato che l interfaccia grafica è definita da un fiel XAML (mainpage.xaml) che contiene la definizione della pagina che stiamo visualizzando. <Grid x:name="layoutroot" Background="Transparent">  <controls:pivot Title="MY APPLICATION">  <controls:pivotitem Header="first">  <ListBox x:name="firstlistbox" Margin="0,0,-12,0" ItemsSource="Binding Items"> <ListBox.ItemTemplate> <DataTemplate> <StackPanel Margin="0,0,0,17" Width="432"> <TextBlock Text="Binding LineOne" TextWrapping="Wrap" Style="StaticResource PhoneTextExtraLargeStyle"/> <TextBlock Text="Binding LineTwo" TextWrapping="Wrap" Margin="12,-6,12,0" Style="StaticResource PhoneTextSubtleStyle"/> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> </controls:pivotitem>  <controls:pivotitem Header="second">  <ListBox x:name="secondlistbox" Margin="0,0,-12,0" ItemsSource="Binding Items"> <ListBox.ItemTemplate> <DataTemplate> <StackPanel Margin="0,0,0,17"> <TextBlock Text="Binding LineOne" TextWrapping="NoWrap" Margin="12,0,0,0" Style="StaticResource PhoneTextExtraLargeStyle"/> <TextBlock Text="Binding LineThree" TextWrapping="NoWrap" Margin="12,- 6,0,0" Style="StaticResource PhoneTextSubtleStyle"/> </StackPanel> </DataTemplate> </ListBox.ItemTemplate>

9 </ListBox> </controls:pivotitem> </controls:pivot> </Grid> Apriamo la soluzione con Blend: Sulla spalla sinistra un albero riporta i componenti della nostra interfaccia:

10 Recupero dei dati da codice Ora che abbiamo creato il progetto è necessario scrivere un po di codice per leggere i dati XML dal feed e caricarli all interno di una classe C#. Normalmente C# permette di leggere i feed con un apposito binding WCF chiamato Sindacation. Sfortunatamente il framework.net fornito con WP non dispone di quelle classi, quindi dobbiamo trovare un work around. Come prima cosa dobiamo ricavare uno schema compatibile con l XML ricavato in output dalla chiamata. Per fare questo salviamo come c:\forecastrss.xml l XML ricavato mettendo nel browser la url: Usiamo quindi l utility XSD.exe per generare l XSD relativo. Xsd.exe è un utility da riga di comando disponibile da prompt dei comandi di Visual Studio Start->All Programs->Microsoft visual Studio 2010-> Visual Studio Tools-> Visual Studio Command Prompt (2010) Qundi digitiamo il commando : xsd c:\forecastrss.xml /outputdir:c:\

11 Se controllimao la directory c:\ troviamo in realtà 3 file c:\forecastrss.xsd c:\forecastrss_app1.xsd e c:\forecastrss_app2.xsd. Questo perchè il tool ha generato un file XSD per ogni namespace trovato nel file XML di origne.ora usiamo nuovamente il tool XSD per generare le classi C# Il fatto di avere lo schema diviso in tre classi distinte complica un po il successivo passo. Dobbiamo fornire a XSD tutti e tre gli schema files. (Attenzione nel help del comando XSD questa procedura non è documentata ma funziona, provare per credere). Digitate da riga di comando: xsd c:\forecastrss.xsd c: forecastrss_app1.xsd c:/forecastrss_app2.xsd /classes /l:cs /outputdir:c:\

12 Il file cs con le classi veine generato come forecastrss_app2.cs. Tornate al vostro progetto, create una cartella chiamata YahooModel e importate al suo interno il file CS generato dopo averlo rinominato in forecastrss.cs. Importate anche i file XSD. Apriamo la classe e eliminamo tutti gli attributi decorativi: [System.SerializableAttribute()]

13 e [System.ComponentModel.DesignerCategoryAttribute("code")] Modifichiamo la proprietà forecast dell oggetto channelitem in modo da farla diventare un array: /// <remarks/> [System.Xml.Serialization.XmlElementAttribute(Namespace=" /1.0")] public forecast[] forecast get return this.forecastfield; set this.forecastfield = value; Fate la stessa coda con la variabile relativa: private forecast[] forecastfield; Ora che abbiamo la classe, dobbiamo scrivere il codice necessario per recuperare i dati da Yahoo tramite una post HTTP. Prima di scrivere il codice diamo un occhiata al pattern previsto dallo scheletro del progetto. Chi ha dimestichezza con WPF e Silverlight avrà già individuato la cartella ViewModel. Anche in questo caso utilizzeremo l ormai noto pattern Model View ViewModel per separare la vista dal modello. Nella cartella ViewModel troviamo già il file MainPageViewModel.cs, apriamolo e svuotiamolo dei contenuti a meno dell implementazione dell interfaccia IPropertyChanged, che risulterà utile: namespace WP7Meteo public class MainViewModel : INotifyPropertyChanged public MainViewModel() public event PropertyChangedEventHandler PropertyChanged; private void NotifyPropertyChanged(String propertyname) PropertyChangedEventHandler handler = PropertyChanged; if (null!= handler) handler(this, new PropertyChangedEventArgs(propertyName));

14 Aggiungiamo ora la reference all assembly Syste.Xml.Serialization, che contiene la classe XmlSerializer. Utilizzeremo la classe per deserializzare l XML ricevuto da Yahoo come risposta alla query. Aggiungiamo nella sezione using il namespace System.Windows.Threading using System.Windows.Threading; using System.Net; using System.Xml.Serialization; Dichiarimao le due variabili di classe e la proprietà: public Dispatcher Dispatcher get; set; private rss forecast; public bool IsDataLoaded set; get; Aggiungiamo la proprietà Forecast di tipo rss: public rss Forecast get return forecast; set if (value!= forecast) forecast = value; Dispatcher.BeginInvoke(delegate() NotifyPropertyChanged("Forecast"); ); Nel costruttore impostiamo IsDataLoaded = false; La classe ViewModel ora risulterà come segue: using System.Diagnostics; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Shapes; using System.Collections.ObjectModel; using System.Windows.Threading; using System.Net; using System.Xml.Serialization; namespace WP7Meteo

15 public class MainViewModel : INotifyPropertyChanged public Dispatcher Dispatcher get; set; private rss forecast; public bool IsDataLoaded set; get; public MainViewModel() IsDataLoaded = false; public rss Forecast get return forecast; set if (value!= forecast) forecast = value; Dispatcher.BeginInvoke(delegate() NotifyPropertyChanged("Forecast"); ); public event PropertyChangedEventHandler PropertyChanged; private void NotifyPropertyChanged(String propertyname) PropertyChangedEventHandler handler = PropertyChanged; if (null!= handler) handler(this, new PropertyChangedEventArgs(propertyName)); A questo punto aggiungiamo il metodo loadforecast e il metodo c_operreadcompleted: private void loadforecast() WebClient c = new WebClient(); string uripath c.openreadcompleted += new OpenReadCompletedEventHandler(c_OpenReadCompleted); c.openreadasync(new Uri(uriPath)); void c_openreadcompleted(object sender, OpenReadCompletedEventArgs e)

16 XmlSerializer s = new XmlSerializer(typeof(rss)); rss q = (rss)s.deserialize(e.result); if (e.error == null) Forecast = q; L implementazione del metodo effettua la richiesta web tramite la classe WebClient. E importante non bloccare l interfaccia, per questo motivo la classe WebClient (per mobile) non implementa il metodo sincrono di request. Sull evento di callback deserializziamo quindi la risposta, se positiva, e l assegnamo alla variabile Forecast. Aggiungete infine il emtodo LoadData(): public void LoadData(Dispatcher dispatcher) this.dispatcher = dispatcher; loadforecast(); Aprire la classe App.xaml.cs e rimuovere il codice contenuto nel metodo di attivazione: // Code to execute when the application is activated (brought to foreground) // This code will not execute when the application is first launched private void Application_Activated(object sender, ActivatedEventArgs e) Aprire MainPage.xaml.cs e modificare l implementaione del gestore evento MainPage_OnLoad: // Load data for the ViewModel Items private void MainPage_Loaded(object sender, RoutedEventArgs e) if (!App.ViewModel.IsDataLoaded) App.ViewModel.LoadData(this.Dispatcher); Creazione dell interfaccia Torniamo ora sull interfaccia MainPage.XAML e svuotiamo la parte di XAML contenuta all interno dei due pivot Item. Rinominamoli in Current e Forecast, rinominamo MY APPLICATION in YAHOO! WEATHER FORECAST for WP7

17 All interno del PivotItem Current vogliamo ora creare l interfaccia per la visualizzazione dello stato meteo attuale. Aggiungiamo una griglia inserendo un nodo Grid all interno del primo Pivot Item: <Grid x:name="layoutroot" Background="Transparent">  <controls:pivot Title="MY APPLICATION">  <controls:pivotitem Header="Current"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="80" /> <RowDefinition Height="200" /> <RowDefinition Height="80" /> <RowDefinition Height="80" /> <RowDefinition Height="40" /> <RowDefinition Height="40" /> </Grid.RowDefinitions> </Grid> </controls:pivotitem> <controls:pivotitem Header="Forecast"> </controls:pivotitem> </controls:pivot> </Grid> In questo modo abbiamo predisposto una griglia con 6 righe e una colonna. Visual Studio ci mostra la griglia sul designer:

18 Aggiungiamo nello XAML della griglia le seguenti 3 righe: <TextBlock x:name="actualtitle" Text="Situazione meteo Roma" Grid.Row="0" FontSize="32" VerticalAlignment="Center" /> <TextBlock Grid.Row="4" HorizontalAlignment="Center" Text="Updated at" VerticalAlignment="Center" />

19 <TextBlock Grid.Row="5" HorizontalAlignment="Center" Text="Binding Forecast.channel[0].item[0].condition.date, Mode=OneWay,UpdateSourceTrigger=Default" VerticalAlignment="Center" /> Poichè sono stati impostati I parametric Gri.Row di ogni TextBlock, gli elementi grafici verrano visualizzati rispettivamente nella prima, nella quinta e nella sesta riga. Mentre i primi due blcchi testo hanno un contenuto statico, l ultimo TextBlock recupera le informazioni da visualizzare dall oggetto Forecast. (Ricordate la proprietà caricata leggendo i dati dalla risposta delle API Yahoo all interno del viewmodel). Si noti che il binding è definito sulla data di aggiornamento, facilemnte individuabile controllando l XML recueprato inserendo la richiesta nel browser. In evidenza nell riquadro seguente: <?xml version="1.0" encoding="utf-8" standalone="yes"?> <rss version="2.0" xmlns:yweather=" xmlns:geo=" <channel> <title>yahoo! Weather - Rome, IT</title> <link> IT/* st/itxx0067_f.html</link> <description>yahoo! Weather for Rome, IT</description> <language>en-us</language> <lastbuilddate>wed, 19 Jan :14 pm CET</lastBuildDate> <ttl>60</ttl> <yweather:location city="rome" region="lz" country="italy"/> <yweather:units temperature="f" distance="mi" pressure="in" speed="mph"/> <yweather:wind chill="48" direction="150" speed="3" /> <yweather:atmosphere humidity="87" visibility="3.73" pressure="30.06" rising="0" /> <yweather:astronomy sunrise="7:30 am" sunset="5:06 pm"/> <image> <title>yahoo! Weather</title> <width>142</width> <height>18</height> <link> <url> </image> <item> <title>conditions for Rome, IT at 9:14 pm CET</title> <geo:lat>41.9</geo:lat> <geo:long>12.5</geo:long> <link> IT/* st/itxx0067_f.html</link> <pubdate>wed, 19 Jan :14 pm CET</pubDate> <yweather:condition text="mostly Cloudy" code="27" temp="48" date="wed, 19 Jan :14 pm CET" /> <description> <![CDATA[ <img src=" /> current Conditions: Mostly Cloudy, 48 F forecast: Wed - Light Rain Late. High: 57 Low: 46 Thu - AM Light Rain. High: 52 Low: 39 <a

20 href=" IT/* st/itxx0067_f.html">full Forecast at Yahoo! Weather</a> (provided by <a href=" >The Weather Channel</a>) ]]> </description> <yweather:forecast day="wed" date="19 Jan 2011" low="46" high="57" text="light Rain Late" code="11" /> <yweather:forecast day="thu" date="20 Jan 2011" low="39" high="52" text="am Light Rain" code="11" /> <guid ispermalink="false">itxx0067_2011_01_19_21_14_cet</guid> </item> </channel> </rss> Proviamo ad avviare l applicazione premendo F5, noteremo che la data comparirà al centro in basso sull interfaccia dell emulatore: Ora vogliamo aggiungere le informazioni sulla temperatura attuale, massima e minima contenute nella classe Forecast.

21 Aggiungiamo quindi i seguenti oggetti all interno della griglia: <TextBlock Grid.Row="2" Text="Binding Forecast.channel[0].item[0].condition.text, Mode=OneWay,UpdateSourceTrigger=Default" FontSize="28" HorizontalAlignment="Center" VerticalAlignment="Center"/> <Grid Grid.Row="3"> <Grid.ColumnDefinitions> <ColumnDefinition Width="50*" /> <ColumnDefinition Width="25*" /> <ColumnDefinition Width="25*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="50*" /> <RowDefinition Height="50*" /> </Grid.RowDefinitions> <TextBlock Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" HorizontalAlignment="Center" Text="Binding Forecast.channel[0].item[0].condition.temp, Mode=OneWay,UpdateSourceTrigger=Default" VerticalAlignment="Center" FontSize="50" /> <TextBlock Grid.Row="1" Grid.Column="1" HorizontalAlignment="Left" Text="High" VerticalAlignment="Center" FontSize="24" Margin="10,0,10,0" /> <TextBlock Grid.Row="1" Grid.Column="2" HorizontalAlignment="Left" Text="Binding Forecast.channel[0].item[0].forecast[0].high, Mode=OneWay,UpdateSourceTrigger=Default" VerticalAlignment="Center" FontSize="24" /> <TextBlock Grid.Row="0" Grid.Column="1" HorizontalAlignment="Left" Text="Low" VerticalAlignment="Center" FontSize="24" Margin="10,0,10,0" /> <TextBlock Grid.Row="0" Grid.Column="2" HorizontalAlignment="Left" Text="Binding Forecast.channel[0].item[0].forecast[0].low, Mode=OneWay,UpdateSourceTrigger=Default" VerticalAlignment="Center" FontSize="24" /> </Grid> Il codice XAML assomiglierà a quanto descritto di seguito:

22 Come possiamo notare, abbiamo aggiunto una ulteriore girglia all interno della griglia principale in modo da poter disporre gli elementi grafici interni (High e Low) a destra del valore attuale. Il funzionamento è simile a quello delle dichiarative tabelle HTML come dimostra l uso degli attributi RowSpan e ColumnSpan sugli elementi contenuti.

23 Utilizzo dei converter Ora che abbiamo gran parte dei dati visualizzati, pensiamo è necessario abbellire l interfaccia: Mettiamo l unità di misura per i gradi Inseriamo un immagine che varia in funzione dello stato meteo (sole, pioggia, nebbia ecc.) Per inserire l unità di misura, basterebbe modificare la classe Forecast. Per scopi didattici, preferiamo creare un oggetto Converter. Ovvero una classe in grado di convertire un dato in ingreso in un nuovo tipo in uscita o semplicemente variarne il formato. I converter sono ampiamenti utilizzati nel pattern Model View-ViewModel perchè permettono di definire come interpretare una proprietà di un oggeto direttamente all interno del file XAML nella sezione Binding. Nel nostro caso utilizzeremo due converter :

24 Il primo converter inserirà semplicemente l unità di misura ai dati di temperatura prima che questi vengano presentati Il secondo converter dovrà individuare l immagine da sivualizzare analizzando il valore dell elemento code (intero tra 0 e 47) del nodo forecst*0+.condition. Creiamo una nuova cartella denominata Converters. Creiamo una nuova classe denominata TemperatureConverter che implementa l interfaccia System.Windows.Data.IValueConverter: using System; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Ink; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; using System.Windows.Data; namespace WP7Meteo.Converters public class TemperatureConverter : IValueConverter #region IValueConverter Members public object Convert(object value, Type targettype, object parameter, System.Globalization.CultureInfo culture) if (value!= null) return String.Format("0 C", value); else return null; public object ConvertBack(object value, Type targettype, object parameter, System.Globalization.CultureInfo culture) return null; #endregion Creiamo una nuova classe che funga da convertitore di immagini. Per il momento ipotiziamo di avere le immagini pronte in formato.png in una cartella denominata Images all intero del progetto. Più avanti vedremo come prelevare le immagini dal sito di Yahoo!: using System; using System.Net; using System.Windows;

25 using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Ink; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; using System.Windows.Media.Imaging; using System.Globalization; using System.Windows.Data; namespace WP7Meteo.Converters public class WeatherCodeToImageConverter:IValueConverter public object Convert(object value, Type targettype, object parameter, CultureInfo culture) string code = value as string; int integercode = int.parse(code); BitmapImage image = new BitmapImage(new Uri(String.Format(@"/WP7Meteo;component/Images/0.png", integercode), UriKind.Relative)); return image; public object ConvertBack(object value, Type targettype, object parameter, CultureInfo culture) return null; Aggiungiamo i converter nella pagina MainPage.xaml subito sotto al nodo Phone dell applicazione. Stando attenti ad aggiungere anche il namespace clr: <phone:phoneapplicationpage x:class="wp7meteo.mainpage" xmlns=" xmlns:x=" xmlns:phone="clr-namespace:microsoft.phone.controls;assembly=microsoft.phone" xmlns:shell="clr-namespace:microsoft.phone.shell;assembly=microsoft.phone" xmlns:controls="clrnamespace:microsoft.phone.controls;assembly=microsoft.phone.controls" xmlns:d=" xmlns:mc=" mc:ignorable="d" d:designwidth="480" d:designheight="768" d:datacontext="d:designdata SampleData/MainViewModelSampleData.xaml" FontFamily="StaticResource PhoneFontFamilyNormal" FontSize="StaticResource PhoneFontSizeNormal" Foreground="StaticResource PhoneForegroundBrush" SupportedOrientations="Portrait" Orientation="Portrait" shell:systemtray.isvisible="true" xmlns:my="clr-namespace:wp7meteo.converters"> <phone:phoneapplicationpage.resources> <my:weathercodetoimageconverter x:key="weathercodetoimageconverter1" />

26 <my:temperatureconverter x:key="temperatureconverter1" /> </phone:phoneapplicationpage.resources> Ora inseriamo i converter nei binding degli elelemnti della griglia di presentazione dati e aggiungiamo anche l immagine, che per il momento non comparirà per mancanza dei file png. Riporto tutto il PivotItem per completezza: <controls:pivotitem Header="Current"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="80" /> <RowDefinition Height="200" /> <RowDefinition Height="80" /> <RowDefinition Height="80" /> <RowDefinition Height="40" /> <RowDefinition Height="40" /> </Grid.RowDefinitions> <TextBlock x:name="actualtitle" Text="Situazione meteo Roma" Grid.Row="0" FontSize="32" VerticalAlignment="Center" /> <Image Source="Binding Mode=OneWay, UpdateSourceTrigger=Default, Path=Forecast.channel[0].item[0].condition.code, Converter=StaticResource WeatherCodeToImageConverter1" Grid.Row="1" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center" /> <TextBlock Text="Binding Forecast.channel[0].item[0].condition.text, Mode=OneWay,UpdateSourceTrigger=Default" Grid.Row="2" FontSize="28" HorizontalAlignment="Center" VerticalAlignment="Center"/> <Grid Grid.Row="3"> <Grid.ColumnDefinitions> <ColumnDefinition Width="50*" /> <ColumnDefinition Width="25*" /> <ColumnDefinition Width="25*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="50*" /> <RowDefinition Height="50*" /> </Grid.RowDefinitions> <TextBlock Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" HorizontalAlignment="Center" Text="Binding Forecast.channel[0].item[0].condition.temp, Mode=OneWay,UpdateSourceTrigger=Default, Converter=StaticResource TemperatureConverter1" VerticalAlignment="Center" FontSize="50" /> <TextBlock Grid.Row="1" Grid.Column="1" HorizontalAlignment="Left" Text="High" VerticalAlignment="Center" FontSize="24" Margin="10,0,10,0" /> <TextBlock Grid.Row="1" Grid.Column="2" HorizontalAlignment="Left" Text="Binding Forecast.channel[0].item[0].forecast[0].high, Mode=OneWay,UpdateSourceTrigger=Default, Converter=StaticResource TemperatureConverter1" VerticalAlignment="Center" FontSize="24" /> <TextBlock Grid.Row="0" Grid.Column="1" HorizontalAlignment="Left" Text="Low" VerticalAlignment="Center" FontSize="24" Margin="10,0,10,0" /> <TextBlock Grid.Row="0" Grid.Column="2" HorizontalAlignment="Left" Text="Binding Forecast.channel[0].item[0].forecast[0].low, Mode=OneWay,UpdateSourceTrigger=Default, Converter=StaticResource TemperatureConverter1" VerticalAlignment="Center" FontSize="24" /> </Grid> <TextBlock Grid.Row="4" HorizontalAlignment="Center" Text="Updated at" VerticalAlignment="Center" /> <TextBlock Grid.Row="5" HorizontalAlignment="Center" Text="Binding Forecast.channel[0].item[0].condition.date, Mode=OneWay,UpdateSourceTrigger=Default" VerticalAlignment="Center" /> </Grid> </controls:pivotitem>

27 Ora preleviamo le immagini da yahoo. Andaimo sul portale e vediamo se yahoo ha delle imagini da fornire alla nostra app di prova.

28 La pagina visualizzata riporta l icona Tramite il Tool dev di Internet Explore punto la url dell icona: L icona si trova qui: Dalla documentazione delle API sappiamo che i codici vanno da 0 a 48, quindi presupponiamo che ci siano 49 png da scaricare e includere nella nostra App. Piuttosto che scaricarle manualmente, scriviamo una piccola applicazione console in un progetto console a parte e inserimao il seguente codice nel main. Fate attenzione ad predisporre la cartella di destinazione. static void Main(string[] args) WebClient c = new WebClient(); for (int i = 0; i <= 48; i++)

29 using (System.IO.FileStream fs = System.IO.File.OpenWrite(@"C:\Pictures\WeatherYH\"+i.ToString()+".png")) using (System.IO.Stream s = c.openread(" + i.tostring() + "n.png")) s.copyto(fs); fs.flush(); fs.close(); Eseguitelo e troverete tutte e 49 le immagini nella cartella che avete prevetivamente creato. Ora inseritele nel progetto sotto la cartella Images, ricompilate e avviate l applicaizone sull emulatore. Dovreste avere il seguente risultato.

30