Introducing SVG-rich XForms controls

An important feature of formsPlayer 1.5 has been the development of richer form controls, implemented using XBL and SVG. The screenshot here shows a simple XForms output control styled to look like an LED display.

The effect is achieved by adding an appearance attribute to the control, so that the functionality is non-invasive to other XForms processors (and, indeed, to earlier versions of formsPlayer):

<xf:output ref="clock" appearance="fp:LED" class="clock" />

Furthermore, the finer points of the LED style are themselves taken from the pertinent CSS properties. In this instance, we are setting the colour of the digits and ensuring that they resize appropriately with the form as a whole:

.clock {
    color: red;
    width: 98%;
    height: 98%;
}

If you want to try the sample yourself, you will need the latest versions of formsPlayer and the Sidewinder Viewer. You will then need to add language support to the Sidewinder Viewer, to enable SVG. Once your system is set up, navigating to the LED Clock Sample in Internet Explorer will invoke the Sidewinder Viewer to run the sample.

To read more on custom controls, take a look at the article Defining custom controls with XHTML, XBL, XForms, and SVG.