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