Windows Phone 8. Lock Screen.

Introducción

En Windows Phone 7 la pantalla de bloqueo mostraba ciertas notificaciones de aplicaciones del sistema como el correo o las llamadas.

En Windows Phone 8 contamos con APIs para trabajar con la pantalla de bloqueo. Podremos hacer que nuestra aplicación muestre notificaciones en la pantalla principal (icono, texto y contador). Además podremos indicar nuestra aplicación como fuente de imágenes para la pantalla de bloqueo.

Nuevas posibilidades que vamos a descubrir en detalle en la entrada actual, ¿te apuntas?.

Notifications Area

Notifications Area

NOTA: En todo momento es el usuario quien en el apartado Pantalla de Bloqueo dentro de la Configuración del sistema elige que aplicaciones podrán notificar o que aplicación es un proveedor de imagenes cuando el dispositivo está bloqueado.

Manos a la obra

Vamos a crear una aplicación de ejemplo donde utilizaremos todas las nuevas posibilidades de la pantalla de bloqueo:

Aplicación de Windows Phone

Comenzaremos aclarando un punto vital al entender las nuevas posibilidades de la pantalla de bloqueo. Podemos añadir texto, icono, contador e incluso que nuestra aplicación sea una fuente de imágenes. Sin embargo, NO podemos programáticamente mostrar nuestra aplicación en la pantalla de bloqueo. Lo que si podemos hacer es habilitar la posibilidad al usuario para que pueda agregarla manualmente. Por dicha acción comenzaremos.

Modificar el archivo de manifiesto

Nos dirigimos al archivo WMAppManifiest.xaml. Hacemos clic derecho sobre el archivo y seleccionamos la opción “Abrir con”. Seleccionamos a continuación “Editor XML”.

Editor XML

Editor XML

Vamos a modificar el archivo para añadir el icono de nuestra aplicación (debe ser 38×38 px en formato PNG) que aparecerá en la pantalla de bloqueo. Para ello vamos a actualizar el elemento DeviceLockImageURI agregando la ruta completa a la imágen.

<DeviceLockImageURI IsRelative="true" IsResource="false">Lockscreen.png</DeviceLockImageURI>

A continuación, debemos indicar en el archivo de manifiesto que tipo de notificaciones podrá realizar nuestra aplicación en la pantalla de bloqueo. Lo primero que debemos hacer es añadir el bloque Extensions:

<Extensions>

</Extensions>

Tras añadir el bloque Extensions, en su interior debemos añadir el siguiente elemento para que nuestra aplicación pueda notificar con icono y contador (Quick Status):

<Extensions>
     <Extension ExtensionName="LockScreen_Notification_IconCount" ConsumerID="{111DFF24-AA15-4A96-8006-2BFF8122084F}" TaskID="_default" />
</Extensions>

Si además queremos que nuestra aplicación muestre texto con detalles (Detailed Status) y pueda ser proveedor de imágenes añadiremos:

<Extension ExtensionName="LockScreen_Notification_TextField" ConsumerID="{111DFF24-AA15-4A96-8006-2BFF8122084F}" TaskID="_default" />
<Extension ExtensionName="LockScreen_Background" ConsumerID="{111DFF24-AA15-4A96-8006-2BFF8122084F}" TaskID="_default" />

De modo que tendríamos algo como lo siguiente:

<Extensions>
     <Extension ExtensionName="LockScreen_Notification_IconCount" ConsumerID="{111DFF24-AA15-4A96-8006-2BFF8122084F}" TaskID="_default" />
     <Extension ExtensionName="LockScreen_Notification_TextField" ConsumerID="{111DFF24-AA15-4A96-8006-2BFF8122084F}" TaskID="_default" />
     <Extension ExtensionName="LockScreen_Background" ConsumerID="{111DFF24-AA15-4A96-8006-2BFF8122084F}" TaskID="_default" />
</Extensions>

Bien. Ya tenemos configurado el archivo de manifiesto para que nuestra aplicación pueda ser utilizada como fuente de imágenes y para notificar en la pantalla de bloqueo. Recuerda, no podemos programáticamente forzar que nuestra aplicación notifique en la pantalla de bloqueo. Es una acción que debe hacer el usuario.

Configurar el sistema

Veamos como sería:

Configuración - Pantalla de Bloqueo

Configuración – Pantalla de Bloqueo

Nos dirigimos a la configuración del sistema. Dentro econtraremos una opción llamada “Pantalla de bloqueo”. Al entrar veremos al similar a la pantalla superior. En esta sección (recuerdo que pertenece al sistema) y tras modificar el archivo de manifiesto de nuestra aplicación, podremos:

  • Seleccionar nuestra aplicación como proveedor de imagenes.
  • Seleccionar nuestra aplicación para mostrar el estado rápido (icono y contador).
  • Seleccionar nuestra aplicación para mostrar el estado detallado (texto).
Aplicación seleccionada

Aplicación seleccionada

Nuestra aplicación (código)

Vamos a preparar la interfaz de nuestra aplicación. Crearemos dos simples botones. El primero de ellos actualizará el Tile de nuestra aplicación (provocando con la configuración adecuada de la pantalla de bloqueo, la correspondiente notificación). El segundo botón cambiará la imágen establecida en la pantalla de bloqueo (previo consentimiento del usuario):

<StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
     <Button x:Name="btnChangeCounter" Content="Cambiar Contador y Texto"/>
     <Button x:Name="btnChangeImage" Content="Cambiar Imágen Lock Screen"/>
</StackPanel>

Añadimos los eventos Click de cada botón:

<StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
     <Button x:Name="btnChangeCounter" Content="Cambiar Contador y Texto" Click="btnChangeCounterClick"/>
     <Button x:Name="btnChangeImage" Content="Cambiar Imágen Lock Screen" Click="btnChangeImageClick"/>
</StackPanel>

En el code-behind:

private void btnChangeCounterClick(object sender, RoutedEventArgs e)
{

}

private void btnChangeImageClick(object sender, RoutedEventArgs e)
{

}

Como hemos mencionado, en el primero de los botones vamos a actualizar el Tile de nuestra aplicación:

ShellTile.ActiveTiles.First().Update(
new FlipTileData()
{
     Count = 59,
     WideBackContent = "Texto Pantalla Bloqueo",
     SmallBackgroundImage = new Uri(@"Assets\Tiles\FlipCycleTileSmall.png", UriKind.Relative),
     BackgroundImage = new Uri(@"Assets\Tiles\FlipCycleTileMedium.png", UriKind.Relative),
     BackBackgroundImage = new Uri(@"Assets\Tiles\FlipCycleTileMedium.png", UriKind.Relative)
});

Nada nuevo, ¿verdad?. Utilizamos la clase ShellTile y mediante Linq obtenemos el primero de los Tiles activos que es el correspondiente a la aplicación (igual que hacíamos en Windows Phone 7). A continuación, utilizamos el método Update para actualizar el Tile. Como único cambio con respecto a Windows Phone 7, utilizamos como plantilla FlipTileData. Puedes saber más sobre los nuevos Tiles disponibles en el siguiente enlace.

En el segundo de los botones vamos a provocar la actualización de la imágen correspondiente a la pantalla de bloqueo (el usuario debe tener seleccionada nuestra aplicación como proveedor de imagenes en la configuración del sistema).

if (!Windows.Phone.System.UserProfile.LockScreenManager.IsProvidedByCurrentApplication)
{
     //Pedir Permisos.
     var permission = await Windows.Phone.System.UserProfile.LockScreenManager.RequestAccessAsync();

     if (permission == Windows.Phone.System.UserProfile.LockScreenRequestResult.Denied)
     {
          //Permiso denegado.
          return;
     }
}

Windows.Phone.System.UserProfile.LockScreen.SetImageUri(new Uri("ms-appx:///Assets/LockScreen.png", UriKind.Absolute));

En primer lugar debemos verificar si nuestra aplicación ya ha proporcionado la imagen de bloqueo o no. En caso de no haberlo hecho aún pedimos permiso al usuario para poder hacerlo. Siempre y cuando el usuario acepte que nuestra aplicación establezca la imágen de bloqueo procederemos a ello. La imágen a utilizar se recomienda que sea de 768x1280px (mayor resolución admitida).

Testing

Para probar el correcto funcionamiento vamos a utilizar la herramienta Panel de simulación (Simulation Dashboard) del que ya hablamos en la siguiente entrada. Recordar que mediante el Simulation Dashboard podemos:

  • Probar el acceso a datos con conexiones lentas (si todo funciona correctamente, por ejemplo, si realizamos streaming de video si el video o audio se entrecorta, etc).
  • Si la aplicación falla o no al trabajar con servicios de localización y conexiones lentas.
  • Si la aplicación funciona correctamente o falla si el teléfono se bloquea o se desbloquea.
  • Si la aplicación sigue funcionando y no entra en pausa tras recibir un recordatorio.

Vamos a probar los bloqueos de pantalla:

Panel Simulación

Panel Simulación

Interfaz de nuestra aplicación de ejemplo

Estado rápido

Estado detallado

Proveedor de imagen de bloqueo

Puedes ver el resultado conseguido en este ejemplo en movimiento a continuación:

También puedes descargar el ejemplo realizado:

Sin duda una funcionalidad muy interesante que puede aportar un gran valor extra en vuestras aplicaciones. Además requiere un esfuerzo leve por nuestra parte, añadir un par de líneas en el archivo de manifiesto, una nueva imágen y poco código. Recordar, cualquier duda o sugerencia será bienvenida en los comentarios de la entrada.

Más información

2 pensamientos en “Windows Phone 8. Lock Screen.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s