Yahoo! UI Library (YUI)
- URL: http://developer.yahoo.com/yui/
- Blog: http://yuiblog.com/
- Docs: http://developer.yahoo.com/yui/docs/
YUI is comprised of six major components: YUI core, Library utilities, UI controls, CSS components, developer tools and the YUI Compressor.
The YAHOO Global Object is the namespace for all YUI functionality. The core module houses low level classes that are used mainly by YUI Framework code. They are: YAHOO, YAHOO_config, YAHOO.env, YAHOO.env.ua andYAHOO.lang. Having said that, there are some functions that can be of great value to developers.
isObject(). How many times have you written code such as
if ( x == undefined )or
if (typeof(x) == 'undefined')and wished that there was a
YAHOO.lang.extend provides a simple mechanism for setting up the
prototype, constructor and superclass properties for objects that are extending
other objects. It also prevents the constructor of the extended object (i.e.,
the superclass) from being executed twice. Let's take a look at an example.
The following code assigns a namespace for our classes, creates a
and a child
Investor class that inherits from it. You can see that code conciseness
is being traded for clarity. Depending on your personal views, you may prefer
$ sign over
The YUI DOM utilities are found in the
class. Its methods are static, so the class doesn't require instantiation
in order to use them. Simply append the function names to the
class to call them. Most DOM methods can be applied to more than one element
in a single call.
Positioning functions include
setXY(), getXY(), getX(), setX(),
setY(). These ensure accurate positioning because page coordinates
are defined in the context of the entire HTML document, including the portions
beyond the browser window.
setStyle() methods allows you to retrieve and
set properties of a given element's
style object. The YUI Framework normalizes
element property names so they're the same across all browsers. For instance,
opacity property is always specified as such, even though it's applied
in various ways, depending on the browser:
The YUI Dom module provides a number of methods to dynamically manage class names, including:
- getElementsByClassName(className, [tagName], [rootNode])
- hasClass(element, className)
- addClass(element, className)
- removeClass(element, className)
- replaceClass(element, oldClassName, newClassName)
Next to the UI Controls, this is where most of the YUI's functionality is found. The Library Utilities module contains tools to help you with many commons tasks such as Ajax connections, JSON, animation, browser history, drag & drop and cookies. While there are far too many to cover in detail here, we look at the YUI's Ajax and JSON implementations.
The Connection Manager is a utility that enables you to make in-page HTTP requests
through a simplified interface to the Ajax
XMLHttpRequest object. The Connection
Manager handles cross-browser instantiation of
XMLHttpRequest, negotiates the
server response and uses a callback pattern to process the response data. To
create a new asynchronous request using the YUI, we would call the static
asyncRequest() method returns a reference to the transaction that can be
referenced later. This method supports the GET, POST and HEAD options of the
We still need to create a callback object if we want to process the returned data. All of the callback object's properties are optional. In most cases you should supply at least three properties in your callback object:
- success: a function called when the server responds with a valid HTTP response.
- failure: a function called when the server response indicates that a problem, such as an HTTP 404 (file not found) error, has occurred.
- argument: an object, string, number, or array containing data that your success and failure functions might need in order to successfully process the server response.
JSON-to-string and string-to-JSON conversion and validation. The JSON Utility
YAHOO.lang, providing two static methods used for transforming data
to and from JSON string format.
YAHOO.lang.JSON.parse(). Optionally, you can provide a second
argument to filter or format the parsed object data.
pass that object to
YAHOO.lang.JSON.stringify() and capture the returned string: