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