1.1 --- a/docs/design.html Sun Jul 17 22:33:17 2005 +0000
1.2 +++ b/docs/design.html Sun Jul 17 22:34:52 2005 +0000
1.3 @@ -2,14 +2,21 @@
1.4 <html xmlns="http://www.w3.org/1999/xhtml">
1.5 <head>
1.6
1.7 +
1.8 +
1.9
1.10 <meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type" />
1.11
1.12 +
1.13 +
1.14 +
1.15
1.16
1.17 <title>Creating Applications: Design a Template</title>
1.18 <meta name="generator" content="amaya 8.1a, see http://www.w3.org/Amaya/" />
1.19
1.20 +
1.21 +
1.22
1.23 <link href="styles.css" rel="stylesheet" type="text/css" />
1.24 </head>
1.25 @@ -17,9 +24,11 @@
1.26
1.27 <body>
1.28
1.29 +
1.30 <h1>Creating Applications: Design
1.31 a Template</h1>
1.32
1.33 +
1.34 <p>To design a template, create a
1.35 new Web page using whichever tools or applications you feel most
1.36 comfortable with. Given that XSLForms applications involve Web forms,
1.37 @@ -29,11 +38,11 @@
1.38 is not that important to use the correct names in each of the fields -
1.39 these will be added later.</p>
1.40
1.41 -<p>Here are some tips for
1.42 -designing the template:</p>
1.43
1.44 +<p>The following sections discuss various techniques used in designing a template.</p>
1.45 <h2>Page Structure</h2>
1.46
1.47 +
1.48 <p>Think about your form in terms
1.49 of the structure of the data being represented. You may want to have a
1.50 list of items where each item can be edited by changing a text field
1.51 @@ -42,17 +51,23 @@
1.52 like
1.53 this:</p>
1.54
1.55 +
1.56 <form method="post" action="none" name="structure">
1.57
1.58 +
1.59 <p>Some
1.60 item: <input name="value" value="some value" /><input name="remove" value="Remove" type="submit" />
1.61 </p>
1.62
1.63 +
1.64 </form>
1.65
1.66 -<p>The HTML code which produces this item might look like this:</p>
1.67 +
1.68 +<p>The HTML code which produces this item in a Web page might look like this:</p>
1.69
1.70 -<pre><p><br /> Some item: <input name="value" type="text" value="some value" /><br /> <input name="remove" type="submit" value="Remove" /><br /></p></pre>
1.71 +
1.72 +<pre><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /> <title>Example</title><br /></head><br /><body><br /><br /><!-- Template text between the start and the interesting part. --><br /><br /><form action="" method="POST"><br /><p><br /> Some item: <input name="value" type="text" value="some value" /><br /> <input name="remove" type="submit" value="Remove" /><br /></p><br /><br /><!-- Template text between the interesting part and the end. --><br /><br /></form><br /></body><br /></html></pre>
1.73 +
1.74
1.75 <p>Although you will only need to
1.76 "paint" one such item in the document, you should imagine that when
1.77 @@ -61,38 +76,52 @@
1.78 an HTML element which can be replicated many times at a particular
1.79 position in a document, like this:</p>
1.80
1.81 +
1.82 <pre><p><br /> Some item: <input name="value" type="text" value="some value" /><br /> <input name="remove" type="submit" value="Remove" /><br /></p><br /><p><br /> Some item: <input name="value" type="text" value="some value" /><br /> <input name="remove" type="submit" value="Remove" /><br /></p><br /><p><br /> Some item: <input name="value" type="text" value="some value" /><br /> <input name="remove" type="submit" value="Remove" /><br /></p></pre>
1.83
1.84 +
1.85 <p>Making sure that the final form of the list is sensible HTML code is
1.86 an activity explored <a href="structure.html">later</a> in the
1.87 development <a href="overview.html">process</a>.</p>
1.88
1.89 +
1.90 <h2>Hierarchical Structures</h2>
1.91
1.92 +
1.93 <p>Although we need not consider the structure of the template too
1.94 deeply, given the above advice about how structure should be
1.95 represented in HTML, it is interesting to consider hierarchical or
1.96 nested structures. For example, each item in a list may itself contain
1.97 a number of other items; for example:</p>
1.98
1.99 +
1.100 <form method="post" action="none" name="hierarchical">
1.101
1.102 +
1.103 <p>Some item: <input name="value" value="some value" /><input name="remove" value="Remove" type="submit" /></p>
1.104
1.105 +
1.106 +
1.107
1.108 <p>Itself containing more items:</p>
1.109
1.110 +
1.111 +
1.112
1.113 <p>Sub-item: <input name="subvalue" value="some other value" /><input name="remove2" value="Remove" type="submit" /></p>
1.114
1.115 +
1.116 </form>
1.117
1.118 +
1.119 <p>Given that the whole of the above fragment is a single item in a
1.120 list, to ensure that the above advice is heeded about items being
1.121 easily replicated, we need to enclose the fragment in a single HTML
1.122 element, like this:</p>
1.123
1.124 -<pre><div><br /> <p><br /> Some item: <input name="value" type="text" value="some value" /><br /> <input name="remove" type="submit" value="Remove" /><br /> </p><br /> <p><br /> Itself containing more items:<br /> </p><br /> <p><br /> Sub-item: <input name="subvalue" type="text" value="some other value" /><br /> <input name="remove2" type="submit" value="Remove" /><br /> </p><br /></div></pre>
1.125 +
1.126 +<pre><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /> <title>Example</title><br /></head><br /><body><br /><form action="" method="POST"><br /><br /><!-- Template text between the start and the interesting part. --><br /><br /><div><br /> <p><br /> Some item: <input name="value" type="text" value="some value" /><br /> <input name="remove" type="submit" value="Remove" /><br /> </p><br /> <p><br /> Itself containing more items:<br /> </p><br /> <p><br /> Sub-item: <input name="subvalue" type="text" value="some other value" /><br /> <input name="remove2" type="submit" value="Remove" /><br /> </p><br /></div><br /><br /><!-- Template text between the interesting part and the end. --><br /><br /></form><br /></body><br /></html></pre>
1.127 +
1.128
1.129 <p>In the above example, the <code>div</code> element encloses the
1.130 outer list item. Meanwhile, the inner list item is itself enclosed
1.131 @@ -100,13 +129,17 @@
1.132 example enclosed its simple list item. Consider the above example with
1.133 replicated items:</p>
1.134
1.135 +
1.136 <pre><div><br /> <p><br /> Some item: <input name="value" type="text" value="some value" /><br /> <input name="remove" type="submit" value="Remove" /><br /> </p><br /> <p><br /> Itself containing more items:<br /> </p><br /> <p><br /> Sub-item: <input name="subvalue" type="text" value="some other value" /><br /> <input name="remove2" type="submit" value="Remove" /><br /> </p><br /> <p><br /> Sub-item: <input name="subvalue" type="text" value="some other value" /><br /> <input name="remove2" type="submit" value="Remove" /><br /> </p><br /> <p><br /> Sub-item: <input name="subvalue" type="text" value="some other value" /><br /> <input name="remove2" type="submit" value="Remove" /><br /> </p><br /></div><br /><div><br /> <p><br /> Some item: <input name="value" type="text" value="some value" /><br /> <input name="remove" type="submit" value="Remove" /><br /> </p><br /> <p><br /> Itself containing more items:<br /> </p><br /> <p><br /> Sub-item: <input name="subvalue" type="text" value="some other value" /><br /> <input name="remove2" type="submit" value="Remove" /><br /> </p><br /></div><br /></pre>
1.137
1.138 +
1.139 <h2>Saving the Template</h2>
1.140
1.141 +
1.142 <p>Once you are happy with the
1.143 design of the page, save it to the <a href="directory.html">directory</a>
1.144 created earlier, then proceed to <a href="structure.html">adding structure information</a> in the next stage of the <a href="overview.html">process</a>.</p>
1.145
1.146 +
1.147 </body>
1.148 </html>