Las Cosas Claras: Desde Javascript interactuar con Silverlight

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.

Stackpanel

Stackpanel2

Curso Windows Live APIs para desarrolladores Php y Jsp

Pues hoy ya esta disponible el curso on-line que realicé sobre como enriquecer, mediante las APIs de Windows Live las páginas web creadas por los desarrolladores PHP y JSP.

El curso esta disponible para su descarga desde Aqui, y se tratarán las siguientes APIS:

  • API Search
  • Virtual Earth API
  • Windows Live ID API
  • Messenger Activities
  • IM Control & Presence API

    En el curso también se incluyen vídeo explicativos y sí, lo reconozco, como creo que le pasa a casi todos los mortales, no me gusta escuchar mi voz grabada :S

    Habrá novedades sobre algún curso nuevo de más APIs de Windows Live que se publicará en un futuro.

    Pues a enriquecer se ha dicho.