Introducing jLight - Talking to the DOM using Silverlight and jQuery

Introduction

With the recent news about Silverlight on the Windows Phone and all the great out-of-browser features in the upcoming Silverlight 4, you almost forget Silverlight is a browser plugin. It most often runs in a web browser and often as a control. In many cases, you need to communicate with the browser to get information about textboxes, events or details about the browser itself. To do this, you can use JavaScript from Silverlight. Although Silverlight works the same on every browser, JavaScript does not and it won’t be long before problems arise. To overcome differences in browsers, I like to use jQuery. The only downside of doing this is that there's a lot more code needed that you would normally use when you write jQuery in JavaScript.

Lately, I had to catch changes is the browser scrollbar and act to the new position. I also had to move the scrollbar when the user dragged around in the Silverlight application. With jQuery, it was peanuts to get and set the right attributes, but I found that I had to write a lot of code on the Silverlight side.  With a little refactoring, I had separated out the plumbing into a new class and could call only a few methods on that to get the same thing done. The idea for jLight was born.

jLight vs. jQuery

The main purpose of jLight is to take the ease of use of jQuery and bring it into Silverlight for handling DOM interaction. For example, to change the text color of a DIV to red, in jQuery you would write:

jQuery("div").css("color","red");

In jLight, the same thing looks like so:

jQuery.Select("div").Css("color","red");

Another example. To change the offset of the last SPAN, you could write this in jQuery :

jQuery("span:last").offset({left : 10, top : 100}); 

In jLight, this would do the same:

jQuery.Select("span:last").Offset(new {left = 10, top = 100 }); 

Callbacks

Nothing too special so far. To get the same thing done using the “normal” HtmlPage.Window.Eval, it wouldn’t require too much effort. But to wire up a handler for events from the browser, it’s a whole different story. Normally you need to register ScriptMembers, ScriptableTypes or write some code in JavaScript. jLight takes care of the plumbing and provides you with an simple interface in the same way jQuery would.

If you would like to handle the scroll event of the BODY of your HTML page, you’ll have to bind the event using jQuery and have a function call back to a registered function in Silverlight. In the example below, I assume there’s a method “SomeMethod” and it is registered as a ScriptableObject as “RegisteredFromSilverlight” from Silverlight.

jQuery("body:first").scroll(function()
{    
    var sl = document.getElementbyId("SilverlightControl");
    sl.content.RegisteredFromSilverlight.SomeMethod($(this));
});

 Using jLight  in Silverlight, the code would be even simpler. The registration of RegisteredFromSilverlight as ScriptableObject can be omitted.  Besides that, you don’t have to write any JavaScript or evaluate strings with JavaScript. 

jQuery.Select("body:first").scroll(SomeMethod);

Lambdas

Using a lambda in Silverlight can make it even simpler. Each is the jQuery equivalent of foreach in C#. It calls a function for every element found by jQuery. In this example, all INPUT elements of the text type are selected. The FromObject method is used to create a jQueryObject from an object containing a ScriptObject. The Val method from jQuery is used to get the value of the INPUT elements.

jQuery.Select("input:text").Each((element, index) =>
{
    textBox1.Text += jQueryObject.FromObject(element).Val();
    return null;
});

Ajax

One thing jQuery is often used for is making Ajax calls. Making calls to services to external services can be done from Silverlight, but as easy as using jQuery. As an example, I would like to show how jLight does this. Below is the entire code behind. It searches my name on twitter and shows the result. This example can be found in the source of the project. The GetJson method passes a Silverlight JsonValue to a callback. This callback instantiates Twit objects and adds them to a ListBox called TwitList.

public partial class DemoPage2 : UserControl
{
    public DemoPage2()
    {
        InitializeComponent();
        jQuery.Load();
    }
    
    private void CallButton_Click(object sender, RoutedEventArgs e)
    {
        jQuery.GetJson(http://search.twitter.com/search.json?lang=en&q=sorskoot,
                       Done);
    }
    
    private void Done(JsonValue arg)
    {
        var tweets = new List<Twit>();
        foreach (JsonObject result in arg["results"])
        {
            tweets.Add(new Twit()
                   {
                       Text = (string)result["text"],
                       Image = (string)result["profile_image_url"],
                       User = (string)result["from_user"]
                   }
            );
        }
        TwitList.ItemsSource = tweets;
    }
}
 
public class Twit
{
    public string User { get; set; }
    public string Image { get; set; }
    public string Text { get; set; }
}

Conclusion

Although jLight is still in development, it can be used already. There isn’t much documentation yet, but if you know jQuery jLight isn’t very hard to use. If you would like to try it, please let me know what you think and report any problems you run into.

jLight itself can be found at http://jlight.codeplex.com.