Archivo de la etiqueta: live tiles

Live Tiles en Metro II, Tiles secundarios y tamaño doble

En el artículo anterior se veía cómo personalizar el tile principal de nuestra aplicación para agregar contenido dinámico. Sin embargo, otra de las opciones que nos da Windows 8, al igual que Windows Phone 7, es la de crear accesos secundarios a nuestra aplicación. Además, en el caso de Metro para Windows 8 tenemos la posibilidad de usar un tile de tamaño doble, pudiendo así dar más información.

En este artículo se verá cómo usar un tile de tamaño doble para mostrar más información sobre la aplicación así cómo generar un tile secundario para nuestra aplicación.

Tiles secundarios

Un tile secundario proporciona la capacidad de agregar accesos a la pantalla de inicio que, al cargarlos, se dirijan a una sección concreta de nuestra aplicación (En el ejemplo iremos a un proyecto concreto). Al cargar la aplicación, es importante destacar que lo que se abrirá es una instancia nueva de la aplicación, es decir, el hecho de que el tile esté presente no implica que la aplicación esté ejecutándose en segundo plano.

El primer paso es agregar la referencia al espacio de nombres Windows.UI.StartScreen:

using Windows.UI.StartScreen;

Una vez agregada, se pasa a definir una variable de tipo SecondaryTile, que contendrá la siguiente información:

  • Título
  • Título secundario
  • Argumentos de activación (donde podemos poner argumentos adicionales, como la ruta de la nueva página)
  • Logo

Posteriormente se genera una solicitud de creación de tile, que deberá ser aprobada por el usuario.

//Se establecen los atributos de activación
Uri logo = new Uri("ms-resource:images/Logo.png");
string tileActivationArguments = "ArgumentosDeActivacion";

//Se genera el tile
SecondaryTile secondaryTile = new SecondaryTile(MainPage.tileId,
    "Acceso Secundario",
    "Un ejemplo práctico",
    tileActivationArguments,
    TileDisplayAttributes.ShowName,
    logo);

//Se solicita al usuario que autorice la creación del tile, es importante la funcion de la palabra reservada await.
await secondaryTile.RequestCreateAsync();

El código mostrado se puede usar en un botón para agregar un elemento concreto, lo que implicará que, al pulsarlo, obtengamos la siguiente imagen:

Ventana de autorización para el live tile

Finalmente, quedaría comprobar los argumentos por los cuales se carga la aplicación. Esto se realiza en el método OnLaunched situado en el fichero App.xaml.cs, que recibe los argumentos de la aplicación, lo que permite procesar la información mediante el valor args.Arguments, que contiene los valores que hemos especificado antes, el resto es historia :)

Tiles de tamaño doble

Una ventaja adicional de Metro para Windows 8 son las tiles de tamaño doble, que permiten disponer de un espacio más amplio para mostrar mensajes. Es importante detallar que aunque cree un tile de tamaño doble será el usuario quien decida si usar la vista ampliada o reducida.

Para poder agregar un tile de tamaño doble, primeramente es necesario agregar un icono de tamaño doble (310×150) ya que de otra manera el sistema no será capaz de procesarlo. Para ello es necesario acudir a nuestro siempre socorrido Package.appxmanifest y agregar una imagen en el apartado Wide Logo:

El código empleado es muy similar al visto en el anterior artículo, con la diferencia de que este actualiza un texto, y la plantilla seleccionada es diferente.

void ActualizarTileDoble(string text)
{
    // Se obtiene desde la plantilla el documento XML que contendrá el XML del icono
    XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText03);

    // Se edita el XML para agregar los datos deseados, en este caso será un atributo hijo que contendrá el texto
    XmlNodeList textElements = tileXml.GetElementsByTagName("text");
    textElements.Item(0).AppendChild(tileXml.CreateTextNode(text));

    // Se crea una notificación desde el XML editado
    TileNotification tile = new TileNotification(tileXml);

    // Finalmente, se actualiza el contenido de la aplicación
    TileUpdateManager.CreateTileUpdaterForApplication().Update(tile);
}

El resultado se muestra a continuación:

Resumen

En este, y en el anterior artículo se ha visto cómo crear tiles y usarlos desde la propia aplicación. El hecho de poder mostrar información contextual permite que los usuarios puedan acceder a información de la aplicación con ella cerrada, lo que permite que el usuario vuelva a ella, en comparación con otras que no posean estas características.

Más información:

Live Tiles en Metro, la herencia de Windows Phone

Si ha tenido la ocasión de ver un Windows Phone antes de Windows Developer Preview, habrá notado que las similitudes son mas que notables, en concreto en lo que se refiere a los iconos, unos elementos mucho mayores que lo habitual y que poseen información adicional. Para muestra un par de imágenes:

Windows Phone

Windows 8

En este articulo se verá una definición de estos iconos, los Live Tiles, sus características y como actualizarlos desde nuestra aplicación.

Los tiles: Definición y características

Un Tile (cuya traducción a castellano sería algo así como baldosa) es en su base un icono que identifica nuestra aplicación. Un Live Tile, es un icono vivo, que además de servir como primera imagen de nuestra aplicación permite que el usuario reciba información de esta aún estando cerrada. Se pueden actualizar los tiles de varias maneras:

  • En la aplicación principal, lo que se verá en este artículo
  • Usando un proceso en segundo plano, que servirá para actualizar la aplicación aunque ésta esté cerrada.
  • Mediante una notificación push desde un servidor remoto

Existen dos tipos de tiles:

  • Básico, de tamaño 150x150px y obligatorio para poder enviar la aplicación al marketplace.
  • Ancho (Wide), de tamaño 310x150px y opcional, permitirá mostrar un icono que ocupe dos espacios contiguos.
Además, existe como en Windows Phone la opción de crear Tiles secundarios con información adicional y que permitan un acceso directo a un apartado concreto de nuestra aplicación.

Implementación

Para este ejemplo, se parte de la aplicación MVCTask que estaba desarrollando, donde se actualizará el tile para que muestre el número total de proyectos. Este código se ejecutará tras recibir desde el servidor la información de proyectos.

        /// <summary>
        /// Actualiza el icono de la aplicación con un número
        /// </summary>
        /// <param name="numero"></param>
        void ActualizarIcono(int numero)
        {
            // Se obtiene desde la plantilla el documento XML que contendrá el XML del icono
            XmlDocument badgeXml = BadgeUpdateManager.GetTemplateContent(BadgeTemplateType.BadgeNumber);

            // Se edita el XML para agregar los datos deseados, en este caso un número
            XmlElement badgeElement = (XmlElement)badgeXml.SelectSingleNode("/badge");
            badgeElement.SetAttribute("value", "" + numero.ToString());
            badgeElement.SetAttribute("version", "1");

            // Se crea una notificación desde el XML editado
            BadgeNotification badge = new BadgeNotification(badgeXml);

            // Finalmente, se actualiza el contenido de la aplicación
            BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badge);
        }

A diferencia de Windows Phone, en este caso las Tiles no se especifican de una manera explícita, sino que es necesario crear un texto en formato XML que contendrá esta información. Esto permite poder crear tiles más complejos que en el sistema móvil.

La función mostrada anteriormente obtiene el XML básico de un constructor, agrega el dato del número (en este caso value, que contendrá el número de proyectos obtenidos), se crea un nuevo elemento Badge a partir de este XML, y finalmente usando el BadgeUpdateManager, se actualiza el icono de la aplicación, quedando entonces de esta manera:

Icono sin indicador

Icono con indicador

 

 

 

 

 

 

Como se aprecia, el propio sistema se encarga de crear todo el estilo alrededor de la notificación, y se puede ver la diferencia entre los iconos.

Conclusiones

Los Live Tiles permiten conseguir una interacción con el usuario más allá de la de hacer de lanzador de la aplicación, lo que aumenta las posibilidades de que el usuario vuelva a ejecutarla respecto a aplicaciones que no posean estas características.

En el próximo artículo se verá cómo crear un tile de tamaño doble con más información, así como un tile secundario que acceda a un proyecto concreto.

Más información: