JSF Application in RAD 7.5.0

Introduction

In this tutorial, we will create a very simple JavaServer Faces (JSF) application in Rational Application Developer 7. Main goals of this tutorial are:

1. Learn to configure a web project for JSF development.
2. Learn to write a basic application that requires managed bean, event handling and navigation.

The business logic of the application will be very simple. It will simulate the registration process in an online site. The user will enter:

• Name
• User ID and password
• E-mail address

After the registration form is submitted, we will display a thank you page.

Create the Projects

Start RAD7. Switch to the Web perspective (Window->Open Perspective->Web).

From the menu bar select File->New->Dynamic Web Project. Enter the following information:

Project name: JSFWeb
Add project to an EAR: Checked
EAR project name: JSFApp

Click on Finish. System will create the new web project. It will have a context root of "JSFWeb". The context root will play a role in forming the URLs for various JSP pages in the project.

System will create a Web Diagram for the web project. We are not going to use it in this tutorial. So, please close the diagram editor.

Configure the System

A few changes need to be done to RAD and the web project to facilitate JSF programming.

First of all, by default, every time a JSP page is created, system creates a managed bean for it. This may be OK for a small application, but, for a large application, this will create too many unnecessary managed beans. It is recommended that you disable automatic generation of managed bean and create them manually as needed. To configure this, choose Window->Preferences from the menu bar. Expand the Web Tools option and select Faces.

Check Suppress Page Code file generation. Click on OK.

Now, we will configure the web project. By default, RAD7 does not enable JSF development. We must enable it. In the Project Explorer view, right click on JSFWeb and select Properties.

Select the Project Facets property. On the right hand side, click on the Add/Remove Project Facets button. Select these two facets:

1. Faces support(base)
2. JSTL

Click on Finish.

Click on OK to close the properties dialog.

We are now ready to start developing the project.

Develop the Registration Form Page

By developing the form page first, we will get a good idea for how the application works. This is why, in real life, mock web pages are created to visually figure out how the application will behave.

Web site files, such as JSP pages, are stored within the WebContent folder of a web project. Expand the JSFWeb project and locate the WebContent folder.

To create the JSP page, right click on the WebContent folder and select New->Web Page. Enter register.jsp as the file name and click on Finish.

System will create the file and open it in the editor. Take a minute to inspect the file. Click on the Source tab at the bottom of the editor. Note that, system has already added a reference to the core JSF tag library as shown below.

System has also added the tag as required by all JSF pages. System has done these things because we have added the "Base Faces support" facet to the project.

At the bottom of the editor, click on Design to go back to the design view.

On the right hand side, in the Palette view, make sure that the Standard Faces Components drawer is expanded. We will be mostly using these components.

First, we will add various text input components. In the Palette view, click on Input. Then, drag and drop it on the editor.

We will use this text box to enter the user's full name. Now, we will add a new line to the right of the text box. Click to the right of the text box and hit the Enter key.

Similarly, add the following components one below the other:

Component Type	Purpose
Input	For the user's logon ID
Input - Password	For the password
Input	For the e-mail
Command	To submit the form

The page should now look like this.

Save changes.

Now, we will add labels for the input boxes. Drag and drop the Label component from the palette to the left of the first text box.

Enter "Full name:" as the label text and click on OK.

System will add the label as shown above. Similarly, add the following labels for the other text boxes.

1. Logon user ID:
2. Password:
3. E-mail:

In the end, the form will look like this.

Save changes.

To see, how the form is created using the JSF tags, switch to the Source view and have a look.

Create the Thank You Page

In the WebContent folder, add another web page called thanks.jsp. Enter a simple text such as "Thank you for registering". Save and close the file. This page will be shown after the user successfully logs in.

Create the Managed Bean

Now, we will create the managed bean that will handle the form submission request.

Under the JSFWeb project, right click on Java Resources and select New->Class. Enter the following values.

Package: com.webage.beans
Name: RegistrationBean

Click on Finish to create the class. System will open the Java file in the editor.

In the bean class, we need to add a property for each field in the form. Add the following lines of code to define the member variables.

String fullName;
String userId;
String password;
String eMail; 

The Outline view will show the variables. This view will most probably be on the bottom left hand corner of the screen. You will need to click its tab to view it.

In the Outline view, right click on the class name and select Source->Generate Getters and Setters. Click on the Select All button. Click on OK. System will add various getter and setter methods. This will complete the definition of the bean properties.

Now, we will add a logger object that will help us perform logging from our code. First, add the following import statement above the class declaration.

import java.util.logging.*;

Add this line of code to the class to create a Logger member variable:

Logger logger = Logger.getLogger("JSFWeb");

Finally, we need to write a method that will be invoked when the registration form is submitted. In JSF, such an event handler method takes no input parameter and must return an outcome string. The outcome string controls page navigation. Add the following method:

public String doRegistration() {
  logger.info("Full name: " + fullName);
  logger.info("User ID: " + userId);
  logger.info("Password: " + password);
  logger.info("E-mail: " + eMail);
 
  return "thankyou";
} 

The method simply prints out the user input and returns the "tankyou" outcome string. The managed bean development is done. Close the file.

Register the Managed Bean

We need to register the managed bean in the faces-config.xml file. You can do this by directly editing this file. RAD simplifies this through tools. However, this tool can be accessed only when a JSP file is open in the editor.

Open the register.jsp page in the editor. Locate and activate the Page Data view (see below). It should be in the bottom left hand corner of the screen.

Right click on Faces Managed Beans and select New->Faces Managed Bean.

Enter the following values:

Name: register
Class: com.webage.beans.RegistrationBean. Use the browse button next to the text box to search for the RegistrationBean class.
Make this JavaBean reusable: Checked.
Scope: request

Click on Finish.

To verify, that the managed bean got defined in the faces-config.xml file, open this file from the WebContent/WEB-INF folder. Using the Source tab, verify that the following lines exist:

register
com.webage.beans.RegistrationBean
request
 

Close the file.

Note: Although, a JSP file must be open in the editor to access the Page Data view and register the managed bean, system does not change the JSP file in any way. Only the faces-config.xml file is changed.

Associate the Managed Bean With the Form

Right now, the register.jsp page and the managed bean are not connected. We need connect them in the following way:

1. Various input text boxes need to be associated with the managed bean properties.
2. The event handler for the submit button needs to be set up to be the doRegistration method of the managed bean.

Open register.jsp if it is not already open. Make sure that you are in the Design view of the editor.

In the Page Data view, expand Faces Managed Bean. Expand the register managed bean. System will show all the bean properties.

First, we will associate the fullName property with the first input text box of the form. Drag the fullName property from the Page data view and drop it on the first text box in the JSP page editor.

System will show {fullName} within the text box to indicate the property that has been associated with it.

Similarly, associate the other properties with the rest of the text boxes.

Verify that the text boxes look like this.

Now, we will associate the doRegistration method of the bean with the submit button. Just like the properties, drag this method from the Page Data view and drop it on the submit button.

To see, how the source code of the JSP file looks like, switch to the Source view of the editor. For example, the submit button now looks like this.

action="#{register.doRegistration}">
   

Save changes.

Configure Navigation Rules

We need to define only one rule. When the doRegistration method returns "thankyou" as the outcome, the thanks.jsp page should be shown to the user. Navigation rules are defined in the faces-config.xml file. You can manually edit this file. Or, you can use RAD 7 tooling. The latter simplifies the process. However, in RAD7, navigation rules are defined as a property of a command button or a command link. Once again, this is just a bit strange. Navigation rules are neither stored in the JSP file nor do they have anything to with a submit button. Nevertheless, here we show you how to use the tool.

Open register.jsp in the editor. Make sure that you are in the Design view of the editor.

Select the Submit button. Activate the Properties view at the bottom of the screen to view the button's properties.

Make sure that the h:commandButton tab is select in the Properties view as shown above. On the right hand side of the property page, click on the Add Rule button to add a new rule. Enter the following values.

Go to the page: Page: thanks.jsp. Use the drop down instead of typing in the page name.
The outcome named: Choose the radio button. Then enter "thankyou" as the outcome.
This page only: Choose this radio button. This will make the rule local to register.jsp only.

Click on OK. The properties page of the submit button shows the rule as follows.

Again, note that, no change was made to register.jsp and it doesn't need to be saved. If you wish, open WEB-INF/faces-config.xml to see how the navigation rule is defined.

Our application is now complete. We will deploy it in the server and test it out.

Deploy in the Server

From the Servers view, start WebSphere v6.1 server. Wait for it to start.

Right click on the server and select Add and Remove Projects. Add JSFApp to the server. Click on Finish.

RAD is a flexible tool. It allows the same project to be deployed in multiple servers. However, when testing, it helps to pick a server as default. Right click on JSFWeb and select Properties. Choose the Server property. As Default server select WebSphere Application Server v6.1.

Click on OK.

Test the Application

In the Project Explorer view, right click on register.jsp and select Run As->Run on Server. system will open a web browser view and launch the URL: http://localhost:9080/JSFWeb/register.faces. Notice, how "faces" was used in place of "jsp" in the URL. System has also correctly used the "JSFWeb' context root in the URL.

Enter a few values in the form as shown below.

Click on the Submit button.

System will show the thank you page. In addition, the Console view will show the log outputs.

Solution

If you have any problem completing the tutorial, you can import the solution in RAD. The solution is made available in the project interchange format. Download the solution here. To import it, choose File->Import from the menu bar. Then expand Other and select Project Interchange. Click on Next and follow the wizard's instructions.

Conclusion

RAD7 is a productive tool for JSF application development. It shields us from working directly with the JSF tags and faces-config.xml file. This can speed up application development. In this tutorial, we covered the following aspects of JSF based application development:

1. How to configure the system for JSF development.
2. How to add a managed bean.
3. How to create JSP pages that use JSF tags.
4. How to define navigation rules.
5. How to deploy an application to the server and test it.