1.1 --- a/docs/structure.html Mon Oct 03 23:04:48 2005 +0000
1.2 +++ b/docs/structure.html Mon Oct 03 23:05:27 2005 +0000
1.3 @@ -1,12 +1,10 @@
1.4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1.5 -<html xmlns="http://www.w3.org/1999/xhtml">
1.6 -<head>
1.7 +<html xmlns="http://www.w3.org/1999/xhtml"><head>
1.8 <meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type" />
1.9 - <title>Creating Applications: Add Structure</title>
1.10 - <meta name="generator"
1.11 - content="amaya 8.1a, see http://www.w3.org/Amaya/" />
1.12 - <link href="styles.css" rel="stylesheet" type="text/css" />
1.13 -</head>
1.14 +
1.15 + <title>Creating Applications: Add Structure</title><meta name="generator" content="amaya 8.1a, see http://www.w3.org/Amaya/" />
1.16 + <link href="styles.css" rel="stylesheet" type="text/css" /></head>
1.17 +
1.18 <body>
1.19 <h1>Creating Applications: Add Structure</h1>
1.20 <p>Earlier, we defined the <a href="data.html">structure of the form
1.21 @@ -19,15 +17,7 @@
1.22 adding special attributes to the HTML code.</p>
1.23 <p> Consider the interesting parts of the template side by side with
1.24 the structure information:</p>
1.25 -<pre style=""><structure> <span
1.26 - style="font-weight: bold;"><body><br /><br /></span> <item <span
1.27 - style="font-weight: bold;"><div></span><br /> <p><br /> value="some value"> Some item: <span
1.28 - 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
1.29 - style="font-weight: bold;"><p><br /> </span> subvalue="some other value"/> Sub-item: <span
1.30 - style="font-weight: bold;"><input name="subvalue" type="text" value="some other value" /></span><br /> <input name="remove2" type="submit" value="Remove" /><br /> <span
1.31 - style="font-weight: bold;"></p></span><br /> <p><br /> <input name="add2" type="submit" value="Add subitem" /><br /> </p><br /> </item> <span
1.32 - style="font-weight: bold;"></div></span><br /> <p><br /> <input name="add" type="submit" value="Add item" /><br /> </p><br /><br /></structure> <span
1.33 - style="font-weight: bold;"></body></span></pre>
1.34 +<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.35 <p>To make such connections, we will annotate the HTML code using
1.36 special attributes and values.</p>
1.37 <ul>
1.38 @@ -35,44 +25,24 @@
1.39 <h2>Annotating the Template</h2>
1.40 <p>Taking the template extract from above, we add special annotations
1.41 to produce something like this:</p>
1.42 -<pre style=""><structure> <body <span
1.43 - style="font-weight: bold;">template:element="structure"</span>><br /><br /> <item <div <span
1.44 - style="font-weight: bold;">template:element="item"</span>><br /> <p><br /> value="some value"> Some item: <input <span
1.45 - style="font-weight: bold;">template:attribute="value"</span> name="<span
1.46 - style="font-weight: bold;">{template:this-attribute()}</span>" type="text" value="<span
1.47 - 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
1.48 - style="font-weight: bold;">template:element="subitem"</span>><br /> subvalue="some other value"/> Sub-item: <input <span
1.49 - style="font-weight: bold;">template:attribute="subvalue"</span> name="<span
1.50 - style="font-weight: bold;">{template:this-attribute()}</span>" type="text" value="<span
1.51 - 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>
1.52 +<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.53 <p style="">
1.54 The following annotations have been added:</p>
1.55 <ul>
1.56 <li>For elements in the structure, <code>template:element</code>
1.57 attributes have been added to the corresponding HTML elements in the
1.58 template.</li>
1.59 - <li>For attributes in the structure, <code>template:attribute</code>
1.60 -attributes have been added to the corresponding HTML <code>elements
1.61 -in the template.</code></li>
1.62 + <li>For attributes in the structure, <code>template:attribute-field</code>
1.63 +attributes have been added to the corresponding HTML elements
1.64 +in the template.</li>
1.65 </ul>
1.66 -<p>In addition, some of the attributes in the original HTML code have
1.67 -been changed:</p>
1.68 -<ul>
1.69 - <li>The <code>input</code> elements' <code>name</code>
1.70 -attributes have been redefined to use the special <code>{template:this-attribute()}</code>
1.71 -value.</li>
1.72 - <li>The <code>input</code> elements' <code>value</code>
1.73 -attributes have been redefined to use the special <code>{$this-value}</code>
1.74 -value.</li>
1.75 -</ul>
1.76 -<p>Whereas the first set of annotations reproduce the desired
1.77 -structure, the latter modifications are really housekeeping measures to
1.78 -make sure that the final output contains the correct names and values
1.79 -for each of the form fields shown to the user.</p>
1.80 +<p>Note how the <code>name</code> and <code>value</code> attributes have had their contents replaced with <code>...</code>;
1.81 +we do this to keep Web page editors happy, and in the final output
1.82 +these attributes will be replaced with those which model the underlying
1.83 +document correctly.</p>
1.84 <h2>Completing the Template</h2>
1.85 <p>The template in full should now look something like this:</p>
1.86 -<pre><?xml version="1.0"?><br /><html xmlns="http://www.w3.org/1999/xhtml"<br /> <span
1.87 - 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>
1.88 +<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.89 <p>Note also that a namespace declaration is required for the <code>template</code>
1.90 attributes, and it is usually best to put this declaration on the
1.91 top-level <code>html</code> element in the template, as shown in
1.92 @@ -83,5 +53,4 @@
1.93 yet fully modelled in the template. These things will be added to the
1.94 template as <a href="selectors.html">selectors</a> as part of the
1.95 next activity in the development <a href="overview.html">process</a>.</p>
1.96 -</body>
1.97 -</html>
1.98 +</body></html>
1.99 \ No newline at end of file