Putting a YUI Face on a Java Web Application

Learn how to use Yahoo User Interface (YUI) Web components to develop a real world application with just the right mix of JavaScript/AJAX.

by Narayanan A.R.

Apr 30, 2009

Page 1 of 4

uilding on my previous article Yahoo's Rich web UIs for Java Developers, which discussed how to use various Yahoo User Interface (YUI) web components for setup and design, this article walks through using YUI to develop a real world application. During the course of the implementation, you will learn how to:

Lay out the components

Use standard form elements

Handle events

Understand the YUI DataTable component

The next and final article in this YUI series will cover interacting with the server as well as the YUI DataTable component in detail.

About the Application

The application provides a web interface for storing confidential data such as bank accounts and login credentials for web sites. It also has options for tracking birthdays and appointments. This walkthrough explains how to implement the bank and web site credentials storage. The other two features are left for you to implement. Figure 1 and Figure 2 give an idea of how the application looks at run time.

Pushing the bank button in the upper-left corner will bring up the section to manage bank-related data (see Figure 1). Clicking on the icons of the banks listed allows the user to view and modify details specific to the selected bank.

Figure 1. Listing and Managing Bank Credentials: In this view you can modify various attributes for a bank account, such as account number, credit card account, and ATM PIN.

Figure 2. Listing and Managing Web Site Credentials: In this view you can modify various attributes for a web site, such as user name, URL, and password.