David Sills's muse is fueled by Bach, Beethoven, and Brahms (and Berlioz and Boulez). He has no life, which comports well with the über-geekitude to which he aspires. He reads and writes fitfully in English, Spanish, French, German, Italian (mostly medieval), C, VB, Perl.... Oh, and Java and XSLT, lots and lots of Java and XSLT. Trained somewhere in darkest Central America, he works today at DataSource, Inc., on the product team for the CASE tool Abri. David has posted 9 posts at DZone. View Full User Profile
Recently, a client requested a particular implementation for a
control in a web application. What they wanted looked like a standard
Windows widget, called by Microsoft a list builder.
You've undoubtedly seen a list builder: two lists next to one another,
the left one initially filled with options, the right one initially
empty, with buttons to move selected items from one list to the other.
I recognized the idiom and got to work, thinking I'd find a solution
without too much difficulty. Of course, I wasn't about to reinvent the
wheel, so the first thing I did was to check through toolkits I was
jQuery, so I checked out the jQuery UI project, which I knew had some
building blocks for making UI widgets. No such luck. There were bits I
could have used if I hadn't been dealing with a client who was only
interested in solutions that were useful to those needing assistive
technologies. No mouse-driven drag-and-drop solutions, then. Besides,
such solutions would have violated the principle of least surprise:
that's not how Windows list builders work.
In fact, as I looked around, I was bemused to discover that no matter
how widely I spread my seach net, I couldn't seem to catch a really
good overall solution for this problem. There were a few good,
incomplete suggestions, without a doubt, but it was increasingly clear
I would have to roll my own.
Naturally, the first thing to put together about any solution is a set of requirements. The obvious ones were these:
The solution had to contain two lists
Items had to be able to be moved using buttons from each list to the other
The user should be able to use the solution with the keyboard only
The solution had to be useful within an HTML form
Requirement 4 meant that the solution had to return a state representation that could be interpreted on a server. After some consideration, I added the following:
The selects should have the same height and width regardless of their current contents
The buttons should be vertically centered on the selects and horizontally centered on each other
(These were included to suggest visually that all of the pieces belong to a single widget.)
There should be buttons to move all of the contents of each list to the other
There should be buttons to move any combination of items within each list up or down (in other words, to reorder the lists)