1.1 --- a/docs/data.html Tue Jul 19 21:55:02 2005 +0000
1.2 +++ b/docs/data.html Tue Jul 19 22:40:50 2005 +0000
1.3 @@ -1,89 +1,30 @@
1.4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1.5 <html xmlns="http://www.w3.org/1999/xhtml">
1.6 <head>
1.7 -
1.8 -
1.9 -
1.10 -
1.11 -
1.12 -
1.13 -
1.14 -
1.15 <meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type" />
1.16 -
1.17 -
1.18 -
1.19 -
1.20 -
1.21 -
1.22 -
1.23 -
1.24 -
1.25 -
1.26 -
1.27 -
1.28 <title>Creating Applications: Design the Structure of the Form Data</title>
1.29 <meta name="generator" content="amaya 8.1a, see http://www.w3.org/Amaya/" />
1.30 -
1.31 -
1.32 -
1.33 -
1.34 -
1.35 -
1.36 -
1.37 -
1.38 <link href="styles.css" rel="stylesheet" type="text/css" />
1.39 </head>
1.40 -
1.41 -
1.42 <body>
1.43
1.44 -
1.45 -
1.46 -
1.47 <h1>Creating Applications: Design the Structure of the Form Data</h1>
1.48
1.49 -
1.50 -
1.51 -
1.52 <p>Before designing a template, we must first consider how the form
1.53 data to be modelled in our application will be structured. Let us
1.54 consider the following hierarchical structure:</p>
1.55
1.56 <ul>
1.57 -
1.58 <li>A list of items, each containing...<br />
1.59 -
1.60 -
1.61 -
1.62 -
1.63 -
1.64 -
1.65 -
1.66 -
1.67 -
1.68 -
1.69 -
1.70 -
1.71 <ul>
1.72 -
1.73 <li>An editable value.</li>
1.74 <li>A list of subitems, each containing...<br />
1.75 <ul>
1.76 <li>An editable value.</li>
1.77 </ul>
1.78 </li>
1.79 -
1.80 -
1.81 </ul>
1.82 -
1.83 -
1.84 -
1.85 -
1.86 -
1.87 -
1.88 </li>
1.89 -
1.90 </ul>
1.91
1.92 <p>Since XSLForms is an XML-based framework, let us define this structure using an informal example XML document:</p>
1.93 @@ -94,8 +35,5 @@
1.94 documents that will be used to represent the form data.</p>
1.95 <p>With this basic information defined, we can now proceed to <a href="design.html">designing a template</a> in the next stage of the <a href="overview.html">process</a>.</p>
1.96
1.97 -
1.98 -
1.99 -
1.100 </body>
1.101 </html>
2.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
2.2 +++ b/docs/multiple.html Tue Jul 19 22:40:50 2005 +0000
2.3 @@ -0,0 +1,86 @@
2.4 +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2.5 +<html xmlns="http://www.w3.org/1999/xhtml">
2.6 +<head>
2.7 + <meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type" />
2.8 + <title>Creating Applications: Adding Multiple-Choice Fields and Values</title>
2.9 + <meta name="generator"
2.10 + content="amaya 8.1a, see http://www.w3.org/Amaya/" />
2.11 + <link href="styles.css" rel="stylesheet" type="text/css" />
2.12 +</head>
2.13 +<body>
2.14 +<h1>Creating Applications: Adding Multiple-Choice Fields and Values</h1>
2.15 +<p>Up to this point, we have only considered two kinds of Web form
2.16 +fields: text entry fields and action buttons. Since most Web forms
2.17 +offer more convenient ways of entering certain kinds of data, we shall
2.18 +now investigate multiple-choice fields as an example of how XSLForms
2.19 +handles more complicated types of fields.</p>
2.20 +<p>We shall revise our <a href="data.html">form data structure</a> to
2.21 +be the following:</p>
2.22 +<pre><?xml version="1.0"?><br /><structure><br /> <item value="some value"><br /> <type value="some type"/><br /> <subitem subvalue="some other value"/><br /> </item><br /></structure></pre>
2.23 +<h2>Single-Valued Fields</h2>
2.24 +<p>Whilst HTML offers types of form fields where users can select one
2.25 +or many values presented in a list or menu, we shall first consider the
2.26 +case where only a single value can be chosen from such a selection.</p>
2.27 +<form Method="POST" Action="none" Name="single">
2.28 + <p>Some item: <input name="value" value="some value" /><input
2.29 + name="remove" value="Remove" type="submit" /></p>
2.30 + <p>Item type:
2.31 + <select name="type">
2.32 + <option>(Not selected)</option>
2.33 + <option>Important</option>
2.34 + <option>Not important</option>
2.35 + <option>Personal</option>
2.36 + </select>
2.37 + </p>
2.38 + <p>Itself containing more items:</p>
2.39 + <p>Sub-item: <input name="subvalue" value="some other value" /><input
2.40 + name="remove2" value="Remove" type="submit" /></p>
2.41 +</form>
2.42 +From the item type list only one value may be selected.
2.43 +<p>Taking the example HTML code from before, we can add a
2.44 +definition of this new list to the template to produce something
2.45 +like this:</p>
2.46 +<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="remove={template:this-position()}" type="submit" value="Remove" /><br /> </p><br /> <span
2.47 + style="font-weight: bold;"><p></span><br
2.48 + style="font-weight: bold;" /><span style="font-weight: bold;"> Item type:</span><br
2.49 + style="font-weight: bold;" /><span style="font-weight: bold;"> <select template:element="type" name="{template:new-field('value')}"></span><br
2.50 + style="font-weight: bold;" /><span style="font-weight: bold;"> <option template:element="type-enum" template:expr="@value-is-set" template:expr-attr="selected"</span><br
2.51 + style="font-weight: bold;" /><span style="font-weight: bold;"> template:value="@value" value="{@value}"></option></span><br
2.52 + style="font-weight: bold;" /><span style="font-weight: bold;"> </select></span><br
2.53 + style="font-weight: bold;" /><span style="font-weight: bold;"> </p></span><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><span
2.54 + style="font-weight: bold;"><br /><br /></span><!-- Template text between the interesting part and the end. --><br /><br /></form><br /></body><br /></html></pre>
2.55 +<p>There are a lot of details here that need to be explained. Here is
2.56 +what was done:</p>
2.57 +<ol>
2.58 + <li>A paragraph was added to provide some space on the page for the
2.59 +field.</li>
2.60 + <li>Inside the paragraph, next to the label text, an HTML <code>select</code>
2.61 +element was added.</li>
2.62 + <li>The <code>select</code> element is mapped onto the <code>type</code>
2.63 +element in the form data structure. However, HTML fields must produce
2.64 +values and it makes no sense to interpret a textual value as an
2.65 +element. Therefore, we indicate in the name of the <code>select</code>
2.66 +element that the value submitted maps onto the <code>value</code>
2.67 +attribute of the <code>type</code> element in the form data
2.68 +structure.</li>
2.69 + <li>Inside the <code>select</code> element, we include an <code>option</code>
2.70 +element which defines the values which will be presented to users
2.71 +of the form. Note that the <code>option</code> element maps onto
2.72 +a <code>type-enum</code> element which is not mentioned in our
2.73 +revised form data structure above; this will be discussed below.</li>
2.74 +</ol>
2.75 +<h2>Output Structures</h2>
2.76 +<p>Although we revised the form data structure above, and whilst the
2.77 +revised structure can describe form data submitted by users of our
2.78 +application, it is unfortunately not sufficient to define the form data
2.79 +that is to be presented. Consider the multiple-choice values that shall
2.80 +be presented to users: such values are not defined in our revised
2.81 +structure. Therefore, we shall define an output form data structure as
2.82 +follows:</p>
2.83 +<pre><?xml version="1.0"?><br /><structure><br /> <item value="some value"><br /> <type value="some type"><br /> <type-enum value="choice #n"/><br /> </type><br /> <subitem subvalue="some other value"/><br /> </item><br /></structure></pre>
2.84 +<p>But since we will receive a structure resembling that defined
2.85 +earlier, yet need to present a structure like the one above, we will
2.86 +need to find a way of merging the range of allowed values into the
2.87 +user-edited form data before presenting that data using our template.</p>
2.88 +</body>
2.89 +</html>