Yahoo's Rich Web UIs for Java Developers

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.