Volume 2, Issue 7; 20 Feb 2018

A casual exploration of XForms with a little help from my friends.

I am reminded, periodically, just how good XForms are and how much I like them despite the fact that I don’t use them much. In fairness, though, that’s only because I don’t have very much need for forms of any kind. Yes, I know, the comment form below uses jQuery instead of XForms. It’s true. What can I say? Legacy, baby, legacy. Fixing that is definitely in the someday pile.

Most recently, XForms burbled across my radar at XML Prague. I missed the second day (circumstances beyond my control) so I didn’t see Saxonica’s presentation of Implementing XForms using interactive XSLT 3.0 or Steven’s Minesweeper in XForms demo.

But by coincidence, I had recently bookmarked Replacing jQuery with Vue.js and that turns to be mostly about forms. The author, Susan Drasner, makes a persuasive case for Vue’s more declarative approach. Bravo! Forms should be declarative.

But the actual declarative markup hurts my eyes a bit:

<div id="app">
  <button @click="active = !active" :aria-pressed="active ? 'true' : 'false'"
    >Toggle me</button>
  <p :class="{ red: active }">Sometimes I need to be styled differently</p>

I suppose there’s nothing wrong with it, exactly, but attribute names beginning with “:” and “@” hurt my old XML eyes.

My first thought was, “wouldn’t this be even better in XForms?” It would have taken me a few days to refresh my memory of XForms, so I cheated and asked Steven Pemberton if he could construct equivalent examples in XForms quickly. Of course he could. (Thank you, Steven!)

Here, by the way, is XForms declarative markup for the example above:

  <label>Toggle me</label>
  <setvalue ref="state" value="if(.='normal', 'warning', 'normal')"
<output class="{state}"
        value="'Sometimes I need to be styled differently'"/>

It looks better to me, but I readily conceded that understanding either example requires some familiarity with the actual technology. I’m not going to argue that “ref="state"” is objectively any more intuitive than “:class="ed:active"”.

Anyway, I took all the examples that Steven sent and wordsmithed them a bit. They’re in xforms-examples.xhtml. [--updated 31 Dec 2020; URI moved.] If there are errors, attribute them to me, not Steven!

That’s a live page, using XSLTForms. I’d love to see the equivalent page using Saxonica’s XForms engine, but I haven’t attempted to set it up. Of course, there are also very powerful server side solutions.

The browser vendor’s decision to treat XML like an allergen means we’ll probably never see proper support directly in the browser where it would be most useful. But as an application development platform, it’s clearly robust enough to support implementations.

I highly recommend Steven’s XForms: an Introduction for more background and some very compelling use cases that demonstrate why XForms is better than a bag of JavaScript, even if it has to be implemented with such a bag.