| home / programming / awxml3 / 1 |    [previous] [next] |
|
|
|
This section creates a sample XForms user interface for the questionnaire application and binds this user interface to the XForms data model defined in the previous section. XForms user interface markup appears within XHTML element ~body~ along with other document markup. Notice that because of the separation of the model from the user interaction, XForms user interface markup can appear anywhere within the contents of XHTML element ~body~; in contrast, when using HTML forms, user interface controls can appear only within element ~form~.
In the questionnaire application, XForms user interface control ~input~ can be used to collect each item of data. User interface control ~input~ is intentionally designed to be generic. The type of information available about the underlying data item, for example, birthday is a date, can be used to advantage in generating a user interface representation that is appropriate to the connecting device, for example, rendering it as a calendar on a desktop browser. Notice that in addition to making the resulting user interface customizable for the connecting device, this design provides a rich level of accessibility for supporting users with different needs.
Here, we review different aspects of UI control ~input~ in some detail; later chapters will review all of the XForms user interface controls. See Figure 1.5 for the markup that creates the input field for obtaining the user’s age and Figure 1.6 for the resulting user interface. XForms controls encapsulate the following pieces of information
Figure 1.5. User interface control for obtaining the user’s
age.
needed to render the interaction and connect the result to the appropriate portion
of the XForms data model:
• Binding attributes that wire control to model
• Metadata for giving feedback to the user
• Wiring up of events and event handlers
• Presentation hints
• CSS style rules
• Keyboard shortcuts and navigation hints Figure 1.5 illustrates the following
XForms features:
| Binding | Attributes model and ref on element ~input~ specify the portion of the instance to be populated by the value obtained via this control. Attribute model gives the id of the person model; Attribute ref addresses node /person/age of this instance. The syntax used to address portions of the instance is defined by XPath.14 |
| Metadata | Elements ~label~, ~help~, ~hint~, and ~alert~ encapsulate metadata to be displayed to the user at various times. Notice that in XForms the label for the user interface control is tightly bound to the associated control; this is an extremely useful accessibility feature. Elements ~hint~ and ~help~ encapsulate tool tip text and detailed help to be displayed upon request. Finally, element ~alert~ holds the message to be displayed in the case of invalid input. Notice that the alert message uses element ~output~ to access the value supplied by the user. Element ~output~ uses XPath to address the relevant portion of the data model. For simplicity, this example has shown elements ~label~, ~hint~, and ~help~ with inline content. For more complex applications, the contents of these elements can be specified indirectly via a URI by using attribute src. This feature can be used to advantage in localizing XForms-based Web applications by factoring all such messages into an XML file, referring to portions of that XML file using URIs within the XForms Web application, and loading these XML files to provide locale-specific messages. |
| Eventing | Attribute ev:event on element ~input~ sets up control ~input~ to respond to event DOMActivate by calling the handler located at #speak. This uses the syntax defined in XML Events15 for authoring DOM2 Events and is described in Section 2.3. |
| Presentation | Hints can be provided via attribute appearance. |
| Styling | Attribute class specifies a Cascading Style Sheet (CSS16) style to use for styling this control. CSS is a style sheet language that allows authors and users to attach style (for example, fonts, spacing, and aural cues) to structured documents (for example, XHTML documents). |
| Navigation | Attribute accesskey specifies an accelerator key for navigating to this control. This was an accessibility feature first introduced in HTML and has been incorporated into XForms. |
13http://xml.apache.org/xerces-j
14http://www.w3.org/tr/xpath
15http://www.w3.org/tr/xml-events
16http://www.w3.org/TR/CSS2/
UI Control select1
The field corresponding to the user’s gender can have one of two legal values, m or f. The user must pick one of these values. Using traditional HTML forms, the corresponding user interface would be authored as a group of radio buttons. Notice that the HTML design hard-wires a particular presentation (radio buttons) to the underlying notion of allowing the user to select one and only one value. However, radio buttons may not always be the most appropriate (or even feasible) representation, given the device or modality in use; for instance, a radio button does not make sense when using a speech interface.
XForms separates form from interaction by capturing abstract notions such as select from a set. This enables the XForms author to create user interfaces that can be delivered to different target modalities and devices. XForms user interface control ~select1~ can be used instead of ~input~ to obtain the user’s gender in the questionnaire example—see Figure 1.7 for the XML markup and Figure 1.8 for the resulting user interface.
As in the previous example, binding attributes model and ref
specify the location where the value is to be stored. Attribute appearance
is set to full to indicate that the client should create a full representation
of this control; in the case of a visual presentation, this might be realized
by using a group of radio buttons. Element ~item~ encodes each
of the available choices. Subelement ~label~ contains the display
value; subelement ~value~ encodes the value to be stored
in the instance. The default value m is obtained from the model—see Figure
1.2. The author can style the interface further by using Cascading Style Sheets
(CSS).
15http://www.w3.org/tr/xml-events
16http://www.w3.org/TR/CSS2/
Figure 1.7. XForms user interface control for selecting a single
value.
| home / programming / awxml3 / 1 | [previous] [next] |
Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
Created: March 27, 2003
Revised: January 2, 2004
URL: http://webreference.com/programming/awxml3/
