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"><head> 3 <meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type" /> 4 5 <title>Creating Applications: Add Structure</title><meta name="generator" content="amaya 8.1a, see http://www.w3.org/Amaya/" /> 6 <link href="styles.css" rel="stylesheet" type="text/css" /></head> 7 <body> 8 <h1>Creating Applications: Add Structure</h1> 9 <p>Earlier, we defined the <a href="data.html">structure of the form 10 data</a>, and during the <a href="design.html">template design</a> 11 activity, it was 12 necessary to consider this structure information and how it should be 13 presented. 14 In XSLForms templates, we need to explicitly connect such information 15 about the structure of the data to the HTML elements representing it by 16 adding special attributes to the HTML code.</p> 17 <p> Consider the interesting parts of the template side by side with 18 the structure information:</p> 19 <pre style=""><structure> <span style="font-weight: bold;"><body><br /><br /></span> <item <span style="font-weight: bold;"><div></span><br /> <p><br /> value="some value"> Some item: <span 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 style="font-weight: bold;"><p><br /> </span> subvalue="some other value"/> Sub-item: <span style="font-weight: bold;"><input name="subvalue" type="text" value="some other value" /></span><br /> <input name="remove2" type="submit" value="Remove" /><br /> <span style="font-weight: bold;"></p></span><br /> <p><br /> <input name="add2" type="submit" value="Add subitem" /><br /> </p><br /> </item> <span style="font-weight: bold;"></div></span><br /> <p><br /> <input name="add" type="submit" value="Add item" /><br /> </p><br /><br /></structure> <span style="font-weight: bold;"></body></span></pre> 20 <p>To make such connections, we will annotate the HTML code using 21 special attributes and values.</p> 22 <ul> 23 </ul> 24 <h2><a name="AnnotatingTheTemplate"></a>Annotating the Template</h2> 25 <p>Taking the template extract from above, we add special annotations 26 to produce something like this:</p> 27 <pre style=""><structure> <body <span style="font-weight: bold;">template:element="structure"</span>><br /><br /> <item <div <span style="font-weight: bold;">template:element="item"</span>><br /> <p><br /> value="some value"> Some item: <input <span style="font-weight: bold;">template:attribute-field="value"</span> name="<span style="font-weight: bold;">...</span>" type="text" value="<span style="font-weight: bold;">...</span>" /><br /> <input name="remove" type="submit" value="Remove" /><br /> </p><br /> <p><br /> Itself containing more items:<br /> </p><br /> <subitem <p <span style="font-weight: bold;">template:element="subitem"</span>><br /> subvalue="some other value"/> Sub-item: <input <span style="font-weight: bold;">template:attribute-field="subvalue"</span> name="<span style="font-weight: bold;">...</span>" type="text" value="<span style="font-weight: bold;">...</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> 28 <p style=""> 29 The following annotations have been added:</p> 30 <ul> 31 <li>For elements in the structure, <code>template:element</code> 32 attributes have been added to the corresponding HTML elements in the 33 template.</li> 34 <li>For attributes in the structure, <code>template:attribute-field</code> 35 attributes have been added to the corresponding HTML elements 36 in the template.</li> 37 </ul> 38 <p>Note how the <code>name</code> and <code>value</code> attributes have had their contents replaced with <code>...</code>; 39 we do this to keep Web page editors happy, and in the final output 40 these attributes will be replaced with those which model the underlying 41 document correctly.</p> 42 <h2>Completing the Template</h2> 43 <p>The template in full should now look something like this:</p> 44 <pre><?xml version="1.0"?><br /><html xmlns="http://www.w3.org/1999/xhtml"<br /> <span 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-field="value" name="..." type="text" 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-field="subvalue" name="..." type="text" 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> 45 <p>Note also that a namespace declaration is required for the <code>template</code> 46 attributes, and it is usually best to put this declaration on the 47 top-level <code>html</code> element in the template, as shown in 48 the above example code.</p> 49 <p>Whilst the above annotations permit the template to display the data 50 in XML documents containing form data, the other aspects of the user 51 interface - the addition and removal of items and subitems - are not 52 yet fully modelled in the template. These things will be added to the 53 template as <a href="selectors.html">selectors</a> as part of the 54 next activity in the development <a href="overview.html">process</a>.</p> 55 </body></html>