About the Author:

Wijmo UI Library builds on top of jQuery UI

June 7th, 2011

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.

About the Author:

jQuery UI 1.8.13 Release Executive Brief

May 20th, 2011

Earlier this week, the jQuery UI team released the thirteenth maintenance release of jQuery UI 1.8. The following is an executive brief of the release and our recommendation.

This release is another in a series of bug-fix releases by the jQuery UI team as part of an effort to clean up the code base in preparation for the 1.9 release.

The 1.8.13 release includes far more bug fixes than in previous releases due to the RewardJS campaign that is encouraging more contributions from the community. A total of 18 bugs were fixed in this release. No new features were added, but a change log is available to see which bugs were fixed.

appendTo Recommendation

This release is now supported with jQuery 1.6.1 so we recommend that you upgrade your jQueryUI applications to the latest versions of both jQuery 1.6.1 and jQuery UI 1.8.13. Be sure to update both the CSS and the JavaScript components of jQuery UI as the CSS may change when bugs are fixed. If you find any issues please report them to the jQuery UI bug tracker.

About the Author:

Configuring UI widgets and interactions with .live() and .delegate()

July 17th, 2010

Configuring jQuery UI widgets often means making sure certain methods are called on a given DOM element (wrapped in jQuery) before usage occurs. We see this configuration pattern everywhere in jQuery UI. Great everyday examples include configuring the datepicker widgets, as well as draggable and droppable interactions. A relatively common example is something like the following:

$(function(){
$('input.date:text').datepicker();
//...
});

(more…)