Live Tiles en Windows Phone 8

http://www.dnmplus.net/

Josué Yeray Julián

Continuando con nuestro repaso a las principales novedades que nos ofrece Windows Phone 8 en el terreno del desarrollo, este mes le toca el turno a uno de los elementos centrales de la interfaz de usuario de Windows Phone: los Live Tiles.

Cuando apareció por primera vez Windows Phone, el elemento diferenciador con respecto al resto de las plataformas móviles fue su capacidad para personalizar y crear una pantalla de inicio “viva”. Gracias a las baldosas (tiles), las aplicaciones pueden darnos información, mostrar elementos gráficos o mensajes, sin tener que activarlas. En la versión 8.0 que tenemos actualmente, se ha llevado a un nuevo nivel esta característica. Múltiples modos en los tiles, tres tamaños diferentes y nuevas formas de actualizarlos nos darán una mayor libertad a la hora de implementarlos en nuestra solución. También veremos cómo integrar estos nuevos tiles en nuestras aplicaciones Windows Phone 7.X para que éstas hagan uso de ellos cuando se ejecuten en dispositivos que cuenten con Windows Phone 7.8 u 8.0.

¿Cómo eran los live tiles?

En Windows Phone 7.5, disponíamos de un tamaño único de tiles y de un efecto de rotación. Podíamos indicar el contenido de la parte delantera y trasera del tile, que era de tamaño cuadrado con unas dimensiones de 173x173 píxeles. Al indicar contenido en la parte trasera del tile, éste se animaba, rotando para mostrar una cara o la otra en intervalos de tiempo específicos.

Figura 1. Aspecto y partes de un live tile en Windows Phone 7.5

Como podemos observar en la figura 1, un live tile nos permitía definir ciertos datos en cada una de sus caras. En el frente podíamos definir un título, una imagen y un contador. Por su parte, la cara posterior nos permitía definir una imagen, un título y un contenido. Esto nos permitía crear tiles animados que mostrasen distinta información al usuario; pero, llegado un punto, todos los tiles realizaban la misma animación y mostraban información de una misma forma, con lo que la belleza de la interfaz se normalizaba y no resultaba fácil crear algo “espectacular”. Esto cambió radicalmente con la llegada de Windows Phone 7.8 y Windows Phone 8, donde pasamos, como veremos a continuación, de tener un solo tamaño y animación a poder combinar distintos tamaños y distintas animaciones para crear tiles únicos y que se adapten a nuestra aplicación como un guante.

¿Cómo son los live tiles?

En Windows Phone 7.8 y 8.0, los live tiles han crecido para convertirse en poderosas herramientas de comunicación con el usuario. Empezamos por los tamaños. De un único tamaño de 173x173 píxeles, pasamos a tres distintos: Small, de 159x159 píxeles; Medium, de 336x336 píxeles; y Large, de 691x336 píxeles. Si nos fijamos en los tamaños, todos son subdivisiones del tileLarge, como se puede ver en la figura 2. De esta forma, el usuario siempre puede escoger entre los tres tamaños y personalizar su interfaz de usuario como desee.

Figura 2. Nuevos tamaños de tiles

Además de los cambios en tamaño, también tenemos nuevas plantillas que definirán como se animan los tiles y qué información pueden mostrar. En concreto, tendremos tres plantillas entre las que escoger: Flip, Cycle e Iconic.

La plantilla Flip nos ofrece un comportamiento parecido al que teníamos en Windows Phone 7.5. En ella contaremos con dos partes donde definir el contenido del tile. En la primera parte, o cara frontal, podremos definir una imagen, un contador y un título. En la segunda parte, o cara trasera, podremos definir una imagen, un título y un contenido o descripción (figura 3). La plantilla está soportada en los tres tamaños de tiles disponibles. Sin embargo, en el tamaño Small, no mostrará la información de la cara trasera; solo lo hará en los tamaños Medium y Large.

Figura 3. Plantilla Flip

La plantilla Cycle crea un carrusel de imágenes, hasta un máximo de nueve. En los tamaños Medium y Large, irá rotando entre las imágenes para mostrarlas todas. Sin embargo, en el tamaño Small mostrará una sola imagen que le indiquemos como background. En todos los tamaños, la plantilla mostrará un contador y un título que le indiquemos. Para esta plantilla, cabe destacar que solo podremos indicar URL de imágenes locales, pero no de imágenes no remotas. Podríamos decir que esta plantilla está totalmente centrada en las imágenes, por lo que si nuestra aplicación trabaja con este tipo de datos, es recomendable que la utilicemos. Podemos ver un ejemplo en la figura 4.

Figura 4. Plantilla Cycle

La plantilla Iconic está pensada para mostrar información en formato texto. Esta información varía en función del tamaño del tile. En Small, muestra solo un icono, y un contador. En Medium, muestra además un título. Por último, en tamaño Large, además del icono, contador y título, se nos permite mostrar tres líneas de texto extras, una de ellas con un tamaño de letra mayor que actúa como título (figura 5). Además, esta plantilla es estática y no realiza ningún efecto de rotación o cambio como las anteriores que hemos visto.

Figura 5. Plantilla Iconic

Algo a tener en cuenta en la plantilla Iconic es que, como se puede apreciar en la figura 5, el icono mostrado es plano y totalmente blanco. El sistema se encargará de localizar el color de fondo de nuestra imagen y dejarlo tal cual esté, cambiando el resto de píxeles a color blanco para mostrarlo de esta forma plana.

Como podemos observar, hemos pasado de un tile básico, que nos permitía tener un tamaño y dos caras, a poder combinar tres plantillas muy diferentes entre sí, con tres tamaños para combinar. Lo mejor es que no seremos nosotros, sino el usuario, el que decida el tamaño. De esta forma, la personalización es mucho mayor.

Crear el live tile principal de nuestra aplicación

A la hora de trabajar con live tiles, podemos hacer una distinción entre el live tile principal de nuestra aplicación y otros live tiles que podemos crear, llamados live tiles secundarios.

Para definir las características del live tile principal, debemos editar el archivo WMAppManifest.xml que tenemos en nuestro proyecto Windows Phone 8. En la primera pestaña, Application UI, podremos definir ciertas características de cada plantilla, los tamaños de tile soportados (como mínimo debemos soportar Small y Medium, siendo el tamaño Large opcional) y la imagen o imágenes a mostrar (figura 6).

Figura 6. Configuración de la plantilla Cycle para nuestra aplicación

Pero puede ser que exista información que queramos actualizar según el usuario avance en nuestra aplicación, como el último artículo descargado, la puntuación de un juego o los nuevos mensajes pendientes de leer.

RECUADRO (EN EL TEXTO)

Es importante tener en cuenta que solo podremos actualizar la información del tile principal; en ningún caso podremos cambiar la plantilla que tiene asignada. Si lo intentamos, se producirá una excepción de tipo ArgumentException**.**

Para actualizar un tile, en concreto el tile principal, usaremos la clase ShellTile, definida en el espacio de nombres Microsoft.Phone.Shell. Esta clase contiene una colección llamada ActiveTiles, que siempre contendrá al menos un tile (el primero), que será el tile principal de nuestra aplicación, incluso si no lo hemos anclado a la pantalla de inicio. Para actualizarlo, lo primero que tenemos que hacer es obtenerlo. A continuación, crearemos una instancia de la clase que represente nuestra plantilla: IconicTileData, FlipTileData o CycleTileData. Todas ellas heredan de ShellTileData. Una vez que hayamos definido las propiedades de esta instancia, solo nos quedará actualizar nuestro ShellTile usando el método Update (listado 1).

ShellTile tile = ShellTile.ActiveTiles.First();

IconicTileData data = new IconicTileData();
data.IconImage = new Uri("/icon.png", UriKind.Relative);
data.Count = 85;
data.SmallIconImage = new Uri("/icon.png", UriKind.Relative);
data.WideContent1 = "This is a test";
data.WideContent2 = "Second line";
data.WideContent3 = "Third line";
tile.Update(data);

Live tiles secundarios

De la misma forma que actualizamos el live tile principal, podemos crear tiles secundarios. El proceso es muy parecido. En primer lugar, tenemos que comprobar si el tile ya existe en la colección ActiveTiles de la clase ShellTile. Si existe, podemos eliminarlo o actualizarlo.

RECUADRO (EN TEXTO)

Si intentásemos crear un tile duplicado, recibiríamos una excepción de tipo InvalidException.

ShellTile secondaryTile = ShellTile.ActiveTiles.Where(
    t => t.NavigationUri.OriginalString == "/MainPage.xaml").FirstOrDefault();

FlipTileData secondaryTileData = new FlipTileData();
secondaryTileData.BackgroundImage = new Uri("/icon.png", UriKind.Relative);
secondaryTileData.Count = 3;

if (secondaryTile == null)
{
    secondaryTileData.Title = "Created";
    ShellTile.Create(new Uri(@"/MainPage.xaml", UriKind.Relative), secondaryTileData, true);
}
else
{
    secondaryTileData.Title = "Updated";
    secondaryTile.Update(secondaryTileData);
}

Como se puede observar en el listado 2, lo primero que hacemos es consultar la colección ActiveTiles, buscando un tile que contenga la URI que vamos a asignar al nuestro. ¿Por qué la URI y no otra propiedad, como un identificador o incluso el título? Simplemente (y aunque pienso que no es la mejor opción), la propiedad NavigationUri es la única que tenemos disponible. Una vez que hemos obtenido el ShellTile (o null si no existe ninguno) podemos crear la instancia de la plantilla a usar y definir los valores comunes que usaremos (en este caso el BackgroundImage y el contador), tanto si vamos a actualizar como si deseamos crear uno nuevo.

RECUADRO (en texto)

Es importante saber que, en el caso de la actualización, todos los valores que no indiquemos explícitamente en la plantilla, se conservarán con su estado anterior. De esta forma podemos actualizar solo las propiedades que nos interesen en cada momento.

A continuación, realizamos una comprobación muy sencilla: si secondaryTile es null, ello significa que no existe ningún tile creado con esta URI y podemos crear el nuestro, llamando al método Create de la clase ShellTile. Este método tiene dos sobrecargas. La primera viene heredada de Windows Phone 7.5 y admite dos parámetros: la URI a la que navegará el tile cuando el usuario pulse sobre él y los datos del tile. La segunda, que usamos en este ejemplo, admite un tercer parámetro de tipo bool que nos permite indicar si soportamos o no tiles de tamaño Large.

RECUADRO (en texto)

Siempre que deseemos crear un tile usando las plantillas FlipTileData, IconicTileData o CycleTileData, debemos usar la segunda sobrecarga del método Create. La primera sobrecarga solo admite tiles de tipo StandardTileData, los usados en Windows Phone 7.5.

Si, por el contrario, nuestro tile ya existe, no usamos el método Create de ShellTile; en su lugar, al igual que ya hicimos con el tile principal de la aplicación, usamos el método Update del propio tile que hemos obtenido. También podríamos decidir, si existe el tile, eliminarlo para crear uno nuevo; para ello usaríamos el método Delete de nuestra instancia de ShellTile.

Bonus: Nuevos live tiles en aplicaciones Windows Phone 7.1

Como hemos visto, el uso de los nuevos live tiles en Windows Phone 8 es realmente sencillo y nos ofrece muchas opciones con las que jugar a la hora de personalizar los tiles de nuestra aplicación, tanto el principal como los secundarios. En nuestras aplicaciones Windows Phone 7.1, podemos acceder a esta funcionalidad e implementar los nuevos tipos y tamaños de tilessiempre y cuando nos estemos ejecutando en Windows Phone 8.0. Para ello, haremos uso de Reflection. También tendremos que actualizar manualmente algunas secciones del archivo WMAppManifest.xml de nuestra aplicación.

Los pasos son los siguientes:

• En primer lugar, vamos a editar el archivo WMAppManifest.xml. Justo antes del nodo App, añadiremos un nodo AppExtra, como se muestra en el listado 3.

• A continuación, debemos definir la plataforma a la que nos dirigimos (8.0) y comprobar que estamos en ella antes de intentar crear uno de los nuevos tiles (listado 4).

• Si efectivamente nos encontramos en Windows Phone 8 o superior, podremos empezar a usar Reflection para crear nuestro nuevo tile (listado 5).

  if (Environment.OSVersion.Version >= new Version(8, 0)) { // Create your tile here
  }

  if (Environment.OSVersion.Version >= new Version(8, 0)) { Type flipTileDataType = Type.GetType("Microsoft.Phone.Shell.FlipTileData, Microsoft.Phone");

  Type shellTileType = Type.GetType("Microsoft.Phone.Shell.ShellTile, Microsoft.Phone");
  
  var newTileData = flipTileDataType.GetConstructor(new Type[] { }).Invoke(null);
  
  SetProperty(newTileData, "Title", "New tile");
  SetProperty(newTileData, "Count", 66);
  SetProperty(newTileData, "BackTitle", "New tile back");
  SetProperty(newTileData, "BackContent", "Tile created using Reflection");
  SetProperty(newTileData, "WideBackContent", "Tile content for wide tile");
  
  shellTileType.GetMethod("Create", new Type[] { typeof(Uri), flipTileDataType, typeof(bool) })
      .Invoke(null, new Object[] 
      { 
          new Uri(@"/MainPage.xaml", UriKind.Relative),
          newTileData,
          true
      });
  

  }

Podemos analizar el código del listado 5 dividiéndolo en tres bloques:

• En primer lugar, las dos primeras líneas de código usan el método GetType de Type para obtener mediante Reflection el tipo que buscamos; en el primer caso, FlipTileData, y en el segundo caso ShellTile.
• En segundo lugar, usando el tipo flipTileDataType que hemos conseguido, invocamos a su constructor y obtenemos mediante reflexión una nueva instancia de FlipTileData, que asignamos a la variable newTileData. Lo siguiente entonces es establecer las propiedades esta instancia; para ello hemos creado un método SetProperty (listado 6) que nos simplifica el trabajo.
• En tercer y último lugar, usamos GetMethod para obtener una referencia al método estático Create de la clase ShellTile. En concreto, aquí utilizamos la sobrecarga que recibe tres parámetros. Por último, usamos el método Invoke para ejecutar el método. Como primer parámetro pasamos null, dado el hecho de que Create es un método estático y por tanto no requiere una instancia asociada. Como segundo parámetro, pasamos un array de objetos con los valores a enviar al método.

private static void SetProperty(object instance, string name, object value)
{
    var setMethod = instance.GetType().GetProperty(name).GetSetMethod();
    setMethod.Invoke(instance, new object[] { value });
}

Si ejecutamos este código en un dispositivo Windows Phone 8 o un emulador de esta misma versión del sistema operativo, y hemos colocado todo de forma correcta, podremos crear un live tile para nuestra aplicación Windows Phone 7.1 que se comporte igual que un tile de Windows Phone 8.

En todo caso, hay dos restricciones en este uso que debemos tener en cuenta:

• En primer lugar, para un tile secundario podremos usar cualquiera de las plantillas que hemos visto: Flip, Cycle e Iconic. Pero para un tile principal solo podremos usar una plantilla Flip. Lo contrario provocará una excepción.
• Por otra parte, la primera vez que creemos o actualicemos un tile, las imágenes que le asignemos deben ser locales. En siguientes actualizaciones, podemos usar imágenes locales o remotas; pero las primeras siempre deben ser locales.

Conclusión

En Windows Phone 8, los live tiles han evolucionado hasta convertirse en una herramienta muy potente de expresión y comunicación. Escogiendo la plantilla correcta, la que mejor se adapte a nuestra aplicación y a lo que deseamos transmitir al usuario en cada momento, podremos crear una experiencia de usuario increíble aún antes de que nuestra aplicación se abra.

Además de mostrar cómo utilizar las plantillas de live tiles disponibles en Windows Phone 8, hemos podido ver lo sencillo que es incluir estas novedades en nuestras aplicaciones Windows Phone 7.1 en caso de que no deseemos actualizarlas aún a Windows Phone 8, pero queramos ofrecer algunas de las ventajas del nuevo sistema.

| Página de inicio |Artículos Técnicos | Comunidad