An Overview of the Yahoo User Interface Library

So now that we have looked at the utilities, we will now briefly examine the controls available for you to use. There are currently eight fully released controls and two beta controls.

The first of these controls is the AutoComplete control, one that I'm sure you'll all be familiar with. This control provides the front-end logic to a text-entry suggestion engine. You can work with data from a variety of predefined sources such as Yahoo web services for JSON data, Flickr XML data, or configure your own AutoComplete component using flat-file data. This control interacts with the DataSource utility.

The Calendar control enables users to choose one or more dates from a graphical calendar presented in a very familiar format and provides an easy-to-implement enhancement to any page requiring date selection to be completed. Anyone that read my article on creating a calendar control manually will appreciate exactly how much coding this control can save you!

The container control is a family of subcomponents that is designed to enable developers to create different kinds of container modules including a standard module container, an overlay, a tooltip, panel or dialog. Each of these modules has their own unique functionality and prove useful in a variety of situations.

The logger control allows you to make use of the event-driven messages that occur when controls or utilities are instantiated and interacted with, and is used primarily for debugging purposes but can easily be extended to fit the requirements of your application.

The Menu control is another component that provides a much sought-after effect with minimal coding, and allows you to forget about the subtle differences between browsers and get on with the more interesting aspects of design. It allows you to quickly and easily create fly-out menus, context menus or application-style menu bars. A Menu controls' internal DOM is based on the familiar and easy to use <ul> element and can be configured and customized in a very short amount of time.

The Slider control can be used to add a rich visual replacement for a standard input box that allows you to develop a more interesting method of allowing users to enter numerical values in a finite range. This control is easily implemented and easily styled. It is inherently dependent on the Drag and Drop and the YAHOO-Dom-Event utilities, but can also be combined with the Animation utility for self-scrolling slider controls that animate when their background region is selected.