Making Use of jQuery UI’s Widget Factory

For a long time, the only way to write custom controls in jQuery was to extend the $.fn namespace. This works well for simple widgets, however, as you start building more stateful widgets, it quickly becomes cumbersome. To aid in the process of building widgets, the jQuery UI team introduced the Widget Factory, which removes most of the boilerplate that is typically associated with managing a widget.

The widget factory, part of the jQuery UI Core, provides an object-oriented way to manage the lifecycle of a widget. These lifecycle activities include:

• Creating and destroying a widget
• Changing widget options
• Making "super" calls in subclassed widgets
• Event notifications

The Bullet Chart Widget
Before Pavan Podila builds this widget, let’s understand some of the building blocks of the widget. The Bullet Chart is a concept introduced by Stephen Few as a variation on the bar chart. The chart consists of a set of bars and markers overlaid on each other to indicate relative performance. There is a quantiative scale to show the actual range of values. By stacking the bars and markers this way, more information can be conveyed without compromising readability. The legend tells the kind of information you are plotting.