Crear un aplicacion Twitter para Windows Phone 7 con Silverlight

El Lunes tuve la oportunidad de presentar el Mix 2010 en Las Vegas (podéis ver el video aquí). En la presentación anuncié la release candidate de Silverlight 4 (publicaremos la versión final a final de més) y las VS 2010 RC tool for Silverlight 4. También pude hablar por primera vez sobre cómo podemos usar Silverlight y XNA en aplicaciones para Windows Phone 7.

Durante la charla hice dos demos para Windows Phone 7 con Silverlight – un “Hola mundo” y una aplicación para twitter. Ambas aplicacioens son fáciles de crear y tan sólo se tarda unos minutos. Aquí tenéis los pasos que hay que seguir si queréis hacerlas vosotros mismos.

Crear el “Hola Mundo” para Windows Phone 7

Primero tenemos que tener instalaa el Windows Phone Developer Tools CTP – incluye Visual Studio 2010 Express para Windows Phone (que sera siempre gratuito y es lo único que necesitamos para crar aplicaciones para Windows Phone 7) así como el add-on para VS 2010 RC.

Después de descargar e instalar Windows Phone Developer Tools CTP, abrimos Visual Studio 2010 Express for Windows Phone o abrimos VS 2010 RC, nos vamos a “FileNew Project”. Veremos la lsita normal de plantillas de proyecto junto a una nueva categoría: “Silverlight for Windows Phone”. La primera CTP ofrece dos plantillas de proyecto. La primera “Windows Phone Application” – que es la que usaremos en este ejemplo. La segunda “Windows Phone List Application” – que ofrece un layout básico para aplicaciones Maestro-detalle:

Después de crear un nuevo proyecto, obtendremos una vista de diseño y del lenguaje de markup. Fijaos que la superficio de diseño muestra la interfaz del telefono, permitiéndonos ver fácilmente cómo será nuestra aplicación. Para aquellos que están familiarizados con Visual Studio, también encontraréis la barra de herramientas, el explorador de soluciones y la pestaña de propiedades:

Par anuestro Hola mundo, comenzaremos añadiendo un textbox y un button desde labarra de herramientas. Fijaos que tenemos la misma experiencia de diseño que con Silverlight en la web o en el escritorio. Podemos agrandar, cambiar la posición y alinear nuestro controles. Cambiaremos las propiedades name del textbox que hemos añadido a username y cambiaremos el texto a “Hello World”:

Ahora hacemos doble click en el buton y creamos el manejador de eventos en el archivo de código trasero (MainPage.xaml.cs):

Comenzaremos cambiando el texto del título de la aplicación. La plantilla del proyecto incluye este título como un TextBlock con el nombre textBlockListTitle(fijaos qe el nombre actual incluye incorrectamente la palabra “list”; lo corregiremos en la próxima versión). A medida que escribimos código tenemos el intellisense funcionado. Aquí estamos cambiando la propiedad Text del título a “Hello ” + lo que haya en la propiedad Text del textbox username:

Ya tenemos todo lo necesario para nuestra aplicación. TEnemos ahora dos opciones para desplegar y ejecutar la aplicación. Podemos seleccionar lanzar la aplicación sobre un dispositivo real o sobre el emulador que hay incorporado:

Como el emulador es el sistema operativo del dispositivo corriendo en una máquina virtual, tendremos la misma experiencia desarrollando tanto en el dispositivo como en el emulador. Para este ejemplo, pulsamos F5 para comenzar a depurar la aplicación en el emulador. Una ve zque se carga el sistema operativo, el emulador ejecutará la aplicación “Hello World” exactamente igual que en el dispositivo:

Fijáos que podemos cambiar muchas opciones del emulador con la barra de herramientas – que es una barra flotante arriba a la derecha. Incluye herramientas para redimensionar/zoom y dos botones de rotación. Zoom nos permite hacer zoom hasta en los detalles mas pequeños de la aplcación:

Los botones de orientación nos permite ver cómo se verá nuestra aplicación en la vista lateral (el soporte de esto está incluido en la plantilla del proyecto):

Fijáos que el emulador se puede reusar en varias sesiones de debugging – es decir, no tenemos que lanzar el emulador cada vez que queramos desplegar la aplicación. Hemos añadido un diálogo que nos evita cerrar el emulador accidentalmente si queremos reusarlo. Lanzar una aplicación en un emulador ya abierto tan sólo tarda 3 segundos en despleguar y ejecutar.

En nuestra aplcación hacemos clic en el textbox “username” para darle el foco. ESto hará que el panel de datos de entrada (SIP) se abra automáticamente. Podemos escribir un mensaje o escribir un texto. Fijaos que el emulador funciona con Windows 7 Multitouch, así que si tenéis una pantalla táctil, podéis ver cómo interacciona como si estuviese en un dispositivo real:

Escribimos “MIX 10” y hacemos clic en el botón – de esta manera actualizamos el título:

Damos la misma experiencia de Visual Studio cuando trabajamos con teléfonos como si fuese otra aplicación .NET cualquier. Es decir, podemos poner breakpoints en el event handler del botón, pulsar otra vez el boton e ir depurando paso a paso:

Crear una aplicación “Twitter” par aWindows Phone 7 con Silverlight

Más que parar y borrar “Hello World” vamos a ir cambiándola para que sea una aplicación cliente de Twitter.

Volvemos  ala superficio de diseño y añadimos un ListBox, usando las líneas del diseñador lo ajustamos al tamaño de la ventana del dispositivo y hacemos el mejor uso posible del tamaño de la ventana. TAmbién cambiamos el nombre del botón a “Lookup”:

Volvemos al event handler del botón en Main.xaml.cs, y eliminamos la linea que habíamos puesto en el ejemplo anterior y usamos la clase WebClient para descargar los feed de Twitter asíncronamente. ESto son unas tres lineas de código en total: (1) Declarar y crear el WebClient, (2) enlazar un manejador de eventos y (2) llamar al método asíncrono DownoladStringAsync.

En la llamada DownloadStringAsync, le pasaremos la uri de Twitter junto a una cadena que contendrá el nombre de usuario que escribamos en el textbox username. DE esta forma obtendremos el feed de twitter del usuario que hayamos escrito en formato xml. Cuando termina la llamada, se lanza el evento DownloadStringCompleted y se llamará anuestro método twitter_DownloadStringCompleted:

El resultado devuelto de la llamada a Twitter volverá en formato XML. Par parsearlo usaremos LINQ to XML. LINQ to XML nos permite crear conlustas simples para acceder a datos de un feed xml. Para usar la librearía, tenemos que añadir una refrencia al asemblY:

Añadimos el using “using System.Xml.Linq” en el codebehind de Main.xaml.cs:

Y ahor aañadimos una clase helper simle llamada Twitteritem a nuestro proyecto. TwitterItem tiene tres string -UserName, Message e ImageSource:

Ahora implementaremos el método twitter_DownloadStringCompleted y usaremos Linq to XML para parsear el xml que nos han devuelto. Lo que hace la consulta es obtener las tres piecas de información de cada post de twittter del usuario que pasamos como parámetro. EStos son la ImageSource de su imagen del perfil, El Message de su tweet y su UserName. Por cada tweet del xml, crearemos un nuevo TwitterItem en el IEnumerable<XElement> devuelto por la conulsta de LINQ.

Y Asignaremos esa secuencia de TwitterItem a al propiedad ItemsSource del ListBox:

Haremos un paso más para completar la aplicación. En el archivo Main.Xaml, añadiremos un ItemTemplate al ListBox. Para la Demo, he usado un template simñple que usa databinding par amostrar la imagen del usuari, su tweet y el nombre:

<ListBox Height="521" HorizonalAlignment="Left" Margin="0,131,0,0" VerticalAlignment="Top" Width="476">    <ListBox.ItemTemplate>
        <DataTemplate>
           <StackPanel Orientation="Horizontal" Height="132">
              <Image Source="{Binding ImageSource}" Height="73" Width="73" VerticalAlignment="Top" Margin="0,10,8,0"/>
              <StackPanel Width="370">
                 <TextBlock Text="{Binding UserName}" Foreground="#FFC8AB14" FontSize="28" />
                 <TextBlock Text="{Binding Message}" TextWrapping="Wrap" FontSize="24" />
              </StackPanel>
           </StackPanel>
        </DataTemplate>
     </ListBox.ItemTemplate></ListBox>

Ahora, pulsamos de nuevo F5, podemo usar el emuldor que ya teníamos arrancado. Una vez que se lanza la aplicación, escribimos el nombre d eun usuario de twitter y le damos al botón. Prueba con mi usuario (scottgu) y tenras el resultado de TwittterItems en el listbox:

Intenad usar el raton (o si tenéis una pantalla táctil usad el dedo) para navegar por los elementos del listbox – veréis que se mueven muy rápido en el emulador. ESto es devido a que el emulador está acelerado por hardware – y os da el mismo rendimiento que tendríais en un telfóno real.

Resúmen

Silverlight y la VS 2010 Tools for Windows Phone (y el correspondiente Expression Blend Tools for Windows Phone) hacen que crear aplicaciones para windows Phone sea realmente fácil y divertido.

En el MIX se han reunido un montón de granes partners (Netflix, FourSquare, Seesmic, Shazaam, Major League Soccer, Graphic.ly, Associated Press, Jackson Fish y más) mostrando sus protopipos que han creado en las últimas semanas. Podéis ver el primer día en video y verlos en acción. Creo que comenzaran a mostrar algunas de las promesas y potencias que Silverlight ofrece. Haré más post en estas semanas y meses sobre esto.

Espero que sirva.

Scott.

Traducido por: Juan María Laó Ramos

ARtículo original.