Tutorial Windows Phone 7.

HoL
Vamos a crear una aplicacin sencilla de representacin de datos. Veremos lo fcil que nos va a resultar realizar la primera versin mientras que el aspecto de la aplicacin va a resultar profesional desde el primer momento. Una caracterstica comn de las aplicaciones WP7.

Plantillas de proyecto para WP7

Cuando creamos una aplicacin en Silverlight para Windows Phone 7 tenemos varias proyectos base donde elegir: 1. Aplicacin Windows Phone: nos da una pantalla con un ttulo donde podemos empezar a crear nuestra aplicacin desde cero. Aunque sea la primera opcin que tenemos es la ms cruda de todas, yo recomiendo no empezar por aqu. 2. Una aplicacin conectada a datos: en este caso nos proporcionan dos pantallas, una principal y otra de detalle. Es conectada a datos al modo de WP7, es decir, no esperis un sql compact o algo parecido, WP7 est pensado para consumir datos de la nube, as que los datos se obtendrn inicialmente a travs de la conexin de red. 3. Un Panorama: que nos permite crear una aplicacin que ocupa una regin ms grande que la pantalla con una imagen de fondo comn. Es el proyecto ms vistoso de todos y el que se suele usar de base para casi todas las aplicaciones bsicas del WP7: contactos, imgenes, Marketplace, etc . 4. Un Pivot: la versin WP7 de lo que sera una pgina con tabs, se usa por ejemplo para el cliente de correo o para las pantallas de configuracin.

La aplicacin
El objetivo es crear una aplicacin que nos d una vista de noticias, artculos y vdeos recientes, tal como sera para un canal de noticias cualquiera. Para este ejemplo vamos a usar las fuentes RSS que hay en MSDN Espaa.

Ejercicio 1: Creacin de la aplicacin y las clases necesarias

Tarea 1: Crear la aplicacin

Para ello vamos a crear una aplicacin tipo Panorama, pues es la ms adecuada ya que nos da un patrn de diferentes vistas conectadas a una fuente de datos. Vamos a empezar creando un nuevo proyecto del tipo Windows Phone Panorama Application . Para ello abrimos el Visual Studio 2010: Inicio -> Todos los programas -> Microsoft Visual Studio 2010;

Una ve abie c ic s bre File -> Ne -> Projec Seleccionamos Windows Phone Panorama Application y le damos el nombre de analDeVideos

La plantilla nos crear un proyecto con datos de ejemplo para que veamos en la lista de dise o c mo quedar la aplicacin. Estos datos estn almacenados en el archivo MainViewModelSampleData.xaml que se encuentra en la carpeta SampleData El esquema de . los datos est de inido en la clase ItemViewModel dentro de la carpeta ViewModelsdonde tambin tenemos el MainViewModel, que esla coleccin de datos que vamos a mostrar cuando el programa se ejecute. Dentro del proyecto que nos crea la plantilla Panorama tenemos ejemplos de cmo representar los datos, la manera ms sencilla: una Listbox que enlazaremos a la coleccin de datos que tenemos en el ViewModel.
 

Tar a 2: Cr ar las clasesElementoEntradaVideo y ElementoEntradaRss

Para nuestroaplicacin vamos a eliminarItemViewModel generado, pues vamos a crear nuestras propias clases para representar las fuentes RSS y borraremos el contenido de MainViewModel, donde luego escribiremos el cdigo para recuperar los datos. Las fuentes de datos que vamos a utilizar son fuentes disponibles pblicamente. Son las mismas que podemos usar desde cualquier lector de feeds o como fuente de datos para nuestros mashups. Para el ejemplo, como ya hemoscomentado antes, usaremos las fuentes de MSDN Espaa, una de v deos y otras dos de texto:


El canal de vdeos de MSDN Espaa en Channel 9: http://channel9.msdn.com/Blogs/channel9spain/RSS El canal de noticias: http://www.microsoft.com/spain/msdn/rss/noticias.xml El canal de artculos: http://www.microsoft.com/spain/msdn/rss/articulos.xml

Para poder utilizar el contenido de las fuentes necesitaremos abrir una conexin web, leer el contenido xml del feed y rellenar una lista que nos sirva de fuente para la Listbox. 1. Botn derecho sobre ItemViewModel.cs y seleccionamos Delete. Nota: Ahora nos aparecen errores. No hay que preocuparse por ellos, ya los solucionaremos ms adelante. 2. Botn derecho sobre la carpeta ViewModels y seleccionamos Add->Class 3. Le damos el nombre de ElementoEntradaVideo.cs y seleccionamos Add. 4. A continuacin aadimos lareferencia a System.Xml.Linq: a. Botn derecho sobre References, clic sobre Add Reference y seleccionamos System.Xml.Linq 5. Aadimos los siguientes namespaces:
usingSystem.Collections.Generic; usingSystem.Xml; usingSystem.Xml.Linq; usingSystem.Linq;

6. Dentro de la clase ElementoEntradaVideo aadimos el siguiente cdigo, en el cual, mediante el uso de LinqtoXml (fuera del objetivo de este tutorial) accedemos al contenido de los videos que tenemos en el servidor mrss y los guardamos en la lista elementos.
///<summary> ///Namespace usado para el "media:" ///</summary> publicstaticXNamespace Media = "http://search.yahoo.com/mrss/" ; publicstring publicstring publicstring publicstring Title { get; set; } Video { get; set; } Description { get; set; } Thumbnail { get; set; }

publicstaticList<ElementoEntradaVideo>GetElements(string response) { List<ElementoEntradaVideo>elementos = newList<ElementoEntradaVideo>(); varrssFeed= XElement.Parse(response); var channel=rssFeed.Descendants( "channel"); elementos = (from item inchannel.Elements("item") selectnewElementoEntradaVideo

{ Title = item.Element("title").Value, Description = item.Element( "description").Value, Video = item.Element("enclosure") == null ? null :item.Element("enclosure").Attribute("url").Value, Thumbnail = (from thumb initem.Descendants(Media + "thumbnail") orderbyint.Parse(thumb.Attribute("width").Value) selectthumb.Attribute("url").Value).FirstOrDefault() }).ToList(); return elementos; }

7. Siguiendo la misma filosofa que en la clase ElementoEntradaVideo, creamos la clase ElementoEntradaRss. El cdigo que hay que insertar en la clase es el siguiente:

publicclassElementoEntradaRss { publicstringGuid { get; set; } publicstring Title { get; set; } publicstring Link { get; set; } publicstring Description { get; set; } publicstringPubDate { get; set; } publicstaticList<ElementoEntradaRss>GetElements(string response) { varrssFeed = XElement.Parse(response); var channel = rssFeed.Descendants( "channel"); varelementos = (from item inchannel.Elements("item") selectnewElementoEntradaRss { Guid = item.Element("guid").Value, Title = item.Element("title").Value, Link = item.Element("link").Value, "description").Value, Description = item.Element( PubDate = item.Element("pubDate").Value }); returnelementos.ToList(); } }

8. Para que funcione hay que aadir los siguientes namespaces:

usingSystem.Xml.Linq; usingSystem.Collections.Generic; usingSystem.Linq;

Tarea 3: Modificar el archivo MainViewModel 1. Antes de poder modificar la clase MainViewModel vamos a generar una nueva clase ViewModelBase, de la cual la clase MainViewModelhereder sus caractersticas. 2. Creamos una nueva carpeta en el proyecto de nombre Base.

3. Aadimos una clase llamada ViewModelBase y le introducimos el siguiente cdigo en la clase generada:
usingSystem.Diagnostics; usingSystem.ComponentModel;

publicclassViewModelBase : INotifyPropertyChanged { publiceventPropertyChangedEventHandler PropertyChanged; protectedvoidRaisePropertyChanged(stringpropertyName) { if (PropertyChanged != null) PropertyChanged(this, newPropertyChangedEventArgs (propertyName)); } }

4. En la clase MainViewModel hay que borrar todo el contenido y substituirlo por el siguiente cdigo, que crea tres colecciones del tipo ObservableCollection donde ubicaremos los datos a mostrar:
publicclassMainViewModel : ViewModelBase { publicconststring _spain = "http://channel9.msdn.com/Blogs/channel9spain/RSS" ; publicconststring _noticiasLink = "http://www.microsoft.com/spain/msdn/rss/noticias.xml" ; publicconststring _articulosLink = "http://www.microsoft.com/spain/msdn/rss/articulos.xml" ;

publicMainViewModel() { Videos = newObservableCollection<ElementoEntradaVideo>(); Noticias = newObservableCollection<ElementoEntradaRss>(); Articulos = newObservableCollection<ElementoEntradaRss>(); } publicObservableCollection<ElementoEntradaVideo> Videos { get; privateset; } publicObservableCollection<ElementoEntradaRss>Noticias { get; privateset; } publicObservableCollection<ElementoEntradaRss>Articulos { get; privateset; }

publicvoidLoadData() { fillVideos(_spain); fillRss(_articulosLink, Articulos); fillRss(_noticiasLink, Noticias); } privatevoidfillVideos(stringrssUrl) { WebClient client = newWebClient(); client.DownloadStringCompleted += (x, e) => { if (e.Error == null) { List<ElementoEntradaVideo> elements = ElementoEntradaVideo.GetElements(e.Result); this.Videos.Add(element)); elements.ForEach((element) => } }; client.DownloadStringAsync( newUri(rssUrl)); } privatevoidfillRss(stringrssUrl, ObservableCollection<ElementoEntradaRss> collection) { WebClient client = newWebClient(); client.DownloadStringCompleted += (x, e) => { if (e.Error == null) { List<ElementoEntradaRss> elements = ElementoEntradaRss.GetElements(e.Result); elements.ForEach((element) =>collection.Add(element)); } }; client.DownloadStringAsync( newUri(rssUrl)); } }

5. Para poder usar las clases de WebClient debemos usar el namespace de System.Net. 6. Para poder usar las clases creadas en la tarea anterior hay que usar el namespaceCanaldeVideos.Base, que nos aade la clase ViewModelBase. 7. Finalmente, para poder usar las colecciones hay que aadir el namespaceSystem.Collections. 8. As, en el cdigo hay que aadir el siguiente cdigo:
using System.Net; usingCanalDeVideos.Base; usingSystem.Collections;

9. El ltimo paso es modificar el namespace que hay por CanalDeVideos.ViewModels 10. Dentro del cdigo, aparte de crear las tres colecciones creamos dos mtodos para rellenar las colecciones, un mtodo para rellenar los elementos tipo video y otro para los elementos del Rss (artculos y noticias). Estos mtodos utilizan el mtodo de la clase WebClient llamado DownloadStringAsync que ejecuta una llamada asncrona al 6

servidor de la fuente rss y luego se sincroniza con el UI en el mtodo DownloadStringCompleted.

Tarea 4: Modificar el MainPage.xaml.cs 1. Esta ltima tarea (en cuanto a funcionalidad se refiere) consiste en hacer la llamada correcta al modelo de datos creado anteriormente. 2. Antes de modificar el MainPage.xaml.cs hay que ir al archivo App.xaml.cs e incluir el namespaceCanaldDeVideos.ViewModels en el archivo.
usingCanalDeVideos.ViewModels;

3. A continuacin comentamos la lnea de comprobacin de carga de datos, ya que no disponemos de este mtodo. //if(!App.ViewModel.IsDataLoaded) 4. Una vez modificado el App.xaml.cs abrimos al archivo MainPage.xaml.cs 5. Dentro del archivo substituimos el cdigo existente por el siguiente:
// Constructor publicMainPage() { InitializeComponent(); // Set the data context of the listbox control to the sample data DataContext = App.ViewModel; this.Loaded += newRoutedEventHandler(MainPage_Loaded); } // Load data for the ViewModel Items privatevoidMainPage_Loaded(object sender, RoutedEventArgs e) { App.ViewModel.LoadData(); }

Ejercicio 2: Diseo de la UI
Tarea 1: Rellenar el fichero de datos 1. Abrimos el fichero MainViewModelSampleData.xaml. 2. Cambiamos el contenido del cdigo por el siguiente:
<local:MainViewModel xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:CanalDeVideos.ViewModels"> <local:MainViewModel.Videos> <local:ElementoEntradaVideoTitle="Ttulo <local:ElementoEntradaVideoTitle="Ttulo <local:ElementoEntradaVideoTitle="Ttulo <local:ElementoEntradaVideoTitle="Ttulo <local:ElementoEntradaVideoTitle="Ttulo <local:ElementoEntradaVideoTitle="Ttulo

1"/> 2"/> 3"/> 4"/> 5"/> 6"/>

</local:MainViewModel.Videos> <local:MainViewModel.Noticias> <local:ElementoEntradaRssGuid="1"Title="Ttulo ttulo 1"PubDate ="1/1/2010 14:04:05"/> <local:ElementoEntradaRssGuid="2"Title="Ttulo ttulo 1"PubDate ="1/1/2010 14:04:05"/> <local:ElementoEntradaRssGuid="3"Title="Ttulo ttulo 1"PubDate ="1/1/2010 14:04:05"/> </local:MainViewModel.Noticias> <local:MainViewModel.Articulos> <local:ElementoEntradaRssGuid="1"Title="Ttulo ttulo 1"PubDate ="1/1/2010 14:04:05"/> <local:ElementoEntradaRssGuid="2"Title="Ttulo ttulo 2"PubDate ="1/1/2010 14:04:05"/> <local:ElementoEntradaRssGuid="3"Title="Ttulo ttulo 3"PubDate ="1/1/2010 14:04:05"/> </local:MainViewModel.Articulos > </local:MainViewModel>

1"Description="Descripcin del 2"Description="Descripcin del 3"Description="Descripcin del

1"Description="Descripcin del 2"Description="Descripcin del 3"Description="Descripcin del

3. Ahora hacemos doble clic sobre el archivo MainPage.Xaml y en la parte del designer debemos ver la siguiente imagen

Nota: En el caso de que tengamos warnings al substituir el cdigo clicamos sobre el proyecto con el botn derecho y seleccionamos RebuildAll. 8

4. El siguiente paso es crear los 3 tems que vamos a tener en el Panorama: Videos, Artculos y Noticias. 5. Para crear el tem de los videos introducimos el siguiente cdigo:
<!--Panorama item one--> <controls:PanoramaItem Header="Vdeos"> <ListBox Margin="0,0,-12,0"ItemsSource="{Binding Videos}" > <ListBox.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal" Margin="0,0,0,17"> <Image Height="100" Width="100" Source="{Binding Thumbnail}" Margin="12,0,9,0"/> <StackPanel Width="311"> <TextBlock Text="{Binding Title}"TextWrapping="Wrap" Style="{StaticResource PhoneTextTitle3Style}"/> </StackPanel> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> </controls:PanoramaItem>

6. Podemos ver que dentro del PanoramaItem disponemos de una ListBox con la propiedad ItemSource enlazada a la lista llamada Videos creada previamente. Dentro de la listbox modificamos el DataTemplate para poner la imagen y el ttulo de manera que nos queda una lista bonita que incluye un fotograma y un ttulo por entrada. El control ListBox se encargar de repetir el patrn, hacer scroll de los elementos y de la interaccin con el usuario. 7. En el caso de los PanoramaItem de Artculos y Noticias es bastante parecido. As, el cdigo a introducir para crearlos es el siguiente:
<!--Panorama item two--> <controls:PanoramaItem Header="Artculos"> <ListBox Margin="0,0,-12,0"ItemsSource="{BindingArticulos}" > <ListBox.ItemTemplate> <DataTemplate> <StackPanel Margin="0,0,0,17"> <TextBlock Text="{Binding Title}" TextWrapping="Wrap" Style="{StaticResource PhoneTextTitle2Style}"/> <TextBlock Text="{BindingPubDate}"/> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> </controls:PanoramaItem> <controls:PanoramaItem Header="Noticias"> <!--Double line list with text wrapping --> <ListBox Margin="0,0,-12,0" ItemsSource="{BindingNoticias}"> <ListBox.ItemTemplate> <DataTemplate>

<StackPanel Margin="0,0,0,17"> <TextBlock Text="{Binding Title}" TextWrapping="Wrap" Style="{StaticResource PhoneTextTitle2Style}"/> <TextBlock Text="{BindingPubDate}"/> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> </controls:PanoramaItem>

Tarea 2: Ejecutar el cdigo 1. Al haber implementado la funcionalidad en las clases y haber realizado el diseo ya podemos ejecutar el cdigo y ver el resultado. 2. Donde pone Windows Phone 7 Device, hay que modificarlo por Windows Phone7 Emulator 3. Ahora, dentro de la pestaa Debug, seleccionamos StartDebugging (o apretamos F5).

Ejercicio 3: Visualizacin de los datos

El ltimo paso es que, cuando seleccionamos uno de los tems del ListBox poder visualizarlo correctamente. 10

1. Abrimos el archivo MainPage.xaml y dentro de la definicin de ListBox del PanoramaItem Videos aadimos la siguiente propiedad:
<ListBox Margin="0,0,-12,0"ItemsSource="{Binding Videos}" SelectionChanged="ListBox_SelectionChanged">

2. Esta propiedad nos enlaza con un mtodo que debemos crear en codebehind. 3. Para ello clicamos con el botn derecho sobre ListBox_SelectionChanged e introducimos el siguiente cdigo sobre el mtodo generado:

if (e.AddedItems.Count> 0) { ElementoEntradaVideo element = e.AddedItems[0] asElementoEntradaVideo; if (element != null) { newMediaPlayerLauncher { Media = newUri(element.Video), Controls = MediaPlaybackControls.All }.Show(); } }

4. Para poder utilizar la clase MediaPlayerLauncher debemos incorporar el siguiente namespace:

usingMicrosoft.Phone.Tasks;

5. Gracias a este mtodo podremos reproducir el vdeo seleccionado 6. Debemos hacer lo mismo para el PanoramaItem de Artculos y de Noticias, pero en este caso debemos lanzar el navegador. As, en el xaml debemos aadir en ambos PanoramItem la siguiente propiedad:
// Para el item de los artculos <ListBox Margin="0,0,-12,0"ItemsSource="{BindingArticulos}" SelectionChanged="ListBox_SelectionChanged_1"> //Para el item de lasNoticias <ListBox Margin="0,0,-12,0" ItemsSource="{BindingNoticias}" SelectionChanged="ListBox_SelectionChanged_1">

7. Creamos el mtodo ListBox_SelectionChanged_1 al igual que hemos creado el anterior e introducimos el siguiente cdigo que nos lanzar el navegador:

if (e.AddedItems.Count> 0) { ElementoEntradaRss element = e.AddedItems[0] asElementoEntradaRss; if (element != null) { newWebBrowserTask

11

{ URL = element.Link }.Show(); } }

Tarea 2: Ejecutar la aplicacin 1. En la pestaa Debug seleccionamos StartDebugging (o clic sobre F5) 2. Comprobamos que se lanza el reproductor de video (no se ve, pero se escucha) cuando seleccionamos una entrada de vdeo y que el navegador funciona correctamente cuando seleccionamos un artculo o noticia.

Conclusiones
En este tutorial hemos aprendido cmo empezar una aplicacin para WP7 usando el control Panorama, nos hemos introducido en el patrn MVVM que suelen usar las aplicaciones de datos en Silverlight, hemos consumido datos de fuentes rss y hemos abierto vdeos y enlaces usando las tareas de Windows Phone.

12