XSLTools

Annotated docs/selectors.html

522:44f29f525fc7
2006-03-12 paulb [project @ 2006-03-12 22:37:41 by paulb] Made the non-installed package and examples override any installed software.
paulb@119 1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
paulb@270 2
<html xmlns="http://www.w3.org/1999/xhtml"><head>
paulb@119 3
  <meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type" />
paulb@270 4
  
paulb@270 5
  <title>Creating Applications: Add Selectors</title><meta name="generator" content="amaya 8.1a, see http://www.w3.org/Amaya/" />
paulb@270 6
  <link href="styles.css" rel="stylesheet" type="text/css" /></head>
paulb@119 7
<body>
paulb@119 8
<h1>Creating Applications: Add Selectors</h1>
paulb@121 9
<p>In the previous activity&nbsp;we annotated the template
paulb@121 10
with
paulb@121 11
<a href="structure.html">structural information</a>,
paulb@121 12
and these annotations should be sufficient in
paulb@119 13
presenting XML documents as Web pages for users to interact with.
paulb@119 14
However, in our design, we also wanted to be able to add and remove
paulb@132 15
list items from the form data structure, and we added some buttons in
paulb@132 16
the template to be used for this purpose.</p>
paulb@119 17
<h2>Introducing Selectors</h2>
paulb@132 18
<p>The&nbsp;buttons in the template are implicitly associated with
paulb@132 19
specific items and subitems, and when such buttons are pressed - for
paulb@132 20
example, to remove an item from the list - our application will want to
paulb@132 21
know on which item the removal action is to take place. In order to
paulb@132 22
connect the buttons with specific parts of the form data structure, a
paulb@132 23
special notation is used, and such notation turns elements such as
paulb@132 24
buttons into "selectors" - things which select parts of the structure
paulb@132 25
so that an operation can be carried out on those parts.</p>
paulb@132 26
<p>Taking the&nbsp;example HTML code from before, we add some of these
paulb@132 27
selector annotations to the template to produce something
paulb@121 28
like this:</p>
paulb@391 29
<pre>&lt;html xmlns="http://www.w3.org/1999/xhtml"<br />      xmlns:template="http://www.boddie.org.uk/ns/xmltools/template"&gt;<br />&lt;head&gt;<br />  &lt;title&gt;Example&lt;/title&gt;<br />&lt;/head&gt;<br />&lt;body template:element="structure"&gt;<br />&lt;form action="" method="post"&gt;<br /><br />&lt;!-- Template text between the start and the interesting part. --&gt;<br /><br />&lt;div template:element="item"&gt;<br />  &lt;p&gt;<br />    Some item: &lt;input template:attribute-field="value" name="..." type="text" value="..." /&gt;<br />    &lt;input name="..." <span style="font-weight: bold;">template:selector-field="remove"</span> type="submit" value="Remove" /&gt;<br />  &lt;/p&gt;<br />  &lt;p&gt;<br />    Itself containing more items:<br />  &lt;/p&gt;<br />  &lt;p template:element="subitem"&gt;<br />    Sub-item: &lt;input template:attribute="subvalue" name="{template:this-attribute()}" type="text" value="{$this-value}" /&gt;<br />    &lt;input name="..." <span style="font-weight: bold;">template:selector-field="remove2"</span> type="submit" value="Remove" /&gt;<br />  &lt;/p&gt;<br />  &lt;p&gt;<br />    &lt;input name="..." <span style="font-weight: bold;">template:selector-field="add2,subitem"</span> type="submit" value="Add subitem" /&gt;<br />  &lt;/p&gt;<br />&lt;/div&gt;<br />&lt;p&gt;<br />  &lt;input name="..." <span style="font-weight: bold;">template:selector-field="add,item"</span> type="submit" value="Add item" /&gt;<br />&lt;/p&gt;<br /><br />&lt;!-- Template text between the interesting part and the end. --&gt;<br /><br />&lt;/form&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</pre>
paulb@119 30
<h3>The Remove Buttons</h3>
paulb@132 31
<p>Some of the attributes in the previous HTML code have been
paulb@121 32
changed:</p>
paulb@119 33
<ul>
paulb@121 34
  <li>The <code>input</code> element for the
paulb@270 35
first&nbsp;<code>Remove</code> button has a new&nbsp;<code>template:selector-field</code> attribute (and a modified&nbsp;<code>name</code>
paulb@270 36
attribute
paulb@270 37
containing a&nbsp;value that will be replaced).</li>
paulb@121 38
  <li>The <code>input</code> element for the second <code>Remove</code>
paulb@270 39
button has a new&nbsp;<code>template:selector-field</code> attribute (and a modified&nbsp;<code>name</code>
paulb@270 40
attribute
paulb@270 41
containing a&nbsp;value that will be replaced).</li>
paulb@119 42
</ul>
paulb@121 43
<p>What these amendments provide is a means for the XSLForms
paulb@121 44
framework
paulb@132 45
to connect together these buttons&nbsp;with a specific element in the
paulb@132 46
form data.</p>
paulb@119 47
<ul>
paulb@121 48
  <li>The first&nbsp;<code>Remove</code> button
paulb@132 49
appears within the <code>div</code> element which maps onto&nbsp;items
paulb@132 50
in the form data. This means that each button will refer to a
paulb@132 51
specific&nbsp;item in the form being edited.</li>
paulb@121 52
  <li>The second <code>Remove</code> button appears
paulb@132 53
within the&nbsp;<code>p</code> element which maps onto subitems in the
paulb@132 54
form data. This means that each button will refer to a
paulb@132 55
specific&nbsp;subitem in the form being edited.</li>
paulb@119 56
</ul>
paulb@134 57
<p>We define the names of the selectors in the above cases to be&nbsp;<code>remove</code>
paulb@134 58
and&nbsp;<code>remove2</code> respectively, since the special values
paulb@134 59
begin with these identifiers.</p>
paulb@119 60
<h3>The Add Buttons</h3>
paulb@132 61
<p>Some other attributes have been changed in the previous HTML
paulb@121 62
code:</p>
paulb@119 63
<ul>
paulb@132 64
  <li>The <code>input</code> element for the
paulb@270 65
first <code>Add</code> button has a&nbsp;new&nbsp;<code>template:selector-field</code> attribute (and a modified&nbsp;<code>name</code>
paulb@270 66
attribute
paulb@270 67
containing a&nbsp;value that will be replaced).</li>
paulb@132 68
  <li>The <code>input</code> element for the second <code>Add</code>
paulb@270 69
button has a&nbsp;new&nbsp;<code>template:selector-field</code> attribute (and a modified&nbsp;<code>name</code>
paulb@270 70
attribute
paulb@270 71
containing a&nbsp;value that will be replaced).</li>
paulb@119 72
</ul>
paulb@132 73
<ul>
paulb@132 74
</ul>
paulb@121 75
<p>What these amendments provide is also a means for the XSLForms
paulb@132 76
framework to connect these buttons to specific parts of the form data.</p>
paulb@119 77
<ul>
paulb@121 78
  <li>The <code>Add subitem</code> button appears
paulb@132 79
outside the&nbsp;<code>p</code> element which maps onto subitems in the
paulb@132 80
form data. Instead, it appears within the&nbsp;<code>p</code>
paulb@132 81
element which maps onto items. This means that each button will refer
paulb@132 82
to a specific item in the form being edited, and the consequence of
paulb@132 83
adding a subitem will be the extension of that item's list of subitems.</li>
paulb@121 84
  <li>The <code>Add&nbsp;item</code> button
paulb@121 85
appears outside the&nbsp;<code>p</code>
paulb@132 86
element which maps onto items in the form data. Instead, it appears
paulb@132 87
within the <code>body</code>
paulb@132 88
element which maps onto the top-level <code>structure</code>
paulb@132 89
element in the form data. This means that each button will refer to the
paulb@132 90
top-level <code>structure</code>
paulb@119 91
element in
paulb@132 92
the form being edited, and the consequence of adding an item will
paulb@132 93
be the extension of the main list of items in the form.</li>
paulb@119 94
</ul>
paulb@134 95
<p>We define the names of the selectors in the above cases to be <code>add2</code>
paulb@134 96
and <code>add</code> respectively, since the special values begin with
paulb@270 97
these identifiers. Moreover, we mention that the selectors are intended to add&nbsp;<code>subitem</code> and&nbsp;<code>item</code> elements respectively - this has certain implications for the behaviour of the application that will be <a href="advice.html">considered later</a>.</p>
paulb@134 98
<p>We should now have a template that is sufficiently complete to be
paulb@270 99
used in a real application, and the writing of the <a href="Web-resource.html">application code</a> itself will be
paulb@270 100
investigated in the next activity in the development <a href="overview.html">process</a>.</p>
paulb@270 101
</body></html>