Geeks With Blogs

News


Timmy Kokke's Blog

↑ Grab this Headline Animator

Timmy Kokke at Blogged
Timmy Kokke …just sorting my bubbles…

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 browser 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 Silverlight side.  With a few refactoring I had a 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 in 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 provide 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 in to.

A demo of accessing text elements can be found here. The Twitter demo can be found here.
 

jLight itself can be found at:

 

 

 

jLightLogo

 

http://jlight.codeplex.com

Posted on Monday, April 12, 2010 12:34 AM Silverlight , dotnetmag , jLight , jQuery , CodeProject | Back to top


Comments on this post: Introducing jLight – Talking to the DOM using Silverlight and jQuery.

# re: Introducing jLight – Talking to the DOM using Silverlight and jQuery.
Requesting Gravatar...
Thanks! I removed the failing twitter link.
Left by Timmy Kokke on Apr 12, 2010 12:58 AM

# re: Introducing jLight – Talking to the DOM using Silverlight and jQuery.
Requesting Gravatar...
Great! going to use jLight in my projects
Left by Vittore on Apr 12, 2010 7:31 AM

# re: Introducing jLight – Talking to the DOM using Silverlight and jQuery.
Requesting Gravatar...
Thanks! Let me know if you run into anything.
Left by Timmy Kokke on Apr 12, 2010 8:37 AM

# re: Introducing jLight – Talking to the DOM using Silverlight and jQuery.
Requesting Gravatar...
hmmm...its a brand new...
interesting :-bd
Left by Beben on Apr 14, 2010 2:46 PM

# re: Introducing jLight – Talking to the DOM using Silverlight and jQuery.
Requesting Gravatar...
Thanks 4 ur info
Left by eysa on Jun 03, 2010 5:50 PM

# re: Introducing jLight – Talking to the DOM using Silverlight and jQuery.
Requesting Gravatar...
I was just thinking about something like this myself and here you are, having implemented it already!

I have an issue though, and it's that you're using VS2010.
Since I'm using VS2008 I cant open the project at all. I have to create a new one and move over the source code to use it.

Other than that I really like this!
Left by Uzza on Jun 12, 2010 3:07 PM

Your comment:
 (will show your gravatar)


Copyright © Timmy Kokke | Powered by: GeeksWithBlogs.net