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 form data structure, and we added some buttons in the template to be used for this purpose.
The buttons in the template are implicitly associated with specific items and subitems, and when such buttons are pressed - for example, to remove an item from the list - our application will want to know on which item the removal action is to take place. In order to connect the buttons with specific parts of the form data structure, a special notation is used, and such notation turns elements such as buttons into "selectors" - things which select parts of the structure so that an operation can be carried out on those parts.
Taking the example HTML code from before, we add some of these selector 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">
<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="..." template:selector-field="remove" type="submit" value="Remove" />
</p>
<p>
Itself containing more items:
</p>
<p template:element="subitem">
Sub-item: <input template:attribute="subvalue" name="{template:this-attribute()}" type="text" value="{$this-value}" />
<input name="..." template:selector-field="remove2" type="submit" value="Remove" />
</p>
<p>
<input name="..." template:selector-field="add2,subitem" type="submit" value="Add subitem" />
</p>
</div>
<p>
<input name="..." template:selector-field="add,item" type="submit" value="Add item" />
</p>
<!-- Template text between the interesting part and the end. -->
</form>
</body>
</html>
Some of the attributes in the previous HTML code have been changed:
input
element for the
first Remove
button has a new template:selector-field
attribute (and a modified name
attribute
containing a value that will be replaced).input
element for the second Remove
button has a new template:selector-field
attribute (and a modified name
attribute
containing a value that will be replaced).What these amendments provide is a means for the XSLForms framework to connect together these buttons with a specific element in the form data.
Remove
button
appears within the div
element which maps onto items
in the form data. This means that each button will refer to a
specific item in the form being edited.Remove
button appears
within the p
element which maps onto subitems in the
form data. This means that each button will refer to a
specific subitem in the form being edited.We define the names of the selectors in the above cases to be remove
and remove2
respectively, since the special values
begin with these identifiers.
Some other attributes have been changed in the previous HTML code:
input
element for the
first Add
button has a new template:selector-field
attribute (and a modified name
attribute
containing a value that will be replaced).input
element for the second Add
button has a new template:selector-field
attribute (and a modified name
attribute
containing a value that will be replaced).What these amendments provide is also a means for the XSLForms framework to connect these buttons to specific parts of the form data.
Add subitem
button appears
outside the p
element which maps onto subitems in the
form data. Instead, it appears within the p
element which maps onto items. This means that each button will refer
to a specific item in the form being edited, and the consequence of
adding a subitem will be the extension of that item's list of subitems.Add item
button
appears outside the p
element which maps onto items in the form data. Instead, it appears
within the body
element which maps onto the top-level structure
element in the form data. This means that each button will refer to the
top-level structure
element in
the form being edited, and the consequence of adding an item will
be the extension of the main list of items in the form.We define the names of the selectors in the above cases to be add2
and add
respectively, since the special values begin with
these identifiers. Moreover, we mention that the selectors are intended to add subitem
and item
elements respectively - this has certain implications for the behaviour of the application that will be considered later.
We should now have a template that is sufficiently complete to be used in a real application, and the writing of the application code itself will be investigated in the next activity in the development process.