XForms Examples

Steven Pemberton, CWI Amsterdam

XForms Structure

XForms has a data model, where all data is stored, and in the body controls where data values can be input or output:

        <data xmlns="">
<input ref="firstname"><label>First name</label></input>
<output ref="firstname"/>

Input and output


Values can be calculated

       <data xmlns="">
   <bind nodeset="volume"

Volume example


Controls are abstract

Here are three identical controls, just styled differently


The control

<select1 ref="sex">

Data can be obtained from external sources

    <instance src="http://..."/>

And data can be written back to external sources.

<submission resource="http://..." .../>

And values can be output anywhere

<input ref="age">
    <label><output ref="age-text"/></label>



The language file


You can bind to repeating data

<repeat nodeset="todo"
    <input ref="date>">...

Example: to do (34 lines)


Example: maps (37 lines of mark up)



 <data xmlns="">
   <posx>87140</posx> <posy>130979</posy>

<bind nodeset="scale" calculate="power(2, 18 - ../zoom)"/>
<bind nodeset="maxpos" calculate="power(2, 18)-1"/>
<bind nodeset="x" calculate="floor(../posx div ../scale)"/>
<bind nodeset="y" calculate="floor(../posy div ../scale)"/>
<bind nodeset="url"
                  ../zoom, '/' , ../y, '/', ../x,  

All the interaction has to do is update zoom, posx, and posy, and output the tile:

<output mediatype="image/*" ref="url" />


As you have seen, most selectors ('variable names') are just simple names like


or the occasional


This already hints at the fact that selectors in XForms look like directory paths (in fact they are called XPaths). So rather than Javascript


you write


Example: Interaction

Wikipedia example


<instance id="isearch">
  <data xmlns="">

<submission resource="http://en.wikipedia.org/w/api.php"
  method="get" replace="instance" instance="suggestions"
<instance id="suggestions"><data xmlns=""/></instance>

This generates the url:



Wikipedia gives you results that look like this:

<SearchSuggestion version="2.0" xmlns="http://opensearch.org/searchsuggest2">
      <Description>Extensible Markup Language (XML) is a set of rules for encoding documents in machine-readable form. </Description>
      <Text>XML Schema (W3C)</Text>
      <Description>XML Schema, published as a W3C recommendation in May 2001, is one of several XML schema languages. 


We bind to the search string:

<input ref="search" incremental="true" />

And then, every time the value changes we submit the data:

<send ev:event="xforms-value-changed"/>

We then display the results with:

<repeat nodeset="instance('suggestions')/Section/Item">
     <output value="Text"/>

Data point: Big machines

A certain company makes BIG machines (walk in): user interface is very demanding — needs 5 years, 30 people.

This became: 1 year, 10 people with XForms.

Do the sums. Assume one person costs 100k a year. Then this has gone from a 15M cost to a 1M cost. They have saved 14 million! (And 4 years)

Data point: applets

A company is producing many small applications using XForms, based on previous Javascript versions.

They report that the code is less than 25% of the original size (so a tenth of the work).

"[The designers] are really happy to not have to use javascript by the way: they like that if things don't work its not their fault"

Data point: application

(True story)

Manager: I want you to come back to me in 2 days with estimates of how long it will take your teams to make the application

[2 days later]

Javascript man: I'll need 30 days to work out how long it will take to program it

XForms man: I've already done it.


There are many implementations of XForms:

And there are many types of implementation:


Declarative applications require much less work to produce

Experience has shown that an application requires about an order of magnitude less work to produce in XForms.

XRX makes database manipulation very much easier.

More on XForms: XForms 1.1 Tutorial