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

Introducing Selectors

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>

The Remove Buttons

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

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.

The Add Buttons

Some additional sections have been added to the original HTML code:

What these amendments provide is also a means for the XSLForms framework to connect these buttons to parts of the XML document.

Selector Annotation

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()}
Given a selector name (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.