Putting a YUI Face on a Java Web Application

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.

The inline panel on the right side of the page displays log messages.