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
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.
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.
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.
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.
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.
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.
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 !