The xformsdz site is built on Drupal, the incredibly popular open source content management system. One of the main reasons that Drupal use continues to grow is its extension architecture -- it's fairly straightforward to create themes and modules that can be distributed separately from the main install.
When you look at the Drupal projects directory you'll find modules that support everything from ecommerce to newsfeeds, through translation to semantic web data stores.
One area that is not yet supported is the use of XForms in Drupal. Having a standard set of interfaces for the UI and data would provide an interesting extension mechanism for developers, and could create some exciting new ways to develop modules. It's been a long-term goal to address this, and yesterday we took the first step towards this by releasing a Drupal module which allows authors to manage the backplanejs XForms JavaScript library.
However, the tricky part is that for this mark-up to be 'interpreted' as XForms the backplanejs library needs to be added to the page, by way of a script tag. Also, the opening HTML tag at the top of the document needs to have the XForms and XML Events namespaces added.
One way to do this is to modify the templates that generate the pages on your Drupal site, but some sites will have many possible themes and therefore a variety of templates that would need to be changed by hand.
Which brings us back to the Drupal module architecture, because it provides a much better way to do this.
Installation is the same as for any Drupal module, and simply involves copying the module to the correct directory, unpacking it, and then enabling it in the administration section. (The steps are described in more detail on the Deploying backplanejs page at the backplanejs Google Code project.)
Once the module has been installed and enabled the backplanejs library can be set to load on specific pages, or on all pages of a certain type. (Drupal provides 'types' such as 'blog post' or 'story', and it's very easy to add others, like 'XForms sample'.)
But to save you going off to another page, we'll illustrate the technique here.
Let's say we wanted to explain how to use
This is pretty clear, and anyone could now cut-and-paste this code into their own application.
But for newcomers to XForms, it might not be so obvious what is going on. How exactly does this hint manifest itself? When does it appear, and when does it disappear? And this issue doesn't just concern less experienced coders; more experienced developers looking for a snippet of code to use will often want to see what that code does first.
The easiest way to help people to see what the code does is to actually run it there and then in the form. Here is a live version of the
Drink me!
Slurp.
Try it yourself -- move your mouse over the button and you'll see that the XForms is live. For today, this gives us an incredibly powerful way to create tutorials, but in the future it will give us a flexible way to 'skin' Drupal user interfaces.
The markup for what we just saw, looks like this:
When you look at the Drupal projects directory you'll find modules that support everything from ecommerce to newsfeeds, through translation to semantic web data stores.
One area that is not yet supported is the use of XForms in Drupal. Having a standard set of interfaces for the UI and data would provide an interesting extension mechanism for developers, and could create some exciting new ways to develop modules. It's been a long-term goal to address this, and yesterday we took the first step towards this by releasing a Drupal module which allows authors to manage the backplanejs XForms JavaScript library.
backplanejs
The backplanejs library is a superset of the Ubiquity XForms library which is itself being developed as a joint effort between us at Backplane and a team at IBM. The UXF engine allows XForms to be processed in any browser, and since it only uses JavaScript, it doesn't require users to install anything. The backplanejs library extends the core engine with support for RDFa, as well as throwing in a few rudimentary SMIL features, but the XForms parts will always be in sync with UXF.Using backplanejs in Drupal
At the level of the mark-up, creating an XForm in Drupal is pretty straightforward; all that's required is to paste some XForms code into a Drupal node in exactly the same way that any other mark-up is entered.However, the tricky part is that for this mark-up to be 'interpreted' as XForms the backplanejs library needs to be added to the page, by way of a script tag. Also, the opening HTML tag at the top of the document needs to have the XForms and XML Events namespaces added.
One way to do this is to modify the templates that generate the pages on your Drupal site, but some sites will have many possible themes and therefore a variety of templates that would need to be changed by hand.
Which brings us back to the Drupal module architecture, because it provides a much better way to do this.
The backplanejs Drupal module
The backplanejs module allows site builders to determine when to add the script tag and the namespaces, as well as which version of the backplanejs library to load.Installation is the same as for any Drupal module, and simply involves copying the module to the correct directory, unpacking it, and then enabling it in the administration section. (The steps are described in more detail on the Deploying backplanejs page at the backplanejs Google Code project.)
Once the module has been installed and enabled the backplanejs library can be set to load on specific pages, or on all pages of a certain type. (Drupal provides 'types' such as 'blog post' or 'story', and it's very easy to add others, like 'XForms sample'.)
Writing a tutorial
The main reason for loading the backplanejs library on the xformsdz site is to allow us to write XForms tutorials which have 'live' running code inserted into the page. A good example is the Easy map controls in Ubiquity XForms tutorial, although you'll find many others on the site.But to save you going off to another page, we'll illustrate the technique here.
Let's say we wanted to explain how to use
hint with the trigger control. We might first show the mark-up:
But for newcomers to XForms, it might not be so obvious what is going on. How exactly does this hint manifest itself? When does it appear, and when does it disappear? And this issue doesn't just concern less experienced coders; more experienced developers looking for a snippet of code to use will often want to see what that code does first.
The easiest way to help people to see what the code does is to actually run it there and then in the form. Here is a live version of the
trigger that we just discussed:
The markup for what we just saw, looks like this:
