Use JavaScript to make xforms more robust

Prerequisite

This article is based on XForms and JavaScript only. Test the Mozilla XForms plug-in installed on Mozilla Firefox 2.0. Using standard XForms and JavaScript, it should be run on other implementations of these two standard technologies. No server-side technology is used.

Typical example of a presentation

Let's look at a typical XForms example. It shows how to create a table that represents a repeating node in an XML document. In particular, it shows how to perform aggregation calculations using XForms and how to use XForms to add or remove nodes of model data and automatically save views synchronously. View the full source code in Listing 1.

Listing 1. Typical example of XForms representation<?xml version= "1.0" encoding= "UTF-8"?>
<xhtml:html xmlns:ev= "Http://www.w3.org/2001/xml-events"
Xmlns:xforms= "Http://www.w3.org/2002/xforms"
Xmlns:xhtml= "Http://www.w3.org/1999/xhtml"
xmlns:xsd= "Http://www.w3.org/2001/XMLSchema" >
<xhtml:head>
<xhtml:title>demonstration of Table with
Column total</xhtml:title>
<xf:model id= "My-model" xmlns= "http://www.w3.org/1999/xhtml"
xmlns:xf= "Http://www.w3.org/2002/xforms" >
<xf:instance id= "My-data" src= "My-data.xml" xmlns= ""/>
<xf:bind calculate= "sum (.. /item/amount) "nodeset="/data/total "/>
<xf:submission action= "My-data.xml" id= "Update-from-local-file"
Instance= "My-data" method= "Get" replace= "instance"/>
<xf:submission action= "My-data.xml" id= "View-xml-instance"
method= "Get"/>
<xf:submission action= "My-data.xml" id= "Save-to-local-file"
method= "Put"/>
</xf:model>
</xhtml:head>
<xhtml:body>
<xf:group ref= "/data" xmlns= "http://www.w3.org/1999/xhtml"
xmlns:xf= "Http://www.w3.org/2002/xforms" >
<xf:label/>
<xf:repeat id= "Repeatitem" nodeset= "Item"
xmlns= "http://www.w3.org/1999/xhtml" >
<xf:input class= "item-description" id= "Description-input"
ref= "Description" xmlns= "http://www.w3.org/1999/xhtml" >
<xf:label/>
</xf:input>
<xf:input class= "Item-amount" ref= "Amount"
xmlns= "http://www.w3.org/1999/xhtml" >
<xf:label/>
</xf:input>
</xf:repeat>
<xhtml:div id= "Sum" >
<xf:output ref= "/data/total" xmlns= "http://www.w3.org/1999/xhtml" >
<xf:label/>
</xf:output>
</xhtml:div>
<xf:trigger id= "Insertbutton" xmlns= "http://www.w3.org/1999/xhtml" >
<xf:label>add item</xf:label>
<xf:action ev:event= "Domactivate" >
<xf:insert at= "Last ()" nodeset= "Item[last ()]"
position= "after"/>
<xf:setvalue ref= "Item[last ()]/description" value= "" "/>
<xf:setvalue ref= "Item[last ()]/amount" value= "0"/>
<xf:setfocus control= "Description-input"/>
</xf:action>
</xf:trigger>
<xf:trigger id= "Delete" xmlns= "http://www.w3.org/1999/xhtml" >
<xf:label>delete item</xf:label>
<xf:delete at= "index (' Repeatitem ')" ev:event= "Domactivate"
nodeset= "Item[index (' Repeatitem ')]"/>
</xf:trigger>
<xf:submit submission= "Update-from-local-file"
xmlns= "http://www.w3.org/1999/xhtml" >
<xf:label>Reload</xf:label>
</xf:submit>
<xf:submit submission= "Save-to-local-file"
xmlns= "http://www.w3.org/1999/xhtml" >
<xf:label>Save</xf:label>
</xf:submit>
<xf:submit submission= "View-xml-instance"
xmlns= "http://www.w3.org/1999/xhtml" >
<xf:label>view XML instance</xf:label>
</xf:submit>
</xf:group>
</xhtml:body>
</xhtml:html>