Windows Phone 7 Series.

Publicado en

Autor

Este verano Microsoft lanzó Windows Phone serie 7 (WP7), su nueva propuesta de plataforma para smart-phones. En la primera parte revisaremos algunos de los aspectos más relevantes de esta plataforma, y en la parte 2 que se encuentra en la siguiente página mostraremos un ejemplo de cómo desarrollar una aplicación sencilla.

Parte 1: Características de la plataforma

Interfaz de usuario

En términos de interfaz de usuario, WP7 introduce diversas innovaciones que hay que tener en cuenta en el diseño y desarrollo de aplicaciones. Entre ellas destacan:

  • Diseño Metro. La interface de usuario de WP7 está basada en un diseño bautizado como “Metro”, y que está inspirado en el tipo de íconos y colores utilizados en el transporte público. Con esto se busca lograr interfaces de usuario limpias y claras.
  • Hubs. Windows Phone 7 introduce el concepto denominado “Hubs”. Microsoft define un hub como “Una aplicación que da sentido a tu información y aplicaciones”. En lugar de tener aplicaciones independientes regadas por todo tu teléfono, los hubs brindan espacios que concentran información y aplicaciones relacionadas.
  • Controles Panorama y Pivot. El layout y navegación dentro de los hubs se basa en los nuevos controles Panorama y Pivot. Básicamente consiste en tener una imagen de background grande que rebasa el tamaño de la pantalla, y a lo largo de la imagen se van poniendo las diferentes secciones del hub, de forma que vas navegando horizontalmente a través de las secciones que están colocadas unas junto a otras. Esto brinda un estilo de uso más similar al de una revista que al de un teléfono. Ver Figura 1.


Figura 1. Ejemplo de un Hub con Panorama.

Hardware
Microsoft ha establecido los requerimientos de hardware mínimos que deben cumplir todos los aparatos que utilicen esta plataforma. En base a ello, los desarrolladores pueden darse idea de la capacidad mínima de los aparatos donde se ejecutarán sus aplicaciones.

  • Pantalla táctil con mínimo 4 puntos de contacto y resolución QVGA (800x480).
  • Sensores de luz, proximidad, acelerómetro, GPS asistido y brújula.
  • GPU con aceleración DirectX 9.
  • 256 MB de RAM y 8 GB de memoria flash.

Frameworks de desarrollo
Para desarrollar sobre la plataforma Windows Phone 7 series, contamos con dos opciones de framework: Silverlight y XNA. La elección depende principalmente de lo que planees crear, Silverlight típicamente es una mejor opción para crear aplicaciones mientras que XNA está orientado a la creación de juegos 2D y 3D.

Ventajas de Silverlight:

  • Framework basado en XAML y dirigido por eventos.
  • Acceso a controles de Windows Phone.
  • Navegador web HTML.
  • Reproducción de audio y video.

Ventajas de XNA:

  • Framework orientado a juegos.
  • Facilidad para crear juegos multipantalla en 2D o 3D.
  • Manejo de activos gráficos tales como modelos, sprites, texturas, o terrenos en el XNA Content Pipeline.

Aunque bases tu aplicación en uno u otro framework, es posible utilizar la mayoría de las clases del otro framework. Consulta la documentación de los frameworks para conocer los detalles de esto.

Parte 2: Desarrollo de una aplicación

Para familiarizarnos con el desarrollo en WP7 vamos a crear una aplicación de Silverlight sencilla: un buscador de tweets que estén relacionados con un tema en particular.

Ambiente y herramientas
Para comenzar, debemos descargar e instalar el paquete Windows Phone Developer Tools Beta, que nos permite desarrollar aplicaciones para WP7 usando Visual Studio 2010. Hecho esto, desde VS 2010 creamos un proyecto utilizando la plantilla para Windows Phone Application. La solución generada al utilizar la plantilla Windows Phone Application contiene un solo proyecto de Silverlight para Windows Phone –que tiene una estructura similar a la de una aplicación de Silverlight para web o desktop.

Al comenzar nuestro proyecto nos encontraremos con una vista dividida del diseño visual y el código como la que se puede apreciar en la figura 1.


Figura 1. Vista de diseño y código.

Los controles y el código
De la misma forma que sucede con las aplicaciones Silverlight para Windows, podemos agregar controles a nuestra aplicación seleccionándolos de la caja de herramientas y arrastrándolos hasta la vista de diseño. Este procedimiento genera el markup necesario en el archivo .xaml de la página principal.

Necesitamos un TextBox, al que llamaremos QueryStringTextBox; un Button que tenga como nombre btnSearchTwitter; y un ListBox que nombraremos lstSearchResults.

El XAML generado al agregar estos controles se aprecia en el listado 1.

<TextBox x:Name=”QueryStringTextbox” VerticalAlignment=”Center” Width=”300” />
<Button x:Name=”btnSearchTwitter” Content=”Get Tweets” VerticalAlignment=”Center” />
<ListBox x:Name=”lstSearchResults” Grid.Row=”1”>
</ListBox>

Listado 1. XAML generado por controles.

Nuestra vista de diseño se verá como en la figura 2. Ésta muestra los primeros dos controles tal y como se verán en el teléfono. Por ahora, el espacio para desplegar resultados se muestra vacío.


Figura 2. Vista de diseño con controles.

Eventos y comportamiento
Como podrán imaginarlo, nuestro botón btnSearchTwitter lanzará la orden de acción para la búsqueda, y para esto hace falta indicar el EventHandler que manipulará el clic. Para ello damos doble clic en el botón mostrado en la vista de diseño y esto genera el EventHandler btnSearchTwitter_Click. Haciendo referencia al API de Twitter agregamos el código que llamará al web service para obtener los tweets. Este código se aprecia en el listado 2.

private void btnSearchTwitter_Click(object sender, RoutedEventArgs e)
{
   string queryString = “http://search.twitter.com/search.atom?leng=en&q={0}&rpp={1}”;
   Uri searchQueryUri = new Uri(String.Format(queryString, this.QueryStringTextbox.Text, 10));
   WebClient searchTwitter = new WebClient();
   searchTwitter.DownloadStringCompleted +=
         new DownloadStringCompletedEventHandler( searchClient_DownloadStringCompleted);
   searchTwitter.DownloadStringAsync(searchQueryUri);
}

Listado 2. Obtención de tweets con el API de twitter.

Dado que esta invocación es asíncrona, es necesario definir el método que se encargará de recibir los resultados. Dicho método se apoyará en la librería LINQ to XML, para extraer la información que queremos mostrar al usuario y mapearla a objetos de la clase Tweet, que será nuestro modelo de datos y contará con dos propiedades públicas de tipo String: Título y Avatar.

void searchClient_DownloadStringCompleted(
              object sender, DownloadStringCompletedEventArgs e)
{
  XDocument xmlTweets = XDocument.Parse(e.Result.Replace(“xmlns=\”http://www.w3.org/2005/Atom\””, String.Empty));

  var tweets = from entry in xmlTweets.Descendants(“entry”)
    select new Tweet
    {
      Titulo = entry.Element(“title”).Value,
      Avatar = entry.Elements(“link”).ElementAt(1).Attribute(“href”).Value
    };

  this.lstSearchResults.ItemsSource = tweets;

}

Listado 3. Asignación de valores del objeto Tweet.

La última línea del método searchClient_DownloadStringCompleted crea una relación entre lstSearchResults y la colección de tweets. Para mostrar los resultados sólo resta completar la definición de lstSearchResults. Usando el ItemTemplate definimos la estructura que ha de usarse para desplegar cada tweet: una imagen –mapeada a la propiedad Avatar– y un texto –para el Título– organizados en un grid de dos columnas.

<ListBox x:Name=”lstSearchResults” Grid.Row=”1”>
  <ListBox.ItemTemplate>
    <DataTemplate>
      <Grid>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width=”Auto”/>
          <ColumnDefinition Width=”*”/>
        </Grid.ColumnDefinitions>
        <Image Source=”{Binding Avatar}” Grid.Column=”0” Margin=”5,0,10,0” Width=”75” Height=”75” />
        <TextBlock Text=”{Binding Titulo}” Grid.Column=”1”
                TextWrapping=”Wrap” VerticalAlignment=”Center”
                Style=”{StaticResource PhoneTextSmallStyle}” />
      </Grid>
    </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>

Listado 4. Definición del despliegue de resultados.

Compilación y ejecución
Compilamos como en cualquier otro proyecto de VisualStudio, con el comando Build Solution. Verificamos que Windows Phone 7 Emulator esté seleccionado como el objetivo para la ejecución y procedemos a correr la aplicación, con el comando Start Debugging o la tecla F5.

El emulador nos muestra, tal como lo previsualizamos en la vista de diseño, un cuadro de texto y un botón. Después de hacer una búsqueda podemos ver los resultados desplegados en una lista, mostrando la imagen y el texto de cada tweet relacionado con la palabra clave que utilizamos (ver figura 3).


Figura 3. Aplicación funcionando.

El ejemplo mostrado es sumamente sencillo y pretende explorar las herramientas que Microsoft brinda a la comunidad interesada en el desarrollo de aplicaciones para móviles. Sin duda, el enfoque que han adoptado va dirigido a facilitar el proceso de construcción de software para todas sus plataformas, y ahora con el Windows Phone 7 Series no se quedan atrás.

El código fuente utilizado en este artículo se encuentra disponible en http://www.denissezavala.com/blog/2010/07/wp7-examples

Referencias

  1. UI Design and Interaction Guide for Windows Phone 7
  2. Windows Phone for Developers
Bio

David Espino Trillo es Ingeniero en Sistemas Computacionales egresado del Instituto Tecnológico de Durango. Actualmente es programador de aplicaciones Web en Sieena Software utilizando tecnologías Microsoft. jdavidespino@gmail.com

Denisse E. Zavala Pantoja es Ingeniera en Tecnologías Computacionales por el Tecnológico de Monterrey, campus Morelia. Actualmente se desempeña como ingeniero de software en Sieena, donde se enfoca al desarrollo de aplicaciones Web basadas principalmente en tecnologías Microsoft. @DenisseZavala