There was a recent post on Stack Overflow that was looking for the simplest way to create  a simple Todo list in HTML. Many of the comments highlighted the fact that HTML really has no dynamicness “built-in”” and began offering different Javascript libraries for building complex UIs and how to manage the connection between the two. Sadly the post was removed as a duplicate before I got a chance to offer an alternative – XForms. Despite low browser uptake, I am quite the fan of XForms, and given mature tools like XSLTForms that allow you to build an XForm and deploy to any XSLT enabled browser (which is almost all of them now). So with that long introduction done, I present this simple introduction to developing with XForms.

The to-do list is probably the second most prevalent programming tutorial available after “hello-world” especially for GUI development. So I present a simple tutorial to build a to-do list in XForms to offer a gentle introduction into the power of novel language. Before continuing you should probably have a small understanding of how to make forms in HTML, XML and XPath.

Building our data model

XForms has a strong adherence to the MVC paradigm and its strong separation of data and presentation so the first thing we can do is describe our data model. Given that we are building a simple to-do list at this stage we need to be able to capture 3 things:

  1. The task name
  2. The due date and
  3. If the task has been completed

Now given that all data for an XForm is captured within an XML document, we can immediately begin to know that our data model is going to look something like this:

1

<task complete="false" dueDate="2013-07-27">Pick up milk</task>

By wrapping this in an XForms:model element, we are done describing our data model. and convention dictates that this goes in the head of a document so, wrapping this all up in XML we get…

1
2
3
4
5
6
7
8
9
10
11
12

<?xml-stylesheet href="xsltforms/xsltforms.xsl" type="text/xsl"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xf="http://www.w3.org/2002/xforms" >
    <head>
        <title>XForms todo list</title>
        <xf:model>
            <xf:instance xmlns="">
                <task complete="false" dueDate="2013-07-27">Pick up milk</task>
            </xf:instance>
        </xf:model>
    </head>
    <body/>
</html>

Along with the model there is some boilerplate HTML and an XML directive that calls XSLTForms so we can preview this in a web browser. Sadly, since we only have only defined our data there is nothing to see, yet…

Interacting with the data model

So with a piece of data defined, we can start building a way to actually interact with this. This is done through XForms input fields. Inserting an XForms element is very similar to using regular HTML inputs, however rather than giving it a name we need to point to an element or binding (which we will cover later) to store and retrieve data from.

1
2
3

<xf:input ref="//task" />
<xf:input ref="//task/@complete" />
<xf:input ref="//task/@dueDate" />

These pointers are either named bindings, or in the case above an XPath to an element in the data model. In the first we are pointing to the //task node, which will use the text of that node for the field, however in the others we are pointing to an attribute, eg. //task/@dueDate .

However, in the above case it will just a field with no label or indication of what it is, so we will add a label as well (I’ll just demonstrate the label task name):

1
2
3

<xf:input ref="//task">
    <xf:label>Task name:</xf:label>
</xf:input>

So now our complete document looks something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<?xml-stylesheet href="xsltforms/xsltforms.xsl" type="text/xsl"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xf="http://www.w3.org/2002/xforms" >
    <head>
        <title>XForms todo list</title>
        <xf:model>
            <xf:instance xmlns="">
                <task complete="false" dueDate="2013-07-27">Pick up milk</task>
            </xf:instance>
        </xf:model>
    </head>
    <body>
        <xf:input ref="//task">
            <xf:label>Task name:</xf:label>
        </xf:input>
        <xf:input ref="//task/@complete">
            <xf:label>Complete:</xf:label>
        </xf:input>
        <xf:input ref="//task/@dueDate" >
            <xf:label>Due date:</xf:label>
        </xf:input>
    </body>
</html>

And it looks like this:

A screenshot of the partially complete todo list

Our basic to do list

Now, there are a lot of flaws with this the two big ones being that we can only manage one task, and we have defined what is valid data for any of our fields. But we’ll take care of these in the next two tutorials. But for now, we’ll fix one flaw and add a little CSS styling to present the form in a better way to finish off this example. What we want is to have each field on their own line and have the fields all line up. Fortunately this is easy in to achieve in CSS:

1
2
3
4
5
6
7

.xforms-input  {
   display:block;
}
.xforms-label {
    display:inline-block;
    width:5em;
}

Because we’re using an internal CSS stylesheet, we need to use the CSS classes that target the HTML generated by XSLTForms, but when using an external stylesheet namespace CSS selectors can be used. Adding this into the document we get the following code (which you can very and fork on GitHub):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<?xml-stylesheet href="xsltforms/xsltforms.xsl" type="text/xsl"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xf="http://www.w3.org/2002/xforms" >
    <head>
        <title>XForms todo list</title>
        <xf:model>
            <xf:instance xmlns="">
                <task complete="false" dueDate="2013-07-27">Pick up milk</task>
            </xf:instance>
        </xf:model>
        <style type="text/css">
            .xforms-input {
            display:block;
        }
        .xforms-label {
            display:inline-block;
            width:5em;
        }
        </style>
    </head>
    <body>
        <xf:input ref="//task">
            <xf:label>Task name:</xf:label>
        </xf:input>
        <xf:input ref="//task/@complete">
            <xf:label>Complete:</xf:label>
        </xf:input>
        <xf:input ref="//task/@dueDate" >
            <xf:label>Due date:</xf:label>
        </xf:input>
    </body>
</html>

and it looks like this:

A screenshot of the complete part 1 of the todo list

Our final todo list

And there we have it a very simple, XForm built on a pre-defined data model using a declarative language that required very little coding to get done. In the next tutorial we will look at how we can alter our data and interface to display and edit multiple tasks as well as adding and deleting tasks.