Yahoo! continue their developer-focused effort with the Yahoo User Interface library, a collection of tools, utilities and controls written in JavaScript for achieving dynamic, interesting and cross-platform web pages. It makes extensive use of advanced DOM scripting, DHTML and AJAX techniques to help you easily construct rich and interactive web applications. In this article I’ll be looking at these tools and utilities in detail and examining what can be achieved using them.Although completely separate from other programming foundations and developer tools such as the Yahoo Widget Library for example, I think that Yahoo are trying to achieve the same thing here: provide something extremely useful to developers, get people interested and be recognized as not just a provider of news and search results, but also as one of the best providers of new technologies aimed at assisting people from all levels of experience to build better sites and services for themselves.

Let’s look at each of the tools in more detail. There are six fully fledged utilities packaged into the YUI, plus an experimental one, and two beta utilities. The six fully completed utilities are: the Animation utility, the Connection Manager, the Drag and Drop utility, the DOM collection utility, Event Utility and the YAHOO Global object. The two beta utilities are the DataSource utility and the Element utility. The experimental utility is the Browser History Manager.

The beta utilities are as available to use as the rest of the package, but their APIs are still open to developer feedback, to give the utilities some time to be played around with by the likes of you and me before the YUI team finalize and lock down the APIs. The experimental utility is also released to the general public under the same premise, but has had even less extensive testing than the beta utilities. These utilities do not have the same levels of documentation as fully released parts of the package and may therefore require a higher level of programming competence to be able to use.

Don’t let this put you off though. Once you’ve been using the YUI for a little while the syntax becomes easier to use intuitively, and developer feedback is an excellent way to communicate to the people behind the YUI exactly what we want to see in future releases. Although there is currently no formal way to request additions to the code or to provide feedback as such, bug reports and patch requests can still be submitted.

The Completed Utilities 

The YAHOO Global Object provides the namespace within which all YUI code resides. It is a mandatory utility that must be included on every page that utilizes any of the utilities or controls. To use YUI utilities, the Global object must be declared first in a <script> tag in the head of any page using the utilities. This utility can also be used to create custom namespaces for applications built on top of the YUI framework. In the simplest implementations of the YUI utilities, nothing needs to be done with the Global object other than defining it.

The animation utility provides a simple implementation of animations that involve moving objects within the browser or changing the size, color or other visual characteristics of objects. A range of methods are provided to control and configure animation and the syntax is easy to use and master. As well as providing complex animation, this utility can also be used to implement other interesting visual concepts such as fading and scrolling.

Creating a basic animation is easy. You simply specify the object to be animated, creating it dynamically if required, then use a series of attributes to tell the script how the animation should be achieved. A series of transition effects, such as easing in, which starts the animation slowly and then speeds up, or easing out, which does the opposite, can also be used.

The Connection Manager utility provides an easy abstraction layer for making in-page HTTP requests through a simplified interface to the AJAX XMLHttpRequest object. Using this utility means that you can send a request to a server and receive the response with just a couple of lines of code instead of the standard, manual method of creating the XMLHttpRequest. You don’t have to worry about providing code for different browsers as everything is done for you in the utility. You can even access and parse XML documents with ease using this utility.

Enabling objects to be dragged-and-dropped was a great DHTML effect a few years ago but required huge amounts of unwieldy code to work correctly. With the Drag and Drop utility, all you need to do is specify any DOM element to an instance of the YAHOO.util.DD constructor. That’s it; the element becomes draggable! Obviously in most implementations of the drag and drop effect, you’ll want to do more than simply move objects around; the drag and drop utility provides a set of custom events that fire at different times during the interaction which can capture different data and be used to achieve the desired result.

The DOM Collection utility provides easy access to obtaining any DOM element on the page and also simplifies the process of accessing collections of elements and tasks such as getting and setting style properties of DOM elements or collections. A few of the other utilities depend on the DOM utility and you’ll find that you often need to include a reference to it in the head of your pages.

The event utility is similar and is required by most of the other utilities. This utility gives you a simplified interface for subscribing to DOM events and for creating your own custom events. To cut down on the number of utilities that need to be included in your pages, Yahoo has combined the YAHOO, DOM and event utilities into a single utility (although they can still be used independently where required).

The Element utility (still in beta phase) provides a wrapper for HTML elements in the DOM and simplifies common tasks such as adding listeners and manipulating elements. The DataSource utility provides a common configurable interface for interacting with data from a variety of sources including JavaScript arrays and online servers over XHR. The Yahoo team is committed to using these utilities but advises that implementations created now may be subject to change once the API has been locked down.

As any web application developer knows, state changes to a web page’s content and structure are often not recorded by a browser’s history engine. The currently experimental Browser History Manager has been designed to facilitate the creation of web applications in which the back and forward buttons of the browser are fully functional and in which aspects of the application’s state can be bookmarked.

The Controls

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.

More Controls

The tabView control allows developers to easily add a tabbed view of different pages of content on the page. Like the Menu control, it is built primarily from a standard list element, which is held within a <div> element. Each tab is represented by a simple <li> element. A range of visually discrete tab styles can be used including standard, top-left, round-edged or horizontally aligned tabs, and new tabs can be added or removed programmatically with a minimum of effort.

The TreeView control can be used to create a variety of hierarchical tree structures that can be loaded dynamically. Customizing the icons used to expand each top-level tree element is easy, as is using custom fading animations to move between tree nodes.

The beta button control allows you to easily extend traditional HTML form buttons into rich, graphical buttons that feature enhanced functionality or style and even includes support for better radio buttons and checkbox controls. Eight different buttons can be created with this control: a basic push button, a link button which is specifically used to navigate to new URls when pressed, submit and reset buttons, a checkbox or radio button, a menu button that will show or hide a menu when pressed or a split button which can either display a menu or execute a user-specified command when clicked.

The final control, also at beta stage, is the DataTable control, which interacts with the DataSource utility to provide a highly accessible tabular format of data. It is fully screen-reader accessible and features sortable and resizable columns, pagination, scrolling, row selection and inline editing.

The Yahoo! Developer network site dedicated to the YUI provides a huge resource of information, examples and documentation for all of the utilities and controls mentioned in this article as well as some of the custom CSS tools that I haven’t had time to include. A blog provides the latest ongoing news and announcements for the project and a forum is provided where you can get help with specific issues you may encounter when working with the different controls and utilities. This is also the place where the YUI can be downloaded if required, but don’t forget that you can choose not to download any of the library, and let Yahoo serve the files you require across the Internet. The site can be found at http://developer.yahoo.com/yui so anyone interested in working with this rich set of utilities, controls and tools should head there immediately and get involved.

—

by Dan Wellman