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-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>

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.

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.

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.

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.