Popular JavaScript Framework Libraries: JQuery, the Yahoo! UI Library (YUI) and MochiKit / Page 2 | WebReference

Popular JavaScript Framework Libraries: JQuery, the Yahoo! UI Library (YUI) and MochiKit / Page 2

[previous] [next]

Popular JavaScript Framework Libraries: JQuery, the Yahoo! UI Library (YUI) and MochiKit [con't]

Yahoo! UI Library (YUI)

The Yahoo! User Interface (YUI) Library is a collection of JavaScript and CSS resources that make it easier to build rich and interactive applications in Web browsers, using technologies such as Ajax, DHTML and DOM scripting. Development on YUI began in 2005 and Yahoo! began using YUI in the summer of that year. In February 2006 YUI was released for public use. It's actively developed by a core team of Yahoo! engineers and features extensive API documentation, as well as support on forums.

YUI is comprised of six major components: YUI core, Library utilities, UI controls, CSS components, developer tools and the YUI Compressor.

YUI Core

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.

For instance, the YAHOO.lang module contains many type tests such as isBoolean(), isNull(), isNumber(), isArray(), isString(), isUndefined() and isObject(). How many times have you written code such as if ( x == undefined ) or if (typeof(x) == 'undefined') and wished that there was a isUndefined() function?

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 Person superclass 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 a $ sign over YAHOO.test:

DOM Utilities

The YUI DOM utilities are found in the YAHOO.util.Dom singleton class. Its methods are static, so the class doesn't require instantiation in order to use them. Simply append the function names to the YAHOO.util.Dom 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(), getY() and 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.

The getStyle() and 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, the 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)

Library Utilities

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.

Connection Manager

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:

The asyncRequest() method returns a reference to the transaction that can be referenced later. This method supports the GET, POST and HEAD options of the HTTP request.

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 Utility

The JSON Utility provides methods for working with JSON in JavaScript, providing JSON-to-string and string-to-JSON conversion and validation. The JSON Utility extends YAHOO.lang, providing two static methods used for transforming data to and from JSON string format.

To parse JSON string data into JavaScript data pass a JSON string to YAHOO.lang.JSON.parse(). Optionally, you can provide a second argument to filter or format the parsed object data.

To convert a JavaScript object (or any permissible value) to a JSON string, pass that object to YAHOO.lang.JSON.stringify() and capture the returned string:

[previous] [next]