November 26, 2014
Hot Topics:

What Can the Yahoo! User Interface (YUI) Library Do for Your Site?

  • April 12, 2007
  • By Vlad Kofman
  • Send Email »
  • More Articles »

In this article, I will look at the Yahoo User Interface (YUI) library in more detail. The YUI is an AJAX framework, but it is also a generic JavaScript library that provides a lot of Web 2.0 widgets or UI elements, effects, and tools for web developers.

Introduction to the YUI

The abundance of AJAX frameworks on the market make it very hard for one of them to get noticed. But what better way is there than if it's used by one of the most popular web sites online? And, the YUI is currently used on a lot on the Yahoo web pages, including the main front page, my Yahoo portal, Yahoo news and Yahoo finance. Because Yahoo's main business is web based, their acceptance and usage of the YUI accomplishes two things. First, it get the library noticed and second, it proves that it's mature and stable code.

The library was released as open source under the BSD license. This means that it can be freely used for commercial projects, and it is currently maintained by the Yahoo developer community.

The YUI is written entirely in JavaScript, similar to Script.taculo.us or Dojo. Its installation (which I'll cover further), simply involves inclusion of several JS files on the page. The YUI has some of the best documentation available for an open source project, and it is clearly evident that the company spent a lot of time putting together examples and tutorials for every widget and functionality available. Every component is fully described and comes with several examples that are easy to understand. YUI code is also cross-browser compatible and supports all major browsers.

The YUI library can be conceptually separated into three parts. The first part is the AJAX communication wrapper that YUI calls Connection Manager. This utility deals with the instantiation of the XmlHttpRequest object, handling of the AJAX requests, browser status codes, and callback mechanics. The Connection Manager is reused in a lot of other widgets, making then AJAX-enabled. The second part of the YUI is a very solid collection of UI widgets such as Calendar/Date Picker, TreeView, TabView, and so forth. And, the last part is a polished collection of DHTML utilities that simplify DOM scripting and the creation of arresting visual behaviors, such as Drag & Drop or Animations effects. The utilities include the Document Object Model (DOM) manipulation package, CSS, Font, Event utilities, and others.

I should also mention that all YUI widgets come with separate CSS files. Changing their appearance to match the custom look of a particular site is easy; you don't have to touch the JavaScript code.

Setting Up the YUI

To set the up YUI, download it from the Yahoo Developer Network, unzip it into your web server directory, and include the JavaScript files corresponding to the features you want to use in your pages. For example, if you want to use Drag and Drop, you may include these JavaScript files.

<script type="text/javascript" src="../../build/yahoo/yahoo.js" >
</script>
<script type="text/javascript" src="../../build/event/event.js" >
</script>
<script type="text/javascript" src="../../build/dom/dom.js">
</script>
<script type="text/javascript" src="../../build/dragdrop/dragdrop.js" >
</script>

Similarly, if you want to use Calendar/Date Picker, you can include it.

<script type="text/javascript" src="yahoo.js"></script>
<script type="text/javascript" src="event.js" ></script>
<script type="text/javascript" src="dom.js" ></script>
<script type="text/javascript" src="calendar.js"></script>
<link type="text/css" rel="stylesheet" href="yui/calendar.css">

Unlike Scrip.aculo.us, which requires that you include one core file and dynamically load other modules, the YUI requires an explicit declaration of what you need.

As an alternative to including required JS files from the local web server directory, the same files can be included from the Yahoo servers. From the client point of view, there is no difference from where the file is downloaded, either from your server or the Yahoo server. Also, note that all library files come with three versions: the regular file, file with the .min and .debug in its name. Any library file with the .min in its name is minified, meaning that comments and white space have been removed to make them more efficient to download. For example, calendar-min.js and similarly .debug uses the debug version of the file; for example, calendar-debug.js.

AJAX Connection Manager

If you are not using the YUI, the only way to initiate an asynchronous AJAX call to the server is to write something like this:

function getXmlHttpObject() {
   var XHR=null;
      if (window.XMLHttpRequest) {
         XHR =new XMLHttpRequest();
      }
      else if (window.ActiveXObject){
         XHR =new ActiveXObject("Microsoft.XMLHTTP");
      }
      return XHR;
}

This code checks for different browser implementations of the XMLHttpRequest object, and hopefully is compatible with most browsers. You also will need to use XHR object's API to send GET or POST request and then manually check for any error codes, such as 404 "page not found" and status codes. It completes such a response in a total of over 30 lines of code.

With the YUI's Connection Manager, all of this plumbing has been already implemented. All you need is one line of code:

var transaction =
   YAHOO.util.Connect.asyncRequest('GET', sUrl, callback);
Note: The callback is not a function but an object, and the asyncRequest method returns a reference to the transaction that can be used later. This method supports the GET, POST, and HEAD options of the HTTP request. The URL parameter is self explanatory.

The callback object is simply a JavaScript object that has a code definition of the methods you want to execute on a successful response or a failed response. It can also have other options, such as timeout value, arguments, and scope.

var callback = {
   success function(o)  {/*success handler code*/},
   failure: function(o) {/*failure handler code*/},
}

Here is how a form would be submitted:

var formObject = document.getElementById('aForm');
YAHOO.util.Connect.setForm(formObject);
YAHOO.util.Connect.asyncRequest('POST', 'http://www.yahoo.com',
                                callback);

Finally, if you want to terminate a request that hasn't completed in ten seconds, you can set a timeout variable in the callback object to 10000 or call the abort method and pass in the transaction variable.

setTimeout("YAHOO.util.Connect.abort(transaction)",10000);

The YUI Connection Manager also supports asynchronous file uploads, which are specified with an argument array in the callback object. For example:

var callback = {
   success: function(o) {/*success handler code*/},
   failure: function(o) {/*failure handler code*/},
   argument: ['file1','file2']
}

There are more options in the Connection Manager, but these are the main use cases. Now that you know how to initiate an asynchronous AJAX call with YUI, look at what other neat effects and utilities are available.





Page 1 of 3



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Sitemap | Contact Us

Rocket Fuel