| paulb@118 | 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| paulb@118 | 2 | <html xmlns="http://www.w3.org/1999/xhtml"> |
| paulb@118 | 3 | <head> |
| paulb@118 | 4 | <meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type" /> |
| paulb@118 | 5 | <title>Creating Applications: Add Structure</title> |
| paulb@131 | 6 | <meta name="generator" |
| paulb@131 | 7 | content="amaya 8.1a, see http://www.w3.org/Amaya/" /> |
| paulb@118 | 8 | <link href="styles.css" rel="stylesheet" type="text/css" /> |
| paulb@118 | 9 | </head> |
| paulb@118 | 10 | <body> |
| paulb@118 | 11 | <h1>Creating Applications: Add Structure</h1> |
| paulb@131 | 12 | <p>Earlier, we defined the <a href="data.html">structure of the form |
| paulb@131 | 13 | data</a>, and during the <a href="design.html">template design</a> |
| paulb@131 | 14 | activity, it was |
| paulb@131 | 15 | necessary to consider this structure information and how it should be |
| paulb@131 | 16 | presented. |
| paulb@131 | 17 | In XSLForms templates, we need to explicitly connect such information |
| paulb@131 | 18 | about the structure of the data to the HTML elements representing it by |
| paulb@131 | 19 | adding special attributes to the HTML code.</p> |
| paulb@131 | 20 | <p> Consider the interesting parts of the template side by side with |
| paulb@131 | 21 | the structure information:</p> |
| paulb@131 | 22 | <pre style=""><structure> <span |
| paulb@131 | 23 | style="font-weight: bold;"><body><br /><br /></span> <item <span |
| paulb@131 | 24 | style="font-weight: bold;"><div></span><br /> <p><br /> value="some value"> Some item: <span |
| paulb@131 | 25 | style="font-weight: bold;"><input name="value" type="text" value="some value" /></span><br /> <input name="remove" type="submit" value="Remove" /><br /> </p><br /> <p><br /> Itself containing more items:<br /> </p><br /> <subitem <span |
| paulb@131 | 26 | style="font-weight: bold;"><p><br /> </span> subvalue="some other value"/> Sub-item: <span |
| paulb@131 | 27 | style="font-weight: bold;"><input name="subvalue" type="text" value="some other value" /></span><br /> <input name="remove2" type="submit" value="Remove" /><br /> <span |
| paulb@131 | 28 | style="font-weight: bold;"></p></span><br /> <p><br /> <input name="add2" type="submit" value="Add subitem" /><br /> </p><br /> </item> <span |
| paulb@131 | 29 | style="font-weight: bold;"></div></span><br /> <p><br /> <input name="add" type="submit" value="Add item" /><br /> </p><br /><br /></structure> <span |
| paulb@131 | 30 | style="font-weight: bold;"></body></span></pre> |
| paulb@131 | 31 | <p>To make such connections, we will annotate the HTML code using |
| paulb@131 | 32 | special attributes and values.</p> |
| paulb@118 | 33 | <ul> |
| paulb@118 | 34 | </ul> |
| paulb@118 | 35 | <h2>Annotating the Template</h2> |
| paulb@131 | 36 | <p>Taking the template extract from above, we add special annotations |
| paulb@131 | 37 | to produce something like this:</p> |
| paulb@131 | 38 | <pre style=""><structure> <body <span |
| paulb@131 | 39 | style="font-weight: bold;">template:element="structure"</span>><br /><br /> <item <div <span |
| paulb@131 | 40 | style="font-weight: bold;">template:element="item"</span>><br /> <p><br /> value="some value"> Some item: <input <span |
| paulb@131 | 41 | style="font-weight: bold;">template:attribute="value"</span> name="<span |
| paulb@144 | 42 | style="font-weight: bold;">{template:this-attribute()}</span>" type="text" value="<span |
| paulb@131 | 43 | style="font-weight: bold;">{$this-value}</span>" /><br /> <input name="remove" type="submit" value="Remove" /><br /> </p><br /> <p><br /> Itself containing more items:<br /> </p><br /> <subitem <p <span |
| paulb@131 | 44 | style="font-weight: bold;">template:element="subitem"</span>><br /> subvalue="some other value"/> Sub-item: <input <span |
| paulb@131 | 45 | style="font-weight: bold;">template:attribute="subvalue"</span> name="<span |
| paulb@144 | 46 | style="font-weight: bold;">{template:this-attribute()}</span>" type="text" value="<span |
| paulb@131 | 47 | style="font-weight: bold;">{$this-value}</span>" /><br /> <input name="remove2" type="submit" value="Remove" /><br /> </p><br /> <p><br /> <input name="add2" type="submit" value="Add subitem" /><br /> </p><br /> </item> </div><br /> <p><br /> <input name="add" type="submit" value="Add item" /><br /> </p><br /><br /></structure> </body></pre> |
| paulb@131 | 48 | <p style=""> |
| paulb@131 | 49 | The following annotations have been added:</p> |
| paulb@118 | 50 | <ul> |
| paulb@131 | 51 | <li>For elements in the structure, <code>template:element</code> |
| paulb@131 | 52 | attributes have been added to the corresponding HTML elements in the |
| paulb@131 | 53 | template.</li> |
| paulb@131 | 54 | <li>For attributes in the structure, <code>template:attribute</code> |
| paulb@131 | 55 | attributes have been added to the corresponding HTML <code>elements |
| paulb@131 | 56 | in the template.</code></li> |
| paulb@118 | 57 | </ul> |
| paulb@131 | 58 | <p>In addition, some of the attributes in the original HTML code have |
| paulb@131 | 59 | been changed:</p> |
| paulb@118 | 60 | <ul> |
| paulb@131 | 61 | <li>The <code>input</code> elements' <code>name</code> |
| paulb@144 | 62 | attributes have been redefined to use the special <code>{template:this-attribute()}</code> |
| paulb@131 | 63 | value.</li> |
| paulb@131 | 64 | <li>The <code>input</code> elements' <code>value</code> |
| paulb@131 | 65 | attributes have been redefined to use the special <code>{$this-value}</code> |
| paulb@131 | 66 | value.</li> |
| paulb@118 | 67 | </ul> |
| paulb@118 | 68 | <p>Whereas the first set of annotations reproduce the desired |
| paulb@118 | 69 | structure, the latter modifications are really housekeeping measures to |
| paulb@118 | 70 | make sure that the final output contains the correct names and values |
| paulb@118 | 71 | for each of the form fields shown to the user.</p> |
| paulb@131 | 72 | <h2>Completing the Template</h2> |
| paulb@131 | 73 | <p>The template in full should now look something like this:</p> |
| paulb@131 | 74 | <pre><?xml version="1.0"?><br /><html xmlns="http://www.w3.org/1999/xhtml"<br /> <span |
| paulb@144 | 75 | style="font-weight: bold;">xmlns:template="http://www.boddie.org.uk/ns/xmltools/template"</span>><br /><head><br /> <title>Example</title><br /></head><br /><body template:element="structure"><br /><form action="" method="POST"><br /><br /><!-- Template text between the start and the interesting part. --><br /><br /><div template:element="item"><br /> <p><br /> Some item: <input template:attribute="value" name="{template:this-attribute()}" type="text" value="{$this-value}" /><br /> <input name="remove" type="submit" value="Remove" /><br /> </p><br /> <p><br /> Itself containing more items:<br /> </p><br /> <p template:element="subitem"><br /> Sub-item: <input template:attribute="subvalue" name="{template:this-attribute()}" type="text" value="{$this-value}" /><br /> <input name="remove2" type="submit" value="Remove" /><br /> </p><br /> <p><br /> <input name="add2" type="submit" value="Add subitem" /><br /> </p><br /></div><br /><p><br /> <input name="add" type="submit" value="Add item" /><br /></p><br /><br /><!-- Template text between the interesting part and the end. --><br /><br /></form><br /></body><br /></html></pre> |
| paulb@131 | 76 | <p>Note also that a namespace declaration is required for the <code>template</code> |
| paulb@131 | 77 | attributes, and it is usually best to put this declaration on the |
| paulb@131 | 78 | top-level <code>html</code> element in the template, as shown in |
| paulb@131 | 79 | the above example code.</p> |
| paulb@118 | 80 | <p>Whilst the above annotations permit the template to display the data |
| paulb@118 | 81 | in XML documents containing form data, the other aspects of the user |
| paulb@118 | 82 | interface - the addition and removal of items and subitems - are not |
| paulb@131 | 83 | yet fully modelled in the template. These things will be added to the |
| paulb@131 | 84 | template as <a href="selectors.html">selectors</a> as part of the |
| paulb@131 | 85 | next activity in the development <a href="overview.html">process</a>.</p> |
| paulb@118 | 86 | </body> |
| paulb@118 | 87 | </html> |
