Creating Applications: Add Selectors

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.

Introducing Selectors

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="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. -->

</form>
</body>
</html>

The Remove Buttons

Some of the attributes in the previous HTML code have been changed:

What these amendments provide is a means for the XSLForms framework to connect together these buttons with a specific element in the form data.

The Add Buttons

Some other attributes have been changed in the previous HTML code:

What these amendments provide is also a means for the XSLForms framework to connect these buttons to specific parts of the form data.

Whilst many forms consist only of text fields and action buttons, other types of data are very likely to also be used. Multiple-choice or enumerated value fields in forms are covered in the next activity in the development process.