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