XForms and Declarative Applications

The Author Steven Pemberton, W3C/CWI, Amsterdam, The Netherlands

About me

Researcher at CWI in Amsterdam (first non-military internet site in Europe - 1988, whole of Europe connected to USA with 64kb link!)

Co-designed the programming language ABC, that was later used as the basis for Python

Wrote some of the Gnu C Compiler gcc in the 80's

Organised 2 workshops at the first Web conference in 1994

Chaired the first style and internationalization workshops at W3C.

Co-author of HTML4, CSS, XHTML, XML Events, XForms, RDFa, etc

Activity lead of W3C HTML and Forms Activities, co-chair of XHTML2 Working Group

Project meeting

HTML Forms: a great success!

Searching

Google

Buying

Amazon

Logging in

Yahoo

Configuring hardware

Linksys router

Reading mail

Reading mail

Composing email

Composing email

Etc etc

So why XForms?

After a decade of experience with HTML Forms, we knew more about what we need and how to achieve it.

The role of Abstraction

When HTML was first introduced, many people mistook it for a presentation language.

Unfortunately, so did the browser makers, and they introduced tags like <font> and <blink>, not understanding that <h1> didn't mean big and bold but meant This is the top-level heading.

CSS was an emergency attempt to get HTML back to how it was intended, a structure description language.

But still it was a lot of work to get the message over, and even Netscape opposed CSS for a long time, saying you could use script to achieve the same results. (This may have been because the code base couldn't support CSS, and would mean rewriting the browser :-) ).

Abstraction (continued)

But still, it took the web community a long time to get it, and understand why separating content and presentation is a better solution than presentation-oriented markup.

Examples:

Compare the following examples from csszengarden, all using the same HTML, but different stylesheets:

CSSzengarden post
zengarden post
zengarden worm

HTML Forms

People in general are quite concrete, and it takes a while to understand new abstractions.

HTML Forms is an example of this too: it is very presentation-oriented, and it mixes up presentation, function, and data values, all in one markup.

XForms has been designed based on an analysis of HTML Forms, what they can do, and what they can't, and what we actually need.

What do we want?

For instance:

Problems with HTML Forms

Soundbite: "Javascript accounts for 90% of our headaches in complex forms, and is extremely brittle and unmaintainable."

The Essence of XForms: Separation of Data from Content

There are two parts to the essence of XForms. The first is to separate what is being returned from how the values are filled in. Separation of values from controls

The Instance

The instance specifies the values being collected:

<instance>
   <data xmlns="">
       <name/>
       <birthdate/>
       <status/>
   </data>
</instance>

It also allows you to initialise the data from an external source:

<instance src="http://example.com/data/t123"/>

Datatypes

By default, all values are of type string. You can assign datatypes to data in the instance:

<bind nodeset="birthdate" type="date"/>

The XForms processor ensures that only valid data is submitted.

Restrictions

You can specify restrictions on values apart from just datatype:

<bind nodeset="year" constraint=". &gt; 1900" />

Required values

You can require that values be supplied, unconditionally:

<bind nodeset="name" required="true()" />

or conditionally:

<bind nodeset="state" required="../country='USA'" />

Optional values

Some values are only relevant depending on other values. There's no point in collecting a credit card number if the person is paying cash:

<bind nodeset="ccnumber" relevant="../method='credit'"/>

Calculated values

You can specify that certain values are calculated from others

<bind nodeset="area" calculate="../height * ../width" />

Submission

Finally the model specifies how and where to submit to, and what to do with the result (nothing, display it, put it in an instance).

<submission action="http://example.com/search"
            replace="instance"/>

The model = 'datasheet'

You can regard the model, collecting as it does the data, the types, restrictions and calculations as a sort of 'datasheet', describing the data to be used by the form.

The Essence: Abstract or Intent-based Controls

The second part of the essence of XForms is that the form controls, rather than expressing how they should look (radio buttons, menu, etc), express their intent ("this control selects one value from a list").

You then use styling to say how they should be represented, possibly with different styling for different devices (as a menu on a small screen, as radio buttons on a large screen).

Example

Colour: red green blue

Controls

Another side to the abstraction is that controls bind to data values in an instance

<input ref="birthdate">
     <label>Date of birth</label>
</input>

and so they know about the data they bind to. The system can provide a date picker without any work from the author.

Example

Spreadsheet-like calculations

The XForms engine keeps all calculations up to date as input values change, just like a spreadsheet.

Example

Some Use Cases

The XForms Approach means there are several unusual use cases

Configuring Hardware

Configuring hardware is even easier now: instead of the device hosting a web server that can deal with HTML Forms, all it has to do is deliver its configuration parameters as an XML document, and XForms provides the interface.

<instance>
    <config xmlns="">
        <hostname/>
        <domainname/>
        <ip/>
        <wireless/>
        <ssid/>
        ...
    </config>
</instance>

Many petrol stations (pumps, tills, storage tanks, ...) in the USA are configured in this way with XForms.

'Editing' any XML document

   <instance
      src="http://www.example.com/shop.xhtml"/>

... example

Editing example

Suppose a shop has very unpredictable opening hours (perhaps it depends on the weather), and they want to have a Web page that people can go to to see if it is open. Suppose the page in question has a single paragraph in the body:

<p>The shop is <strong>closed</strong> today.</p>

Well, rather than teaching the shop staff how to write HTML to update this, we can make a simple form to edit the page instead:

Editing XHTML page

... xmlns:h="http://www.w3.org/1999/xhtml" ...
<model>
   <instance
      src="http://www.example.com/shop.xhtml"/>
   <submission
      action="http://www.example.com/shop.xhtml"
      method="put" id="change"/>
</model>
 ...
<select1 ref="/h:html/h:body/h:p/h:strong">
<label>The shop is now:</label>
<item><label>Open</label><value>open</value></item>
<item><label>Closed</label><value>closed</value></item>
</select1>
<submit submission="change"><label>OK</label></submit>

Multilingual example

[example]

Multilingual English

Multilingual Dutch

More examples

Translation

Flickr

Geolocation (try dragging the map, and see what happens)

Implementations

At release XForms had more implementations announced than any other W3C spec had ever had at that stage

There are many different types of implementation:

implementations

Many big players have done implementations, e.g.

Users

As you would expect with a new technology, first adopters are within companies and vertical industries that have control over the software environment used. (This is just a selection)

... users

That list is there just to give a taste, but amongst others not mentioned there are at least 3 fortune 500 companies who don't want it to be public knowledge so that their competitors don't get wind of it.

As more industries adopt XForms, the expectation is that it will then spread out into horizontal use.

Mobile: XForms on an IPAQ

XSmiles running under J2ME PP

XSmiles on an Ipaq

XForms on a KDDI phone

Japanese announcement

Screens of Japanese Phones

...

Japanese phones

...

Japanese phone architecture, showing use of XForms

XForms (Picoforms) on a Nokia 9300

XForms running on a Nokia 9300

XForms (SolidApp) on a Sony Ericsson phone

XForms on a mobile phone

XForms for Web Applications

XForms has everything needed for an application:

People are already using XForms for some pretty exciting applications. xport.net who produce FormsPlayer are doing the most interesting stuff, by using SVG as the stylesheet language. They have produced examples such as a world clock, a contacts database, and even Google Maps in XForms!

world clock in XForms

Flickr in XForms

Flickr in XForms in Firefox

Google maps in XForms

Google maps in XForms

... maps

The interesting thing about this last example is that it is 25K of XForms, compared with 200K+ of javascript...

This is largely thanks to the declarative programming model of XForms, that means that you don't have to deal with lots of the fiddly administrative details.

Bear in mind that empirical evidence suggests that a program that is an order of magnitude larger takes 34 times as much effort; or put the other way, a program that is an order of magnitude smaller costs 3% of the effort...

Savings

A company that has been doing Ajax applications since 1999 reported that they were losing programmers to nervous breakdowns. They switched to using XForms instead.

A company that makes room-size machines, with complicated user interfaces normally used 30 people for 5 years to build the user interfaces. When they tried XForms, they did it in 1 year with 10 people!

Conclusion

The advantages of the XForms approach are:

More Information

Steven Pemberton: www.cwi.nl/~steven

These slides: from my homepage.