Building Rich, Encapsulated Widgets Using XBL, XForms and SVG
INTRODUCTION Web 2.0 is pushing the boundaries of the user interface (UI), but at the same time users are expecting more. This means that web applications that people interact with must strive to represent data in as imaginative and intuitive way as possible. This can both reduce the amount of time spent on tasks, as well as reduce input errors.
Traditional browser technologies have generally only provided scripting as a means to produce such UIs, and there has rarely been a way to encapsulate these interfaces for re-use. However, using XBL as the binding language and XForms and SVG for the functionality, it is now possible to build rich widgets that are completely encapsulated, and so reusable.
In addition, by building the widgets using XForms to provide the functionality, we get two major benefits: first, since XForms is accessible, the resulting widget combinations are also accessible; and second, XForms’ ability to easily manage web services means that widgets can communicate for data themselves, making it easy to produce ‘Google Suggest’ style widgets.
AIM The aim of this session is to explain both the use of rich widgets, and how to build them. It will focus on standard user interface languages such as XForms and SVG, and use XBL to control them.
STRUCTURE The session begins with a motivation for building rich widgets and demonstrates a few to set the context.
The session will then look at the different technologies that are being used to produce rich widgets, such as SVG, XForms and XBL.
A presentation and discussion of a real example will then follow, beginning with an analogue clock widget (using SVG) that can be used to display any time provided to it. The clock is then used as a layer onto an image to show the time that a particular photo was taken. The final step is the creation of yet another widget that uses web services to query Flickr to obtain ten photos on a given topic, and which renders each of the returned images using the photo/clock combination widget.




