XSLTools

docs/selectors.html

391:f1145b6cae5d
2005-11-08 paulb [project @ 2005-11-08 19:04:00 by paulb] Made minor fixes (POST -> post in request methods, removed form elements around example form controls). Added an elementary JavaScript function reference. Updated the overview, adding links to future documentation. Tidied the template design documentation. Added a style for definition list titles.
     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&nbsp;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&nbsp;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&nbsp;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>&lt;html xmlns="http://www.w3.org/1999/xhtml"<br />      xmlns:template="http://www.boddie.org.uk/ns/xmltools/template"&gt;<br />&lt;head&gt;<br />  &lt;title&gt;Example&lt;/title&gt;<br />&lt;/head&gt;<br />&lt;body template:element="structure"&gt;<br />&lt;form action="" method="post"&gt;<br /><br />&lt;!-- Template text between the start and the interesting part. --&gt;<br /><br />&lt;div template:element="item"&gt;<br />  &lt;p&gt;<br />    Some item: &lt;input template:attribute-field="value" name="..." type="text" value="..." /&gt;<br />    &lt;input name="..." <span style="font-weight: bold;">template:selector-field="remove"</span> type="submit" value="Remove" /&gt;<br />  &lt;/p&gt;<br />  &lt;p&gt;<br />    Itself containing more items:<br />  &lt;/p&gt;<br />  &lt;p template:element="subitem"&gt;<br />    Sub-item: &lt;input template:attribute="subvalue" name="{template:this-attribute()}" type="text" value="{$this-value}" /&gt;<br />    &lt;input name="..." <span style="font-weight: bold;">template:selector-field="remove2"</span> type="submit" value="Remove" /&gt;<br />  &lt;/p&gt;<br />  &lt;p&gt;<br />    &lt;input name="..." <span style="font-weight: bold;">template:selector-field="add2,subitem"</span> type="submit" value="Add subitem" /&gt;<br />  &lt;/p&gt;<br />&lt;/div&gt;<br />&lt;p&gt;<br />  &lt;input name="..." <span style="font-weight: bold;">template:selector-field="add,item"</span> type="submit" value="Add item" /&gt;<br />&lt;/p&gt;<br /><br />&lt;!-- Template text between the interesting part and the end. --&gt;<br /><br />&lt;/form&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</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&nbsp;<code>Remove</code> button has a new&nbsp;<code>template:selector-field</code> attribute (and a modified&nbsp;<code>name</code>    36 attribute    37 containing a&nbsp;value that will be replaced).</li>    38   <li>The <code>input</code> element for the second <code>Remove</code>    39 button has a new&nbsp;<code>template:selector-field</code> attribute (and a modified&nbsp;<code>name</code>    40 attribute    41 containing a&nbsp;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&nbsp;with a specific element in the    46 form data.</p>    47 <ul>    48   <li>The first&nbsp;<code>Remove</code> button    49 appears within the <code>div</code> element which maps onto&nbsp;items    50 in the form data. This means that each button will refer to a    51 specific&nbsp;item in the form being edited.</li>    52   <li>The second <code>Remove</code> button appears    53 within the&nbsp;<code>p</code> element which maps onto subitems in the    54 form data. This means that each button will refer to a    55 specific&nbsp;subitem in the form being edited.</li>    56 </ul>    57 <p>We define the names of the selectors in the above cases to be&nbsp;<code>remove</code>    58 and&nbsp;<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&nbsp;new&nbsp;<code>template:selector-field</code> attribute (and a modified&nbsp;<code>name</code>    66 attribute    67 containing a&nbsp;value that will be replaced).</li>    68   <li>The <code>input</code> element for the second <code>Add</code>    69 button has a&nbsp;new&nbsp;<code>template:selector-field</code> attribute (and a modified&nbsp;<code>name</code>    70 attribute    71 containing a&nbsp;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&nbsp;<code>p</code> element which maps onto subitems in the    80 form data. Instead, it appears within the&nbsp;<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&nbsp;item</code> button    85 appears outside the&nbsp;<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&nbsp;<code>subitem</code> and&nbsp;<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>