Ojay 0.2.0: easy keyboarding, a validation DSL, and two new UI widgets

It’s been about four months since our last release (and I really did want this to happen about a month ago, but I’ve only so much time), and now we have a new version of Ojay for you to download and play around with. It’s a drop-in replacement for 0.1.x so you really have no excuses. Here’s a taste of what’s new in this release.

Ojay.Forms. By far the biggest new package, Ojay.Forms sorts out a real pain point for me in terms of app development. It does two things: it provides unobtrusive replacements for the YAHOO.widget.Button family of classes, and it provides a DSL for handling form validation and Ajax submission.

First up, the button replacements. I’ve long found YAHOO.widget.Button to cause way more pain than it’s worth. We used to use it a lot just to let us apply CSS to form inputs, and for that use case it tends to be overkill and really gets in your way. This is especially true if you ever need to use script to extract data from forms – you have to generate a bunch of hidden fields, and that only works if you do it no more than once, so Ajax stuff fails. Also, it doesn’t pick up labels automatically so you get garbled text displayed to the user, keyboarding doesn’t work like it ought to, I could go on and on. Ojay provides three classes (Ojay.Forms.Checkbox, Ojay.Forms.RadioButtons and Ojay.Forms.Select) that let you apply CSS to inputs without breaking all your form serializing code. They take a much more simple approach to changing the UI: they hide the input tag and listen to events it publishes to change class names on its label tag so you can style it. (It’s a bit more complicated for selects but I digress.) What this means is that you get a lot of UI behaviour ‘for free’, such as checking, focusing, keyboard navigation, jumping to a drop-down option by typing it out, etc and it all works exactly the way users expect because you’re just monitoring what the browser is doing. It also means you can still read data from the form with script without jumping through YUI’s hoops, since the original form elements are preserved. These controls have made our lives so much easier when styling forms.

The other component of Ojay.Forms is the validation API. I know, validation is a dull subject but I wanted to make it as easy as possible so if you want to take a bit of load off your server in failed requests, you’ve no reason not to. (Ojay.Forms code is easy to generate programmatically so you can generate client-side code from your server-side rules. More on this in a future announcement.) It gives you an expressive declarative API that completely abstracts out the DOM hooks and lets you focus on your data requirements. I won’t go into details here, it’s much easier to just show you an example. As a side note, this module really shows off how useful functional programming is when writing JavaScript DSLs. This API is what prompted my DSL article a while ago.

Ojay.Keyboard. The new keyboard package is an abstraction over YAHOO.util.KeyListener that lets you say what mean without worrying about character codes, for example:

Ojay.Keyboard.listen(document, 'ALT SHIFT S', function() {
    // handle key press
});

It lets you group sets of keyboard commands together so you can make context-sensitive keyboard controls, and gives you easy access to enable/disable key events and their default browser responses. Not much more to say except that you should check out the documentation.

We have two new UI packages, Ojay.Overlay and Ojay.Paginator. Overlay gives you a bunch of classes for positioning content on top of the document, producing lightbox effects and the like, and Paginator implements the content slider effect that’s got a lot of attention recently, including the ability to lazy-load pages of content via Ajax, and easy integration with Ojay.History. Both packages come with a collection of events to allow your code to react to changes to the components, just like you would for DOM elements.

Speaking of events, this release introduces Ojay.Observable, a JS.Class module that allows any class to support the on() method used for listening to events. This module underlies the custom events published by all the Ojay components. More information and examples are in the documentation.

Apart from all that, we have a bunch of improvements to the 0.1 codebase, including easy event delegation and HTTP events. I’ve rambled on a bit here so I’ll leave it to you to browse the website, download the new release and get to know all the great features we’ve added. Have fun!

If you’ve enjoyed this article, you might enjoy my recently published book JavaScript Testing Recipes. It’s full of simple techniques for writing modular, maintainable JavaScript apps in the browser and on the server.