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