Si hay algo que diferencie a Windows Phone del resto de sistemas operativos móviles, es su pantalla de inicio y sus live tiles (o baldosas activas). En Windows Phone 8 las tiles han sido mejoradas, añadiendo nuevos tamaños, una mayor personalización y mejores notificaciones. Algunas de estas mejoras se extienden a la pantalla de bloqueo, en la que ahora podemos mostrar notificaciones y personalizar con fondos. En este artículo veremos qué suponen estas mejoras para los desarrolladores y cómo sacar partido de ellas.
Live Tiles en Windows Phone 8
Las live tiles en Windows Phone proveen al usuario de información relevante de un vistazo. Del lado del desarrollador, las Notificaciones Push permiten a estos una manera sencilla de enviar información a sus aplicaciones, incluso si no están en ejecución. A partir de la versión 7.1 del SDK de Windows Phone, las Local Tiles APIs permiten a las aplicaciones crear y actualizar tiles localmente.
Las tiles son, básicamente, accesos directos a aplicaciones. Todas las aplicaciones tienen, al menos, una tile (siempre que el usuario decida anclarla a la pantalla Inicio). Además, las aplicaciones pueden crear tiles secundarias. Estas se crean programáticamente y son un acceso directo a partes concretas de la aplicación.
Las tiles pueden actualizarse o no. Las tiles dinámicas, las que se actualizan, pueden hacerlo de distintas formas:
- Por código en la aplicación
- A través de background agents
- A través de Notificaciones Push
En Windows Phone 8 podemos tener tres tamaños de tiles distintos.
Además, el SDK nos provee con tres plantillas de tiles:
- Flip: el tipo de tile clásico que gira sobre sí mismo para mostrar más información
- Iconic: tile de estilo limpio siguiendo los principios de diseño de Windows Phone
- Cycle: tile que va mostrando hasta un total de 9 imágenes de manera cíclica
El contenido de las tiles que debemos proveer dependerá de la plantilla que elijamos. En general, tenemos propiedades para el texto, el contador de notificaciones, y la imagen. No todos los elementos tienen que ser usados, ni todos están en todas las plantillas. Respecto a las imágenes, nos basta con proveer la del tamaño WXGA ya que el sistema operativo se encargará de escalar automáticamente estas imágenes para el resto de resoluciones.
Creando la Tile principal
La plantilla de proyecto estándar de Windows Phone provee imágenes de ejemplo para los distintos tipos de tiles. Debemos reemplazarlas con nuestras propias imágenes que representen a nuestra aplicación.
Podemos definir la tile principal en el manifiesto de la aplicación. Para ello, hacemos doble click en WMAppManifest.xml para abrir el editor del manifiesto. En la pestaña Application UI podemos modificar las imágenes de las tiles a nuestro gusto.
Creando y actualizando tiles con la Local Tile API
Como dijimos en la introducción del artículo, el SDK de Windows Phone 8 nos permite actualizar las tiles de nuestra aplicación de manera local (sin usar Notificaciones Push). Tenemos control absoluto de todas las propiedades tanto si nuestra aplicación está en primer plano como si no.
Podemos trabajar también con tiles secundarias: crearlas, actualizarlas o eliminarlas, y hacer que al pulsarlas nos conduzcan a una parte concreta de nuestra aplicación. Podemos tener tantas tiles secundarias como queramos. En el siguiente ejemplo veremos cómo crear una de estas tiles:
public static void SetTile(MyAppDataItem item, string navigationSource)
{
FlipTileData tileData = new FlipTileData()
{
// Front square data
Title = item.Title,
BackgroundImage = new Uri("ms-appx:///background.png", UriKind.Relative),
SmallBackgroundImage = new Uri("ms-appx:///smallbackground", UriKind.Relative),
// Back square data
BackTitle = item.Title,
BackContent = item.Lines,
BackBackgroundImage = new Uri("ms-appx:///background.png", UriKind.Relative),
// Wide tile data
WideBackgroundImage = new Uri("ms-appx:///widebackground", UriKind.Relative),
WideBackBackgroundImage = new Uri("ms-appx:///widebackbackground", UriKind.Relative),
WideBackContent = item.ExtraLines
};
// Create tile and pin it to Start
ShellTile.Create(new Uri("/SecondaryPage.xaml?DefaultTitle=FromTile", UriKind.Relative), tileData, true);
}
Para actualizar una tile de manera local, primero debemos encontrarla entre las tiles activas y luego llamar a su propio método Update:
public static void UpdateMainTile(MyAppDataItem item)
{
// Get application's main tile
var mainTile = ShellTile.ActiveTiles.FirstOrDefault();
if (mainTile != null)
{
IconicTileData iconicTileData = new IconicTileData()
{
// Update properties
};
mainTile.Update(iconicTileData);
}
}
Actualizando tiles con un Background Agent
En la primera versión de Windows Phone la única manera de actualizar las live tiles era o bien desde una actualización programada o usando Notificaciones Push. Esto suponía una trabajo bastante costoso ya que las imágenes debían de proveerse vía una web URI y, si usábamos Notificaciones Push, debíamos implementar nuestro propio servicio backend.
Para conseguir esto sin usar Notificaciones Push, los Background Agents nos son muy útiles. En el código del agent tendremos acceso a la API de ShellTile para encontrar y actualizar las tiles. El código para conseguir esto es idéntico al que hemos usado en el ejemplo anterior. Este código debemos ponerlo en el método Invoke del background agent.
Notificaciones en la pantalla de bloqueo
La pantalla de bloqueo ha sido mejorada enormemente en Windows Phone 8. El usuario ahora tiene la opción de elegir cualquier aplicación de terceros habilitada para mostrar datos en detalle (antes estaba reservado al Calendario). También se pueden elegir hasta 5 aplicaciones (incluidas las de terceros) para mostrar el icono y el número de notificaciones pendientes. Para que nuestra aplicación esté disponible en la pantalla de bloqueo, necesitamos hacer lo siguiente:
- Crear un icono para la pantalla de bloqueo:
El icono debe ser un PNG de 24 x 24 píxeles, blanco y con fondo transparente. Si lo nombramos LockIcon.png, no tendremos que declararlo explícitamente en el manifiesto.
- Actualizar el manifest de la aplicación:
Editar el archivo WMAppManifest.xml con el editor de XML (botón derecho y Open with…). Buscaremos la etiqueta <Extensions> (si no está, la crearemos justo después de la etiqueta <Tokens>). Dentro de <Extensions>, creamos un nuevo elemento <Extensión> por cada característica que queremos: el contador y/o el texto.
La información que se muestra en la pantalla de bloqueo sobre nuestra aplicación se toma de la tile principal, así que no debemos hacer trabajo extra para mostrar las notificaciones en la pantalla de bloqueo. Para probar estas notificaciones, podemos usar el Simulation Dashboard del emulador, el cual nos permite mostrar la pantalla de bloqueo.
Fondos en la pantalla de bloqueo
En Windows Phone 8 se añade la posibilidad de que las aplicaciones sean proveedoras de fondos de la pantalla de bloqueo. Para añadir esta capacidad en nuestras aplicaciones, debemos declararlo en el manifest y escribir el código que actualice el fondo.
La edición del manifest es muy similar a lo que vimos con las notificaciones en el anterior ejemplo. Simplemente añadiremos otro elemento <Extensión> de la siguiente forma:
El código que actualiza la imagen es simple. Primero pedimos permiso para ser el proveedor de fondos de la pantalla de bloqueo. Si el usuario da el permiso, añadimos la imagen:
public void SetLockHelper(Uri imageUri, string action)
{
// If your app is not the current provider, this call will prompt the user for permission.
var provider = LockScreenManager.RequestAccessAsync();
// Check that we were given permission.
bool isProvider = LockScreenManager.IsProvidedByCurrentApplication;
if (isProvider)
{
// If it is, set the new image.
LockScreen.SetImageUri(imageUri);
}
}
Recapitulando
En este artículo hemos visto las distintas opciones que podemos usar para notificar y mostrar información al usuario usando tiles y la pantalla de bloqueo. Además, hemos visto lo fácil que resulta personalizar el dispositivo del usuario convirtiéndonos en proveedores de fondos de pantalla. Estas características harán más útiles y atractivas nuestras aplicaciones, aumentando el número de usuarios potenciales.
Antares Lair 