Silverlight + JavaScript = Ultimate Combo

 

INTRODUCTION

Without the slightest of doubts it has been concluded in the .NET developers community that, Silverlight is great platform to build LOB applications. It has taken all the developers by storm since its inception just three years ago. Web, Desktop and now mobile a Silverlight app thrives in every space. In this post I will talk about one of my favourite feature in this great technology. It is about the browser integration and how can you play with DOM. I also showcase a very cool example to demonstrate this feature. The complete solution is available for download at the end of this post. So let me first talk about the sample app that we are going to build. We shall be using Bing Web Api. I won’t getting into much details of this api but will redirect you to the right place if you want to learn more about this.

So we will develop a Silverlight app that will allow the user to enter their search query in the TextBox and clicking on the Search button , the Bing Api using JSON protocol will fetch us the results. These results will be then displayed in the ListBox of the application. Refer to the screen shot of the application below

SilverlightSearchApp

So let us get started with it.

SILVERLIGHT AND BROWSER INTEGRATION

First thing first, to enable this integration you must ensure that ‘enableHtmlAccess’ attribute is set to true in your Silverlight plugin code.

HtmlAccess

As mentioned above we are using JSON protocol for this application hence most of the work will be done in JavaScript code. You will learn the following stuff in it.

  • How to call JavaScript function with parameters from Silverlight Code
  • How to create .Net class object from JavaScript
  • How to call a .Net method from JavaScript code again with parameters

Enough of talking now let me show you some code. Let us first see the JavaScript code which uses the Bing Web Api.

SearchText

I have the Search function which has one parameter , searchText. This function will be called from the Silverlight code. This function triggers a callback function called SearchCompleted, let us have look into this function now.

 SearchCompleted

The DisplayResults function has the core stuff , here I am creating the SearchResult object , which is actually a .Net class also I am calling SetDataSource method , which again a managed code method written in Silverlight from JavaScript. To enable all this there are few attributes by which these classes and methods must be decorated. We will look into them in a while. The above code is pretty simple I have used built in api methods like createobject. This method accepts the parameter the registered name or key by which these objects must be called from the JavaScript, I have written this code in App.xaml.cs in the Startup event.

 AppStartup

HtmlPage is the static class , I am using two methods RegisterScriptableObject and RegisterCreateableType. Notice the first arguments of these methods, these keys are actually used in JavaScript code. Now let us have look the .Net classes and their attributes to make this all work.

SearchResult

Notice this class is decorated with ScriptableType attribute which makes all this possible. If you miss these attributes you would get error. Let us now jump to now our other class which binds the ListBox in Silverlight app.

ListBoxItms

You already learn about ScriptableType attribute which is applied on class level. There is also another attribute called ScriptableMember, which needs to be applied to method or properties if you want to access them from the JavaScript code. Here SetDataSource method is decorated with this attribute, also the parameter value of this method is passed from JavaScript as seen in DisplayResults JavaScript function in the above code listing. Besides this I am also using Messaging functionality of MVVM LightToolkit for binding the ListBox.

CONCLUSION

Silverlight is a great technology to work with and its integration with JavaScript is like a icing on a cake. You can build great applications with this combo. As always your comments and feedback are welcome. You can download the sample code from here. Please note in order to run the application you must first insert your App Id from Bing. Its a two minute process and the registration is free. Create your Bing Developer App id from here. After you have got your id then search for the line ‘Insert your App id over here before you run’ in the SilverlightBrowserIntegrationTestPage.aspx page and replace this text with your App id.

Have a great day. Cheers !

Advertisements

2 thoughts on “Silverlight + JavaScript = Ultimate Combo

  1. I read your this post and I feel i would like jump more deep in SL, really cool example for integration and understanding with JS.

    Thanks for sharing..

    • Thanks Nikunj
      Just be there and dive with me in deep ocean of Silverlight and we shall pickup some amazing pearls. Watchout this space in future.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s