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