ahoo User Interface (YUI) is an open source JavaScript library for developing AJAX-based rich user interfaces. The new Yahoo Mail uses YUI, so you might imagine how powerful the library is. This is the first article in a three-part series that primarily targets Java developers who are not JavaScript experts, but are developing web applications with server-side frameworks (such as JavaServer Pages, Struts, or Spring). In this installment, JavaScript novices will see how to use YUI for setup and design , and should learn a good deal about object-oriented JavaScript programming. For developers already expert in JavaScript, this article series serves as an introduction to the YUI library.

The next two articles in the series will cover the following:

1. Containers, layouts, widgets, event handling, AJAX components, and server-side interaction
2. DataTable, pagination, sorting, JSON, and error handling

YUI Under the Hood

Essentially, the YUI library is a collection of components that address various aspects of a web application. They broadly fall into the following categories:

• Controls/Widgets:
  • Container components such as Panel, Tooltip, Dialog, etc.
  • UI widgets such as Button, Calendar, DataTable, Menu, Paginator, Rich Text Editor, etc.
• Components for interacting with server-side modules
• Components for dealing with DOM and Event handling
• Components for managing animation, drag and drop, page layout, etc.

The YUI source code comes in three forms for every component, which is handy for debugging any problem unique to your application:

• Standard form: You can use this form to understand the implementation of a component.
• Debug enabled: This form prints debug information.
• Compressed: This form has white spaces removed to improve download performance.

JavaScript Programming Bugaboos

Developing and debugging JavaScript applications is painful, particularly for Java developers. Errors are not easy to spot, even if you use a JavaScript debugger like Firebug. Consider the following common JavaScript programming pitfalls and their solutions:

• If you fail to prefix a local variable with the var keyword in a function during declaration, the value is retained outside the function scope. This makes determining what went wrong difficult.
• Everything in JavaScript is a function, so you must use the new keyword precisely to create an instance of a class. Otherwise, JavaScript invokes the function and assigns the return value to the left operand.
• Do not suffix the function name with open and closed parentheses when passing a reference to the function. This will actually invoke the function.
• The column width you pass in to the DataTable component differs between IE and Firefox. Set the column width 20 pixels smaller in Firefox than in IE.
• JavaScript code behaves differently from browser to browser. So you must test the application in all targeted browsers whenever you make a change to your application.
• If you use a new YUI component and forget to include the source JavaScript file, you won’t get any error, but the component won’t work. One option is to use YUI Loader to download the source files on demand, but I prefer to link individual source files of the components in use. That way, you can control exactly what gets downloaded?a simple approach very much like importing the necessary classes in a Java program.

YUI’s Object-Oriented JavaScript Design

Until AJAX frameworks emerged, JavaScript was not treated as an application development platform. Despite its support for object-oriented (OO) design, JavaScript was treated merely as a scripting language to implement minimal dynamic web page behavior. To leverage OO design in JavaScript development, YUI uses an object-oriented design in all its components.

The following sections demonstrate OO programming in JavaScript and introduce an approach that will help you structure your classes for OO JavaScript applications. The YUI library provides the components to facilitate this style of development.

Creating Namespaces

In enterprise software, it is very common to group classes based on behavior in a namespace. So it is important to learn about namespaces before learning to create classes and objects.

If you want all your namespaces to fall under the Yahoo namespace, you can create them like this:

YAHOO.namespace("myapp");YAHOO.namespace("myapp.util");YAHOO.namespace("myapp.ui");YAHOO.myapp.Main = function() {}

This code creates three namespaces as well as a class under the namespace YAHOO.myapp.

Alternatively, you can define your own namespace as follows:

if(!DevX) DevX = {};if(!DevX.myapp) DevX.myapp = {};DevX.myapp.Main = function() {}

Managing Files

You can define multiple classes in the same JavaScript file, but it is a good practice to have separate files for them.

Defining Classes

You can define a class in one of two ways: using an object literal or defining a function. Object literals typically are useful for defining classes that contain all static methods and do not need a constructor to initialize. The following code snippets show how to define a Util class using the object literal approach.

Suppose the file util.js contains the following:

if(!DevX) DevX = {};if(!DevX.myapp) DevX.myapp = {};DevX.myapp.Util = {     TIMEOUT : 5, // Timeout constant in minutes for server requests     isBrowserIE : function() {          return YAHOO.env.ua.ie > 0;     }}

To use this class, you wouldn’t need to create an instance of Util. You instead would access the members directly:

if(DevX.myapp.Util.isBrowserIE()) {	// IE specific behavior}

Alternatively, you can define a class using a function. Suppose the file main.js has the following contents. Refer to the inline comments to understand the class definition.

if(!DevX) DevX = {};if(!DevX.myapp) DevX.myapp = {};DevX.myapp.Main = function (title) { // Constructor     var t = title; // Private variable	     /**     * Private method     */     function getTitle() {          return t;     }	     /**     * Public method     */     this.refresh = function () {          // Refresh the main page     }};

You can instantiate and use the defined class as follows:

var main = new DevX.myapp.Main('Home page');main.refresh();

As you add more functionality to your class, your constructor would keep growing because all the members are defined within it. To define additional method and fields, you could use the method YAHOO.lang.augment to define your method and fields outside the constructor. Consider how this code adds a login method to the class Main:

YAHOO.lang.augment(DevX.myapp.Main, {     login : function(username, password) {          // perform login operation     }});

Implementing Inheritance

You can implement inheritance by using the utility method YAHOO.lang.extend. Consider subclassing the class Main and changing the behavior of the method refresh.

As an example, the file application main.js has the following contents:

if(!DevX) DevX = {};if(!DevX.myapp) DevX.myapp = {};DevX.myapp.AppMain = function () {     //Call the super class constructor     DevX.myapp.AppMain.superclass.constructor.call(this, 'App Main');	     // Derived class specific initialization goes here}YAHOO.lang.extend(DevX.myapp.AppMain, DevX.myapp.Main);DevX.myapp.AppMain.prototype.refresh = function () {     // Modify refresh behavior}

The prototype keyword refers to the structure of the class.

Web Application Design

At this point, a Java developer may have a couple of questions regarding the myapp example. Does using YUI eliminate the need to write HTML? Is this library like the Java Swing API? Sorry, but the answer to both questions is “No.” The previously described application uses HTML pages for its basic UI elements. However, every page will be backed by JavaScript code, which uses YUI and other JavaScript libraries as the application demands. YUI handles events raised by the page’s UI elements, interaction with the AJAX server, pagination, and so on.

Table 1 offers class design principles for your web applications. Assuming your application has two pages, and each page has various UI elements, the HTML and JavaScript classes should work as described in Table 1.

If your application is more complicated than simple pages with a rich user interface, you should probably consider a different strategy for the class design.

More to Come

You now should have an understanding of what YUI can contribute to your applications, the OO design approach for developing web pages and classes, best practices for developing with JavaScript, and how to write your own classes and inherit a class to modify a behavior.

The next installment builds on this knowledge with an examination of YUI layouts, basic widgets, event handling, and server interaction. Stay tuned.