Blog

Wijmo UI Library builds on top of jQuery UI

In the May/June issue of CODE Magazine there is an article from Chris Bannon of ComponentOne called “Creating Wijmo: The New JavaScript Library in Town.” Chris takes us through the need internally at ComponentOne to build a robust user interface. After noticing that Microsoft had adopted using jQuery they easily made the choice to build a UI Library with jQuery called Wijmo.

“When Microsoft announced their decision to adopt jQuery as their official JavaScript library, ComponentOne took note. The idea is simple in nature, but monumental in principle. Microsoft’s decision to shift focus on using and contributing to jQuery was a big win for Microsoft, jQuery, and you. Now, millions of websites are using a common JavaScript library.”

When they started to build their library called Wijmo they drew inspiration from jQuery UI’s guidelines and best practices. “The team used the jQuery UI Widget Factory to build these widgets to all of jQuery UI’s guidelines and principles. The result has been a complete kit of widgets for developing applications to the high standards of jQuery UI.”

After the article walks you through why ComponentOne needed the library and why they choose jQuery and jQuery UI, you are taught how to make a widget with the jQuery UI Widget Factory. The examples are very easy to understand and show you exactly what to do and why you need to do it.

Well you aren’t going to necessarily destroy your widget, but you need to let anyone using it do so. Here is what the “destroy” method looks like:


   $.widget("wijmo.wijcontent", {
       //previous code here...
       destroy: function () {
           var self = this, e = self.element, o = self.options;
           self.element
            .removeClass("ui-widget ui-widget-content ui-corner-all " +
           "ui-state-hover ui-state-default wijmo-wijcontent")
           .unbind("." + self.widgetName);
           e.draggable("destroy").
              resizable("destroy");
           $.Widget.prototype.destroy.apply(self);
       }
   });

The “destroy” method is just a means of returning the DOM to its original state before it was turned into a widget. You can see we are undoing most of what we have done in _create. First, we remove the classes we have added. Next we unbind any events added. Then we destroy the draggable and resizable plugins. Lastly, we call the default “destroy” method from the widget factory.

Chris provides a great primer into building a jQuery UI Widget using the jQuery UI Widget Factory. If you’re looking for more information on using the Widget factory check out these articles.

Tweet about this on TwitterShare on FacebookShare on RedditShare on Google+Share on LinkedIn