Interacción entre Silverlight y Javascript

La principal función de Silverlight para la web es la de aplicaciones empresariales y multimedia. Aún cuando puede contar con una gamma sumamente amplia de aplicaciones, herramientas de acceso a datos o cualquiera que sea el escenario, es posible que algún momento Silverlight deba interactuar con su página huésped. En el caso de este ejercicio lo haremos mediante HTML, ya sabes, la idea es que no importa como lo quieras hacer, vía un servidor IIS, Apache o lo que te llegue a la cabeza.

Sin importar el servidor web que uses, podrás realizar este ejercicio sin mayor problema.

Para comenzar inicia una aplicación Silverlight desde Expression Blend. Para cuestión de la interfaz simplemente deberás colocar algunos controles. De la siguiente manera.

El código XAML de esa interfaz es el siguiente.

<UserControl x:Class="Interaccion_Javascript.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="300" Height="290">
 
    <Grid x:Name="LayoutRoot" Background="White">
        <Button x:Name="btnInvocarSimple" Content="Función Simple Javascript" Height="27" Margin="8,8,8,0" VerticalAlignment="Top" Click="btnInvocarSimple_Click"/>
        <TextBox x:Name="txtArgumentoJavascript" Height="26" Margin="8,58,8,0" TextWrapping="Wrap" VerticalAlignment="Top"/>
        <Button x:Name="btnInvocarParametros" Content="Función con parámetros Javascript" Height="27" Margin="8,88,8,0" VerticalAlignment="Top" Click="btnInvocarParametros_Click"/>
        <TextBlock Margin="8,129,0,143" TextWrapping="Wrap" Text="Primera cadena:" HorizontalAlignment="Left" Width="95"/>
        <TextBox x:Name="txtNUmero1" Margin="8,0,0,113" TextWrapping="Wrap" HorizontalAlignment="Left" Width="134" Height="26" VerticalAlignment="Bottom"/>
        <TextBlock Margin="0,129,38,143" TextWrapping="Wrap" Text="Segunda cadena:" HorizontalAlignment="Right" Width="104"/>
        <TextBox x:Name="txtNumero2" Margin="0,0,8,113" TextWrapping="Wrap" HorizontalAlignment="Right" Width="134" Height="26" VerticalAlignment="Bottom"/>
        <TextBlock Height="18" Margin="8,0,0,80" TextWrapping="Wrap" Text="Resultado:" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="113"/>
        <TextBox x:Name="txtResultado" Height="26" Margin="8,0,8,50" TextWrapping="Wrap" VerticalAlignment="Bottom"/>
        <Button x:Name="btnResultado" Content="Obtener resultado" Height="27" Margin="8,0,8,8" VerticalAlignment="Bottom" Click="btnResultado_Click"/>
    </Grid>
</UserControl>

Como  puedes ver, los botones ya cuentan con los eventos “Click” manejados. El primer evento del botón se hará lo siguiente.

private void btnInvocarSimple_Click(object sender, System.Windows.RoutedEventArgs e)
{
HtmlPage.Window.Invoke("alertaSimple", null);
}

Quizá tengas un error de referencia. Solo necesitas agregar la sentencia using.

using System.Windows.Browser;

Sin ese error, ahora vete a la página HTML, la que hospeda a la aplicación Silverlight, mira la imagen de abajo. Checa aquel se que llama “Default.html”.

Abre el archivo y ubica la última línea del código Javascript (aproximadamente por la línea 60). Ahí escribe lo siguiente.

function alertaSimple()
{
alert('Mensaje simple desde Javascript');
}

Como puedes ver, la cuestión es sencilla, desde Silverlight puedes ser capaz de ver y acceder a un evento Silverlight, por medio de la clase HtmlPage, su propiedad Window y su método Invoke. Usando este método puedes llamar al método Javascript, el segundo argumento en este caso es nulo pues el método no recibe argumentos.

Si ejecutas la aplicación, el resultado será el siguiente.

Con el segundo botón, la invocación será similar, pero aprovechando la primer caja de texto le enviaremos un argumento.

private void btnInvocarParametros_Click(object sender, System.Windows.RoutedEventArgs e)
{
HtmlPage.Window.Invoke("alertaArgumentos", txtArgumentoJavascript.Text);
}

En el caso del código Javascript.

function alertaArgumentos(mensajeDesdeSilverlight)
{
if (mensajeDesdeSilverlight != null)
alert('Mensaje desde Silverlight: ' + mensajeDesdeSilverlight);
else
alert('No hay ningún argumento recibido');
}

El resultado será el siguiente.

La única diferencia entre uno y otro ejercicio es que simplemente le has pasado un parámetro al método Javascript.

Accediendo a un método Silverlight desde Javascript

Aquí la cosa es mas compleja, lo primero que debes hacer es registrar la  aplicación Silverlight como un objeto accesible desde Javascript, esto lo debes hacer desde el constructor de la clase, en este caso la del MainPage.

public MainPage()
{
InitializeComponent();
HtmlPage.RegisterScriptableObject("Pagina", this);
}

Con el “registro”, ahora lo que debes hacer es simplemente crear un método público de manera ordinaria pero justo arriba de su declaración lo debes definir como un método accesible, para ello utilizaras la clase ScriptableMemberAttribute, de esta manera Javascript podrá utilizarlo.

[ScriptableMemberAttribute]
public void MostrarResultado(string argumento)
{
txtResultado.Text = argumento;
}

Ahora para finalizar con el lado de Silverlight simplemente deberás utilizar el primer handler y con el poder llamar al tercer método Javascript.

private void btnResultado_Click(object sender, System.Windows.RoutedEventArgs e)
{
HtmlPage.Window.Invoke("calcularResultados", txtNUmero1.Text, txtNumero2.Text);
}

Como puedes ver, el tercer método tiene dos parámetros, de hecho en estos casos podrás mantener tantos argumentos como tu quieras. El evento Javascript será así.

function calcularResultados(numero1, numero2)
{
resultado = numero1 + " " + numero2;
 
var control = document.getElementById("silverlightControl");
control.Content.Pagina.MostrarResultado(resultado);
}

El método recibirá dos parámetros y los concatenará, después por medio del identificador del objeto que se encarga de alojar la aplicación Silverlight en la página HTML. Por último gracias al objeto accesible podrás acceder al igualmente accesible método y enviarle el resultado de la concatenación. Solo para terminar en el lado de HTML es que debes establecer el identificador necesario.

Ahora si, ejecuta por tercera vez el código, llena las dos cajas de texto y presiona el botón. El resultado es como se muestra en la imagen.

De esta forma podrás hacer  que ambas plataformas puedan interactuar sin mayor problema, solo es necesario recordar que no todos tus métodos deben ser accesibles a Javascript, de hecho lo mas recomendable es que utilices una clase especial para ello de esa manera es que podrás mantener los niveles de seguridad en tu aplicación de manera adecuada.