Add jQuery autocompletion to your Eclipse

It's easy with jQueryWTP. It is not an Eclipse plugin, it is a nice tool, which modifies some WTP plugin autocompletion definitions to make it support jQuery.

Installation is easy:

• run the tool
• find the plugin jar and patch it

The complete instructions with a video guide are available on the jqueryWTP homepage.

It works nicely, there is one gotcha however, which is not mentioned in the official instructions. You must choose the correct jar, the one, which is being used by WTP. It is possible to have multiple version of the same plugin jar - it is even anticipated if you update your plugins. So choose the correct version - it should be the most recent, with the highest version number. If you are unsure, try all of them, but don't forget to do a backup of the original plugin jar.

It can spare you few key strokes and eventually few trips to visualjquery.

Improve your jQuery-fu, write plugins

jQuery is a simple, yet powerful JavaScript library, which really changed my point of view of JavaScript-ing. A new wave JavaScript they call it and it receives this title righteously. The code you create is a pure elegance.

You start with 10 lines of jQuery that would have been 20 lines of tedious DOM Javascript. By the time you are done it's down to two or three lines and it couldn't get any shorter unless it read your mind.

But of course it can get shorter. It can get shorter by refactoring your script into jQuery plugin.

When it comes to writing, plugins people (including me) usually back off in horror. I heard about jQuery plugins long ago, but never dared to write one. Somewhere in my mind crept a thought, that

• It must be hard and thus left only to true masters
• It must require a deep knowledge of jQuery
• what could I possibly gain?

(I come from a Java world if you wonder).

None of the above is true. Writing jQuery plugin is as easy as writing jQuery script. It does not require any special knowledge. All that is needed, is to extend a jQuery object. Something like

$.fn.myPlugin = function() {
$this = $(this);
// plugin code
return $this;
}

Remember? This is JavaScript, not Java and the code above is the only thing needed to create a plugin. Inside the function, $this is reference to the jQuery object the plugin was called at.

$("table").myPlugin().addClass("surprise");

Now, $this is table and you can do all sorts of things with it. Because the plugin returns $this, jQuery operations can be chained.

By extending jQuery object, you do not only inherit its fields and methods, you inherit its elegance.

Now, back to my question, what could you possibly gain by creating a plugin? Mainly

• Higher degree of reusability JavaScript scripts are generally reusable, but when you create a plugin you can move it up one level. It is similar to refactoring the common code into reusable classes.
• Configurability This is related to the first point. The usual scenario without plugin is to have a snippet of code, then copy and paste it over to html and change the code to customize its behavior. It is much easier with plugin. You can write your plugin to accept some settings. This is how it could look:

  $(table).myPlugin({url: 'edit.htm', param: 'id'});
  

• Elegance
The code above surely looks better than a whole script, doesn't it?

Now it's time to show some real life example. I have been using a script, to make each row of a table clickable.

$("table tr").click(function() {
 location.href = 'edit.html?id=' + $("td:first a", $(this)).html();
});

Whenever I wanted to make the rows clickable I copied the snippet and changed the url or parameter name. But with the plugin..

$.fn.clickable = function(settings) {
 defaults = {
    href: 'edit.htm',
     paramName: 'id'
 }
 
 settings = $.extend(defaults, settings); //overwrite the defaults with provided setings
 
 $this = $(this);
 
 $("tr", $this).click(function() {
     location.href = settings.href + '?' + settings.paramName + '=' + $("td:first", $(this)).html();
 });
 
 return $this;
}

..I can use it:

$("table").clickable();

or when I am not confident with default settings, I can change them

$("table").clickable({href: 'change.htm'});

If you want to know more about plugins, read the official plugin authoring guide or Mike Alsup's excellent plugin development pattern.
I hope I inspired you.