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 5 6 7 8 9 10 11 12 <meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type" /> 13 14 15 16 17 18 19 20 21 22 23 24 25 <title>Creating Applications: Add Selectors</title> 26 <meta name="generator" content="amaya 8.1a, see http://www.w3.org/Amaya/" /> 27 28 29 30 31 32 33 34 35 <link href="styles.css" rel="stylesheet" type="text/css" /> 36 </head> 37 38 39 <body> 40 41 42 43 44 <h1>Creating Applications: Add Selectors</h1> 45 46 47 48 49 <p>In the previous activity we annotated the template with 50 structural information, and these annotations should be sufficient in 51 presenting XML documents as Web pages for users to interact with. 52 However, in our design, we also wanted to be able to add and remove 53 list items from the example hierarchy:</p> 54 55 <ul> 56 57 <li>A list of editable items, each containing...<br /> 58 59 60 61 62 63 64 <ul> 65 66 67 68 <li>A list of editable items.</li> 69 70 71 72 73 74 75 </ul> 76 77 78 79 </li> 80 81 82 83 </ul> 84 85 <p>What we want to do is to have buttons beside each list item 86 (and subitem) which remove only that particular item. In addition, we 87 also want buttons which add items only to the particular list each 88 button appears beneath.<br /> 89 90 91 92 </p> 93 94 95 96 <h2>Introducing Selectors</h2> 97 98 99 100 <p>Taking the HTML example from before, we add some additional annotations to the template to produce something like this:</p> 101 102 103 104 <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 /><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="remove={template:this-position()}" 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="remove2={template:this-position()}" type="submit" value="Remove" /><br /> </p><br /> <p><br /> <input name="add2={template:this-position()} type="submit" value="Add subitem" /><br /> </p><br /></div><br /><p><br /> <input name="add={template:this-position()} type="submit" value="Add item" /><br /></p><br /><br /><!-- Template text between the interesting part and the end. --><br /><br /></body><br /></html></pre> 105 106 <h3>The Remove Buttons</h3> 107 <p>Some of the attributes in the original HTML code have been changed:</p> 108 109 110 111 <ul> 112 113 114 115 <li>The <code>input</code> element for the first <code>Remove</code> button (mapping to <code>item</code> elements in the XML document) has a modified <code>name</code> attribute, containing the special <code>remove={template:this-position()}</code> value.</li> 116 117 <li>The <code>input</code> element for the second <code>Remove</code> button (mapping to <code>subitem</code> elements in the XML document) has a modified <code>name</code> attribute, containing the special <code>remove2={template:this-position()}</code> value.</li> 118 119 120 121 122 123 </ul> 124 125 126 127 <p>What these amendments provide is a means for the XSLForms framework 128 to connect together the usage of a button in the Web form with an XML 129 document element.</p> 130 131 <ul> 132 133 <li>The first <code>Remove</code> button appears within the <code>p</code> element which is annotated as mapping onto the <code>item</code> 134 element in the XML document. This means that the special value added 135 above will, in the final output, refer to that specific list item from 136 the XML document.</li> 137 138 <li>The second <code>Remove</code> button appears within the <code>p</code> element which is annotated as mapping onto the <code>subitem</code> 139 element in the XML document. This means that the special value added 140 above will, in the final output, refer to that specific list (sub)item from 141 the XML document.</li> 142 143 </ul> 144 145 <h3>The Add Buttons</h3> 146 <p>Some additional sections have been added to the original HTML code:</p> 147 148 <ul> 149 150 <li>An extra paragraph appears below the <code>subitem</code> paragraph, containing an <code>input</code> element which employs the special <code>add2={template:this-position()}</code> value in the <code>name</code> attribute to represent an <code>Add subitem</code> button.</li> 151 152 <li>An extra paragraph appears below the <code>item</code> section, containing an <code>input</code> element which employs the special <code>add={template:this-position()}</code> value in the <code>name</code> attribute to represent an <code>Add item</code> button.</li> 153 154 </ul> 155 156 <p>What these amendments provide is also a means for the XSLForms framework to connect these buttons to parts of the XML document.</p> 157 158 <ul> 159 160 <li>The <code>Add subitem</code> button appears outside the <code>p</code> element mapping onto the <code>subitem</code> element in the XML document. Instead, it appears within the <code>p</code> element mapping onto the <code>item</code> 161 element in the XML document. This means that the special value added 162 above will, in the final output, refer to a specific <code>item</code> from 163 the XML document, and the consequence of adding a <code>subitem</code> will be the extension of that list of <code>subitem</code> elements within that <code>item</code> element.</li> 164 165 <li>The <code>Add item</code> button appears outside the <code>p</code> element mapping onto the <code>item</code> 166 element in the XML document. Instead, it appears within the <code>body</code> element mapping onto the top-level <code>structure</code> 167 element in the XML document. This means that the special value added 168 above will, in the final output, refer to the top-level <code>structure</code> 169 element in 170 the XML document, and the consequence of adding an <code>item</code> will be the extension of the main list of <code>item</code> elements.</li> 171 172 </ul> 173 <div class="WebStack"> 174 <h3>Selector Annotation</h3> 175 176 177 178 <p>Special values of the following form can be used to connect parts of 179 the template with elements in the XML document representation of a form:</p> 180 181 182 183 <dl> 184 <dt><code>selector={template:this-position()}</code></dt> 185 186 187 188 <dd>Given a selector name (<code>selector</code> in this example), 189 this special value produces a reference to an XML document element (or 190 attribute) in the final output. The referenced element or attribute is 191 defined by those <code>template:element</code> and <code>template:attribute</code> annotations on template elements which surround the template element within which this special value is used.</dd> 192 193 194 195 </dl> 196 197 198 199 <p>The <a href="reference.html">reference guide</a> provides a complete list of special values for use in template annotations.</p> 200 201 202 203 </div> 204 </body> 205 </html>