Creating advanced input forms using JSF and JavaScript

Introduction

The Ibm®rational®application Developer for Websphere®software version 6 (hereafter referred to as Rational application Developer) provides a number of components that help create complex input forms, such as user registration forms. This technique is called Input Assist. Set it up at design time, and it will generate the components of the secondary user at run time. This article shows you the whole process of creating a user registration form.

This article assumes that you have installed the Rational application Developer with the experience of using HTML to develop WEB pages and have the basics of Java™.

Create JavaServer Faces Web Project

Start Rational application Developer and choose to create a new workspace.

Switch to the WEB perspective.

Open the File menu and create a new Dynamic Web Project.

Specify the project name (which I name mine userregisteration), and then click Finish.

Once you have created the project, expand it in the Project Explorer view. Right-click the WebContent folder. Choose to create a new Faces JSP File. Name it createnewuser.jsp. When a new user is created, the page createnewuser.jsp is displayed, allowing the user to register.

Close createnewuser.jsp. Right-click the WebContent folder and choose Create a new Faces JSP File.

Name the file success.jsp.

Close success.jsp. When a user registers successfully, it is redirected to the success.jsp page.

As in the previous two steps, create a new Faces JSP Page and name it failure.jsp. Close the JSP file. If a user fails to register, it is redirected to the failure.jsp page.

You now have a framework for WEB projects to register users. The next step is to create a database to store user information.

Create a user registration database

In this section, I'll show you how to create a Cloudscape database, where one of the tables can be used to store user data.

Before you start, download Cloudscapedb.sql.

Import the file into your workspace and place it in the WebContent folder of your current project. Switch to the Data perspective, and then go to the Database Explorer view.

Right-click in the view and choose Create New Connection. Select Choose a database manager and JDBC driver:

Figure 1: New Database Connection Dialog box