Ajax Design Patterns

Chapter 14. Widgets

THE WIDGETS PROVIDED BY STANDARD HTML—TEXT INPUTS, RADIOBUTTONS, AND SO ON—HAVEN’T changed much for ten years and are getting a little tired. So many people have been building their own widgets on top of the standard HTML offerings, and a few patterns have emerged. It’s unlikely you’ll need to build these widgets yourself, because library implementations are available for almost all of them. Nevertheless, it’s worth it to consider when to use them and how to configure them.

The chapter starts with smaller, isolated widgets and builds up to more complex components. Slider is “the widget HTML forgot”—a typical slider widget so useful it’s surprising it hasn’t yet become standard HTML. Progress Indicator is a simple message or animation shown while waiting for a web remoting call. Drilldown is a control for selecting an element within a hierarchy.

Traditional HTML widgets are turbo-charged in the next couple of patterns. Data Grid is a “table on steroids,” with tools for querying and restructuring that will be familiar to users of spreadsheets and database report tools. And Rich Text Editor is a “textarea on steroids,” with options such as font size and color similar to those of a modern word processor.

Suggestion is similar to the traditional combo-box, a mixture between browsing and searching that relies on web remoting to locate a set of options against a partial text input. Live Search works similarly but shows search results rather than helping to complete a text ...