The XForms User Interface

XForms can be used on a variety of platforms. Whatever the interface used, the data model that underlies it remains the same for any XForms form.

Because XForms forms can be displayed on graphical user devices from a desktop PC to a palmtop and possibly a mobile phone, the way in which the user interface is constructed can be particularly relevant on some platforms.

Grouping Form Controls

The XForms form controls that were described earlier in the chapter can be treated as separate units. However, often there will be a logical relationship among a number of form controls within an XForms form. For example, if we are collecting address information, we are likely to want to treat instance data nodes that might be named Street1, Street2, City, and PostalCode as inherently related. Consequently, we will also likely want to keep the corresponding form controls in some relationship with each other. We can group related form controls using the xforms:group element.

If the address information just mentioned were part of a shipping address, we could nest the relevant form controls within an xforms:group element as in the following code:

<xforms:group> 
<xforms:input ref="ShippingAddress/Street1">
<xforms:caption>First line of street address.</xforms:caption>
</xforms:input>
<xforms:input ref="ShippingAddress/Street2">
<xforms:caption>Second line of street address.</xforms:caption>
<xforms:hint>Include the name of a village or small town here.</xforms:hint>
</xforms:input>
<xforms:input ref="ShippingAddress/City">
<xforms:caption>Enter the city name here.</xforms:caption>
<xforms:hint>If the address is not in a city enter the
name of the nearest city which the postal authorities
use to reference the address.</xforms:hint>
</xforms:input>
<xforms:input ref="ShippingAddress/PostalCode">
<xforms:caption>Postal Code</xforms:caption>
<xforms:hint>For United States addressses use the
extended form of the Zip Code, if known.</xforms:hint>
</xforms:input>
</xforms:group>

By grouping XForms elements in this way, we signal to the XForms processor that there is a semantic relationship among this group of form controls. If focus is set on the group, it will, by default, set focus on the first form control in tabbing order. Tabbing order will correspond to the document order of the XForms form control elements within the group.

Conditional Construction of User Interfaces

XForms is flexible when creating a user interface. The precise format of a user interface can be related to some value within the instance data.

For example, if we expected a user to enter his name into a form, we could adjust the display according to whether the user had entered his name. After a name had been entered, we could change the appearance of the form to greet the user by name. The following code illustrates how this could be done using the xforms:switch element, assuming that the document used XForms in conjunction with Scalable Vector Graphics elements, which are represented in the code by the namespace prefix svg.

<xforms:switch id="NameDisplay"> 
<xforms:case id="default">
<xforms:input ref="Name/FirstName">
<xforms:caption>Please enter your name</xforms:caption>
</xforms:input>
</xforms:case>
<xforms:case id="nameKnown">
<svg:text x="20" y="40" class="NormalText">Hello
<xforms:output ref="Name/FirstName"/>.
</svg:text>
</xforms:case>
</xforms:switch>

The xforms:toggle action could be used to affect the xforms:switch construct. The xforms:toggle action might be activated when the user shifts focus away from the xforms:input form control where the first name would be entered.

Repeating Structures in XForms Forms

Forms commonly use repeating structures. For example, in a purchase order, there are places to enter many items. The need for repeating structure is obvious. Equally, we would not typically want to restrict a user as to how many items he can enter. So, we need a way to express a repeating structure that can grow as needed in response to user actions.

We can use the xforms:repeat element to create the basic structure of a repeating structure. Assuming that an XForms form was contained in an XHTML document and we wanted each of a set of repeating xforms:input form controls to be separated by a new line, we could use code such as the following:

<xforms:repeat nodeset="/order/items/item"> 
<input ref=."" .../><html:br/>
</xforms:repeat>

However, if we want the number of available xforms:input elements to grow, we need to provide a mechanism to create new xforms:input form controls when they are needed.

We could have an XForms model defined as follows:

<xforms:model> 
<xforms:instance>
<my:lines>
<my:line name="Widget">
<my:price>3.00</my:price>
</my:line>
<my:line name="Hoodja">
<my:price>32.25</my:price>
</my:line>
<my:line name="SomethingElse">
<my:price>132.99</my:price>
</my:line>
</my:lines>
</xforms:instance>
</xforms:model>

Elsewhere in the form, we would create a construct that would create a new xforms:input form control in response to the user clicking on a button.

<xforms:repeat id="lineset" nodeset="my:lines/my:line"> 
<xforms:input ref="my:price">
<xforms:caption>Line Item Price</xforms:caption>
</xforms:input>
<xforms:input ref="@name">
<xforms:caption>Name of line item</xforms:caption>
</xforms:input>
</xforms:repeat>
<xforms:button>
<xforms:caption>
 Insert a new item after the current one
</xforms:caption>
<xforms:action ev:event="ev:activate">
<xforms:insert nodeset="my:lines/my:line"
 at="cursor('lineset')" position="after"/>
<xforms:setValue ref="my:lines/my:line[cursor('lineset')]/@name">
 New Item
</xforms:setValue>
<xforms:setValue ref="my:lines/my:line[cursor('lineset')]/my:price">
 0.00
</xforms:setValue>
</xforms:action>
</xforms:button>

The xforms:repeat element ensures that all line items in the XForms model are displayed. The xforms:button element is linked to an xforms:insert action, which causes a node to be added to the instance data and xforms:setValue actions.

Depending on the capabilities of a user agent, only part of a collection of line items might be presented at any one time. Thus the line items might be presented as a scrollable table whose size might depend on detecting the capabilities of the user agent being used to display the form.