Vista panorámica

En esta ocasión vamos a ver como podemos crear una de las cosas que distinguen a Windows Phone, los “panoramas”. Este concepto rompe con todo lo visto hasta ahora en lo que se refiere a móvil. Pero ¿qué es un panorama? Es una página que forma parte de otra más grande. Es como si miráramos a través de una ventana y pudiéramos ir pasando el paisaje.

panoramicaWP

Este estilo en el diseño, nos proporciona una interacción con el teléfono muy agradable, es como si pudiéramos navegar a través de un lienzo de forma indefinida, aunque no sea indefinida 🙂

En este caso, no vamos a tener que hacer nada, antiguamente esta funcionalidad con el SDK no venía incluida, pero al día de hoy ya hay una plantilla que nos ofrece esto mismo, aunque esta definida con dos columnas/páginas, pero podemos ampliarlas. Una vez que la incorporemos a nuestro Twitter mostraremos como hacerlo.

Lo único que tenemos que hacer a la hora de crear un proyecto es seleccionar “Windows Phone Panorama Application”.

PanoramaWP 

Si por algún motivo no dispusiéramos de esta plantilla podemos descargárnosla de aquí.

Creando un twitter para Windows Phone (El buscador de tweets)

Todo el mundo sabemos que es el momento de las redes sociales, que prácticamente todo lo que hay en internet está enlazado a ellas y sino, su difusión en la red es prácticamente nula. En estos últimos años ha habido un antes y un después en lo que se refiere a terminales móviles, ahora el 95% son táctiles y van asociados a ellos una tarifa obligatoria de datos, pero lo que diferencian más a unos y a otros es la obsesión por facilitar el acceso a las distintas redes sociales que hay en Internet (facebook, tuenti, linkedin, twitter, etc.)

Por eso, y para ver con que facilidad podemos crear nuestro propio lector de twitter, vamos a desarrollar uno para esta nueva tecnología, observaremos que con muy poco tiempo tendremos unos resultados bastante aceptables. Como el desarrollo en sí me parece un poco largo de explicar en un sólo artículo, lo voy a desglosar en varios, empezaremos por la parte más fácil, el buscador de tweets.

Una vez que tengamos nuestro proyecto creado lo primero que vamos hacer es añadir un TextBox (donde podremos colocar el identificador de la persona propietaria del twitter que queramos ver) y un Button para realizar la búsqueda. Y justo debajo añadiremos un ListBox (este control nos servirá para mostrar los diferentes tweets)

Twitter1

Una vez tengamos la configuración de nuestro esquema básico, vamos a empezar a añadir el comportamiento a los distintos controles. Empecemos por el Button “Buscar”

Necesitaremos crear un cliente web (WebClient) para poder descargar los twittes que vayan añadiendo los usuarios, necesitaremos también un controlador de eventos (DownloadStringCompleted, este tipo de evento se produce cuando finaliza una operación de descarga de recursos asíncrona, que es lo que nos interesa). Podéis ver todos los eventos disponibles de la clase WebClient, a través de la ayuda y sino en esta página. Por último, necesitamos un método que nos permita pasarle la dirección de la api de twitter para buscar al usuario, todos los métodos los podéis encontrar aquí. Nosotros concretamente nos quedaremos con (DownloadStringAsync, que cumple dicho cometido)

   1: private void twitter_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)

   2: {

   3:     throw new NotImplementedException();

   4: }

   5:  

   6: private void buscar_Click(object sender, RoutedEventArgs e)

   7: {

   8:     WebClient twitter = new WebClient();

   9:  

  10:     twitter.DownloadStringCompleted += new DownloadStringCompletedEventHandler(twitter_DownloadStringCompleted);

  11:     twitter.DownloadStringAsync(new Uri("http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=" + usuario.Text));

  12: }

Ahora si hemos leído la api de twitter, sabremos que el resultado de esa llamada devuelve un formato XML. Pero gracias a LINQ no tenemos ningún problema (LINQ to XML), nos permite hacer consultas para acceder a los datos del XML.

Vamos a añadir esta biblioteca, nos vamos al explorador de soluciones y añadimos una nueva referencia.

Twitter2XmlLinq

Ahora una vez que hayamos hecho esto, nos vamos a nuestro Main.xaml.cs y añadimos una nueva declaración en el espacio de nombres (using System.Xml.Ling;). Para facilitarnos las cosas añadiremos también una clase, si queremos en el mismo “cs” con las siguientes declaraciones.

   1: public class ElementosTweets

   2: {

   3:     public string Usuario { get; set; }

   4:     public string Mensaje { get; set; }

   5:     public string Imagen { get; set; }

   6: }

 

Volvemos al controlador de eventos que no llegamos a implementar (twitter_DownloadStringCompleted) y ahora lo que vamos hacer es extraer de la cadena XML devuelta por twitter las tres cosas que necesitamos, básicas, para mostrar un tweets (Imagen, Nombre y Mensaje)

   1: private void twitter_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)

   2: {

   3:     if (e.Error != null)

   4:     {

   5:         return;

   6:     }

   7:  

   8:     XElement xmlTweets = XElement.Parse(e.Result);

   9:  

  10:     listaTweets.ItemsSource = from tweet in xmlTweets.Descendants("status")

  11:                                select new ElementosTwitter

  12:                                {

  13:                                    Imagen = tweet.Element("user").Element("profile_image_url").Value,

  14:                                    Usuario = tweet.Element("user").Element("screen_name").Value,

  15:                                    Mensaje = tweet.Element("text").Value

  16:                                };

  17: }

 

Como último paso sólo nos queda añadir una línea al archivo MainPage.xaml

   1: <ListBox Height="523" HorizontalAlignment="Left" Margin="9,84,0,0" Name="listaTweets" VerticalAlignment="Top" Width="447" >

   2:     <ListBox.ItemTemplate>

   3:         <DataTemplate>

   4:             <StackPanel Orientation="Horizontal" Height="132">

   5:                 <Image Source="{Binding Imagen}" Height="73" Width="73" VerticalAlignment="Top" Margin="0,10,8,0"></Image>

   6:                 <StackPanel Width="370">

   7:                     <TextBlock Text="{Binding Usuario}" Foreground="#FFC8AB14" FontSize="28"></TextBlock>

   8:                     <TextBlock Text="{Binding Mensaje}" TextWrapping="Wrap" FontSize="24"></TextBlock>

   9:                 </StackPanel>

  10:             </StackPanel>

  11:         </DataTemplate>

  12:     </ListBox.ItemTemplate>

  13: </ListBox>

 

Código del ejemplo

Primer contacto con Windows Phone 7 en 5 minutos

Primero has de comprobar si dispones de las herramientas necesarias para empezar el desarrollo, puedes comprobarlo aquí, donde también hay un enlace para descargarte lo que hace falta.

Nuestra primera aplicación la haremos desde el Visual Studio, en sucesivos ejemplos mostraremos también como usar la herramienta Expression Blend. Para todo aquel que esté ya familiarizado con el entorno de desarrollo de Visual Studio, muchas de estas cosas, por no decir todo le será muy familiar.

Abrimos nuestro Visual Studio y creamos un nuevo proyecto (Archivo > Nuevo > Proyecto), en este caso “Windows Phone Application”. Seleccionamos el nombre que le queramos dar a nuestro proyecto y aceptamos.

ProyectoNuevoWPUna vez que tengamos creado nuestro proyecto, podremos diferenciar claramente tres partes: Una primera es donde podremos ir viendo el diseño de nuestra aplicación sobre el emulador del teléfono (esto resultará muy útil, para ir viendo como va quedando nuestra solución). Justo al lado tendremos el código XAML con el cuál iremos trabajando y a la derecha del todo, como es normal en todo proyecto con Visual Studio, encontramos el Explorador de Soluciones.

Lo primero que vamos hacer es personalizar un poco nuestra aplicación, vamos a cambiar el nombre de “MY APPLICATION” por el de “EJEMPLO1”, para ello lo único que tenemos que hacer es seleccionarlo y en las propiedades irnos a la que pone: Text (si no aparecieran las propiedades, podemos mostrarlas de varias formas: Botón derecho “Propiedades” o bien pulsando F4).

A continuación vamos a agregar dos controles, uno será un TextBox y el otro un Button, (es tan simple como arrastrar ambos controles a nuestro diseño del teléfono)

TextBox&ButtonPodemos observar que al arrastrar estos controles automáticamente en nuestro código XAML se añaden dos líneas que indican la definición de ambos controles. También podríamos haber definido manualmente estas líneas en vez de haber arrastrado los controles, pero en este caso no es necesario. Vamos a eliminar el contenido de la caja de texto ya que no nos interesa que tenga nada escrito, para ello nos vamos a la propiedad Text, al igual que antes y eliminamos su contenido.

Ahora por último, para terminar este ejemplo de “toma de contacto” vamos a darle una funcionalidad a nuestro botón. Para ello bastará con pulsar dos veces sobre él (como veréis todos los que estéis familiarizados con el Visual Studio y el desarrollo de aplicaciones Desktop, tiene la misma filosofía. Y para los que no, veréis que es muy intuitivo y rápido)

Lo único que haremos es que cuando pulsemos sobre el botón el contenido de nuestra Page Title cambiará a lo que previamente hayamos escrito en nuestro textBox, para ello sólo tenemos que añadir la siguiente línea:

   1: private void button1_Click(object sender, RoutedEventArgs e)

   2: {

   3:     PageTitle.Text = textBox1.Text;

   4: }

 

 

El resultado obtenido sería el siguiente, un ejemplo claro y conciso para tomar contacto con la herramienta y el entorno.

EjecucionEjemplo1