Tile Update: Desarrollo para Windows 8


Una característica importante en nuestras Apps para Windows 8 es la actualización del Tile de la aplicación, de esta forma podemos mostrar información relevante sobre el estado de la misma o contenido diverso que deseamos se muestre sin necesidad de ingresar a la App y desde luego, que cada cierto tiempo se actualice.

Un ejemplo de esta característica  es el juego JetPack Joyride, en cuyo Tile podemos observar las Misiones que actualmente tenemos disponibles, nuestro mayor Puntaje y el Cash que hemos acumulado durante el juego.



Desarrollo

Lo ideal es que el Tile de nuestra App se actualice con cierta frecuencia de tiempo, pero también cuando se abra o reanude la App, de esta forma es importante ubicar el código en el default.js y declarar todas las variables en el inicio. Desde luego, esto es solo un consejo, ya que lo podemos realizar en el .ready() en un App de tipo Navigation o en el processAll() de un App normal.

1.) Primero declaramos un objeto tipo Notifications, que encapsula elementos tales como Tiles y Badge Notifications y con el cual definiremos tiempos de actualización y demás elementos para hacer funcionar esta característica.

var notificaciones = Windows.UI.Notifications;

2.) Debemos definir la URL donde está alojado nuestro XML. Este XML tendrá una Plantilla definida y un contenido que se mostrará en el Tile. Es importante tener en cuenta cuales son las Plantillas disponibles y como usarlas, aquí está el Catalogo oficial y un pequeño tutorial de como usar estas Plantillas.

var UrlXML = new Windows.Foundation.Uri("http://dl.dropbox.com/u/16073407/Tile.xml");

En este ejemplo usamos Dropbox, podemos usar cualquier servicio de hosting, siempre y cuando podamos tener disponible una URL publica y cuya extensión sea la del archivo (.xml). En Dropbox, subimos el archivo en una carpeta Publica, y seleccionamos la opción: Copiar Vinculo Publico.


Descargar XML del Ejemplo

3.) Posteriormente definimos el tiempo de Actualización del Tile.

var tiempoActualizacion = notificaciones.PeriodicUpdateRecurrence.halfHour;

Esta frecuencia de actualización puede ser:

HalfHour | halfHour
0
Poll every half an hour.
Hour | hour
1
Poll every hour.
SixHours | sixHours
2
Poll every 6 hours.
TwelveHours | twelveHours
3
Poll every 12 hours.
Daily | daily
4
Poll once a day.


4.) Por ultimo debemos crear el tileUpdater encargado de administrar el tiempo de actualización (definido anteriormente en la variable tiempoActualizacion ) y obtener el nuevo contenido del Tile desde el XML proveído en la URL (definido en la variable UrlXML)

var tileUpdater = notificaciones.TileUpdateManager.createTileUpdaterForApplication();
tileUpdater.startPeriodicUpdate(UrlXML, tiempoActualizacion);

Eso es todo en cuanto a la actualización de un Tile con un XML almacenado en la Nube, sin embargo el dinamismo lo debe proveer el XML, por lo tanto si tenemos un XML estático, cada actualización se haría del mismo contenido y no tendría mucho sentido hacer un Request y obtener los mismos datos siempre.

Por esta razón, lo mejor es que el XML se cree dinámicamente a través de un lenguaje del lado del Servidor (Como PHP, .NET o JAVA) y que por cada Request el contenido del XML cambie. En un posterior tutorial les mostraré como hacerlo con PHP.

Por lo pronto les dejo un esquema de como sería la arquitectura haciendo uso de un XML dinámico.

Un saludo

Código completo


//--------------------Tile Update-----------------------//

    var notificaciones = Windows.UI.Notifications;
    //URL donde está alojado nuestro XML.
    var UrlXML = new Windows.Foundation.Uri("http://dl.dropbox.com/u/16073407/Tile.xml");
    //Definimos el tiempo de Actualizacion del Tile. La frecuencia de actualizacion puede ser:
    //halfHour, hour, sixHours, twelveHours y daily
    var tiempoActualizacion = notificaciones.PeriodicUpdateRecurrence.halfHour;
    //Por ultimo creamos el tileUpdater encargado de administrar el tiempo de actualizacion y
    //obtener el nuevo contenido del Tile desde el XML proveído en la URL.
    var tileUpdater = notificaciones.TileUpdateManager.createTileUpdaterForApplication();
    tileUpdater.startPeriodicUpdate(UrlXML, tiempoActualizacion);

Proyecto

Peso: 224Kb
IDE: Visual Studio 2012
Fecha actualización: Febrero 23 de 2013
Autor: Anderson Rubio



Anderson Rubio

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.