PDF de programación - Ejecución de aplicaciones Silverlight fuera del navegador

Juan María Laó

plataforma.net

Ejecución de aplicaciones
Silverlight fuera del navegador

En este artículo veremos cómo crear una aplicación Silverlight que se pue-
da ejecutar tanto en el navegador como fuera de él. Adicionalmente, pre-
sentaremos algunas otras características que fueron novedades de la ver-
sión 3 de Silverlight: aplicaremos efectos a elementos de la interfaz de usua-
rio y los enlazaremos unos con otros, haremos la aplicación actualizable y
comprobaremos el estado de la conexión de red del ordenador en el que
la aplicación se ejecuta.

Desde que apareció la primera versión de Silver-
light hasta el presente ha llovido mucho; solo hay
que ver el camino que lleva andada la herramien-
ta desde que salió. Prácticamente cada seis meses
aparece una nueva versión con múltiples noveda-
des y mejoras (en el momento en que se escribe
este artículo, ya está disponible la versión beta de
Silverlight 4).

Las características que veremos en este artí-
culo se incluyeron por primera vez en Silverlight
3. Para poder seguir el ejemplo que desarrollare-
mos, necesitará tener instalada la versión 3 del
SDK de Silverlight y las herramientas necesarias
para desarrollar este tipo de aplicaciones desde
Visual Studio. Instalando Microsoft® Silver-
light™ 3 Tools for Visual Studio 2008 SP1 [1],
estará listo para empezar.

Empezando
Para comenzar, abriremos Visual Studio 2008 y
crearemos un nuevo proyecto de aplicación Sil-
verlight que llamaremos FueraDelNavegador. Visual
Studio nos preguntará si queremos alojar (host) la
aplicación en un sitio Web; le indicaremos que sí,
con lo que en realidad se nos creará una solución

con dos proyectos: el primero (FueraDelNavegador)
es la aplicación Silverlight propiamente dicha,
mientras que el segundo (FueraDelNavegador.Web)
es un proyecto ASP.NET de prueba en el que se
alojará la aplicación para que podamos probarla.
La interfaz de usuario de la aplicación que
vamos a desarrollar constará de cuatro elementos
TextBlock organizados de dos en dos en diferen-
tes StackPanel. Además, hemos añadido un botón
que le dé al usuario la opción de instalar la apli-
cación localmente. El código XAML relevante de
MainPage.xaml se presenta en el listado 1.

Utilizaremos los controles de texto para que
nos vayan indicando un par de características del
entorno en el que se está ejecutando nuestra apli-
cación: si ésta se está ejecutando en el navegador
y si tenemos una conexión de red disponible. Para
que estos valores se actualicen nada más ejecutar-
se nuestra aplicación, nos suscribimos al evento
Loaded de la página. En el gestor del evento, com-
probamos si estamos dentro del navegador a través
de la propiedad Application.Current.IsRunnin‐
gOutOfBrowser. Para saber si disponemos de cone-
xión de red, debemos utilizar el método estático
IsNetworkAvailable de la clase NetworkInterface
(ensamblado System.Net, espacio de nombres Sys‐
tem.Net.NetworkInformation). En caso de encon-

Juan María Laó es Inge-
niero Técnico en Informá-
tica en Montrel Ingeniería
Informática S.A.
Traduce el blog de Scott
Guthrie al español, en
http://thinkingindotnet.
wordpress.com.

<Grid x:Name="LayoutRoot" Background="White">

<StackPanel>

<StackPanel Orientation="Horizontal">

<TextBlock Text="¿Dónde estoy? " FontSize="24" />
<TextBlock x:Name="ModoEjecucion" FontSize="24" />

</StackPanel>
<StackPanel Orientation="Horizontal">

<TextBlock Text="¿Tengo red?" FontSize="24" />
<TextBlock x:Name="ModoRed" FontSize="24" />

</StackPanel>
<Button x:Name="IrFueraDelNavegador" FontSize="24"

Content="Instalar" Click="IraFueraDelNavegador_Click" />

</StackPanel>

</Grid>

Listado 1

void MainPage_Loaded(object sender, RoutedEventArgs e)
{

if (Application.Current.IsRunningOutOfBrowser)
{

ModoEjecucion.Text = " Estoy fuera del navegador";

ModoEjecucion.Text = " Estoy dentro del navegador";

}
else
{

}
ComprobarRed();

}

private void ComprobarRed()
{

if (NetworkInterface.GetIsNetworkAvailable())
{

ModoRed.Text = " Tengo conexión ";
ModoRed.Foreground = new SolidColorBrush(Colors.Green);

ModoRed.Text = " No encuentro ninguna red";
ModoRed.Foreground = new SolidColorBrush(Colors.Red);

}
else
{

}

}

Listado 2

}

}

public MainPage()
{

InitializeComponent();
Loaded += new RoutedEventHandler(MainPage_Loaded);
NetworkChange.NetworkAddressChanged +=

new NetworkAddressChangedEventHandler(NetworkAddressChanged);

void NetworkAddressChanged(object sender, EventArgs e)
{

ComprobarRed();

<<

dnm.plataforma.net

trar una conexión de red, mostramos el
mensaje en color verde, y si no se
encuentra ninguna conexión disponi-
ble, en color rojo. Todo ello puede ver-
se en el listado 2.

Para que el control de texto que
muestra el estado de la conexión a red
se mantenga actualizado en todo
momento, debemos hacer uso del even-
to NetworkChange.NetworkAddressChan‐
ged, al que nos suscribiremos en el cons-
tructor de la clase MainPage. En el ges-
tor de este evento llamamos al método
refactorizado ComprobarRed (listado 3).
Si en este momento ejecutamos la
aplicación, veremos el resultado en nues-
tro navegador Web predeterminado; algo
similar será lo que verán nuestros usua-
rios al ejecutar la aplicación ya desplega-
da utilizando la URL correspondiente.

Ejecución fuera
del navegador
Lo siguiente que vamos a hacer es dotar
a la aplicación de la funcionalidad nece-
saria para que se pueda instalar y eje-
cutar de manera local, o sea, fuera del
navegador (out-of-browser) en un orde-
nador cliente. Para ello, hemos agre-
gado a la interfaz de usuario un botón
que ejecutará esta función cuando el
usuario haga clic en él. El código que
debemos incluir en el evento Click de
dicho botón se muestra en el listado 4,
y es trivial: la llamada al método Ins‐
tall pondrá en marcha todo el proce-
so necesario para instalar la aplicación
Silverlight en el sistema cliente.

Además, necesitamos configurar
nuestro proyecto para que sea capaz de
instalarse de manera local. Para ello,
debemos ir a las propiedades del pro-
yecto FueraDelNavegador y en la pes-

private void IrFueraDelNavegador_Click(

object sender, RoutedEventArgs e)

Application.Current.Install();

{

}

Listado 3

Listado 4

a
í
n
a
M
t
e
N
t
o
d

<
<

21

<<

dnm.plataforma.net

El método Application.CheckAndDownload

UpdateAsync comprueba si existen actualizaciones
de la aplicación y las descarga asíncronamente,

disparando al finalizar el evento

CheckAndDownloadUpdateCompleted

encontró alguna actualización para la
aplicación. El listado 6 muestra cómo
hemos aprovechado esta característi-
ca en nuestra aplicación de ejemplo.
Si ahora compilamos y ejecutamos
la aplicación con Visual Studio y arran-
camos la versión que teníamos instala-
da, se nos avisará de que se ha descar-
gado e instalado una actualización y se
nos pedirá que la reiniciemos; al hacer-
lo, ya tendremos disponible las últimas
características de nuestra aplicación Sil-
verlight.

taña Silverlight marcar la opción
"Enable running application out of the
browser". Al seleccionar esta opción, el
botón llamado "Out-of-Browser Set-
tings" se habilitará, y podremos indicar
algunos valores de configuración para
la aplicación, tales como el título de la
ventana, ancho y altura de ésta, el nom-
bre del acceso directo, una breve des-
cripción de lo que se va a descargar, e
iconos de diferentes tamaños. Además,
aquí podemos especificar si queremos
que la aplicación utilice la GPU de la
máquina cliente, para que sea ella y no
el procesador principal quien se encar-
gue de renderizar los gráficos vectoria-
les, vídeos, efectos sobre píxeles, etc.
Esta posibilidad también fue incorpo-
rada por primera vez en Silverlight 3.
En este punto ya tenemos una apli-
cación Silverlight que se puede instalar
en una máquina local. Para compro-
barlo, no tenemos más que ejecutar la
aplicación desde Visual Studio, y pulsar
sobre el botón "Instalar". Se abrirá un
cuadro de diálogo preguntándonos si
queremos añadir accesos directos a la
aplicación en el escritorio y en el menú
Inicio; después de indicar nuestras pre-
ferencias y aceptar, la aplicación se ins-
talará y podremos ejecutarla localmen-
te en lo adelante.

Antes de finalizar esta sección, vea-
mos cómo lograr que cuando la aplica-
ción se ejecute fuera del navegador no
se muestre el botón de instalación. Esto
lo conseguimos modificando un poco
el código del listado 2, tal como se
muestra en el listado 5.

a
í
n
a
M
t
e
N
t
o
d

<
<

22

void MainPage_Loaded(object sender, RoutedEventArgs e)
{

if (Application.Current.IsRunningOutOfBrowser)
{

ModoEjecucion.Text = " Estoy fuera del navegador";
IrFueraDelNavegador.Visibility = Visibility.Collapsed;

ModoEjecucion.Text = " Estoy dentro del navegador";
IrFueraDelNavegador.Visibility = Visibility.Visible;

}
else
{

}
ComprobarRed();

}

Listado 5

Haciendo la aplicación actuali-
zable
Una vez que podemos instalar la apli-
cación de manera local, caemos en la
cuenta de que nos interesa mucho que
esa aplicación pueda actualizarse de
forma sencilla. Investigando un poco,
vemos que existe una funcionalidad
que nos permitirá lograr esto sin ape-
nas esfuerzo [2]. En pocas palabras, el
método Application.CheckAndDownloa‐
dUpdateAsync comprueba si existen
actualizaciones de nuestra aplicación
y las descarga asíncronamente en caso
de que existan. Al finalizar su trabajo,
el método nos avisa disparando el
evento CheckAndDownloadUpdateComple‐
ted. A través de la propiedad UpdateA‐
vailable del parámetro EventArgs de
este evento podremos conocer si se

Añadiendo efectos
visuales
No contentos con lo ya visto, repasa-
remos ahora de una forma rápida y
práctica otras potentes características
que también aparecieron por primera
vez con Silverlight 3.

Añadiremos a la interfaz de usuario
un StackPanel más, que contendrá un
elemento Image y un Slider (listado 7).
El objetivo que queremos conseguir es
poder aplicar efectos como DropShado‐
wEffect (que añade sombras a los ele-
mentos) y BlurEffect (que los difumi-
na). Añadimos tam