Este post está basado en un video tutorial de Tim Heur titulado Out-of-browser Experiences.

Lo primero que vamos a hacer es diseñar la interfaz de nuestra aplicacción. Esta puede ser tan sencilla como quieran, por lo menos necesitamos 2 TextBlock y un Button (liga al código al final del post):

Los TextBlock en los que estamos interesados por el momento son los que en la imagen vemos con la palabra “NO” en rojo. Uno lo llamaremos txtOOB que indicará si la aplicación se encuentra fuera del navegador y el otro txtConexion que indicará si la aplicación cuenta con conexión disponible.

A continuación, vamos a crear un pequeño método para ayudarnos a cambiar el estado de dichos TextBlock.

public void cambiaEstado(TextBlock texto, bool estado)

{

    if (estado)

    {

        texto.Text = "Si";

        texto.Foreground = new SolidColorBrush(Colors.Green);

    }

    else

    {

        texto.Text = "No";

        texto.Foreground = new SolidColorBrush(Colors.Red);

    }

}

Este método nos permite mandar el TextBlock correspondiente y el valor que le será asignado. Si es verdadero, entonces el TextBlock mostrará la palabra “Si” en verde, si es falso, mostrará la palabra “No” en rojo.

Para la siguiente función declaramos el nombre de espacio System.Net.NetworkInformation. Aquí está contenida la clase NetworkInterface que nos permitirá saber si tenemos una conexión disponible:

private void ActualizarEstados()

{

    cambiaEstado(txtOOB, App.Current.IsRunningOutOfBrowser);

    cambiaEstado(txtConexion, NetworkInterface.GetIsNetworkAvailable());

}

Podemos ver GetIsNetworkAvailable() nos regresa un booleano indicando el estado de la conexión. Además, la propiedad App.Current.IsRunningOutOfBrowser nos indica si la aplicación está corriendo fuera del navegador. Solo necesitamos añadir la llamada a ActualizarEstados() en el constructor de nuestra clase MainPage. Al ejecutar nuestra aplicación vemos lo siguiente:

Ahora pasamos a la funcionalidad del botón. Queremos dos cosas: primero crearemos una función que inicialice el botón, dependiendo de si la aplicación está o no fuera del navegador y si está o nó instalada. Segundo, programaremos la funcionalidad de dicho botón, también en función de si está o no fuera del navegador. Veamos primero el método de inicialización:

private void inicializarBoton()

{

    if (App.Current.IsRunningOutOfBrowser)

    {

        btnAccion.Content = "Actualizar";

    }

    else

    {

        if (App.Current.InstallState == InstallState.NotInstalled)

        {

            btnAccion.Content = "Instalar";

        }

        else

        {

            btnAccion.Content = "Aplicación instalada";

            btnAccion.IsEnabled = false;

        }

    }

}

El primer if determina si la aplicación está fuera del navegador, de ser así, el botón simplemente muestra “Actualizar”. Si estamos dentro del navegador, entonces debemos determinar si la aplicación está o no instalada, si no es así, el botón despliega el mensaje “Instalar” y si ya está instalada, mostramos “Aplicación Instalada” y deshabilitamos el botón para evitar una posible excepción. Este método lo mandamos a llamar también en el constructor y además agregamos el un manejador del evento clic:

public MainPage()

{

    // Required to initialize variables

    InitializeComponent();

    btnAccion.Click += new RoutedEventHandler(btnAccion_Click);

    NetworkChange.NetworkAddressChanged += new NetworkAddressChangedEventHandler(NetworkChange_NetworkAddressChanged);

    ActualizarEstados();

    inicializarBoton();

}

Aquí además agregamos un manejador al evento NetworkAddressChanged, con el propósito de actualizar el txtConexion. Y ahora, el código de los manejadores de eventos:

void btnAccion_Click(object sender, RoutedEventArgs e)

{

    if (App.Current.IsRunningOutOfBrowser)

    {

        App.Current.CheckAndDownloadUpdateCompleted += new CheckAndDownloadUpdateCompletedEventHandler(Current_CheckAndDownloadUpdateCompleted);

        App.Current.CheckAndDownloadUpdateAsync();

    }

    else

    {

        App.Current.Install();

    }

}

void Current_CheckAndDownloadUpdateCompleted(object sender, CheckAndDownloadUpdateCompletedEventArgs e)

{

    if (e.UpdateAvailable)

    {

        MessageBox.Show("La applicación ha sido actualizada, por favor reinicia");

    }

    else

    {

        MessageBox.Show("No hay actualizaciones disponibles");

    }

}

void NetworkChange_NetworkAddressChanged(object sender, EventArgs e)

{

    cambiaEstado(txtConexion, NetworkInterface.GetIsNetworkAvailable());

}

Si la aplicación está dentro del navedador (código en el bloque else) llamamos al método Install(). Cabe mencionar que este método solo funciona cuando es causado por una acción del usuario, si ustedes lo ponen en el constructor por ejemplo, no funcionará. Si la aplicación ya se encuentra fuera del navegador, entonces procedemos a checar si hay actualizaciones disponibles. Primero añadimos un manejador al evento CheckAndDownloadUpdateCompleted y después mandamos a llamar CheckAndDownloadUpdateAsync(). Éste método va y revisa si hay actualizaciones, si las hay las descarga y las instala cuando la aplicación es reiniciada.

En el manejador del evento de CheckAndDownloadUpdateCompleted revisamos nuestro parámetro de tipo CheckAndDownloadUpdateCompletedEventArgs para ver si hay una actualización disponible. Si la hay mostramos un cuadro de dialogo pidiendo al usuario que reinicie para que se instale la nueva versión.

Por cuestiones de ilustración, este demo tiene la funcionalidad de revisar actualizaciones incluída en una acción de un botón. En una aplicación de verdad, quizá sería prudente hacerlo en el constructor de nuestra clase App por ejemplo.

Finalmente el manejador de NetworkAddressChanged simplemente tiene que mandar a llamar a nuestro primer método para revisar si la conexión está disponible.

¡Nuestra aplicación está casi lista! Solo nos queda habilitarla para instalarla fuera del navegador. Para esto nos vamos a las propiedades de nuestro proyecto, nos aseguramos de que Enable running application out of the browser y damos clic en el botón Out-of-Browser Settings:

Aparecerá un cuadro de dialogo donde podemos definir distintas cosas:

• Window Title: El título de la ventana de la aplicación
• Width y Heigh: Ancho y Alto de la ventana
• Shortcut name: Nombre que llevará el acceso directo
• Download description: Texto que se mostrará en un tooltip al posicionar el cursor sobre el acceso directo de la aplicación.
• Icons: Imágenes que harán de ícono de la aplicación (deben ser parte del proyecto de la aplicación de Silverlight)

Una vez que llenamos la información que queremos se genera un arhivo xml (dentro de la carpeta de propiedades del proyecto) llamado OutOfBrowserSettings.xml, el cúal es muy sencillo y hasta podemos editarlo manualmente (aunque el cuadro de dialogo es más cómodo).

<OutOfBrowserSettings ShortName="OOB Demo" EnableGPUAcceleration="False" ShowInstallMenuItem="True">

  <OutOfBrowserSettings.Blurb>Demo de aplicación fuera del navegador. JAMolina.com</OutOfBrowserSettings.Blurb>

  <OutOfBrowserSettings.WindowSettings>

    <WindowSettings Title="OOB Demo" Height="250" Width="300" />

  </OutOfBrowserSettings.WindowSettings>

  <OutOfBrowserSettings.Icons>

    <Icon Size="16,16">Icons/Logo16.png</Icon>

    <Icon Size="32,32">Icons/Logo32.png</Icon>

    <Icon Size="48,48">Icons/Logo48.png</Icon>

    <Icon Size="128,128">Icons/Logo128.png</Icon>

  </OutOfBrowserSettings.Icons>

</OutOfBrowserSettings>

¡Listo! Nuestra aplicación está lista. Para probar la funcionalidad de actualización pueden barjarse el proyecto para correrla localmente, instalarla y luego modificar algún valor (por ejemplo, algún valor del XAML de la interfaz), compilan y abren la aplicación previamente instalada para probar la actualización.

El resto de la funcionalidad puede ser probada con el demo que pueden encontrar aquí. El código fuente lo pueden descargar de aquí.