Integrando el anclaje de IE9 con Microsoft Silverlight

Leon Braginski nos cuenta como usar la APIs de anclaje de IE9 con Microsoft Silverlight:

Leon: Antes de comenzar es recomendable que leas como se escribió la aplicación y su funcionalidad, dando clic aquí.

MSDN provee una documentación completa del como interactuar y manejar el código HTML y Silverlight aquí.

Hay dos temas de integración que son interesantes: Llamando la APIs de Java Scrip desde el administrador de código de Silverlight y Llamando el administrador de código Silverlight desde JavaScript.

A continuación revisaremos los temas de manera separada:

Llamando la APIs de Java Scrip desde el administrador de código de Silverlight

Primero necesitas llamar el código Javascript desde Silverlight para poder agregar los componentes de la Jump List o revisar que el sitio este corriendo en modo de anclaje.

Llamar la API de Javascript y obtener los valores de regreso, se puede hacer con el método “HtmlPage.Window.Invoke” (da clic aquí para acceder a una guía completa) este método requiere unos cuantos parámetros: una lista para invocar variables de parámetros para pasar la función, he aquí un ejemplo que hice en Silverlight :

HtmlPage.Window.Invoke(“addJumpListItem”, itemUrl.Text, itemText.Text )

addJumpListItem es una función que se ve así en JavaScript :

function addJumpListItem (itemUrl, itemText)

También es posible checar el valor regresado por la función de JavaScript, revisando el valor de regreso de “HtmlPage.Window.Invoke” como se ve a continuación en el código de Silverlight.

private Boolean siteMode = false;

siteMode = (Boolean)HtmlPage.Window.Invoke(“checkSiteMode”);

Por supuesto debes de tener la correspondiste función JavaScript como se ve a continuación:

function checkSiteMode ()

Que regresara ya sea un “falso” o “verdadero”.

Llamando el administrador de código Silverlight desde JavaScript

Necesitaras llamar métodos implementados por el administrado de controles de Silverlight si quieres ejecutar una función en especifico cuando el usuario interactué con el sitio anclado, como dar clic en la barra de botones, mientras aquí puedes obtener una guía completa de cómo hacerlo, a continuación encontraras unos puntos importantes para mi ejemplo.

Llamar a Silverlight desde JavaScript toma unos cuantos pasos más:

1.- Primero tengo que indicar que mi método es scriptable, y lo puedo hacer con atributo [ScriptableMember] de manera que se vera así:

[ScriptableMember]

public void getEventFromJavaScript(String str)

2.-A continuación debes registrar la instancia de la clase que conlleva el método accesible para ser scriptable usando el siguiente método:

HtmlPage.RegisterScriptableObject(“myapp”, this)

Ahora es tiempo de hacer algunos cambios con el código de JavaScript y HTML usado para el control Host de Silverlight, si deseas saber más da clic aquí. Adicionalmente necesitaras agregar una función a JavaScript pluginLoaded que maneje el evento de cargado hacia la instancia de control Silverlight:

function pluginLoaded(sender, args) {

slCtl = sender.getHost();

}

3.- Por ultimo tendrás que invocar el método de Silverlight de la siguiente manera:

function thumbnailclick(btn) {

if (btn.buttonID == prev)

slCtl.Content.myapp.getEventFromJavaScript(“previous”);

else if (btn.buttonID == next)

slCtl.Content.myapp.getEventFromJavaScript(“next”);

}

Finalmente cuando ejecutas el ejemplo de anclado desde tu servidor web necesitas asegúrate que el tipo correcto de MIME es creado para ARCHIVOS .xap como se discute aquí.

El administrador de código de Silverlight ofrece una rica integración con JavaScript, a diferencia de Flash, puede regir un numero variable de parámetros de distintos tipos, de, para y desde JavaScript.