Before designing a template, we must first consider how the form data to be modelled in our application will be structured. Let us consider the following hierarchical structure:
Since XSLForms is an XML-based framework, let us define this structure using an informal example XML document:
@@ -94,8 +35,5 @@ documents that will be used to represent the form data.With this basic information defined, we can now proceed to designing a template in the next stage of the process.
- - - diff -r 4939c704482b -r bca5ee80a9fe docs/multiple.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/docs/multiple.html Tue Jul 19 22:40:50 2005 +0000 @@ -0,0 +1,86 @@ + + + + +Up to this point, we have only considered two kinds of Web form +fields: text entry fields and action buttons. Since most Web forms +offer more convenient ways of entering certain kinds of data, we shall +now investigate multiple-choice fields as an example of how XSLForms +handles more complicated types of fields.
+We shall revise our form data structure to +be the following:
+<?xml version="1.0"?>+
<structure>
<item value="some value">
<type value="some type"/>
<subitem subvalue="some other value"/>
</item>
</structure>
Whilst HTML offers types of form fields where users can select one +or many values presented in a list or menu, we shall first consider the +case where only a single value can be chosen from such a selection.
+ +From the item type list only one value may be selected. +Taking the example HTML code from before, we can add a +definition of this new list to the template to produce something +like this:
+<html xmlns="http://www.w3.org/1999/xhtml"+
xmlns:template="http://www.boddie.org.uk/ns/xmltools/template">
<head>
<title>Example</title>
</head>
<body template:element="structure">
<form action="" method="POST">
<!-- Template text between the start and the interesting part. -->
<div template:element="item">
<p>
Some item: <input template:attribute="value" name="{template:field-name()}" type="text" value="{$this-value}" />
<input name="remove={template:this-position()}" type="submit" value="Remove" />
</p>
<p>
Item type:
<select template:element="type" name="{template:new-field('value')}">
<option template:element="type-enum" template:expr="@value-is-set" template:expr-attr="selected"
template:value="@value" value="{@value}"></option>
</select>
</p>
<p>
Itself containing more items:
</p>
<p template:element="subitem">
Sub-item: <input template:attribute="subvalue" name="{template:field-name()}" type="text" value="{$this-value}" />
<input name="remove2={template:this-position()}" type="submit" value="Remove" />
</p>
<p>
<input name="add2={template:this-position()}" type="submit" value="Add subitem" />
</p>
</div>
<p>
<input name="add={template:this-position()}" type="submit" value="Add item" />
</p>
<!-- Template text between the interesting part and the end. -->
</form>
</body>
</html>
There are a lot of details here that need to be explained. Here is +what was done:
+select
+element was added.select element is mapped onto the type
+element in the form data structure. However, HTML fields must produce
+values and it makes no sense to interpret a textual value as an
+element. Therefore, we indicate in the name of the select
+element that the value submitted maps onto the value
+attribute of the type element in the form data
+structure.select element, we include an option
+element which defines the values which will be presented to users
+of the form. Note that the option element maps onto
+a type-enum element which is not mentioned in our
+revised form data structure above; this will be discussed below.Although we revised the form data structure above, and whilst the +revised structure can describe form data submitted by users of our +application, it is unfortunately not sufficient to define the form data +that is to be presented. Consider the multiple-choice values that shall +be presented to users: such values are not defined in our revised +structure. Therefore, we shall define an output form data structure as +follows:
+<?xml version="1.0"?>+
<structure>
<item value="some value">
<type value="some type">
<type-enum value="choice #n"/>
</type>
<subitem subvalue="some other value"/>
</item>
</structure>
But since we will receive a structure resembling that defined +earlier, yet need to present a structure like the one above, we will +need to find a way of merging the range of allowed values into the +user-edited form data before presenting that data using our template.
+ +