1.1 --- a/docs/structure.html Sat Sep 08 16:53:18 2007 +0000
1.2 +++ b/docs/structure.html Sat Sep 08 16:53:34 2007 +0000
1.3 @@ -1,8 +1,8 @@
1.4 +<?xml version="1.0" encoding="iso-8859-1"?>
1.5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1.6 <html xmlns="http://www.w3.org/1999/xhtml"><head>
1.7 <meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type" />
1.8 -
1.9 - <title>Creating Applications: Add Structure</title><meta name="generator" content="amaya 8.1a, see http://www.w3.org/Amaya/" />
1.10 + <title>Creating Applications: Add Structure</title>
1.11 <link href="styles.css" rel="stylesheet" type="text/css" /></head>
1.12 <body>
1.13 <h1>Creating Applications: Add Structure</h1>
1.14 @@ -16,40 +16,40 @@
1.15 adding special attributes to the HTML code.</p>
1.16 <p> Consider the interesting parts of the template side by side with
1.17 the structure information:</p>
1.18 -<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>
1.19 -<p>To make such connections, we will annotate the HTML code using
1.20 +<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>
1.21 +<p>To make such connections, we will annotate the HTML code using
1.22 special attributes and values.</p>
1.23 <ul>
1.24 </ul>
1.25 <h2><a name="AnnotatingTheTemplate"></a>Annotating the Template</h2>
1.26 <p>Taking the template extract from above, we add special annotations
1.27 to produce something like this:</p>
1.28 -<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>
1.29 +<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>
1.30 <p style="">
1.31 The following annotations have been added:</p>
1.32 <ul>
1.33 - <li>For elements in the structure, <code>template:element</code>
1.34 + <li>For elements in the structure, <code>template:element</code>
1.35 attributes have been added to the corresponding HTML elements in the
1.36 template.</li>
1.37 - <li>For attributes in the structure, <code>template:attribute-field</code>
1.38 -attributes have been added to the corresponding HTML elements
1.39 + <li>For attributes in the structure, <code>template:attribute-field</code>
1.40 +attributes have been added to the corresponding HTML elements
1.41 in the template.</li>
1.42 </ul>
1.43 -<p>Note how the <code>name</code> and <code>value</code> attributes have had their contents replaced with <code>...</code>;
1.44 +<p>Note how the <code>name</code> and <code>value</code> attributes have had their contents replaced with <code>...</code>;
1.45 we do this to keep Web page editors happy, and in the final output
1.46 these attributes will be replaced with those which model the underlying
1.47 document correctly.</p>
1.48 <h2>Completing the Template</h2>
1.49 <p>The template in full should now look something like this:</p>
1.50 <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>
1.51 -<p>Note also that a namespace declaration is required for the <code>template</code>
1.52 +<p>Note also that a namespace declaration is required for the <code>template</code>
1.53 attributes, and it is usually best to put this declaration on the
1.54 -top-level <code>html</code> element in the template, as shown in
1.55 +top-level <code>html</code> element in the template, as shown in
1.56 the above example code.</p>
1.57 <p>Whilst the above annotations permit the template to display the data
1.58 in XML documents containing form data, the other aspects of the user
1.59 interface - the addition and removal of items and subitems - are not
1.60 yet fully modelled in the template. These things will be added to the
1.61 -template as <a href="selectors.html">selectors</a> as part of the
1.62 +template as <a href="selectors.html">selectors</a> as part of the
1.63 next activity in the development <a href="overview.html">process</a>.</p>
1.64 -</body></html>
1.65 \ No newline at end of file
1.66 +</body></html>