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:

<model>
    <instance>
        <data xmlns="">
          <firstname/><surname/>
       </data>
   </instance>
</model>
 ...
<input ref="firstname"><label>First name</label></input>
 ...
<output ref="firstname"/>

Input and output

(Source)

Values can be calculated

<model>
   <instance>
       <data xmlns="">
          <height/><width/><depth/><volume/>
       </data>
   </instance>
   <bind nodeset="volume"
         calculate="../width*../height*../depth"/>
</model>

Volume example

(Source)

Controls are abstract

Here are three identical controls, just styled differently

(Source)

The control

<select1 ref="sex">
    <label>Gender</label>
    <item>
        <label>Male</label>
        <value>M</value>
    </item>
    <item>
        <label>Female</label>
        <value>F</value>
    </item>
</select1>

Data can be obtained from external sources

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

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>
</input>

Example

(Source)

The language file

(Source)

You can bind to repeating data

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

Example: to do (34 lines)

(Source)

Example: maps (37 lines of mark up)

(Source)

Maps

<instance>
 <data xmlns="">
   <zoom>10</zoom>
   <posx>87140</posx> <posy>130979</posy>
   <x/><y/><scale/><maxpos/><url/>
 </data>
</instance>

<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"
  calculate="concat('http://a.tile.openstreetmap.org/',
                  ../zoom, '/' , ../y, '/', ../x,  
                  '.png')"/>

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

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

Selectors

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

ref="x"

or the occasional

"../y"

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

coords.x

you write

coords/x

Example: Interaction

Wikipedia example

Wikipedia

<instance id="isearch">
  <data xmlns="">
    <action>opensearch</action>
    <search/>
  </data>
</instance>

<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:

http://en.wikipedia.org/w/api.php?action=opensearch&search=whatever

Results

Wikipedia gives you results that look like this:

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

Controls

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"/>
</repeat>

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.

Implementations

There are many implementations of XForms:

And there are many types of implementation:

Conclusion

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