Archive

Archive for March, 2011

jQuery vs DOM return false

March 22nd, 2011 2 comments

What does return false do inside a JavaScript event handler? What does it do in a jQuery event handler? Are they the same thing?

The short answer is “no”. return false in a native JavaScript event handler prevents the default behaviour of the event. It’s the equivalent of event.preventDefault(). This is the same for DOM level 0 event handlers like this:

element.onclick = function () { };

and DOM level 2 event handlers like this:

element.addEventListener('click', function () {});

return false in jQuery, on the other hand, will stop the default behaviour and stop the event propagating. This can be seen in the jQuery source:

if ( ret === false ) {
  event.preventDefault();
  event.stopPropagation();
}

If the return value of the handler is false, jQuery will call preventDefault and stopPropagation on the event object.

I’ve made a fiddle to demonstrate this behaviour, showing what return false does with DOM level 0 handlers and with jQuery handlers, and how to achieve the same in a DOM level 2 handler.

Categories: Programming Tags: ,

jQuery.tmpl() presentation

March 20th, 2011 1 comment

Back in January I did a presentation at the Bristol Ruby User Group on jQuery.tmpl() – jQuery’s templating engine.

The presentation was filmed and is available on the BRUG website. The slides are also available.

I wrote the slideshow engine using jQuery.tmpl() – if you’re interested in viewing some real-world jQuery templating, have a look at the source on Github. I tried to use as many of the concepts introduced in the presentation as possible, so it’s a useful showcase of what can be achieved using jQuery templates.

Categories: Programming Tags: ,

id_barcode – a barcode maker for Adobe InDesign

March 4th, 2011 6 comments

id_barcode is multiple things. It’s an example of writing structured, modular code for an InDesign plugin. It’s a demonstration of test-driven development for producing InDesign plugins. It also makes barcodes.

InDesign barcode maker

First off, this is a barcode maker for InDesign. It’s fairly simple – just put in your ISBN, and choose the font for the ISBN and for the numbers under the bars.

The script file is available to download here. If you don’t know how to install an InDesign script, see these instructions on InDesign Secrets.

Here it is:

id_barcode dialog

and this is what the barcode looks like:

Pretty wild.

Writing modular InDesign plugins

I split id_barcode across four files:

Really barcode_main.js should be split up into two files, one for the GUI and one for rendering the barcode.

Each part of the code does one thing. barcode_library doesn’t know anything about InDesign, all it does is produce a data structure giving the relative bar widths. The GUI code doesn’t contain any logic, it just lets the user enter the relevant details. Then the rendering code takes the barcode from the GUI, uses the library to get the bar widths, and draws the barcode with these widths and the fonts selected by the user.

Because I wanted to make the plugin easy to use, I wrote a shell script to concatenate the relevant JavaScript files and remove the #import lines. This was pretty straightforward.

Test-driven development

I’ve been reading Test-Driven JavaScript Development – an excellent book. I used some of the basics from that to construct a very basic testing framework, contained in barcode_test.js. Also in that file are a number of tests used to ensure that barcode_library.js was doing the right thing. Every time I changed something, or refactored, rather than checking to see if the barcodes still came out correctly I could just run the tests and get instant feedback. I haven’t written tests for the rendering code, but that would be a good next step.

Next steps

So far this plugin is very basic. You can’t customise anything apart from the fonts, so if you standardly use a different barcode design you’d need to do manual work to each barcode. The error handling’s a bit rubbish as well. If I make it more customisable, I think it would be worth test-driving the layout changes. The most important thing is to write a test that ensures the bars are all the correct width. I’d then have to start delving further into InDesign’s object model, which is a bit of a mess. We’ll see.

If anybody’s interested in contributing you can fork me on github!

Categories: Programming Tags: ,