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