XForms/Custom Controls

Motivation
Very often complex forms need functionality that go beyond the basics offered by the W3C XForm standard. The good news is that XForms is designed to be easy to extend. This process is called creating a Custom Control.

There are several reason to create XForms custom controls:


 * custom presentation - XForms controls as rendered by your XForms processor do not provide the right presentation for your form
 * custom data types and date type to UI mappings - existing XForms controls do now work properly with your data types (for example binding a boolean to a check box)
 * advanced XForms controls - you need customized controls to extend the functional of the base XForms controls
 * new host language - you'd like to support XForms in host languages

The following example uses a technology called XML Bindings to create a new control. This control displays a different image when a select1 list is selected.

Sample Program
   @namespace xf url(http://www.w3.org/2002/xforms);

xf|output[mediatype="image/*"] { -moz-binding: url('#output-image'); }     Custom Control Sample  Select image to display:              

Discussion
This example uses the xbl:binding structure, a few lines of JavaScript and a binding in the CSS file. Note that example will only work within FireFox since XML bindings are not currently part of the XForms specification.

Note that the XML Binding Language (xbl) in currently a w3C working draft. See XBL working draft. When XBL becomes a recommendation these examples may have a better chance to run in multiple implementations of XForms. Right now we need to use implementation specific tags.