Click here to Skip to main content
Click here to Skip to main content
Technical Blog

Tagged as

Introducing jLight - Talking to the DOM using Silverlight and jQuery

, 27 Apr 2010 CPOL
Rate this:
Please Sign up or sign in to vote.
Using jQuery style syntax to talk 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.

jLightLogo


License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Timmy Kokke
Software Developer (Senior) Centric Netherlands B.V.
Netherlands Netherlands
Microsoft MVP Client Dev . Founder of http://StoreAppsUG.nl, the Dutch Windows Store apps and Windows Phone apps usergroup. XAML / HTML5 developer. Writer. Composer. Musician.
 
Twitter
@Sorskoot
 
Awards / Honers
• October 2010,2011,2012,2013: Awarded Microsoft Expression Blend MVP
• June 2009: Second Place in the WinPHP challenge
• February 2009: Runner-up in de Mix09 10k Challenge
• June 2008: Winner of the Microsoft expression development contest at www.dekickoff.nl
 
Bio
I started programming around 1992, when my father had bought our first home computer. I used GWBasic at that time. After using QBasic and Pascal for a few years I started to learn C/C++ in 1996. I went to the ICT Academy in 1997 and finnished it in 2002. Until December 2007 I worked as a 3D specialist. Besides modelling I worked on different development projects like a 3D based Scheduler and different simultion tools in C# and Java. Though out the years I've gained much experience with ASP.NET, Silverlight, Windows Phone and WinRT.
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.141220.1 | Last Updated 27 Apr 2010
Article Copyright 2010 by Timmy Kokke
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid