Verbosio progress, 08/06/2009

It’s the project that Just Won’t Die Already!

A few months ago, I was thinking about Verbosio’s proposed template system. I realized it would be a lot more involved than I was thinking about two years ago. That, combined with Mozilla 1.9.1’s HTML 5 drag and drop support, required I scrap the original wizard design and start something new.

(Plus, it helps to give your users as much control as you can – while still guiding them through the complicated process. I didn’t give the user enough flexibility in the first design.)

It’s not finished yet, but the most difficult parts are done. (Or as we like to say at Skyfire, “feature-complete”.) I’ve had to create a whole new set of XBL bindings and JavaScript modules to support my perception of how some of this stuff should work.

Read on in the extended entry for the bindings and modules.


  • nodePosition.jsm: Creates XML tokens as JavaScript objects from a source XML string. (Thanks to Bjarne Stroustrup and his “Programming” book, published last year, for the idea.)
  • ElementRedirect.jsm: Just a quick way of matching a namespace URI and local name to a JavaScript method.
  • DragEventSupport.jsm: What if you want to prevent an element from taking a drop event, when it’s designed to take all of them? (Like, say, a XUL textbox.) Or store metadata about the content you’re dragging without having the metadata on the drag event’s “data transfer” object (and thus appearing when your drop operation finishes)? What if you want to match a textbox’s caret to its position in the value? You’re covered.
  • Drop targets: A simple way to drag & drop elements, and have them land on the first child, last child, next sibling, previous sibling, etc. of a targeted element. (bindings.xml#droptarget)
  • Minibutton: Just like it sounds, a button taking up as little space as possible. (bindings.xml#minibutton)
  • Node parser: Markup source code on the left, what it looks like on the right. (Getting this to work with drag & drop, and with drop targets, was especially tricky!!! I had to write a mochitest for that.) (bindings.xml#nodeparser)
  • A “progress scale bar”. I’m a little less proud of this one – it’s basically a big XUL scale element with labeled sections. It’s supposed to indicate what phase of the wizard you’re in. It’s kind of ugly, but it does work, and is very clear about where you are. (bindings.xml#progress-scale)
  • A primitive attribute-or-property selector. Give it a DOM element, and a couple inputs, and it will provide a reference to the application on what you want to select. (bindings.xml#property-selector)
  • A base binding for XUL elements to disable all XUL controls under them, by setting the primary element’s disabled property to true. (bindings.xml#master-control)

All of these files are available under MPL 1.1, LGPL 3+ and GPL 3+ (though the licenses are missing from most of them – I’ll fix that later). If you want LGPL 2+ and GPL 2+, just ask. The files are in an experimental XULRunner application under chrome/content and chrome/res/modules.