After reading my previous blog covering how to integrating IE9 pinning APIs with Adobe Flash, some of you may have wondered if the same fit is possible in Microsoft Silverlight. It certainly is!

To demonstrate the concept of integrating IE9 Pinning APIs with Microsoft Silverlight I have written an application which has exactly the same look, feel, and functionality as my previous Flash example:

1

Since the application is functionally identical to my Flash example, I will not go over the sample’s features. Instead let’s talk about implementation details.

MSDN provides documentation covering how to interact between HTML and Silverlight managed code here. There are two integration topics which are interesting: calling JavaScript APIs from managed Silverlight code and calling Silverlight managed code from JavaScript. Let’s review these topics separately.

Calling JavaScript APIs from Silverlight

You will need to call JavaScript from Silverlight to add Jump List items or to check if site is running in pinned mode.

Calling a JavaScript API and obtaining its return value is done by using the HtmlPage.Window.Invoke method (you can see a full walkthrough here). This method takes few parameters: a function to invoke and variable list of parameters to pass to the function. Here is the example of my code in Silverlight:

HtmlPage.Window.Invoke("addJumpListItem", itemUrl.Text, itemText.Text )

addJumpListItem is a function declared as follows in the JavaScript:

function addJumpListItem (itemUrl, itemText)

It is also possible to check the value returned from JavaScript function by checking return value of the HtmlPage.Window.Invoke call as follows in Silverlight code:

private Boolean siteMode = false;

siteMode = (Boolean)HtmlPage.Window.Invoke("checkSiteMode");

Of course you have to have corresponding JavaScript function declared as:

function checkSiteMode ()

…which in turn returns either true or false.

Calling Silverlight managed code from JavaScript

You will need to call methods implemented by the managed Silverlight control if you want to execute a specific task when user interacts with the pinned site, such as clicking on the thumbnail bar buttons. While a full walkthrough can be found here, below are the relevant highlights from my example.

Calling Silverlight from JavaScript takes a few more steps:

1. First I have to indicate that my method is scriptable. I do so by applying [ScriptableMember] attribute like so:

[ScriptableMember]

public void getEventFromJavaScript(String str)

2. Next I have to register an instance of the class which contains the getEventFromJavaScript method, accessible for scripting by using the following method:

HtmlPage.RegisterScriptableObject("myapp", this)

Now it is time to make some changes in the JavaScript and HTML files used to host the Silverlight control.

1. First I have to add an onLoad parameter to the Silverlight control. This is done on the HTML page hosting the Silverlight control: <param name="onLoad" value="pluginLoaded" />. You can learn about Silverlight onLoad event here.

2. You will need to add a JavaScript pluginLoaded function to handle the onLoad event and get a reference to the Silverlight control instance:

function pluginLoaded(sender, args) {

slCtl = sender.getHost();

}

3. The last thing left is actually to invoke the Silverlight method like so:

function thumbnailclick(btn) {

if (btn.buttonID == prev)

slCtl.Content.myapp.getEventFromJavaScript("previous");

else if (btn.buttonID == next)

slCtl.Content.myapp.getEventFromJavaScript("next");

}

There are few interesting details I ran into. I wrote the sample using Visual Studio 2010 and Microsoft Silverlight Tools 4 for Visual Studio 2010, which you can get from here. To be able to debug Silverlight applications you need to have Silverlight Developer Runtime 4 installed from here.

When you run the pinning example from your web server, you need to ensure that the correct MIME type is created for *.xap files as discussed here.

A few words about debugging.

1. When you create a Silverlight project in Visual Studio, a test HTML file hosting a Silverlight control will be created for you. However you can’t test pinning by launching a URL from a local drive, nor you can change the generated test HTML file by adding the necessary pinning metatags (since your changes will be ignored).

2. The solution is to copy the test file to your own HTML file (I copied it to a file named SLPinningDemo.html); make all needed modifications in this file and add it to the project. For actual testing and debugging you will need to create a virtual directory on your server and open HTML using http protocol like so: http://leonbrhpmain/sltest/SlPinningDemo.html

3. Since you can’t pin a web site if it is not accessed using HTTP, you can’t use F5 to step though your pinning code when running as actual pinned site (since F5 invokes the test HTML file from the local drive). The solution I have found is as follows:

a. Open the HTML file you created in step 3 above from the web server in IE9 and pin it.

b. Now open pinned application by clicking on the pinned application icon.

c. Attach Visual Studio debugger to all running iexplorer.exe processes (so you don’t have to guess which is a right process to attach to), put a breakpoint in your code and you are ready to debug managed code invoked in the actual pinned site!

Where do you go from here?

Silverlight’s managed code offers rich integration with JavaScript. Unlike Flash, Silverlight can marshal a variable number of parameters of various types to and from JavaScript. You may have noticed that:

function addJumpListItem (itemUrl, itemText)

…takes two separate parameters, so I did not have concatenate and then split multiple parameters in one string as I did in Flash. If you are planning to integrate Silverlight and JavaScript I invite you to thoroughly understand Silverlight /JavaScript marshaling.

Thanks you and I hope you find this post useful!

DOWNLOAD SAMPLE CODE!