Views
XForms UI Elements
From PicoForms
Contents |
[edit] Introduction
XForrms is used to collect data from users, much like an HTML form, and to make a web form interactive.
A web form typically has several input fields displayed in the browser. How the input fields should be displayed is defined by the XForms user interface (UI).
The XForms User Interface elements are called XForms Controls or Input Controls. Though XForms define the way that the input fields should be displayed, it does not describe how the XForms controls should be displayed.
XForms, being a platform, is independent of any device, and display of XForms controls is dependent only on the browser. This property of XForms makes it useful for displaying applications on the screens of all types of devices such as personal computers, cell phones, PDAs, hand held computers, etc. User Interfaces for the challenged people such as physically and visually challenged are best defined with XForms.
[edit] The XForms User Interface
XForms has two different parts for describing input data:
- XForms Model
- XForms User Interface
The XForms model defines the form, what the form does including the logical flow and the data contained in the form.
The XForms user interface defines the various input fields in the form and the way fields should be displayed. The XForms user interface is used for displaying the form and entering the data.
[edit] XForms UI Elements
The XForms User Interface elements are called XForms Controls or Input Controls.
There are two types of XForms UI elements specified in XForms - Form Controls and XForms User Interface (UI).
While the form control elements allow the users to interact with instance data, the XForms UI elements help the authors to combine both the host language markup and the XForms markup together to create the desired user interface.
Each XForms control element has a ref attribute and a required <label> element.
Example
The two most widely used XForms controls elements are <input> and <submit>.
The following example shows a typical form with ‘Name’ and ‘Address” as input fields and a submit element.
<input ref="name"><label>Name</label></input> <input ref="address"><label>Address</label></input> <submit submission="form1"><label>Submit</label></submit>
The input fields in the form are defined by the two <input> elements. The two ref attributes ref="name" and ref="address" refer to the <name> and <address> elements in the XForms model.
The <submit> element present at the end is used to submit the data. The submission="form1" attribute in the <submit> element refers to the <submission> element in the XForms model. In a typical form the submit element is displayed as a button; the data entered into the input fields of the form are submitted when the ‘Submit’ button is clicked on.
The form controls are combined into user interfaces to offer a sophisticated user experience than conventional XHTML forms. Each of the form control is considered as a single unit for visual layout purposes. The XForms UI elements are used for arranging and managing the markups in the form. Semantics about the association of various UI controls are provided by the combination of the form controls with markup and this information helps in providing a coherent UI to small devices.
[edit] Description of XForms UI Elements
The XForms UI elements and their representations are described below.
group Element
The group element is used to group different xforms elements together in a logical manner. In addition to its functional aspect groups also offer several conveniences for managing xforms elements.
The group element is used as a container to define a hierarchy of form controls. Complex hierarchies of form controls can be created by nesting groups.
A group, in every manner, is another kind of form control, and therefore model item properties that apply to form controls are equally applied to group. Model item properties that apply to group override the model item properties that are applied to any individual member of the group (form control contained in the group).
A binding expression on group, without having any model item property applied to it, can be considered as an authoring convenience for relative XPath expressions that are used by form controls present in the group.
When model item properties apply to a group, they actually apply to all form controls present in the group. For example, if a group is bound to an instance data node, and the instance data node is non-relevant, then all the child form controls within the group is also considered to be non-relevant.
If the single node binding the group turns to be an empty nodeset or a non-relevant node, the group will be treated as non-relevant. This is the only condition when a group is treated non-relevant.
For a non-relevant group the rendering approach used to denote its non-relevance will apply to the whole content of the group.
When the optional label element appears as the first element child of the group, it represents a label for the whole group, a special implication it gains for being the first element child.
Example
Grouping Related Controls
<group ref="personal">
<label>Personal Detail</label>
<input ref="fname">
<label>First Name</label>
</input>
<input ref="lname">
<label>Last Name</label>
</input>
<input ref="dob">
<label>Date of Birth</label>
</input>
</group>
When the input focus is set on a group, the focus is actually set to the first form control in the navigation order present in the group.
input Element
The input element is an important XForms UI element that allows users to input data into a form field. If fact, free-form data entry in XForms is made possible with the input elements. Typically data in the form of one line text are entered using input element.
The following example shows a simple imput element:
<input ref="name/fname"> <label>First Name</label> </input>
