Hoy vamos a cubrir los Live Tiles en Windows Phone (NOTA: No traduciré el nombre Live Tiles dado que se que muchos de nosotros manejamos ese concepto y no el de “Mosaicos dinámicos”). Este es un tema relativamente grande, pero creo que es posiblemente uno de los mas importantes que leerás en esta serie. Hay dos puntos específicos que quiero cubrir en este artículo: Actualizar tu Live Tile primario y crear nuevos Live Tiles secundarios.
¿Qué son los Live Tiles?
Probablemente debemos comenzar por el inicio, porque si no tienes un Windows Phone, quizá no sepas realmente que es una parte integral y sorprendente del sistema operativo. Aquí hay un video de mi muy animada pantalla de inicio.
Para decepcionarte, lo ve vamos a estar haciendo en este artículo, no es lo que viste en el video con las grandes animaciones (de hecho, ni siquiera tenemos una forma de hacer esos tiles animados, podremos hacerlos girar, y eso si lo veremos). Lo que vamos a hacer, sin embargo, es dar nueva información a nuestro usuario actualizando el contenido de las Live Tiles de nuestras aplicaciones. Podemos hacerlo de dos maneras diferentes: Cambiar los valores preestablecidos que expone el Live Tile, o sobre escribir el fondo del Tile entero en cada ocasión, dándonos efectivamente un control mucho mas creativo.
Una cosa importante para tener presente, antes de comenzar es que los Live Tiles residen en la pantalla de inicio del dispositivo, y solo el usuario puede decidir que Tiles verá. Si tienes una aplicación que haga uso de esta funcionalidad, asegúrate de hacérselo saber a tu usuario que deberían anclarla en la pantalla de inicio. De otra manera, tu maravilloso esfuerzo se habrá perdido.
El Tile preestablecido de tu aplicación
Quizá no hayas notado esto hasta que construyas una aplicación por ti mismo, pero tienes que crear un tile para tu aplicación antes de que puedas subirla en el Marketplace. Toda esta información es encontrada en el archivo WPAppManifest.xml que encontrarás en tu proyecto dentro de la carpeta Properties. Hay dos partes específicas de este documento que quiero puntualizar. La primera es AppTile. No esta directamente relacionada al tema de este artículo, pero es un punto importante que deberías notar. Si miras a tu archivo XML, deberías ver una línea (La línea 4 de manera preestablecida), que se asemeja a algo como esto.
<App xmlns=”" ProductID=”{d3a05b39-7d22-4416-939f-01813f5dcdd2}” Title=”Dia_11_LiveTiles” RuntimeType=”Silverlight” Version=”1.0.0.0″ Genre=”apps.normal” Author=”Dia_11_LiveTiles author” Description=”Sample description” Publisher=”Dia_11_LiveTiles”>
La parte mas important en ese ejemplo es la propiedad Title. El texto que tu usarás aquí será el que el usuario vea cuando ellos estén buscando en su lista de aplicaciones, como se muestra en la imagen de abajo.
La otra parte del XML que quiero que veas, esta cercana al fondo (Linea 25 preestablecidamente), en el nodo <Tokens>. Aquí esta como se ve mi <PrimaryToken> para esta aplicación.
<Tokens>
<PrimaryToken TokenID=”Dia_11_LiveTilesToken” TaskName=”_default”>
<TemplateType5>
<BackgroundImageURI IsRelative=”true” IsResource=”false”>Background.png</BackgroundImageURI>
<Count>20</Count>
<Title>Amin Espinoza</Title>
</TemplateType5>
</PrimaryToken>
</Tokens>
Los valores que quiero que notes son BackgroundImageURI,Count y Title. Estas son las propiedades que estaremos cambiando a lo largo de este artículo y esta ubicación en tu archivo WMAppManifest.xml es donde podrás ajustar tus valores iniciales. (Es importante recordad que incluso cuando estoy usando Background.png en este ejemplo, no puedes usar este ícono para tu aplicación final, o serás rechazado del Windows Phone Marketplace).
Usando estos valores en el ejemplo de arriba, terminaremos con un ícono que se parezca a esto
Deberías notar que el valor Count aparece como un pequeño círculo negro con texto blanco y el valor Title aparece al fondo del tile como texto blanco. Estos colores, tamaños y diseño no cambian, incluso con cambios de tema por parte del usuario. La BackgroundImageURI utilizará la imagen especificada para llenar el espacio entero del tile, sin importar el tamaño actual, así que es altamente recomendado que tu imagen para este propósito sea de 173×173 px, porque este es el tamaño al que será renderizada.
Ok, ahora que hemos cubierto el como crear el Tile inicial para tu aplicación, utilizaré el resto de este artículo mostrándote como cambiar dinámicamente los Live Tiles de tu aplicación (Si, Tiles es pluralizado por una razón).
Actualizando tu Live Tile Principal
Como mencioné al inicio de este artículo, tienes la habilidad de actualizar tu Live Tile principal, pero también tienes la habilidad de crear y editar Tiles Secundarios. Esta sección se enfocará especificamente en el Tile principal y cubriremos los Tiles secundarios mas adelante. Debido a que hay diferentes opciones para como podemos actualizar un Live Tile, voy a iniciar con un video corto para mostrar nuestra aplicación final en acción y exactamente lo que puede hacer.
Para poder hacer esto, necesitamos construir la interfaz. Y para ello necesitaremos incluir los íconos de sonrisa y cara triste que estoy usando. Aquí están, en toda su gloria.
Debes agregarlos a tu proyecto y establecer su propiedad de BuildAction a Content en Visual Studio. Si no has hecho esto antes, da clic derecho en tu proyecto y escoge “Agregar elemento existente”.
Una vez que las imágenes estén en tu proyecto, dando clic en una de ellas, te mostrará el Panel de propiedades. Asegúrate que tus imágenes estén ajustadas a Content en lugar Resource.
Una vez que hayas tenido las dos imágenes en tu proyecto, puedes utilizar el siguiente XAML para crear nuestra interfaz completa, la cual se verá como esto.
Verás, en el XAML de abajo, tenemos dos imágenes, un Slider, un TextBlock, un TextBox y dos botones. Todos esos controles nos permitirán crear nuestro LiveTile personalizado.
<phone:PhoneApplicationPage
x:Class=”Dia_11_LiveTiles.MainPage”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
xmlns:phone=”clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone”
xmlns:shell=”clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone”
xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″
xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″
mc:Ignorable=”d” d:DesignWidth=”480″ d:DesignHeight=”768″
FontFamily=”{StaticResource PhoneFontFamilyNormal}”
FontSize=”{StaticResource PhoneFontSizeNormal}”
Foreground=”{StaticResource PhoneForegroundBrush}”
SupportedOrientations=”Portrait” Orientation=”Portrait”
shell:SystemTray.IsVisible=”True”>
<Grid x:Name=”LayoutRoot” Background=”Transparent”>
<Grid.RowDefinitions>
<RowDefinition Height=”Auto”/>
<RowDefinition Height=”*”/>
</Grid.RowDefinitions>
<StackPanel x:Name=”TitlePanel” Grid.Row=”0″ Margin=”12,17,0,28″>
<TextBlock x:Name=”ApplicationTitle” Text=”LA LIGA SILVERLIGHT” Style=”{StaticResource PhoneTextNormalStyle}”/>
<TextBlock x:Name=”PageTitle” Text=”live tiles” Margin=”9,-7,0,0″ Style=”{StaticResource PhoneTextTitle1Style}”/>
</StackPanel>
<Grid x:Name=”ContentPanel” Grid.Row=”1″ Margin=”12,0,12,0″>
<TextBlock Text=”Tile principal” Height=”40″ VerticalAlignment=”Top” FontSize=”26.667″ />
<Image x:Name=”imgContento” Source=”Imagenes/smiley.png” Width=”150″ Height=”150″ HorizontalAlignment=”Left” Margin=”21,48,0,0″ VerticalAlignment=”Top” MouseLeftButtonDown=”imgContento_MouseLeftButtonDown” Opacity=”.5″ />
<Image x:Name=”imgTriste” Source=”Imagenes/sadface.png” Width=”150″ Height=”150″ Margin=”191,48,115,0″ VerticalAlignment=”Top” MouseLeftButtonDown=”imgTriste_MouseLeftButtonDown” Opacity=”.5″ />
<Slider x:Name=”sldContador” Margin=”8,198,102,0″ Foreground=”Green” Maximum=”99″ ValueChanged=”sldContador_ValueChanged” Height=”84″ VerticalAlignment=”Top”/>
<TextBlock x:Name=”txtSlider” HorizontalAlignment=”Right” Margin=”0,181,12,0″ TextWrapping=”Wrap” Text=”0″ Width=”90″ FontSize=”64″ Height=”84″ VerticalAlignment=”Top” TextAlignment=”Center”/>
<TextBox x:Name=”txtTile” Margin=”8,250,102,288″ TextWrapping=”Wrap”/>
<Button x:Name=”btnPrimario” Content=”Actualizar tile principal” Height=”75″ Margin=”9,0,102,204″ VerticalAlignment=”Bottom” Click=”btnPrimario_Click”/>
<TextBlock Text=”Tile secundario” Height=”40″ VerticalAlignment=”Bottom” FontSize=”26.667″ Margin=”0,0,0,133″ />
<Button x:Name=”btnSecundario” Content=”Crear tile secundario” Height=”75″ Margin=”5,0,102,56″ VerticalAlignment=”Bottom” Click=”btnSecundario_Click”/></Grid>
</Grid>
</phone:PhoneApplicationPage>
Además de los controles nuevos en el ContentPanel, el resto del XAML de arriba es el código predeterminado que Visual Studio crea para ti en el archivo MainPage.xaml de un nuevo proyecto.
Tu puedes descargar la aplicación entera al final del artículo, el código específico en el que queremos enfocarnos en esta sección esta relacionado en que pasa cuando demos clic en el botón etiquetado como “Actualizar tile principal”. En el manejador de eventos btnPrimario_Click, el código será algo como esto.
private void btnPrimario_Click(object sender, System.Windows.RoutedEventArgs e)
{
ShellTile PrimaryTile = ShellTile.ActiveTiles.First();
if (PrimaryTile != null)
{
StandardTileData tile = new StandardTileData();
tile.BackgroundImage = new Uri(“Imagenes/sadface.png”, UriKind.Relative);
tile.Count = (Int32)Math.Round(sldContador.Value, 0);
tile.Title = txtTile.Text;
PrimaryTile.Update(tile);
}
}
Creamos una referencia al tile principal obteniéndolo a partir de una colección de ActiveTiles. Esta colección incluye no solo el tile principal para tu aplicación (el cual siempre será el primero), sino a todos los tiles secundarios que has creado también.
Cree un nuevo objeto de tipo StandardTileData y después le ajusté el conjunto de propiedades de este tile para que se muestre la cara triste, la propiedad Count será el valor de nuestro Slider y Title será el valor de nuestro TextBox. Finalmente, llamamos al método Update() del objeto ShellTile que creamos al inicio y pasar la nueva información de tile como el reemplazo. Esto es todo lo que se necesita para tu tile, pero no te limites a ti mismo pensando que tienes que usar todos esos valores.
Por ejemplo, si tienes una aplicación del clima y quieres mostrar la temperatura en tu Live Tile, podría ser obvio usar la propiedad Count para mostrar esa información, dado que la propiedad Count solo llega hasta 99, aunque hay ciertos lugares en donde la temperatura puede ir a mas de 99, así que hay otra manera.
La solución fácil podría ser crear una pila de imágenes que tengan todos los valores posibles que quisieras mostrar e incluirlas en tu proyecto. Entonces podrías simplemente cambiar la propiedad BackgroundImage del tile y podrías tener un tile personalizado de temperatura para tu usuario. Pero esta solución puede terminar ocasionando que debas crear cientos de imágenes que elevarían muchísimo el tamaño de tu aplicación.
Afortunadamente, podemos usar imágenes que estén almacenadas en nuestro servidor web (o menos éticamente dicho, que alguien más tenga almacenadas en SU servidor web). Para hacer esto, puedes darle a la propiedad BackgrounURI, una url a una imagen, como en el ejemplo de abajo.
tile.BackgroundImage = new Uri(“http://www.jeffblankenburg.com/wp-content/uploads/2011/11/smiley.png”);
He probado esto con diferentes formatos de imágenes, y parece funcionar solamente con imágenes PNG, de modo que debes tener esto presente cuando uses esta técnica. Es una forma genial de tener un conjunto finito de imágenes alojadas en tu web server y solo llamándolas como necesites en ciertas condiciones, como en 58 grados y nublado.
Creando un Live Tile Secundario
Hasta ahora, hemos hablado acerca de como podemos actualizar el Live Tile primario que tu aplicación puede tener en la pantalla de inicio. Ahora vamos a cambiar los papeles un poco para hablar acerca de Tiles Secundarios. Estos son tiles adicionales que puedes hacer que tu usuario cree para tu aplicación.
Como ejemplo, digamos que tienes una aplicación que permite al usuario jugar muchos juegos diferentes: Gato, Busca Palabras y Ahorcado. La manera normal de que tus usuarios interactúen con tu aplicación es abriéndola de la lista de aplicaciones, escogen el juego que quieren jugar y finalmente juegan. Con Tiles Secundarios, podrías permitirle al usuario crear un tile separado para cada uno de los juegos, de modo que ellos puedan encontrar el Ahorcado justo en su pantalla de inicio y acceder a el para comenzar a jugar. Funciona como un acceso directo a su sección de la aplicación favorita así como para un recordatorio constante de tu aplicación en su pantalla de inicio.
Para esto, se requiere el mismo código que usamos para el tile principal, con unas pequeñas diferencias. Primero, estos tiles secundarios pueden estar o no cuando estés buscándolos (El tile principal, incluso cuando no esté anclado a la pantalla de inicio puede ser actualizado). Si el usuario borra un tile secundario de su pantalla de inicio, no tendrás acceso a el de nuevo.
El manejador de eventos btnSecundario_Click de nuestro ejemplo esta mostrado abajo.
private void btnSecundario_Click(object sender, System.Windows.RoutedEventArgs e)
{
ShellTile SecondaryTile = ShellTile.ActiveTiles.FirstOrDefault(x => x.NavigationUri.ToString().Contains(“ID=2″));
StandardTileData tile = new StandardTileData();
if (SecondaryTile == null)
{
tile.BackgroundImage = new Uri(“Imagenes/linternaVerde.png”, UriKind.Relative);
tile.Title = “Ni en la noche…”;
tile.BackTitle = “Linterna verde”;
tile.BackBackgroundImage = new Uri(“Imagenes/superman.png”, UriKind.Relative);
tile.BackContent = “El último hijo…”;
ShellTile.Create(new Uri(“/DeepLink.xaml?ID=2″, UriKind.Relative), tile);
}
}
Puedes ver en el ejemplo, estoy usando un poco de magia de LINQ para encontrar el LiveTile que estoy buscando. Estoy buscando por el tile en la colección de ActiveTiles que tenga un NavigationUri que contenga “ID=2”. Déjame explicarte comenzando desde el final.
Cuando creas un nuevo tile secundario, llamas al método ShellTile.Create(), donde le pasas una URI y el nuevo objeto de tipo StandardTileData que creaste. La URI necesita apuntar a una página dentro de tu aplicación y no puede ser haber mas de un tile secundario que apunte a la misma URI. Además, la URI que tu utilizas, actúa como un identificador único para ese tile secundario y nosotros usaremos LINQ para consultar la colección de tiles secundarios buscando por la URI específica que usamos para crearlo. Si muchos de tus tiles apuntan a la misma página, pero muestran información diferente, puedes usar las cadenas de consulta para hacer cada URI única, y entonces hacer tus búsquedas utilizando el nombre y el valor, como en el ejemplo de arriba.
Si, después de nuestra búsqueda, aún no encontramos el tile existente, podemos crear uno usando el código de arriba. Notarás que es el mismo objeto de tipo StandardTileData que usamos en el tile principal, pero que tenemos tres propiedades mas (estas propiedades pueden también ser usadas para tu tile principal, pero yo quería guardas estas para que tuvieras que leer hasta ahora).
Para ilustrar lo que estas nuevas propiedades son, he hecho un video para ti.
Al especificar “cualquiera” de estas tres propiedades: BackTitle, BackBackgroundImage o BackContent, tu tile automáticamente girará. El sistema operativo manejará cuando la vuelta haya terminado, solo debes indicar que ese giro haya terminado. Deberías notar que la parte trasera del tile no tiene una propiedad Count, así como la parte frontal no tiene una propiedad Content. Aquí hay dos pantallas de los dos diferentes lados de nuestro tile.
Puedes permitir a tu usuario crear tantos tiles secundarios como el quiera, solo ten estos detalles en mente.
* Cada Live Tile debe apuntar a una dirección URI única.
* Cada vez que tu crees un tile secundario, el usuario será llevado a su pantalla de inicio para verla, no puedes crear mas de un tile secundario a la vez.
* Todas las propiedades mostradas en el código de arriba, pueden ser utilizadas en ambos casos, el tile primario o cualquiera secundario.
* Saturar la pantalla de inicio de tu usuario no es siempre una buena idea. No le des un tile secundario a menos que haya una verdadera razón para ello. Se irá haciendo molesto.
En resumen
Los videos en el artículo debieron resumir como se comportan los tiles en tu aplicación, es una forma muy importante de interactuar con tus usuarios. Dándoles información relevante en su pantalla de inicio no solo les recordará usar tu aplicación, sino que también les permitirá ver toda la información que es importante para ellos directamente desde su pantalla de inicio.
Si quieres jugar completamente con una versión funcional de la aplicación que fue demostrada en este artículo, por favor da clic en el siguiente link.
Puedes descargar el código aquí.
Mañana vamos a hablar acerca de un tema increíblemente importante para el éxito de la aplicación, las pruebas beta. Nuestro autor invitado, Jared Bienz los guiará a través de como exactamente probar tu aplicación en modo beta y como se puede beneficiar tu aplicación de ello. Nos vemos.