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