Over the years a lot of code has been written against these various JS libraries. This means that Silverlight needs to play nice with existing code so that integration with existing sites is quick and pain free (and to reduce re-writes of existing code). Client code is client code and in .NET or not, it can still be very useful.
Nobody wants to re-write an entire site just to add some new existing tech. You want to reuse as much of your existing code as is possible.
jQuery rocks. It’s got some great features, like the jQuery object’s fluent interface, plugins and importantly the implementation of CSS style selectors. CSS selectors allow you do some cool stuff when searching the DOM based on CSS syntax. You can do stuff like “find me all the LI elements that are in UL elements that are in an element with a CSS class name of menuPanel -> “.menuPanel UL LI”. Check out the full power of jQuery selectors here.
jQuery is so cool and so powerful there is a case for using it even if you *don’t* have existing code based on it.
A potential case – CMS
I talked briefly about Silverlight playing nice with existing sites. It’s probably even more important that Silverlight plays nice with existing back end systems such as CMS. When Silverlight is used with a library like jQuery it becomes very easy to integrate.
Your new application can source data from the existing CMS without the CMS needing to know a single thing about Silverlight. And we’re not talking about integrating Silverlight with some existing API or web service.
You can use jQuery selectors with Silverlight to scrape the page both elegantly and simply.
Nitty gritty – jQuery in Silverlight
Using jQuery from Silverlight is very easy as jQuery (in all it’s awesomeness) has a single object to perform most operations -> the “jQuery Object”. Most people use jQuery by using the $ shortcut, but it’s also available on the JS global object (window) as a property called jQuery.
Now the code is ready to chain up some jQuery operations.
This code packages up the elements in to a List and returns the result.
List eleList = jQueryManager.Instance.GetElements(“#someDataDiv ul li a”);
List result = (from e in eleList
select new SomeDataObject()
Link = e.GetAttribute(“href”),
Text = e.GetAttribute(“innerHTML”)
The SomeDataManager class uses the jQuery helper class to find all the anchor tags that are in LI tags that are in UL tags that are in an element called “someDataDiv”. It does this by calling the jQuery selector “#someDataDiv ul li a”. Cool hey.
Once it gets the list of HtmlElements back it parses them out to get their Link and Text values and populates a simple business object class called SomeDataObject.
The SomeDataManager class also implements INotifyPropertyChanged so that it may raise an event when the data is ready. This means the class can be bound to using Silverlight DataBinding.
id x:Name="LayoutRoot" Background="White">
An ItemsControl in Page.xaml shows the result.
Finally – the HTML that this reads: a simple un-ordered list.
<div id="someDataDiv"> <ul> <li> <a href="http://www.sddn.org.au" title="SDDN Site">SDDN Site</a> </li> <li> <a href="http://blog.webjak.net" title="My Blog">My Blog</a> </li> <li> <a href="http://www.theage.com.au" title="The Age Website">The Age Site</a> </li> </ul> </div>
There is something else cool about this
It’s good practice to design your site in such a way to support all these groups -> a gracefully degrading site.