start > 2006-02-21 > 2

A custom Dojo widget

Created by hww3. Last updated by hww3, 19 years ago. Version #1.

I've been playing around with Dojo for the past few weeks, using it to add some rich functionality to the FinScribe application. In addition to having a number of useful methods that are useful for general Javascript projects, Dojo includes a pretty nifty widget system. http://www.dojotoolkit.org includes a number of pre-written widgets, including a cool "fisheye list" that's similar to the effect you get from the Mac OSX dock. The widget system also allows you to enhance and create new widgets outside of the Dojo core distribution.

One of the itches that I've found myself scratching over the years is the idea of what I'll call the "add/remove membership" widget. Really a compound widget, it's the one you typically see when there's a list of potential members and a list of members and a set of buttons that let you add or remove members (http://hww3.riverweb.com/hdadmin/screenshots/usergroup.png. I've implimented this in HTML and GTK on more than one occasion, but haven't ever really been happy with the result. One of the big problems is that my previous attempts weren't atomic. By atomic, I mean that you can make a number of changes to the list and then either commit or cancel.

FinScribe's administration interface includes a user and group management tool, so once again, I find myself in need of this imfamous widget. My bright idea was to develop a generic widget using Dojo that I can then use for multiple purposes. The problem with writing Dojo widgets is that there's little in the way of documentation that will be helpful. http://dojotoolkit.org/docs/fast_widget_authoring.html and http://www.richardrodger.com/roller/page/richard/Weblog/dojo_progress have both written some material, but for the most part, you're in uncharted territory. Reading through the dojo source is a critical component, and it really helps to have a good understanding of Javascript and its approach to object orientation (which I don't really posess.) Nevertheless, after a day of playing around, I think I came up with a workable solution.

The new widget, which I call a ComboPicker (yes, I know it's a dumb name) is generic and atomic. It takes a pair of methods that are used to supply the "possible members" and "current members" pool. The cool thing is that the widget makes sure that a given entry will appear in only one of the two lists at any given time. It also keeps track of the additions and removals based on the original state of the membership pool. On the output side, there are methods that can be used to get the additions and deletions, and if you place the widget in a form, the ComboPicker can hook into the form and populate a pair of input fields with the list of changes. I've added the widget to FinScribe, and you can see it in the edit groups feature in the admin interface.

Future directions might include the ability to order the members list (for use in situations where order is significant). You can download a ZIP file with the latest version from CVS, and check out the ComboPicker widget page for an example of its use. After this experience working with Dojo on a relatively complex UI component, I have to say I'm even more impressed with the Dojo event and widget systems. This is really powerful software.

Posted in web apps | RSS Feed | BackLinks