XForms tutorial part 1

THIS POST IS SUPERSEDED BY A NEW SERIES OF ARTICLES ON XML TECHNOLOGIES AND XFORMS... READ MORE IN PART 5 OF THE XFORMS TUTORIAL...

Introduction

Initially it wasn't my intention to write a tutorial on XForms. In fact I was trying to find a solution to a real world problem. The reason I decided to use this as a basis for an XForms tutorial is that many people don't understand the purpose of XForms and similar techniques. With a simplified definition of my technical challenge this tutorial should convey the advantages of XForms over related techniques.


The challenge

When you're storing company data, one of the most fundamental design choices is the model you try to fit the data to. In many cases developers are used to forcing every possible data model to an ER-diagram for a classic relational database. Relational databases are very well suited for storing large ammounts of structured data and building efficient queries. Relational databases have been evolving for decades and have become very mature solutions providing various solutions to common practical issues.

Their weakness however is that real world data doesn't always match the theoretical structures assumed by ER-diagrams. In practice either the data is forced into an inadequate model or the model's complexity grows and harms the efficiency of the query algorithms.

The last few years, special purpose databases were introduced to solve these issues. At the same time, classic databases evolved in the same direction to offer additional modeling tools better suited for modeling semi-structured data. The XML database is born. Problem solved.


Whoa, stop right there!

What does that mean, semi-structured data? And what about the database-aware controls, like the way you clicketyclick forms in Microsoft Access?

Suppose you are storing a curriculum vitae - a resume for a job seeker. How would you model this in an ER-diagram? At least you whould have a table PERSON with basic data like names, social security numbers and bank accounts. You need related tables with ADRESSes and PHONE_NUMBERs. That's still structured data.

But then you want to store past WORK_EXPERIENCEs, EDUCATION, COURSEs, TEST_RESULTs, ABILITYs, LANGUAGEs, PREFERENCEs, etc. In addition you want more detailed information on EDUCATION like SUBJECTs with their grades. For specific TEST_RESULTs, you want to model the data fields in order to capture aspects for specific TESTs and make them available to the user. Tests results are different in many ways depending on the test and the work field for the job seeker. Secretary skills and management assessment tests cannot be modeled in the same table definition.

Even if you find a complex but adequate model for your needs, a huge effort is needed to provide usable graphical interfaces for data management. You find yourself building complex forms with nested one-to-many relationships to connect the pieces of data. You're making large aggregations of queries to output reports and documents displaying the data.

The key problem is that a detailed curriculum vitae does not fit in an ER-diagram well. Either the data is not described in full detail by a simplified model or you end up with a complex and hard to maintain model with many unused fields.

The key solution is to realize the nature of a curriculum vitae: it's a document! Use techniques that are meant to describe documents. Use XML!


The essence of XML

The main advantage of XML as a document description language is the increased number of degrees of freedom. Instead of allocating unused table space to capture for rare details, you define description tags that don't waste space when they're not used. Instead of forcing one-dimensional relations between data entities, you can allow reuse of data elements through the entire document. This prevents duplication of data definitions or hard to understand normalization steps.

Consider this:


<curriculumvitae>

<personaldetails>
<firstname>Jane</firstname>
<lastname>Doe</lastname>
<address>Churchillweg</address>
<number>2</number>
<numberaddition>b</numberaddition>
<postalcode>1234AC</postalcode>
<city>Lutjebroek a/d Greppel</city>
<country>Nederland</country>
</personaldetails>
<workexperience>

<company>Data flex technology</company>
<jobtitle>Data typist</jobtitle>
<jobdescription>

Typing data in a legacy aplication.
</jobdescription>
</workexperience>
<workexperience>

<company>Supermerkati</company>
<jobtitle>Sales representative</jobtitle>
<jobdescription>

Selling cheese in the cheese department
</jobdescription>
</workexperience>
<education>

<highschool>

<name>Elzen Zicht</name>
<level>C-</level>
<description>

Special treatment for children with learning
disabilities.
</description>
<major>

<name>Physics</name>
<grade>A-</grade>
<remarks>

Received award for special efforts.
</remarks>
</major>
<subject>

<name>French</name>
<grade>B+</grade>
</subject>
<subject>

<name>Math</name>
<grade>D-</grade> </subject>
</highschool>
</education>

</curriculumvitae>


Converting this to HTML can easily be done using an XSLT style sheet. XSLT style sheets offer very dynamic, expressive and declarative definitions to transform XML content to other XML structures. XSLT has been around since the early days of XML and is widely used in XML applications. XSLT is still growing in popularity and there is increasing demand for XSLT experience in job vacancy descriptions.

The XSLT to convert our XML sample to XHTML looks like this:


<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/>
<xsl:template match="/curriculumvitae">

<html>
<head>
<title>CV for <xsl:value-of select="personaldetails/firstname/text()"/> <xsl:value-of select="personaldetails/lastname/text()"/></title>
</head>
<body>
<h1>CV for <xsl:value-of select="personaldetails/firstname/text()"/><xsl:text> </xsl:text><xsl:value-of select="personaldetails/lastname/text()"/></h1>
<h2>Personal details</h2>
<xsl:apply-templates select="personaldetails"/>
<h2>Work experience</h2>
<xsl:apply-templates select="workexperience"/>
<h2>Education</h2>
<xsl:apply-templates select="education/*"/>
</body>
</html>
</xsl:template>
<xsl:template match="personaldetails">

<table>
<xsl:apply-templates/>
</table>
</xsl:template>
<xsl:template match="firstname">

<tr>
<td>First name</td>
<td><xsl:value-of select="./text()"/></td>
</tr>
</xsl:template>
<xsl:template match="lastname">

<tr>
<td>Last name</td>
<td><xsl:value-of select="./text()"/></td>
</tr>
</xsl:template>
<xsl:template match="address">

<tr>
<td>Address</td>
<td><xsl:value-of select="./text()"/></td>
</tr>
</xsl:template>
<xsl:template match="number">

<tr>
<td>Number</td>
<td><xsl:value-of select="./text()"/></td>
</tr>
</xsl:template>
<xsl:template match="numberaddition">

<tr>
<td>Number addition</td>
<td><xsl:value-of select="./text()"/></td>
</tr>
</xsl:template>
<xsl:template match="postalcode">

<tr>
<td>Postal code</td>
<td><xsl:value-of select="./text()"/></td>
</tr>
</xsl:template>
<xsl:template match="city">

<tr>
<td>City</td>
<td><xsl:value-of select="./text()"/></td>
</tr>
</xsl:template>
<xsl:template match="country">

<tr>
<td>Country</td>
<td><xsl:value-of select="./text()"/></td>
</tr>
</xsl:template>
<xsl:template match="workexperience">

<h3><xsl:value-of select="company/text()"/></h3>
<p><strong><xsl:value-of select="jobtitle/text()"/></strong></p>
<p><em><xsl:value-of select="jobdescription/text()"/></em></p>
</xsl:template>
<xsl:template match="highschool">

<h3>High school: <xsl:value-of select="name/text()"/></h3>
<p>Level: <xsl:value-of select="level/text()"/></p>
<h4>Description</h4>
<p><xsl:value-of select="description/text()"/></p>
<h4>Subjects</h4>
<xsl:apply-templates select="major"/>
<xsl:apply-templates select="subject"/>
</xsl:template>
<xsl:template match="major">

<p><strong>Major in <xsl:value-of select="name/text()"/></strong><br/>
Grade: <xsl:value-of select="grade/text()"/><br/>
Remarks: <xsl:value-of select="remarks/text()"/></p>
</xsl:template>
<xsl:template match="subject">

<p><strong><xsl:value-of select="name/text()"/></strong><br/>
Grade: <xsl:value-of select="grade/text()"/></p>
</xsl:template>

</xsl:stylesheet>


But what about Graphical User Interfaces?

That's the question. Instead of developing specific forms for a single purpose, I would like to use some sort of XSLT to generate a form. I can do that; I can generate an HTML form for the XML document using XSLT. But what if I want to add another workexperience? What if I want to save the data back to the server? Then I would need to translate the form data back to XML. It would require huge amounts of dynamic HTML to offer possibilities to extend the form with user controls and data handling.

Isn't there such a thing as an XSLT that generates a form, keeps the source document in memory, automatically translates changes in the form back to the source document and preferably dynamically displays changes in the source document in the form?

I started searching for this. First thing I found, was Wobzilla. Wobzilla does exactly what I'm describing here. But Wobzilla was a single developer effort that lead to an alpha quality product and is not maintained anymore.

Then I found Microsoft InfoPath. Slightly different, but does everything we need. Disadvantages: vendor specific, MS Office lock-in, hard to integrate in web applications or client side applications. But still useful if you decide to use it.

Finally I found the XForms specification. Main problem: there were no stable production quality implementations available. Until the Mozilla project started working on an XForms implementation.

Here we are: we have a challenge and a possible solution supported by W3C. How do we build an XForm we can use as GUI for our curriculum vitae?

I'll dive in to the technical stuff in part 2!

THIS POST IS SUPERSEDED BY A NEW SERIES OF ARTICLES ON XML TECHNOLOGIES AND XFORMS... READ MORE IN PART 5 OF THE XFORMS TUTORIAL...