I’ve found myself getting into discussions on how to teach programming recently. As is often the case various people will talk about how their preferred language is the best language to teach in. However, each programming language has its own pros and cons – for example, Haskell is ideal for teaching functional programming, but would be terrible for teaching Object-oriented programming. I like to think I take a more moderate approach and suggest languages on their applicability to concepts being taught (but realistically I think python is great for everything!).

Recently I’ve been doing some research at work with XForms, and I’ve come to the conclusion that it is an ideal language for teaching model-view-controller (MVC) architecture. While web frameworks like Ruby on Rails have support for generating web applications using MVC, to work with this frameworks often requires an understanding of the frameworks language and the framework itself, some database knowledge and HTML and CSS. While not difficult, for the purposes of teaching a concept, the less time setting up an environment the more time dedicated to theory.

Alternatively, an XForms application is built entirely using MVC principles in a single file on a desktop machine with no setup. Despite the low adoption of client side XForms support, with the single XML directive below and the support of XSLTForms this is of no concern.

<?xml-stylesheet href="http://www.agencexml.com/xsltforms/xsltforms/xsltforms.xsl" type="text/xsl"?>

Below is a simple “Hello world” app in XForms that demonstrates the major principles of MVC in 26 lines. This simple code displays a webpage that requests a name and updates an output field.

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="http://www.agencexml.com/xsltforms/xsltforms/xsltforms.xsl" type="text/xsl"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xforms="http://www.w3.org/2002/xforms" >
<head>
    <style type="text/css">
        label {
            color: red;
        }
    </style>
    <xforms:model>
        <xforms:instance>
            <PersonGivenName xmlns="" />
        </xforms:instance>
        <xforms:bind id="FirstName" nodeset="/PersonGivenName" />
    </xforms:model>
</head>
<body>
    <xforms:input bind="FirstName" incremental="true">
        <xforms:label>Input your first name:</xforms:label>
    </xforms:input>
    <br/>
    <xforms:output bind="FirstName">
        <xforms:label>Hello </xforms:label>
    </xforms:output>!
</body>
</html>

This simple program can demonstrate the importance of separating content and presentation (using CSS and HTML classes), but also shows of the MVC components of XForms.

Here our Model (the xforms:instance element) holds our data model, the xforms:bind element in the xforms:model holds our controller. Using this we can illustrate how we can change our data model and controllers without impacting the view at all. For example, by changing the xforms:model like so:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="http://www.agencexml.com/xsltforms/xsltforms/xsltforms.xsl" type="text/xsl"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xforms="http://www.w3.org/2002/xforms" >
<head>
    <style type="text/css">
        label {
            color: red;
        }
    </style>
    <xforms:model>
        <xforms:instance>
            <PersonName xmlns="">
                <First/>
                <Last/>
            </PersonName>
        </xforms:instance>
        <xforms:bind id="FirstName" nodeset="/PersonName/First" />
    </xforms:model>
</head>
<body>
    <xforms:input bind="FirstName" incremental="true">
        <xforms:label>Input your first name:</xforms:label>
    </xforms:input>
    <br/>
    <xforms:input bind="LastName" incremental="true">
        <xforms:label>Input your last name:</xforms:label>
    </xforms:input>
    <br/>
    <xforms:output bind="FirstName">
        <xforms:label>Hello </xforms:label>
    </xforms:output>!
</body>
</html>

Here we have updated the model to support full names, without altering the view – an important principle when teaching MVC. It is left as an exercise for the reader to add controls to store a last name.

While this is a relatively trivial example, as a teaching tool XForms shows extraordinary promise for teaching the model-view-controller approach to design due to its strictly controlled syntax and ease of use to write and deploy in small scale environments.