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 <meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type" /> 5 <title>Creating Applications: Design a Template</title> 6 <meta name="generator" 7 content="amaya 8.1a, see http://www.w3.org/Amaya/" /> 8 <link href="styles.css" rel="stylesheet" type="text/css" /> 9 </head> 10 <body> 11 <h1>Creating Applications: Design 12 a Template</h1> 13 <p>In XSLForms applications, templates are just Web pages with some 14 additional annotations. Thus, to begin the design of a template you can 15 create a 16 new Web page using whichever tools or applications you feel most 17 comfortable with. Given that XSLForms applications involve Web forms, 18 you will obviously need to add forms and fields to your 19 page.</p> 20 <p>With a <a href="data.html">structure</a> for the Web forms already 21 defined, we must now concentrate on designing a suitable user interface 22 for the editable items and subitems, along with some mechanisms for 23 adding and removing these things.</p> 24 <h2>The Template Outline</h2> 25 <p>In raw HTML - that is, the code which defines how a Web page is made 26 - we may wish to design the skeleton (or outline) of the page:</p> 27 <pre><?xml version="1.0"?><br /><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 /><!-- The interesting part which we will design below. --><br /><br /><!-- Template text between the interesting part and the end. --><br /><br /></form><br /></body><br /></html></pre> 28 <p>Most visual editors for Web pages will add such details 29 automatically when creating a new page, but there are a few things to 30 remember to check:</p> 31 <ul> 32 <li>XSLForms templates must be well-formed XML - you should therefore 33 choose to create XHTML pages. We casually refer to our XHTML templates 34 as being "HTML" throughout this documentation, and the well-formed 35 stipulation is just assumed, but it should be noted that old-style 36 ill-formed HTML, where start and end tags need not match, will <span 37 style="font-style: italic;">not</span> work with XSL transformations 38 and will therefore <span style="font-style: italic;">not</span> work 39 with XSLForms.</li> 40 <li>We add a <code>form</code> element to the outline so that 41 the form fields added later actually perform some function when testing 42 our application.</li> 43 </ul> 44 <h2>Designing the Items</h2> 45 <p>Each of the items presented using the template may employ a simple 46 label and a text field. Alongside these things, we may also wish to 47 have a button which can be pressed to remove that item from its list. 48 The visual representation of this might resemble the following:</p> 49 <form method="post" action="" name="structure"> 50 <p>Some 51 item: <input name="value" value="some value" /><input name="remove" 52 value="Remove" type="submit" /> </p> 53 </form> 54 <p>The HTML code which produces this representation might look like 55 this:</p> 56 <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 /></div></pre> 57 <p>Although we have given names to the different <code>input</code> 58 elements, it 59 is actually not that important to use the correct names at this stage 60 in the development process - the actual names will be added later.</p> 61 <p><span style="font-weight: bold;">One important thing to note</span> 62 is that the item is defined within a single top-level HTML element - 63 the significance of this will become clear later on.</p> 64 <h2>Designing the Subitems</h2> 65 <p>In the structure of the form data, we decided to have lists of 66 subitems belonging to each item. To achieve this, we can thus extend 67 the above design for the items by adding some additional text and a 68 similar label, field and button arrangement for each of the subitems. 69 For example:</p> 70 <form method="post" action="" name="hierarchical"> 71 <p>Some item: <input name="value" value="some value" /><input 72 name="remove" value="Remove" type="submit" /></p> 73 <p>Itself containing more items:</p> 74 <p>Sub-item: <input name="subvalue" value="some other value" /><input 75 name="remove2" value="Remove" type="submit" /></p> 76 </form> 77 <p>This representation might be expressed in HTML as follows:</p> 78 <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><br /></pre> 79 <p>In the above example, the <code>div</code> element encloses the 80 outer list item. Meanwhile, the inner list item is itself enclosed 81 within a <code>p</code> element in the same way as the original 82 example enclosed its simple list item.</p> 83 <p><span style="font-weight: bold;">It should be noted</span> that 84 the item and subitem are each defined within single enclosing 85 HTML elements - as noted above, the motivation for this will become 86 clear later on.</p> 87 <h2>Adding Items and Subitems</h2> 88 <p>Our chosen user interface for adding items and subitems is through 89 the use of buttons under each list. 90 We can thus extend our visual representation to incorporate such 91 details. For example: 92 </p> 93 <form method="post" action="" name="hierarchical"> 94 <p>Some item: <input name="value" value="some value" /><input 95 name="remove" value="Remove" type="submit" /></p> 96 <p>Itself containing more items:</p> 97 <p>Sub-item: <input name="subvalue" value="some other value" /><input 98 name="remove2" value="Remove" type="submit" /></p> 99 <p><input name="add2" value="Add subitem" type="submit" /></p> 100 <p><input name="add" value="Add item" type="submit" /></p> 101 </form> 102 <p>This representation might be expressed in HTML as follows:</p> 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 /> <input name="add2" type="submit" value="Add subitem" /><br /> </p><br /></div><br /><p><br /> <input name="add" type="submit" value="Add item" /><br /></p><br /></pre> 104 <p>In the above example, the new buttons have been added alongside the 105 elements which define the subitem and item regions of the template. 106 Thus, the <code>input</code> field called <code>add2</code> 107 which adds subitems is alongside, not inside, the <code>p</code> 108 element which defines the subitem region of the template. Likewise, 109 the <code>input</code> field called <code>add</code> which 110 adds items is alongside, not inside, the <code>div</code> element 111 which defines the item region of the template.</p> 112 <h2>Saving the Template</h2> 113 <p>Adding the above modifications to the outline, we end up with the 114 following HTML code:</p> 115 <pre><?xml version="1.0"?><br /><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 /> <p><br /> <input name="add2" type="submit" value="Add subitem" /><br /> </p><br /></div><br /><p><br /> <input name="add" type="submit" value="Add item" /><br /></p><br /><br /><!-- Template text between the interesting part and the end. --><br /><br /></form><br /></body><br /></html></pre> 116 <p>Once you are happy with the 117 design of the page, save it to the <a href="directory.html">directory</a> 118 created earlier (perhaps choosing the name <code>structure_template.xhtml</code>), 119 then proceed to <a href="structure.html">adding 120 structure information</a> in the next stage of the <a 121 href="overview.html">process</a>.</p> 122 </body> 123 </html>
