Windows Phone 8: Interactuando con la pantalla de bloqueo.

Hola a todos!

Una de las novedades de Windows Phone 8 reside en su pantalla de bloqueo. En esta nueva versión del sistema operativo, podemos interactuar de una forma muy completa con la pantalla que se muestra al bloquear nuestro terminal. Podemos mostrar el icono de nuestra aplicación junto a un contador de notificaciones, mostrar texto e incluso cambiar la imagen de fondo.

¿Es esto algo que todas las apps deban implementar para ser más “cool”? No, ni mucho menos. Esta funcionalidad está pensada para ofrecer un mayor grado de personalización al usuario. Por ejemplo, si nuestra aplicación trabaja con imágenes, podemos darle al usuario la opción de usarla como proveedor de la imagen de fondo. Si nuestra app recibe notificaciones tile, quizás sea una buena idea que el usuario pueda configurar la pantalla de bloqueo para que muestre nuestras notificaciones. Incluso en una aplicación de mensajería, podríamos querer mostrar el último mensaje recibido en la pantalla de bloqueo (o no… eso queda a elección del usuario también).

Así, podemos distinguir tres formas de interactuar con la pantalla de bloqueo en Windows Phone 8:

  • Cambiando la imagen de fondo.
  • Mostrando el numero de notificaciones pendientes.
  • Mostrando un texto enviado por nuestra aplicación.

En este post, vamos a repasar cada una de ellas y ver como se implementa.

Cambiando la imagen de fondo

Esta es quizás una de las acciones más visuales, pues cambiamos totalmente el aspecto de la pantalla de bloqueo, cambiando su imagen de fondo.

Para ello, lo primero que necesitamos hacer en nuestro proyecto Windows Phone 8 es modificar el manifiesto de aplicación para añadir una nueva extensión. Esta extensión identificará a nuestra aplicación como proveedora de la imagen de fondo de la pantalla de bloqueo:

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

Una vez que hayamos añadido esta extensión, nuestra aplicación debería aparecer en el desplegable de Background de los settings de la pantalla de bloqueo.

image

Al seleccionar nuestra aplicación, tendremos un botón para lanzarla. La forma de establecer el fondo de la pantalla de bloqueo es muy sencilla. Podemos establecer una imagen que esté incluida en nuestra aplicación o que hayamos descargado y guardado en el isolated storage. Para definir de donde obtenemos la imagen, usaremos distintos esquemas URI:

  • ms-appx:/// Indica que la imagen está en el directorio de instalación de nuestra aplicación.
  • ms-appdata:///local/ Indica que la imagen está en el isolated storage de la aplicación.

Antes de poder establecer la imagen de fondo, tendremos que comprobar si tenemos permiso (el usuario ha seleccionado la aplicación en los settings) o no. Para ello comprobaremos la propiedad IsProvidedByCurrentApplication de la clase LockScreenManager que podemos encontrar en el namespace Windows.Phone.System.UserProfile. Si el resultado es false, podemos usar el método RequestAccessAsync de la misma clase para pedir permiso al usuario. Al ejecutar este método, se mostrará un popup del sistema informando al usuario de que deseamos proveer la imagen de fondo de la pantalla de bloqueo. Si acepta, como resultado obtendremos Granted, de lo contrario Denied. El código quedaría escrito de la siguiente manera:

var isProvider = Windows.Phone.System.UserProfile.LockScreenManager.IsProvidedByCurrentApplication;

if (!isProvider)
{
    var op = await Windows.Phone.System.UserProfile.LockScreenManager.RequestAccessAsync();

    isProvider = op == Windows.Phone.System.UserProfile.LockScreenRequestResult.Granted;
}

Una vez que hemos comprobado el acceso y pedido permiso al usuario si fuese necesario, ya solo nos queda llamar al método SetImageUri de la clase LockScreen, que se encuentra en el mismo namespace. Es importante que comprobemos que efectivamente tenemos permisos antes de llamar a este método, si lo hacemos y no tenemos permisos, el resultado será una excepción de seguridad. Finalmente, el método completo de nuestro código quedaría de la siguiente forma:

public async Task SetLockScreenWallpaper()
{
    var isProvider = Windows.Phone.System.UserProfile.LockScreenManager.IsProvidedByCurrentApplication;

    if (!isProvider)
    {
        var op = await Windows.Phone.System.UserProfile.LockScreenManager.RequestAccessAsync();

        isProvider = op == Windows.Phone.System.UserProfile.LockScreenRequestResult.Granted;
    }

    if (isProvider)
    {
        Windows.Phone.System.UserProfile.LockScreen.SetImageUri(new Uri("ms-appx:///newBackground.png"));
    }
}

Ahora ya podemos desplegar nuestra aplicación en el emulador. Al iniciarse, si hemos llamado al método SetLockScreenWallpaper que hemos creado, nos preguntará si deseamos permitir que la aplicación cambie el fondo de la pantalla de bloqueo. Si presionamos “Yes” (Si), y bloqueamos la pantalla del emulador y la volvemos a encender (pulsando F12 dos veces, se apaga y se vuelve a encender), veremos que ya tenemos nuestra imagen establecida.

image

Mostrando el número de notificaciones pendientes.

El segundo punto de personalización de la pantalla de bloqueo que podemos llevar a cabo, es mostrar las notificaciones pendientes, o cualquier otro número que deseemos, en la pantalla de bloqueo. Para ello, nuestro primer trabajo será crear un  icono de nuestra aplicación con un tamaño de 30×30 píxeles. En la documentación nos avisan de que este icono solo debe contener píxeles blancos y transparentes. Una vez que lo hayamos creado, tenemos que añadirlo al proyecto, estableciendo su propiedad Build Action en Content y Copy to output directory a Copy if newer.

A continuación tenemos que modificar el manifiesto de la aplicación para añadir una extensión, al igual que con el wallpaper, que indique al sistema que podemos establecer un icono y su contador en la pantalla de bloqueo:

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

También tendremos que modificar el nodo Token del manifiesto, exactamente modificaremos la línea DeviceLockImageUri, dentro del nodo PrimaryToken, para indicar la imagen que acabamos de crear:

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

Con estas modificaciones del manifiesto, si desplegamos la aplicación al emulador, podemos ir a los settings > Lock sceen y escoger nuestra app para mostrar notificaciones:

image

Como actualizamos el conteo de notificaciones pendientes? Muy fácil, el contador que se muestra en la pantalla de bloqueo es el mismo que el del tile principal de la aplicación. Simplemente actualizando el contador del tile, se actualizará la pantalla de bloqueo automáticamente:

public void UpdateTileCount(int count)
{
    ShellTile tile = ShellTile.ActiveTiles.First();

    FlipTileData data = new FlipTileData();
    data.Count = count;

    tile.Update(data);
}

Con este sencillo código, podemos actualizar el tile principal de la aplicación. Recuerda, que el tile principal siempre existe, aunque no hayamos anclado la app al inicio. Si ejecutamos la app y establecemos un nuevo número, al bloquear la pantalla veremos que se notifica:

image

Así de fácil podemos dar a nuestros usuarios más feedback sobre notificaciones o cualquier otra cosa que deseemos mostrar.

Mostrando un texto enviado por nuestra aplicación.

Y vamos con la última, pero no menos importante, forma de interactuar con la pantalla de bloqueo desde nuestra aplicación. La técnica es la misma que con el contador, lo primero que tendremos que hacer es modificar el manifiesto de nuestra aplicación para añadir una nueva extensión:

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

Una vez que hayamos incluido la extensión LockScreen_Notification_TextField, nuestra aplicación aparecerá listada en el desplegable de Settings > Lock screen > App to show detailed status. El texto que se mostrará se obtendrá desde el live tile principal de la aplicación, exactamente de la propiedad BackContent. Recuerda que no es necesario anclar la aplicación a la pantalla de inicio para poder establecer este texto, el tile principal siempre existe aunque no se muestre:

public void UpdateTileText(string text)
{
    ShellTile tile = ShellTile.ActiveTiles.First();

    FlipTileData data = new FlipTileData();
    data.BackContent = text;

    tile.Update(data);
}

Con la extensión y este simple método UpdateTileText, ya podremos comprobar la funcionalidad de nuestra aplicación. Para ello debemos desplegarla en el emulador o en un dispositivo e ir a Settings > Lock screen. En esta pantalla seleccionaremos nuestra aplicación en el desplegable App to show detailed status. Si antes o después de seleccionarla, establecemos la propiedad BackContent de nuestro tile, se reflejará también en la pantalla de bloqueo:

image

BONUS TRACK: Lanzar la pantalla de configuración de bloqueo desde nuestra aplicación.

Ahora que ya hemos visto como poder interactuar con la pantalla de bloqueo cambiando la imagen de fondo, añadiendo un icono de nuestra app con un contador o un texto de detalles, nos falta algo más por hacer. Sería estupendo si, ya que tenemos todas estas posibilidades implementadas en nuestra app, pudiésemos facilitar al usuario la configuración, dándole una forma rápida de ir a los settings de la pantalla de bloqueo desde nuestra app. Y de hecho, lo podemos hacer usando una funcionalidad nueva en Windows Phone 8: el lanzamiento de apps mediante URIs.

En el namespace Windows.System existe una clase llamada Launcher, que contiene un método llamado LaunchUriAsync. Este método nos permite lanzar al sistema cualquier URI y que sea este el que decida como ejecutarla. Por supuesto si lo que lanzamos es una URI de internet, http, https… se abrirá internet explorer. Pero si lanzamos una URI a la que se ha registrado una app, se lanzará esa aplicación.

Bien, pues muchas partes del sistema operativo están relacionadas con URIs exclusivas, como es el caso de la configuración de la pantalla de bloqueo. En este caso la URI asociada es “ms-settings-lock:” con lo que si añadimos el siguiente código a nuestra aplicación, se abrirá la pantalla de configuración de pantalla de bloqueo:

await Windows.System.Launcher.LaunchUriAsync(new Uri("ms-settings-lock:"));

Así de sencillo. Existen multitud de URIs interesantísimas como “ms-drive-to:” o “ms-walk-to:” que lanzarán la aplicación de navegación del sistema con la ruta calculada en coche o caminando que hayamos expresado.

Conclusión

Pues esto es todo, creo que si nuestra aplicación muestra información al usuario en su tile principal, integrarlo con la pantalla de bloqueo es un “must” que debemos cumplir. Además, según Windows Phone 8 vaya sustituyendo a Windows Phone 7.X, más y más usuarios buscarán aplicaciones que exploten todas las capacidades del dispositivo.

Si además nuestra aplicación trabaja de alguna forma con imágenes, poder establecer la pantalla de bloqueo es también algo increíblemente y que le da un punto diferenciador a nuestra aplicación.

Como siempre, a continuación os dejo los tres ejemplos completos y funcionales que hemos visto en este artículo para que podáis jugar con ellos:

Un saludo y Happy Coding!!

Un comentario sobre “Windows Phone 8: Interactuando con la pantalla de bloqueo.”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *