YUI 3 Cookbook

Chapter 8. Using Widgets

One of the most popular features YUI offers is its suite of prepackaged widgets. As discussed in previous chapters, in YUI parlance, a widget is a generic visible component designed to be reused across different websites, such as a table, calendar, menu, or chart. Conceptually, a YUI widget is similar to a Dojo widget or a jQuery UI plugin.

The YUI Widget API is unique in that it provides strong conventions. Despite being designed to address wildly different tasks, all YUI widgets share a huge number of common behaviors:

• All YUI widgets use the same conventions for rendering.

• All YUI widgets use the same approach for configuring the widget at construction time and for changing the configuration later on.

• All YUI widgets share a large group of common configuration settings and methods. The external API works the same way for hiding a widget, disabling a widget, controlling a widget’s size, destroying a widget instance, and many other common functions.

• All YUI widgets follow the same basic structural conventions for their container elements and the CSS classes on those containers.

• All YUI widgets fire custom events when their configuration state changes and at other interesting moments.

• All YUI widgets can receive custom events and can be added to an event target chain.

• All YUI widgets can add plugins to augment a particular widget instance’s behavior. Features such as being “draggable” or “resizable” are broken out into plugins, which means that you add and use those ...