paulb@118 | 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
paulb@118 | 2 | <html xmlns="http://www.w3.org/1999/xhtml"> |
paulb@118 | 3 | <head> |
paulb@118 | 4 | |
paulb@118 | 5 | |
paulb@118 | 6 | <meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type" /> |
paulb@118 | 7 | |
paulb@118 | 8 | |
paulb@118 | 9 | |
paulb@118 | 10 | <title>Creating Applications: Design a Template</title> |
paulb@118 | 11 | <meta name="generator" content="amaya 8.1a, see http://www.w3.org/Amaya/" /> |
paulb@118 | 12 | |
paulb@118 | 13 | |
paulb@118 | 14 | <link href="styles.css" rel="stylesheet" type="text/css" /> |
paulb@118 | 15 | </head> |
paulb@118 | 16 | |
paulb@118 | 17 | |
paulb@118 | 18 | <body> |
paulb@118 | 19 | |
paulb@118 | 20 | <h1>Creating Applications: Design |
paulb@118 | 21 | a Template</h1> |
paulb@118 | 22 | |
paulb@118 | 23 | <p>To design a template, create a |
paulb@118 | 24 | new Web page using whichever tools or applications you feel most |
paulb@118 | 25 | comfortable with. Given that XSLForms applications involve Web forms, |
paulb@118 | 26 | you will obviously need to add forms and fields to your |
paulb@118 | 27 | page. In |
paulb@118 | 28 | the beginning, it |
paulb@118 | 29 | is not that important to use the correct names in each of the fields - |
paulb@118 | 30 | these will be added later.</p> |
paulb@118 | 31 | |
paulb@118 | 32 | <p>Here are some tips for |
paulb@118 | 33 | designing the template:</p> |
paulb@118 | 34 | |
paulb@118 | 35 | <h2>Page Structure</h2> |
paulb@118 | 36 | |
paulb@118 | 37 | <p>Think about your form in terms |
paulb@118 | 38 | of the structure of the data being represented. You may want to have a |
paulb@118 | 39 | list of items where each item can be edited by changing a text field |
paulb@118 | 40 | and removed by pressing a button next to that field, and you may want |
paulb@118 | 41 | to have a button which adds new items to the list. Each item may look |
paulb@118 | 42 | like |
paulb@118 | 43 | this:</p> |
paulb@118 | 44 | |
paulb@118 | 45 | <form method="post" action="none" name="structure"> |
paulb@118 | 46 | |
paulb@118 | 47 | <p>Some |
paulb@118 | 48 | item: <input name="value" value="some value" /><input name="remove" value="Remove" type="submit" /> |
paulb@118 | 49 | </p> |
paulb@118 | 50 | |
paulb@118 | 51 | </form> |
paulb@118 | 52 | |
paulb@118 | 53 | <p>The HTML code which produces this item might look like this:</p> |
paulb@118 | 54 | |
paulb@118 | 55 | <pre><p><br /> Some item: <input name="value" type="text" value="some value" /><br /> <input name="remove" type="submit" value="Remove" /><br /></p></pre> |
paulb@118 | 56 | |
paulb@118 | 57 | <p>Although you will only need to |
paulb@118 | 58 | "paint" one such item in the document, you should imagine that when |
paulb@118 | 59 | many such items are presented they will be produced by copying the form |
paulb@118 | 60 | of the original item; thus, the details of that item should reside in |
paulb@118 | 61 | an HTML element which can be replicated many times at a particular |
paulb@118 | 62 | position in a document, like this:</p> |
paulb@118 | 63 | |
paulb@118 | 64 | <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> |
paulb@118 | 65 | |
paulb@118 | 66 | <p>Making sure that the final form of the list is sensible HTML code is |
paulb@118 | 67 | an activity explored <a href="structure.html">later</a> in the |
paulb@118 | 68 | development <a href="overview.html">process</a>.</p> |
paulb@118 | 69 | |
paulb@118 | 70 | <h2>Hierarchical Structures</h2> |
paulb@118 | 71 | |
paulb@118 | 72 | <p>Although we need not consider the structure of the template too |
paulb@118 | 73 | deeply, given the above advice about how structure should be |
paulb@118 | 74 | represented in HTML, it is interesting to consider hierarchical or |
paulb@118 | 75 | nested structures. For example, each item in a list may itself contain |
paulb@118 | 76 | a number of other items; for example:</p> |
paulb@118 | 77 | |
paulb@118 | 78 | <form method="post" action="none" name="hierarchical"> |
paulb@118 | 79 | |
paulb@118 | 80 | <p>Some item: <input name="value" value="some value" /><input name="remove" value="Remove" type="submit" /></p> |
paulb@118 | 81 | |
paulb@118 | 82 | |
paulb@118 | 83 | <p>Itself containing more items:</p> |
paulb@118 | 84 | |
paulb@118 | 85 | |
paulb@118 | 86 | <p>Sub-item: <input name="subvalue" value="some other value" /><input name="remove2" value="Remove" type="submit" /></p> |
paulb@118 | 87 | |
paulb@118 | 88 | </form> |
paulb@118 | 89 | |
paulb@118 | 90 | <p>Given that the whole of the above fragment is a single item in a |
paulb@118 | 91 | list, to ensure that the above advice is heeded about items being |
paulb@118 | 92 | easily replicated, we need to enclose the fragment in a single HTML |
paulb@118 | 93 | element, like this:</p> |
paulb@118 | 94 | |
paulb@118 | 95 | <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> |
paulb@118 | 96 | |
paulb@118 | 97 | <p>In the above example, the <code>div</code> element encloses the |
paulb@118 | 98 | outer list item. Meanwhile, the inner list item is itself enclosed |
paulb@118 | 99 | within a <code>p</code> element in the same way as the original |
paulb@118 | 100 | example enclosed its simple list item. Consider the above example with |
paulb@118 | 101 | replicated items:</p> |
paulb@118 | 102 | |
paulb@118 | 103 | <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> |
paulb@118 | 104 | |
paulb@118 | 105 | <h2>Saving the Template</h2> |
paulb@118 | 106 | |
paulb@118 | 107 | <p>Once you are happy with the |
paulb@118 | 108 | design of the page, save it to the <a href="directory.html">directory</a> |
paulb@118 | 109 | 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> |
paulb@118 | 110 | |
paulb@118 | 111 | </body> |
paulb@118 | 112 | </html> |