XForms and the Semantic Web

About the Instructor

Steven Pemberton is a researcher at the CWI, The Centre for Mathematics and Computer Science, a nationally-funded research centre in Amsterdam, The Netherlands, the first non-military Internet site in Europe.

Steven's research is in interaction, and how the underlying software architecture can support the user. At the end of the 80's he built a style-sheet based hypertext system called Views.

Steven has been involved with the World Wide Web since the beginning. He organised two workshops at the first World Wide Web Conference in 1994, chaired the first W3C Style Sheets workshop, and the first W3C Internationalisation workshop. He was a member of the CSS Working Group from its start, and is a long-time member (now chair) of the HTML Working Group, and co-chair of the XForms Working Group. He is co-author of (amongst other things) HTML 4, CSS, XHTML and XForms.

Steven is also Editor-in-Chief of ACM/interactions.

Objectives

HTML Forms, introduced in 1993, were the basis of the e-commerce revolution. After 10 years experience, it has become clear how to improve on them, for the end user, the author, and the owners of the services that the forms are addressing. XForms is a new technology, announced in October 2003, intended to replace HTML Forms.

The advantages of XForms include:

It improves the user experience: XForms has been designed to allow much to be checked by the browser, such as types of fields being filled in, or that one date is later than another. This reduces the need for round trips to the server or for extensive script-based solutions, and improves the user experience by giving immediate feedback to what is being filled in.
It is XML, and it can submit XML.
It combines existing XML technologies: Rather than reinventing the wheel, XForms uses a number of existing XML technologies, such as XPath for addressing and calculating values, and XML Schemas for defining data types. This has a dual benefit: ease of learning for people who already know these technologies, and implementors can use off-the-shelf components to build their systems.
It is internationalized.
It is accessible: XForms has been designed so that it will work equally well with accessible technologies (for instance for blind users) and with traditional visual browsers.
It is device independent: The same form can be delivered without change to a traditional browser, a PDA, a mobile phone, a voice browser, and even some more exotic emerging clients such as an Instant Messenger. This greatly eases providing forms to a wide audience, since forms only need to be authored once.
It is easier to author complicated forms.

The presenter is one of the authors of the XForms specifications, and is chair of the Forms Working Group that produced the technology.

This tutorial works from a basis of HTML Forms, and introduces XForms step-by-step. It covers essentially all of XForms except some technical details about events, and no more than a passing reference to the use of Schemas.

Emphasis is on how to improve the user experience, and how XForms improves accessibility and device independence, and makes the author’s life easy in producing a better experience.

HTML Forms

Presentation oriented, mixing data and presentation
No types, Ping-ponging to the server
Reliance on scripting
Problems with non-Western characters
Accessibility problems
Hard to make cross-device for single authoring
Impoverished data-model, no integration with existing streams
Hard to manage, hard to see what is returned
No support for wizards and shopping carts etc.

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

Basic structure of XForms

Take this simple HTML form:

<html>
<head><title>Search</title></head>
<body>
    <form action="http://example.com/search"
          method="get">
         Find <input type="text" name="q">
         <input type="submit" value="Go">
    </form>
</body>
</html>

The main difference in XForms is that details of the values collected and how to submit them are gathered in the head, in an element called model; only the form controls are put in the body.

... basic structure

So the equivalent XForm is:

<model>
   <instance><data xmlns=""><q/></data></instance
   <submission
       action="http://example.com/search"
       method="get"
       id="s"/>
</model>

The <form> element is now no longer needed; the controls in the body look like this:

<input ref="q"><label>Find</label></input>
<submit submission="s">
    <label>Go</label>
</submit>

Complete XForms search example

<h:html xmlns:h="http://www.w3.org/1999/xhtml"
        xmlns="http://www.w3.org/2002/xforms">
<h:head>
    <h:title>Search</h:title>
    <model>
        <instance><data xmlns=""><q/></data></instance>
        <submission
            action="http://example.com/search"
            method="get" id="s"/>
    </model>
</h:head>
<h:body>
  <h:p>
    <input ref="q"><label>Find</label></input>    <submit submission="s"><label>Go</label>
    </submit>
  </h:p>
</h:body></h:html>

Getting Initial Values From Elsewhere

You don't have to specify the initial instance in the document itself, because you can load it from an external resource, like this:
```
<instance
  src="http://example.org/templates/t21.xml"/>
```
The resource then contains your data, like
```
<data><w>640</w><h>480</h><d>8</d></data>
```
You can use a local file, like src="file:data.xml"

... example

For instance to bind to the <title> element in an XHTML document
```
<input ref="h:html/h:head/h:title">...
```
(i.e. the title element within the head element within the html element, all in the XHTML namespace)
or the class attribute on the body element:
```
<input ref="h:html/h:body/@class">...
```
Note the need to put prefixes on elements that are in a namespace. This is why the xmlns="" attribute is needed on instance data.

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

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

The page must be correct XHTML (not HTML)
The server must accept the "put" method

Demos

More Information

The origin: www.w3.org/Markup/Forms, and if your company is a member: www.w3.org/Markup/Forms/Group

XForms: http://www.w3.org/TR/xforms/

XPath: http://www.w3.org/TR/xpath

XPath quick reference: http://www.mulberrytech.com/quickref/XSLTquickref.pdf

XML Events: http://www.w3.org/TR/xml-events/

validator: www.xformsinstitute.com