1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/docs/design.html Sun Jul 17 01:07:10 2005 +0000
1.3 @@ -0,0 +1,112 @@
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 +
1.8 +
1.9 + <meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type" />
1.10 +
1.11 +
1.12 +
1.13 + <title>Creating Applications: Design a Template</title>
1.14 + <meta name="generator" content="amaya 8.1a, see http://www.w3.org/Amaya/" />
1.15 +
1.16 +
1.17 + <link href="styles.css" rel="stylesheet" type="text/css" />
1.18 +</head>
1.19 +
1.20 +
1.21 +<body>
1.22 +
1.23 +<h1>Creating Applications: Design
1.24 +a Template</h1>
1.25 +
1.26 +<p>To design a template, create a
1.27 +new Web page using whichever tools or applications you feel most
1.28 +comfortable with. Given that XSLForms applications involve Web forms,
1.29 +you will obviously need to add forms and fields to your
1.30 +page. In
1.31 +the beginning, it
1.32 +is not that important to use the correct names in each of the fields -
1.33 +these will be added later.</p>
1.34 +
1.35 +<p>Here are some tips for
1.36 +designing the template:</p>
1.37 +
1.38 +<h2>Page Structure</h2>
1.39 +
1.40 +<p>Think about your form in terms
1.41 +of the structure of the data being represented. You may want to have a
1.42 +list of items where each item can be edited by changing a text field
1.43 +and removed by pressing a button next to that field, and you may want
1.44 +to have a button which adds new items to the list. Each item may look
1.45 +like
1.46 +this:</p>
1.47 +
1.48 +<form method="post" action="none" name="structure">
1.49 +
1.50 + <p>Some
1.51 +item: <input name="value" value="some value" /><input name="remove" value="Remove" type="submit" />
1.52 + </p>
1.53 +
1.54 +</form>
1.55 +
1.56 +<p>The HTML code which produces this item might look like this:</p>
1.57 +
1.58 +<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.59 +
1.60 +<p>Although you will only need to
1.61 +"paint" one such item in the document, you should imagine that when
1.62 +many such items are presented they will be produced by copying the form
1.63 +of the original item; thus, the details of that item should reside in
1.64 +an HTML element which can be replicated many times at a particular
1.65 +position in a document, like this:</p>
1.66 +
1.67 +<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.68 +
1.69 +<p>Making sure that the final form of the list is sensible HTML code is
1.70 +an activity explored <a href="structure.html">later</a> in the
1.71 +development <a href="overview.html">process</a>.</p>
1.72 +
1.73 +<h2>Hierarchical Structures</h2>
1.74 +
1.75 +<p>Although we need not consider the structure of the template too
1.76 +deeply, given the above advice about how structure should be
1.77 +represented in HTML, it is interesting to consider hierarchical or
1.78 +nested structures. For example, each item in a list may itself contain
1.79 +a number of other items; for example:</p>
1.80 +
1.81 +<form method="post" action="none" name="hierarchical">
1.82 +
1.83 + <p>Some item: <input name="value" value="some value" /><input name="remove" value="Remove" type="submit" /></p>
1.84 +
1.85 +
1.86 + <p>Itself containing more items:</p>
1.87 +
1.88 +
1.89 + <p>Sub-item: <input name="subvalue" value="some other value" /><input name="remove2" value="Remove" type="submit" /></p>
1.90 +
1.91 +</form>
1.92 +
1.93 +<p>Given that the whole of the above fragment is a single item in a
1.94 +list, to ensure that the above advice is heeded about items being
1.95 +easily replicated, we need to enclose the fragment in a single HTML
1.96 +element, like this:</p>
1.97 +
1.98 +<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.99 +
1.100 +<p>In the above example, the <code>div</code> element encloses the
1.101 +outer list item. Meanwhile, the inner list item is itself enclosed
1.102 +within a <code>p</code> element in the same way as the original
1.103 +example enclosed its simple list item. Consider the above example with
1.104 +replicated items:</p>
1.105 +
1.106 +<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.107 +
1.108 +<h2>Saving the Template</h2>
1.109 +
1.110 +<p>Once you are happy with the
1.111 +design of the page, save it to the <a href="directory.html">directory</a>
1.112 +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.113 +
1.114 +</body>
1.115 +</html>