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