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:field-name()}" type="text" value="{$this-value}" /><br /> <input name="<span 33 style="font-weight: bold;">remove={template:this-position()}</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:field-name()}" type="text" value="{$this-value}" /><br /> <input name="<span 34 style="font-weight: bold;">remove2={template:this-position()}</span>" type="submit" value="Remove" /><br /> </p><br /> <p><br /> <input name="<span 35 style="font-weight: bold;">add2={template:this-position()}</span>" type="submit" value="Add subitem" /><br /> </p><br /></div><br /><p><br /> <input name="<span 36 style="font-weight: bold;">add={template:this-position()}</span>" type="submit" value="Add item" /><br /></p><span 37 style="font-weight: bold;"></span><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 <h3>The Add Buttons</h3> 65 <p>Some other attributes have been changed in the previous HTML 66 code:</p> 67 <ul> 68 <li>The <code>input</code> element for the 69 first <code>Add</code> button has a modified <code>name</code> 70 attribute, 71 containing a special value.</li> 72 <li>The <code>input</code> element for the second <code>Add</code> 73 button has a modified <code>name</code> 74 attribute, containing a special value.</li> 75 </ul> 76 <ul> 77 </ul> 78 <p>What these amendments provide is also a means for the XSLForms 79 framework to connect these buttons to specific parts of the form data.</p> 80 <ul> 81 <li>The <code>Add subitem</code> button appears 82 outside the <code>p</code> element which maps onto subitems in the 83 form data. Instead, it appears within the <code>p</code> 84 element which maps onto items. This means that each button will refer 85 to a specific item in the form being edited, and the consequence of 86 adding a subitem will be the extension of that item's list of subitems.</li> 87 <li>The <code>Add item</code> button 88 appears outside the <code>p</code> 89 element which maps onto items in the form data. Instead, it appears 90 within the <code>body</code> 91 element which maps onto the top-level <code>structure</code> 92 element in the form data. This means that each button will refer to the 93 top-level <code>structure</code> 94 element in 95 the form being edited, and the consequence of adding an item will 96 be the extension of the main list of items in the form.</li> 97 </ul> 98 <p>Whilst many forms consist only of text fields and action buttons, 99 other types of data are very likely to also be used. <a 100 href="multiple.html">Multiple-choice or enumerated value fields</a> in 101 forms are covered in the next activity in the development <a 102 href="overview.html">process</a>.</p> 103 </body> 104 </html>