Developing For .NET

My current project has me back in the world of web development, something I haven’t done seriously in a few years.  This has been great because I’m getting to refresh my skills and get caught up with all the latest ASP.NET MVC 3 + Razor goodness.  Throw in the fact that we’re running the project on Azure, something else I hope to post about soon, and I am knee deep in learning new stuff!

I’ve been a fan of jQuery for sometime because, frankly, I really detest working in Javascript.  As my buddy Kevin Griffin is fond of saying “jQuery makes Javascript not suck.”  I’ve also been listening to him and Rich Dudley (both of ComponentOne) talk about Wijmo for a while now so I figured this would be a great opportunity to try it out.

What is Wijmo?

From the Wijmo website:

Wijmo is a complete kit of over 30 UI widgets with everything from interactive menus to rich charts. If you know jQuery, you know Wijmo.

Wijmo uses a combination of the jQuery UI widget factory and CSS to create some very nice UI widgets.  Wijmo is open source and there are both free and commercial licensing options available.  ComponentOne has done a great job putting together some great demos complete with source code samples, called the Wijmo widget explorer.  If you are creating interactive web sites I would definitely recommend you check it out.

Creating a Wijmo expander

Using the Wijmo Expander is very simple.  Inside a div element with an id, create an h3 that defines the header text and another div that holds the content.

<div id="myexpander">
  <h3>Expander Title</h3>
  <div>
    Expander contents go here
  </div>
</div>

We then add some jQuery that references the id and turns it into a Wijmo Expander:

$(function() {
  $("#myExpander").wijexpander({ expanded: false });
}

This will turn the rather vanilla HTML into a very nice expander UI element.  Setting expanded to false will automatically collapse the expander, you could of course use true to automatically expand it.  As you can see, Wijmo really makes the task very simple!

Working with the expander in jQuery

My page design included a dynamic series of expanders that are all collapsed by default.  The application could easily produce many expanders, each holding large amounts of information, so I wanted to add “expand all” and “collapse all” options.  I added a couple of anchor tags with ids for this purpose and some jQuery to process the click events:

$("#expandAll").click(function () {
  CODE GOES HERE
});
$("#collapseAll").click(function () {
  CODE GOES HERE
});

It was at this point that I realized I had no idea how to dynamically expand or collapse the expanders.  Since Wijmo is open source, I opened up the JS file (~/wijmo-open/development-bundle/wijmo/jquery.wijmo.wijexpander.js)for the expander and learned that the widget exposes two public methods: “expand” and “collapse”.  That was just what the doctor ordered to dynamically expand or collapse the widget:

  // to expand
  $("#myExpander").wijexpander("expand");
  // to collapse
  $("#myExpander").wijexpander("collapse");

Dynamic widget selection in jQuery

Since my application has an unknown list of expanders at design time I needed to be able to dynamically select all of the expanders.  Back in the JS file is a “_create” function that uses jQuery to dynamically add several classes, the first of which is “.wijmo-wijexpander”.  (I missed it the first time around, so thanks to Rich Dudley at C1 for helping me sort that one out.)

Heading back to our expandAll and collapseAll functions, we can now use jQuery to select all of the expanders and pipe them to “.each” to perform the action:

$("#expandAll").click(function () {
  $(".wijmo-wijexpander").each(
      function() { $(this).wijexpander("expand"); }
    );
});
$("#collapseAll").click(function () {
  $(".wijmo-wijexpander").each(
      function() { $(this).wijexpander("collapse"); }
    );
});

Sure enough, that did the trick!  My unconfirmed guess is that this formula should work for all the widgets.

Lessons learned

First, I learned that I made a good choice with Wijmo: it is easy to use and produces great results.  I also learned that, as I suspected, I can write plenty of my own jQuery to work with the widgets.  Finally, I learned that the supplied code is pretty good documentation in its own right.

Have you used Wijmo for a project?  If so, add a comment and let me know what you think.

Until next time, happy coding!