Wire it up

While trying to wire up an interface for managing composited content on a page, it occurred to me that it's very similar to using something like Interface Builder (IB) on the Mac and pulling the wires with XCode. The wire problem is fundamentally difficult, but with JavaScript and HTML, it's plain awkward.

Essentially there are two ways to go about creating user interfaces and this goes for both desktop applications and browser-based applications. It's either done programatically or graphically. Certain tasks can only be accomplished programatically, so there nothing's new under that sun.

Both HTML and IB are essentially based on containment. Buttons inside panes inside dialog windows aren't much different than buttons inside divs inside a document body. However, IB is object-oriented and each object corresponds to a class in Objective-C. The linker is actually tying the knots of the wires at compile-time.

It's hard to express abstract objects with HTML, because you're typically only afforded a class name, the exception being form elements and anchors, but even they carry only a minimal set of attributes. It's common to simply put binary decorators in elements in the form of multiple class names, e.g. "selected", "enabled", "current".

An alternative wiring scheme is to use invisible anchors to signal some interaction using the "href", "rel" and "name" attributes to carry information. It's not a good solution, because there's no "value" attribute (which would facilitate an RDF-like structure) and none of these attributes are indexed, making queries slow.

A third strategy is to use hidden definition lists. This can be coupled with containment to express attribute name/value pairs. The disadvantage is that it's an inappropriate container. Definition lists are part of the document content, while element attributes typically aren't. But the structure is near-perfect.

Meanwhile, XML namespace attributes may qualify as a fourth option even though browser-support is still disappointing. There's fundamental support, but no high-level API. To change this situation, I decided to put together a jQuery plugin which provides XML attribute access using James Clark's namespace notation "{ns}name" which will be familiar to most people who've been parsing XML.

By combining the HTML attributes "id" and "class" (which all elements may carry) and XML attributes, we can model the state of a class instance. In a complex situation, one could use the prototyping features of JavaScript, but in many cases it will be good enough to simply use this as a data storage.

Update: I've successfully tested the plugin in Safari, Firefox and IE7.