Una de las características nuevas en la plataforma de desarrollo de Silverlight para Windows Phone 7.1 "Mango” es el ofrecer un mecanismo para crear programáticamente mosaicos “vivos”, y que estos sean fácilmente actualizables según ciertas condiciones ya sea mientras la aplicación esté ejecutando o no.
En este artículo veremos a detalle la creación de mosaicos dinámicos o “Live Tiles” (Mosaicos vivos, por su nombre en el idioma inglés), sus características y capacidades.
Mosaicos
Los mosaicos son –dentro del lenguaje de diseño Metro- la manera en la que las aplicaciones pueden ser ejecutadas, pero también el mecanismo por el cual las aplicaciones nos pueden avisar que ha sucedido algo de nuestro interés como usuarios finales. Windows Phone 7.1 incluye dos tipos diferentes de mosaicos: Mosaicos Principales y Mosaicos Secundarios.
Mosaicos principales
Por ejemplo, cuando tienes configurada una cuenta de correo electrónico en Windows Phone 7, el mosaico que representa la aplicación de correo electrónico se actualiza dinámicamente cuando llega a nuestro buzón un nuevo mensaje, este es un ejemplo de mosaico principal ya que no tuvimos que hacer nada extra para crearlo, sino que ya lo agrega la aplicación al momento de ser instalada. Este tipo de mosaicos pueden ser creados automáticamente por la aplicación o a través de código. Es muy importante mencionar que estos mosaicos no pueden ser anclados al menú de inicio automáticamente, sino que el usuario lo debe hacer manualmente.
Mosaicos secundarios
Silverlight para Windows Phone 7.1, soporta la creación programática de mosaicos secundarios para las aplicaciones. Esto es de particular interés cuando nuestra aplicación requiere brindar al usuario diversas maneras de ejecutar la aplicación. Por ejemplo, cada mosaico secundario podría representar un estado completamente diferente a otro en la aplicación, adicionalmente al mosaico principal que nos sirve para ejecutar el aplicativo en cuestión.
En la ilustración se muestra una aplicación que tiene un mosaico principal con el título “Mi App!”, mientras que el resto de mosaicos son secundarios.
Este tipo de mosaicos pueden ser creados únicamente a través de código, además de que se anclan automáticamente al menú de inicio tan pronto como son creados.
Características de los Mosaicos
Todos los mosaicos cuentan con las siguientes características, las cuales pueden ser modificadas según sea necesario:
- Título frontal
- Imagen de fondo frontal
- Contador numérico (valor del 1 al 99. Si no se establece, no aparecerá)
- Título para el reverso del mosaico
- Contenido para el reverso del mosaico
- Imagen del reverso del mosaico
Hablando específicamente de las imágenes de los mosaicos, estas deb ser de tipo PNG o JPG y deben tener un tamaño de 173 x 173 pixeles. Si la imagen no tiene este tamaño, se escalará automáticamente. Adicionalmente a esto, los archivos deben estar marcados como “Contenido”, dentro del panel de Propiedades en Visual Studio .NET.
Clase ShellTile
La clase ShellTile representa un mosaico de nuestra aplicación –ya sea el principal o alguno de los secundarios. Esta clase está disponible en el Espacio de Nombres Microsoft.Phone.Shell, por lo que es buena idea incluir una cláusula using (o Imports en Visual Basic) en la parte inicial de nuestro código.
La clase ShellTile incluye dos miembros estáticos importantes: la propiedad ActiveTiles, la cual es un diccionario que representa todos los mosaicos de la aplicación en cuestión, siendo el primero en el diccionario el mosaico principal, y también el método Create(), el cual nos sirve para poder crear mosaicos secundarios.
El siguiente fragmento de código obtiene el mosaico principal de la aplicación.
//Obtiene el mosaico de la aplicación
var main = Microsoft.Phone.Shell.ShellTile.ActiveTiles.First();
Clase StandardTileData
Hay una especialización de la clase ShellTile: la clase StandardTileData. Esta clase representa un mosaico que puede estar anclado al menú de inicio, por lo que puede tener las propiedades que indicamos anteriormente como título fronta y de reverso, imágenes, etc.
El siguiente fragmento de código configura el mosaico principal de la aplicación, tanto para la parte frontal como para la parte trasera.
var appTitle = ShellTile.ActiveTiles.First();
if (appTitle != null)
{
var tileData = new StandardTileData();
tileData.Title = "Mi Aplicación";
tileData.Count = 7;
tileData.BackgroundImage = new Uri("Imagenes/sl4logo.png", UriKind.Relative);
tileData.BackContent = "Atrás";
tileData.BackTitle = "Ejemplo";
tileData.BackBackgroundImage = new Uri("Imagenes/WPLogo.png", UriKind.Relative);
appTitle.Update(tileData);
}
Al ejecutar el anterior código y al anclar el mosaico al menú de inicio manualmente, veremos el resultado deseado, tal y como se muestra en la siguiente ilustración:
Es importante mencionar que cuando un mosaico tiene contenido en el reverso y éste está anclado al menú de inicio, automáticamente después de un lapso de tiempo el mosaico gira como si fuera un naipe para mostrar dicho contenido.
Creación de mosaicos secundarios
Para crear mosaicos secundarios, utilizamos el método Create() mencionado anteriormente. Este método estático es parte de la clase ShellTile y solicita como parámetros la ruta dentro de la aplicación que este mosaico secundario representa, y también un objeto de tipo StandardTileData, con las propiedades visuales necesarias que requiera nuestro nuevo mosaico.
El Proyecto
Para probar esta funcionalidad, nuestra aplicación de prueba consta de dos páginas: MainPage.xaml y Nombre.xaml. En MainPage el usuario puede escribir su nombre y pulsar sobre el botón. Al hacer esto, la aplicación navega hacia Nombre.xaml, pasando como parámetro el nombre escrito en la caja de texto de MainPage. Aquí, el usuario puede pulsar en el botón “Crear mosaico secundario”, lo cual hará precisamente eso, identificando al nuevo mosaico con ese Uri único.
La siguiente ilustración muestra las dos páginas de la aplicación.
Es en el botón “Crear mosaico secundario” en donde está implementado el código para crear un mosaico secundario de la aplicación, tal y como se muestra a continuación. Nota que lo primero que hace el código es asegurarse que no exista otro mosaico secundario con el mismo Uri. Posteriormente a eso, se crea un nuevo objeto de tipo StandardTileData con el contenido visual adecuado.
if (ShellTile.ActiveTiles.Where((m) => m.NavigationUri
== NavigationService.Source).Count() == 0)
{
StandardTileData newTile = new StandardTileData()
{
Title = nombre,
Count = 1,
BackgroundImage = new Uri("Imagenes/sl4logo.png", UriKind.Relative),
BackTitle = "Mosaico Secundario",
BackContent = "Creado: " + DateTime.Now.ToString(),
BackBackgroundImage = new Uri("Imagenes/mva.png", UriKind.Relative)
};
ShellTile.Create(NavigationService.Source, newTile);
}
Una vez ejecutando la aplicación en el emulador, podemos probar esta funcionalidad creando tantos mosaicos secundarios como queramos. Es importane mencionar que el mosaico principal de la aplicación no es necesario que esté en el menú de inicio para que los mosaicos secundarios estén anclados. En la siguiente ilustración se muestran tres mosaicos secundarios creados con esta aplicación de prueba.
Resumen
Los mosaicos dinámicos o “Live Tiles” son una de las mejoras que podemos encontrar en Silverlight para Windows Phone Mango. A través de esta característica podemos brindar a los usuarios de nuestras aplicaciones un mecanismo para poder llegar directamente al contenido que ellos desean, ya que cada mosaico puede representar una ruta diferente de acceso dentro de nuestras aplicaciones.
Previo al TechDays Chile 2011 en donde participaré nuevamente como orador, estaré impartiendo el curso avanzado de Silverlight: Silverlight para Ninjas los días 16 y 17 de Noviembre 2011 en las oficinas de Microsoft Chile. Este curso, de duración de 2 días completos, está enfocado a desarrolladores profesionales que ya tienen una experiencia mínima de 6 meses desarrollando aplicaciones con la plataforma de desarrollo de Silverlight.
Una noción profunda y detallada de la plataforma es necesaria para poder llevar a otro nivel tus aplicativos desarrollados con esta tecnología.
de Escritorio construidas con Silverlight 4 o 5, y también en aplicaciones para Windows Phone 7.1 (Mango)!
![SNAGHTML1e461f7[4]](http://rdiazconcha.com/wp-content/uploads/2011/10/SNAGHTML1e461f74.png "SNAGHTML1e461f7[4]")
) este Taller de Silverlight 4.
