Chapter 3. XForms User Interface Controls

User interface widgets collect user input and are responsible for providing a pleasant end-user experience when interacting with an application. The presentation and interaction exhibited by such widgets determines the look and feel of the user interface. With markup languages such as XForms, such user interface widgets are created by special markup constructs called, in this book, user interface controls . We begin our technical overview of XForms with a tour of the available user interface controls. Each such control adds a specific type of functionality and will be introduced alongside examples that motivate its use.

XForms user interface controls have been designed to be familiar to HTML authors and provide a smooth transition from today's HTML forms. In contrast to HTML form controls, XForms user interface controls are designed to match the structure of XHTML documents. User interface controls are designed to be accessible , localizable , and internationalizable . Presentational hints, such as visual styling, are clearly separated to better enable the delivery of XForms user interfaces to a variety of end-user devices and modalities. We summarize the design philosophy underlying the XForms user interface in Section 3.1.

We begin our overview of the various user interface controls by describing the overall structure of XForms user interface controls in Section 3.2.

XForms user interface controls share a number of common markup features. Markup features such as attributes and child elements common to all XForms user interface controls are described here. User interface controls designed to allow free-form textual input are described in Section 3.3. By leveraging the type information from the XForms data model, such input controls can be rendered using platform-specific widgets to enable rich data entry.

Traditional user interfaces provide a variety of widgets that enable controlled user input, for example, pull-down lists that allow the user to pick from a given set of choices. XForms provides this functionality via controls select and select1 , described in Section 3.4. These controls are useful when the set of values that the user can provide is constrained in some manner, for example, picking a state from a list of states. XForms select controls provide a flexible yet device-independent means of creating such user interfaces.

The notion of selecting from a set of available values can be further refined when the underlying set of values is ordered . This manifests itself in traditional user interfaces in the form of widgets, such as sliders and spin dials , that make the structure of the space of available values apparent to the user. XForms includes control range , described in Section 3.5, that can be used for this purpose.

Control upload , described in Section 3.6, provides the familiar file upload feature of HTML forms; at the same time, it is designed to be usable on devices that do not contain a file system but need to upload data to a Web server, for example, digital cameras .

Finally, we describe XForms controls that enable the user to invoke specific commands. Traditional visual interfaces provide a generic button widget that is used to invoke a given command; control trigger , described in Section 3.7, generalizes this idea by enabling the XForms author to specify one or more action handlers to be invoked when the trigger is activated. The familiar submit control used to submit data from a Web form is enabled via XForms action send . Control submit , described in Section 3.8, is thus a special case of control trigger that invokes action send . We conclude the chapter with a summary of the various user interface controls in Section 3.9.