Desperately Seeking Love of Sophie

I started writing a small application that does Image search using live search APIs. Since it would be impossible to write one big post the covers all the aspects of this application, I decided to break it down in multiple posts and blog about pieces of this application. My goal for this application is to replace http://www.live.com using silverlight and I started with image search.

HTML -> Silverlight

The first part I will blog about is using Scriptable attribute to pass data from HTML to Silverlight. Since it is hard to build a search without a textbox and Silverlight does not have a text box yet, this gave me opportunity to play around with feature in silverlight that allows Javascript in HTML page to call into managed code. so my first step for this application was to build the HTML page that looks like above page.

There are four basic steps to this…

1. Create a class and mark it with Scriptable attribute. This makes instances of this class accessible to browser javascript.
2. Add public methods to this class and mark them as scriptable too.
3. Register one of the instance of this class using RegisterScriptableObject on WebApplication API and give it a name (E.g. SearchPage)
4. Use that scriptable instance from Javascript by using Silverlight Control OM (Control.Content.SearchPage)

For the search application, I needed to get the search term entered by the user in the textbox to managed application when user clicks on the search button.

<input name="Text1" id="Text1" type="text" style="width: 419px; height: 25px">
    <input type="image" src="search_go.gif" value="Submit now" alt="Submit now" name="Submit now"
        onclick="CallScriptable()">

In the  code behind for page.xaml (start page of the application), I added scriptable attribute to the Page to make it acessible via browser script.

namespace SearchApplication
{
    [Scriptable]
    public partial class Page : Canvas
    {

Next  step is have one of the methods of this instance to be accessible via script too. This is the method that “CallScriptable” javascript handler calls when user clicks on the search button. This method eventually calls into Live search service using search APIs.  “Remember it should be public” is the part that i tripped on for few minutes. I could not figure out why at runtime, i was getting error message no scriptable methods were found and it was because my method was not public.

[Scriptable]
//remember it should be public
public void Search(string searchstring)
{

Script still needs to know which instance of this class it needs to interact and this is achieved by registering instance of the class and giving it a unique name that script can use.

WebApplication.Current.RegisterScriptableObject("SearchPage", this);

Now script (in the CallScriptable handler) can use this name to access the class.

<script type="text/javascript">
    createSilverlight();
    function CallScriptable()
    {
        var input = document.getElementById("Text1");
        var control = document.getElementById("SilverlightControl");
        control.Content.SearchPage.Search(input.value);
    }
</script>

control.Content should expose all the scriptable objects. In this case  I pass in string and get nothing back but it is possible to get simple types back.