In the previous activity we annotated the template with structural information, and these annotations should be sufficient in presenting XML documents as Web pages for users to interact with. However, in our design, we also wanted to be able to add and remove list items from the example hierarchy:
What we want to do is to have buttons beside each list item
(and subitem) which remove only that particular item. In addition, we
also want buttons which add items only to the particular list each
button appears beneath.
Taking the HTML example from before, we add some additional annotations to the template to produce something like this:
<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">
<!-- Template text between the start and the interesting part. -->
<div template:element="item">
<p>
Some item: <input template:attribute="value" name="{template:field-name()}" type="text" value="{$this-value}" />
<input name="remove={template:this-position()}" type="submit" value="Remove" />
</p>
<p>
Itself containing more items:
</p>
<p template:element="subitem">
Sub-item: <input template:attribute="subvalue" name="{template:field-name()}" type="text" value="{$this-value}" />
<input name="remove2={template:this-position()}" type="submit" value="Remove" />
</p>
<p>
<input name="add2={template:this-position()} type="submit" value="Add subitem" />
</p>
</div>
<p>
<input name="add={template:this-position()} type="submit" value="Add item" />
</p>
<!-- Template text between the interesting part and the end. -->
</body>
</html>
Some of the attributes in the original HTML code have been changed:
input
element for the first Remove
button (mapping to item
elements in the XML document) has a modified name
attribute, containing the special remove={template:this-position()}
value.input
element for the second Remove
button (mapping to subitem
elements in the XML document) has a modified name
attribute, containing the special remove2={template:this-position()}
value.What these amendments provide is a means for the XSLForms framework to connect together the usage of a button in the Web form with an XML document element.
Remove
button appears within the p
element which is annotated as mapping onto the item
element in the XML document. This means that the special value added
above will, in the final output, refer to that specific list item from
the XML document.Remove
button appears within the p
element which is annotated as mapping onto the subitem
element in the XML document. This means that the special value added
above will, in the final output, refer to that specific list (sub)item from
the XML document.Some additional sections have been added to the original HTML code:
subitem
paragraph, containing an input
element which employs the special add2={template:this-position()}
value in the name
attribute to represent an Add subitem
button.item
section, containing an input
element which employs the special add={template:this-position()}
value in the name
attribute to represent an Add item
button.What these amendments provide is also a means for the XSLForms framework to connect these buttons to parts of the XML document.
Add subitem
button appears outside the p
element mapping onto the subitem
element in the XML document. Instead, it appears within the p
element mapping onto the item
element in the XML document. This means that the special value added
above will, in the final output, refer to a specific item
from
the XML document, and the consequence of adding a subitem
will be the extension of that list of subitem
elements within that item
element.Add item
button appears outside the p
element mapping onto the item
element in the XML document. Instead, it appears within the body
element mapping onto the top-level structure
element in the XML document. This means that the special value added
above will, in the final output, refer to the top-level structure
element in
the XML document, and the consequence of adding an item
will be the extension of the main list of item
elements.Special values of the following form can be used to connect parts of the template with elements in the XML document representation of a form:
selector={template:this-position()}
selector
in this example),
this special value produces a reference to an XML document element (or
attribute) in the final output. The referenced element or attribute is
defined by those template:element
and template:attribute
annotations on template elements which surround the template element within which this special value is used.The reference guide provides a complete list of special values for use in template annotations.