An Overview of the Yahoo User Interface Library - The Completed Utilities
(Page 2 of 4 )
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.
Next: The Controls >>
More Web Authoring Articles
More By Dan Wellman
