Development Tasks: Writing your own JQuery Plugin and Widget

Ok, I'll admit it. When I was initially asked to work on the front-end components of our web application, I wasn't too happy. I thought I'd be writitng lines and lines of procedural Javascript code because Javascript is an inadequate language which does not supoort OOP principles ... or so I thought.

A few pluralsight videos later I discovered how JQuery was a brilliant JavaScript library that just simplified way I wrote javascript. Don't get me wrong, There is still room for improvement but it does let you do some pretty funky things.

In this post I'll be talking about writing your very own JQuery plugin and widget. My main reason of writing this post was for it to facilitate as a prequel to my next post about wrapping the Slick Grid. I've used a lot of recommendations from Project Silk.

So here we go ..

JavaScript, jQuery and jQuery UI.

JavaScript is a client-side scripting language, and also a prototyping language which means that its objects can have properties added dynamically at any time. The language itself is fine, but can be quite frustrating when different browsers get involved, and there are a few things that need smoothing over.

So, this is where jQuery steps in. jQuery is a JavaScript library that's been developed to get rid of most of those annoyances. The library simplifies a lot of common tasks, such as:

Selection, traversal and modification of DOM elements
Making AJAX requests
Cross-browser support (this is built into jQuery and virtually becomes a non-issue)
Extensibility and modular development with plugins and jQuery UI widgets

jQuery UI is a plugin for the jQuery library, that simplifies the process of creating specialised widgets to use in the web. You can think of widgets as being similar to ASP.NET user controls. A jQuery widget is targetted at an HTML element, and augments that element with richer functionality. You might have a simple, empty <div>, which is then used by a jQuery widget to display a customisable grid, or a text <input> that is turned into a date/time picker, or an autocomplete input.

JavaScript Objects, jQuery Plugins, and jQuery UI Widgets

Most of the client-side code that you're writing will fall into one of three categories:

UI Modules - Adding, removing and modifying UI elements
Behavioural Modules - Adding behaviour to elements
Infrastructural Modules - Completely separate from UI concerns

And the types of objects we work with will be:

JavaScript Objects - Collection of properties which may be functions, or just simple data.
jQuery Plugins - Extending the functionality of the jQuery framework
jQuery UI Widgets - Similar to User Controls, associated with HTML / DOM elements, encapsulates complexity

JavaScript Objects

These can be:

Native objects - Supplied by JavaScript, e.g. String, Number, Array, Image, Date, Math... etc.
Host objects - Supplied by the client/browser environment, e.g. window, document, forms... etc.
User-Defined objects - Defined by you, the programmer.

jQuery Plugins

Notice how an anonymous function is declared, which accepts a single argument ($). On the final line, the anonymous function is called with (jQuery).

The plugin itself is defined within an object, which is passed to jQuery's extend function.

jQuery UI Widgets

This offers a clear way of developing widgets that will require some setup, cleanup and a way of passing arguments in (similar to a normal constructor).

Some of the standards functions in a jQuery UI widget are:

_create - Used to perform all the general setup and attaching bindings to various different elements, instantiating children and injecting elements into the HTML as necessary.
destroy - Used to perform a complete cleanup of the widget and its elements.
options - Allows us to pass options into the widget when it is being instatiated.