| paulb@119 | 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| paulb@119 | 2 | <html xmlns="http://www.w3.org/1999/xhtml"> |
| paulb@119 | 3 | <head> |
| paulb@119 | 4 | <meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type" /> |
| paulb@121 | 5 | <title>Creating Applications: Add Selectors</title> |
| paulb@132 | 6 | <meta name="generator" |
| paulb@132 | 7 | content="amaya 8.1a, see http://www.w3.org/Amaya/" /> |
| paulb@121 | 8 | <link href="styles.css" rel="stylesheet" type="text/css" /> |
| paulb@119 | 9 | </head> |
| paulb@119 | 10 | <body> |
| paulb@119 | 11 | <h1>Creating Applications: Add Selectors</h1> |
| paulb@121 | 12 | <p>In the previous activity we annotated the template |
| paulb@121 | 13 | with |
| paulb@121 | 14 | <a href="structure.html">structural information</a>, |
| paulb@121 | 15 | and these annotations should be sufficient in |
| paulb@119 | 16 | presenting XML documents as Web pages for users to interact with. |
| paulb@119 | 17 | However, in our design, we also wanted to be able to add and remove |
| paulb@132 | 18 | list items from the form data structure, and we added some buttons in |
| paulb@132 | 19 | the template to be used for this purpose.</p> |
| paulb@119 | 20 | <h2>Introducing Selectors</h2> |
| paulb@132 | 21 | <p>The buttons in the template are implicitly associated with |
| paulb@132 | 22 | specific items and subitems, and when such buttons are pressed - for |
| paulb@132 | 23 | example, to remove an item from the list - our application will want to |
| paulb@132 | 24 | know on which item the removal action is to take place. In order to |
| paulb@132 | 25 | connect the buttons with specific parts of the form data structure, a |
| paulb@132 | 26 | special notation is used, and such notation turns elements such as |
| paulb@132 | 27 | buttons into "selectors" - things which select parts of the structure |
| paulb@132 | 28 | so that an operation can be carried out on those parts.</p> |
| paulb@132 | 29 | <p>Taking the example HTML code from before, we add some of these |
| paulb@132 | 30 | selector annotations to the template to produce something |
| paulb@121 | 31 | like this:</p> |
| paulb@144 | 32 | <pre><html xmlns="http://www.w3.org/1999/xhtml"<br /> xmlns:template="http://www.boddie.org.uk/ns/xmltools/template"><br /><head><br /> <title>Example</title><br /></head><br /><body template:element="structure"><br /><form action="" method="POST"><br /><br /><!-- Template text between the start and the interesting part. --><br /><br /><div template:element="item"><br /> <p><br /> Some item: <input template:attribute="value" name="{template:this-attribute()}" type="text" value="{$this-value}" /><br /> <input name="<span |
| paulb@144 | 33 | style="font-weight: bold;">remove={template:this-element()}</span>" type="submit" value="Remove" /><br /> </p><br /> <p><br /> Itself containing more items:<br /> </p><br /> <p template:element="subitem"><br /> Sub-item: <input template:attribute="subvalue" name="{template:this-attribute()}" type="text" value="{$this-value}" /><br /> <input name="<span |
| paulb@144 | 34 | style="font-weight: bold;">remove2={template:this-element()}</span>" type="submit" value="Remove" /><br /> </p><br /> <p><br /> <input name="<span |
| paulb@144 | 35 | style="font-weight: bold;">add2={template:this-element()}</span>" type="submit" value="Add subitem" /><br /> </p><br /></div><br /><p><br /> <input name="<span |
| paulb@144 | 36 | style="font-weight: bold;">add={template:this-element()}</span>" type="submit" value="Add item" /><br /></p><span |
| paulb@134 | 37 | style="font-weight: bold;" /><br /><br /><!-- Template text between the interesting part and the end. --><br /><br /></form><br /></body><br /></html></pre> |
| paulb@119 | 38 | <h3>The Remove Buttons</h3> |
| paulb@132 | 39 | <p>Some of the attributes in the previous HTML code have been |
| paulb@121 | 40 | changed:</p> |
| paulb@119 | 41 | <ul> |
| paulb@121 | 42 | <li>The <code>input</code> element for the |
| paulb@132 | 43 | first <code>Remove</code> button has a modified <code>name</code> |
| paulb@132 | 44 | attribute, |
| paulb@132 | 45 | containing a special value.</li> |
| paulb@121 | 46 | <li>The <code>input</code> element for the second <code>Remove</code> |
| paulb@132 | 47 | button has a modified <code>name</code> |
| paulb@132 | 48 | attribute, containing a special value.</li> |
| paulb@119 | 49 | </ul> |
| paulb@121 | 50 | <p>What these amendments provide is a means for the XSLForms |
| paulb@121 | 51 | framework |
| paulb@132 | 52 | to connect together these buttons with a specific element in the |
| paulb@132 | 53 | form data.</p> |
| paulb@119 | 54 | <ul> |
| paulb@121 | 55 | <li>The first <code>Remove</code> button |
| paulb@132 | 56 | appears within the <code>div</code> element which maps onto items |
| paulb@132 | 57 | in the form data. This means that each button will refer to a |
| paulb@132 | 58 | specific item in the form being edited.</li> |
| paulb@121 | 59 | <li>The second <code>Remove</code> button appears |
| paulb@132 | 60 | within the <code>p</code> element which maps onto subitems in the |
| paulb@132 | 61 | form data. This means that each button will refer to a |
| paulb@132 | 62 | specific subitem in the form being edited.</li> |
| paulb@119 | 63 | </ul> |
| paulb@134 | 64 | <p>We define the names of the selectors in the above cases to be <code>remove</code> |
| paulb@134 | 65 | and <code>remove2</code> respectively, since the special values |
| paulb@134 | 66 | begin with these identifiers.</p> |
| paulb@119 | 67 | <h3>The Add Buttons</h3> |
| paulb@132 | 68 | <p>Some other attributes have been changed in the previous HTML |
| paulb@121 | 69 | code:</p> |
| paulb@119 | 70 | <ul> |
| paulb@132 | 71 | <li>The <code>input</code> element for the |
| paulb@132 | 72 | first <code>Add</code> button has a modified <code>name</code> |
| paulb@132 | 73 | attribute, |
| paulb@132 | 74 | containing a special value.</li> |
| paulb@132 | 75 | <li>The <code>input</code> element for the second <code>Add</code> |
| paulb@132 | 76 | button has a modified <code>name</code> |
| paulb@132 | 77 | attribute, containing a special value.</li> |
| paulb@119 | 78 | </ul> |
| paulb@132 | 79 | <ul> |
| paulb@132 | 80 | </ul> |
| paulb@121 | 81 | <p>What these amendments provide is also a means for the XSLForms |
| paulb@132 | 82 | framework to connect these buttons to specific parts of the form data.</p> |
| paulb@119 | 83 | <ul> |
| paulb@121 | 84 | <li>The <code>Add subitem</code> button appears |
| paulb@132 | 85 | outside the <code>p</code> element which maps onto subitems in the |
| paulb@132 | 86 | form data. Instead, it appears within the <code>p</code> |
| paulb@132 | 87 | element which maps onto items. This means that each button will refer |
| paulb@132 | 88 | to a specific item in the form being edited, and the consequence of |
| paulb@132 | 89 | adding a subitem will be the extension of that item's list of subitems.</li> |
| paulb@121 | 90 | <li>The <code>Add item</code> button |
| paulb@121 | 91 | appears outside the <code>p</code> |
| paulb@132 | 92 | element which maps onto items in the form data. Instead, it appears |
| paulb@132 | 93 | within the <code>body</code> |
| paulb@132 | 94 | element which maps onto the top-level <code>structure</code> |
| paulb@132 | 95 | element in the form data. This means that each button will refer to the |
| paulb@132 | 96 | top-level <code>structure</code> |
| paulb@119 | 97 | element in |
| paulb@132 | 98 | the form being edited, and the consequence of adding an item will |
| paulb@132 | 99 | be the extension of the main list of items in the form.</li> |
| paulb@119 | 100 | </ul> |
| paulb@134 | 101 | <p>We define the names of the selectors in the above cases to be <code>add2</code> |
| paulb@134 | 102 | and <code>add</code> respectively, since the special values begin with |
| paulb@134 | 103 | these identifiers.</p> |
| paulb@134 | 104 | <p>We should now have a template that is sufficiently complete to be |
| paulb@134 | 105 | used in a real application, and the writing of the <a |
| paulb@134 | 106 | href="Web-resource.html">application code</a> itself will be |
| paulb@134 | 107 | investigated in the next activity in the development <a |
| paulb@132 | 108 | href="overview.html">process</a>.</p> |
| paulb@119 | 109 | </body> |
| paulb@119 | 110 | </html> |
