Earlier, we defined the structure of the form data, and during the template design activity, it was necessary to consider this structure information and how it should be presented. In XSLForms templates, we need to explicitly connect such information about the structure of the data to the HTML elements representing it by adding special attributes to the HTML code.
Consider the interesting parts of the template side by side with the structure information:
<structure> <body>
<item <div>
<p>
value="some value"> Some item: <input name="value" type="text" value="some value" />
<input name="remove" type="submit" value="Remove" />
</p>
<p>
Itself containing more items:
</p>
<subitem <p>
subvalue="some other value"/> Sub-item: <input name="subvalue" type="text" value="some other value" />
<input name="remove2" type="submit" value="Remove" />
</p>
<p>
<input name="add2" type="submit" value="Add subitem" />
</p>
</item> </div>
<p>
<input name="add" type="submit" value="Add item" />
</p>
</structure> </body>
To make such connections, we will annotate the HTML code using special attributes and values.
Taking the template extract from above, we add special annotations to produce something like this:
<structure> <body template:element="structure">
<item <div template:element="item">
<p>
value="some value"> Some item: <input template:attribute-field="value" name="..." type="text" value="..." />
<input name="remove" type="submit" value="Remove" />
</p>
<p>
Itself containing more items:
</p>
<subitem <p template:element="subitem">
subvalue="some other value"/> Sub-item: <input template:attribute-field="subvalue" name="..." type="text" value="..." />
<input name="remove2" type="submit" value="Remove" />
</p>
<p>
<input name="add2" type="submit" value="Add subitem" />
</p>
</item> </div>
<p>
<input name="add" type="submit" value="Add item" />
</p>
</structure> </body>
The following annotations have been added:
template:element
attributes have been added to the corresponding HTML elements in the
template.template:attribute-field
attributes have been added to the corresponding HTML elements
in the template.Note how the name
and value
attributes have had their contents replaced with ...
;
we do this to keep Web page editors happy, and in the final output
these attributes will be replaced with those which model the underlying
document correctly.
The template in full should now look something like this:
<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:template="http://www.boddie.org.uk/ns/xmltools/template">
<head>
<title>Example</title>
</head>
<body template:element="structure">
<form action="" method="post">
<!-- Template text between the start and the interesting part. -->
<div template:element="item">
<p>
Some item: <input template:attribute-field="value" name="..." type="text" value="..." />
<input name="remove" type="submit" value="Remove" />
</p>
<p>
Itself containing more items:
</p>
<p template:element="subitem">
Sub-item: <input template:attribute-field="subvalue" name="..." type="text" value="..." />
<input name="remove2" type="submit" value="Remove" />
</p>
<p>
<input name="add2" type="submit" value="Add subitem" />
</p>
</div>
<p>
<input name="add" type="submit" value="Add item" />
</p>
<!-- Template text between the interesting part and the end. -->
</form>
</body>
</html>
Note also that a namespace declaration is required for the template
attributes, and it is usually best to put this declaration on the
top-level html
element in the template, as shown in
the above example code.
Whilst the above annotations permit the template to display the data in XML documents containing form data, the other aspects of the user interface - the addition and removal of items and subitems - are not yet fully modelled in the template. These things will be added to the template as selectors as part of the next activity in the development process.