Silverlight + JavaScript = Ultimate Combo

Goldytech
Posted by in Silverlight category on for Intermediate level | Points: 250 | Views : 7599 red flag
Rating: 5 out of 5  
 1 vote(s)

In this post I teach you how you can integrate JavasScript in your Silverlight apps. Sample source code available for download.

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 !
Page copy protected against web site content infringement by Copyscape

About the Author

Goldytech
Full Name: Muhammad Afzal Qureshi
Member Level: Bronze
Member Status: Member
Member Since: 8/4/2009 10:58:17 PM
Country: India

http://goldytech.wordpress.com
Hello Everyone Myself Muhammad Afzal , aka GoldyTech. Thats my pen name. I reside in India and work as a solution Architect on .NET platform. I hope you must have enjoyed reading my blog. Please leave your comments or suggestions good or bad and help me to improve

Login to vote for this post.

Comments or Responses

Posted by: Vuyiswamb on: 6/4/2011 | Points: 25
Very Good article, especially when i needed this.

Thanks , my vote is 5
Posted by: Goldytech on: 6/4/2011 | Points: 25
Thanks for your appreciation.

Login to post response

Comment using Facebook(Author doesn't get notification)