Low Pro Behaviours 101

17 JUL

Okay, I’ve gone on about this for long enough and made lots of promises. So now’s time to make a start on explaining all this business with Low Pro and ‘behaviours’.

Behaviours are part of Low Pro and are object orientated mechanism by which you can handle events and maintain the state of an element (or indeed a set of elements) and as I’ve found out recently are an incredibly nice way of writing and deploying UI widgets. Before I dive in to how to write your own behaviours, let’s get a flavour for how to use them. If you want to play along you’ll need the latest versions of Prototype and Low Pro as well as the remote behaviours which you can grab from my SVN.

The first thing to note about a behaviour is that they are simply specialised constructor functions so you can use them with the new keyword to create an instance:

var aLink = $('edit_5');
var ajaxLink = new Remote.Link(aLink, { method: 'post' });

Behaviours, when used with the new keyword, always take an element reference as the first argument. Any subsequent arguments are passed to the behaviours constructor. In the case above, Remote.Link is a behavior which when attached to a link will make the link trigger an Ajax request rather than a tradtional page refresh. With this behaviour the second argument is an options hash that is passed through to the Ajax request. Now we’ve created an instance of the behaviour that instance of the behaviour is bound to that element for it’s life time on the page handling click events on the link and sending Ajax requests.

If you need to attach a behaviour to multiple elements on then using new could get a little tedious. To this end behaviours work very nicely with Event.addBehavior:

Event.addBehavior({
  'a.edit': Remote.Link
});

Using a behaviour with Event.addBehavior in this way will attach a seperate instance of the behavior to every element that matches the CSS selector. Notice we don’t pass in an event in the selector as you might be used to. The behaviour knows what events it wants to listen for. Now all the links in the page with the class name ‘edit’ will invoke Ajax request. You may need to pass in extra information to the behaviour as we did above with the options hash. Thanks to a bit of metaprogramming hackery we can do this too:

Event.addBehavior({
  'a.edit': Remote.Link({ onComplete: triggerEdit })
});

As you can see, it’s almost like CSS for interactivity where you’re defining how elements behave in an declaritive, almost code-less fashion. In my own projects I’ve gained massive advances in maintainability by separating everything out into behaviours then using Event.addBehavior as the glue to my HTML. You don’t need to use custom HTML attributes or weird classnames – you just bind behaviours to elements as you would style rules in CSS.

Of course, using this method you don’t get references to the behaviour instances you’ve created. In fact, you’ll hardly ever need to get references to these behaviour instances as most behaviors don’t need public methods at all but in case you need to get at them there’s a property of each behavior that contains an array of all its instances on the page:

Remote.Link.instances //=> an array of all the instances of Remote.Link

So that’s basically how to use behaviours. In a day or two I’ll post part two of Behaviours 101 which will show you how to make your own but in the meantime try out some of the behaviours I’ve already created. So far there’s a Draggable, Droppable, A date picker, Remote link and Remote form. Check out the demo page.

14 Comments (Closed)

Dan this is fantastic. I’ve been using lowpro for a while now to make a project unobtrusive. This will make everything way cleaner.

Thankyou.

Also, there is no link in the article to your SVN repo. I had to go looking for it on another post.

Cheers

DanielDaniel at 17.07.07 / 02AM

Just spent the morning playing with LowPro and using the date selector across my app.

This would’ve saved me a few minutes, but oh well.

I also converted across some exisiting JS to behaviors, but have yet to clean up the code.

Great work.

DylanDylan at 17.07.07 / 02AM

Dylan: You might want to update your Low Pro and the dete selector with code from the 0.4.1 release I just tagged. I spent a fair bit of time last night on bug fixing duty last night.

DanDan at 17.07.07 / 09AM

I didn’t even know that lowpro had a date picker. Nice.!

Neeraj KumarNeeraj Kumar at 17.07.07 / 15PM

I just had a eureka moment reading this post and looking at the demo. I have had it as a rule to use the href values to identify the action in my javascript code and this makes it so much smarter and easier then the hacky approach I have been using. Thanks so much.

BaldurBaldur at 17.07.07 / 16PM

Looks neat Dan. I shall def have to give this a try on my next project.

MartinMartin at 17.07.07 / 16PM

An excellent writeup. The moment I saw these show up in your svn, I got excited.

Great idea, Dan.

MattMatt at 17.07.07 / 17PM

Anything that reduces and makes code neater sounds good to me. Shall add experimenting with this with Mootools to neverending list of things to do.

Mutiny DesignMutiny Design at 17.07.07 / 23PM

Cheers for the positive messages…it is worth noting that all the behaviours themselves are fresh from the oven. If you find problems please let me know. The behaviour framework within Low Pro however has been around (in hiding) for a few versions and is pretty battle tested.

Dan WebbDan Webb at 18.07.07 / 00AM

Hello! Good Site! Thanks you! ljrukzllwojpia

vhyqhmgrmmvhyqhmgrmm at 31.07.07 / 22PM

Freaking nice man! I was thinking about this for a while – and you’ve created a fantastic way to do it.

Great Work!

RahsunRahsun at 05.08.07 / 17PM

Wow, that’s quite sweet! Getting to write a considerable amount of js these days… and behaviours in protoype definitely help!

Ta

RiccardoRiccardo at 15.08.07 / 10AM

The article was great. However, I keep getting errors when trying to checkout the Low Pro library with subversion: 

svn: PROPFIND of '/external/lowpro/trunk': 405 Method Not Allowed (http://svn.danweb.net)

RyanRyan at 05.10.07 / 23PM

Ryan: looks like your missing a ‘b’. The url is:

http://svn.danwebb.net/external/lowpro/trunk

Also, it’s worth noting that it probably best to use one of the tagged versions rather than trunk at the moment because Low Pro trunk is in the middle of being adapted for Prototype 1.6 (which is going to involve some backward incompatible changes by the look of it).

DanDan at 06.10.07 / 00AM

About This Article

Related Linkage del.icio.us del.icio.us RSS feed

javascript

lowpro

prototype

tutorial