[ETC] Building Your Own Widget Library with YUI

The Yahoo! User Interface Library (YUI) has an ample assortment of components. Nevertheless, there will be always some functionality you want that a library like YUI hasn’t anticipated or hasn’t built yet. Sometimes you just want a subset of the many options a component might provide; in other cases, you may have a default configuration that you’d like to bake into a component to facilitate consistent use across your site. The flexibility built into YUI provides intrinsic support for extending, customizing, or creating wholly new components. If you find yourself in one of these situations, then building your own library of YUI-based components may make good sense.

This lengthy article is meant to get you started creating your own custom components using the tools available to you within YUI, including the Element Utility and the Event Utility. Understanding these tools can save you lots of time and make it easy to create API-driven components that expose powerful hooks to implementers making use of your work.

• Customizing Existing YUI Components
  • Using YAHOO.lang.extend
  • Creating and Using Shortcuts for Common YUI References
  • Registering a Component with YUI
• Developing Wholly New Widgets with YUI
  • The YUI Element Utility as a Foundation for Component Development
  • Managing DOM Events and Custom Events with Element
  • A Closer Look at extend
  • Element and AttributeProvider
  • Adding a render Method
  • Adding a Destructor
  • Subclasses
  • Bundling Functionality: The Field Object and the Fields Object
• Progressive Enhancement
• CSS Sprites
• Final Thoughts