En el último post de la serie esta que comencé de "Las Cosas Claras" estuvimos viendo como podíamos acceder al DOM del explorador para, en el ejemplo, llamar a funciones javascript. Pues bien, hoy veremos como hacer precisamente lo contrario.

En el siguiente ejemplo veremos como desde javascript podemos provocar cambios en el Silverlight, en este caso cambiar la orientación de los elementos de un StackPanel, pero también podríamos provocar el inicio de una animación o pararla, etc.

En primer lugar utilizaremos el siguiente namespace ya que contiene lo necesario para realizar esto:

using System.Windows.Browser;

Centrándonos en la página principal del Silverlight Page.xaml. El código XAML será muy sencillo, un simple StackPanel con varios botones:

    <StackPanel x:Name="LayoutRoot" Background="White">
        <Button Content="Rojo" Background="Red"/>
        <Button Content="Verde" Background="Green"/>
        <Button Content="Azul" Background="Blue"/>
        <Button Content="Amarillo" Background="Yellow"/>
        <Button Content="Blanco" Background="White"/>
        <Button Content="Negro" Background="Black"/>
    </StackPanel>

Y en el código fuente debemos registrar la clase MiTipoScriptable para poderla usar desde javascript de la siguiente manera:

• En el evento Loaded de la página registraremos el objeto que será usados para acceder desde javascript al método.

HtmlPage.RegisterScriptableObject("slObject", this);

• Y por último decoraremos un método de la clase Page, donde hemos realizado el registro del objeto del punto anterior, con el decorador [ScriptableMember] el cual será el método al que podremos llamar desde javascript.

[ScriptableMember]
public void slMethod(string o)
{
    if (o != "H")
        LayoutRoot.Orientation = Orientation.Vertical;
    else
        LayoutRoot.Orientation = Orientation.Horizontal;
}

Ahora nos vamos a la página ASPX desde la cual llamaremos al método slMethod del Silverlight. Para esto en primer lugar obtendremos el contenedor del Silverlight el cual en nuestro caso del ejemplo se llama SilverlightContainer y por último accederemos al método registrado mediante la siguiente sintaxis:

function Orientacion(oo)
{
    var slPlugin = $get("SilverlightContainer");
     
    slPlugin.Content.slObject.slMethod(oo);
}

PD: Se han creado dos botones Vertical y Horizontal que llamarán a la función Orientacion para cambiar el tipo de orientación del StackPanel.

Hoy veremos algo que nos puede resultar muy útil en nuestras aplicaciones Silverlight. Estamos hablando de la posibilidad de acceder al DOM (Document Object Model) del navegador para llamar a una función javascript que hará lo que queramos en el cliente.

Para ello necesitamos en primer lugar usar el siguiente Namespace:

using System.Windows.Browser;

En este namespace disponemos de la clase HtmlPage que será la que nos permita tener el acceso necesario al DOM del navegador.

Para este post he montado en un momentillo un ejemplo muy fácil. Son dos botones y una caja de texto. El primer botón llama a una función que muestra un alert con un mensaje predefinido en el cliente y el segundo botón muestra un alert con el texto del TextBox como mensaje. Algo sencillo pero que muestra lo más básico que podemos hacer: Llamar a una función con y sin parámetros.

En el código fuente podemos ver como utilizando el método GetProperty al que se le pasa el nombre de la función javascript, obtenemos un objeto de tipo ScriptObject. Este tipo de objeto dispone del método InvokeSelf que se encarga de hacer la llamada a la función en cuestión. Este método recibirá los parámetros que le serán pasados a la función javascript.

private void bttLaunch_Click(object sender, RoutedEventArgs e)
{
    ScriptObject scriptMethod = (ScriptObject)HtmlPage.Window.GetProperty("MostrarAlerta");
    scriptMethod.InvokeSelf();
}

private void bttLaunch2_Click(object sender, RoutedEventArgs e)
{
    ScriptObject scriptMethod = (ScriptObject)HtmlPage.Window.GetProperty("MostrarAlerta2");
    scriptMethod.InvokeSelf(txtMessage.Text);
}

Un muestra del resultado por ejemplo al pulsar el segundo botón seria el siguiente:

En el siguiente post de esta serie veremos como hacer lo contrario. Llamar desde el cliente, el navegador, a un función del Silverlight.