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