Building Applications with IBM Rational Application Developer and JavaBeans

A Guided Tour

MC Press

Contents

Creating your first JavaServer Faces Web application

Chapter Contents

* Introducing Web applications and JavaServer Faces

* Installing Rational Application Developer

* Setting up a Web project

* Creating the Web application

* Running the Web application

Time Required

* 2 hours

Files Required

* none

We begin our guided tour by introducing you to Web applications and JavaServer Faces (called JSF or Faces), followed by a simple example of how you can create Faces Web applications in Rational Application Developer. JSF provides a rich set of user interface (UI) components and a solid framework upon which to build Web applications, but as you'll see in this book, the power really lies in Rational Application Developer's tooling, which lets you visually build Web applications.

Introducing Web Applications and JavaServer Faces

Web applications reside on application servers such as WebSphere Application Server. These applications consist of one or more Web pages that users access through Web browsers, as shown in Figure 11.

Web applications typically contain a combination of static and dynamic content, such as text and images, and programs that run on the server or in the user's Web browser. When a user clicks a link or a button on a Web page, the request is sent to the server, which processes it and returns the response (which could be on the page already loaded or on a new page) to the user's Web browser. Web pages returned to the Web browser consist of tags, drawn from languages such as Hypertext Markup Language (HTML) or JavaScript, which the browser interprets into user elements on-screen.

As far as the user is concerned, what happens on the Web application server to process a request doesn't really matter so long as it's done quickly enough. From your perspective, however, what happens on the server and the steps needed to make it happen, including what needs to be done to develop Web pages, deploy them to servers, and maintain Web applications matters quite a bit, because it determines how easy your job is.

One technology frequently used to develop Web applications is a JavaServer Page (JSP). A JSP is a dynamic Web page that combines static HTML elements with Java code. The application server compiles and runs the JSP when a user requests the page via a Web browser, and it returns the resulting output to them. Because one of the problems with JSPs is their combination of presentation logic (HTML tags controlling the display of visual elements) with control logic (Java code performing dynamic processing), they can be difficult to maintain for large Web applications.

Faces Web pages are similar to JavaServer Pages, in that they combine HTML tags with Java code and are compiled and run on servers when users request Web pages. The chief distinction of JSF is that Web developers work with Faces UI components on the Web page rather than with HTML elements. This technique lets you create Web applications using Model-View-Controller (MVC) architecture, as is typical with client-server applications. The JSF framework acts as the controller managing the steps for processing the Web page, including validating, converting, and acting on data that users enter via the Web page. You define your Web application's data in an object model, bind the object model to Faces UI components on the Web page (creating viewable elements), and link actions with particular events, such as selection of links or buttons on the Web page.

The Faces UI components include common elements, such as input and output fields, check boxes, and buttons; but they also include more complex components, such as table grids that you can bind to a collection of data items or a database table. The components provide many useful built-in features: For example, you can customize components both to verify that users supply data in particular input fields and to automatically convert user data into various formats. JSF is readily extensible; you can build your own components that operate within the JSF framework. Other features let you easily control navigation from one Web page to another by specifying which page the user should be directed to when an action is successful or which other page when it fails. Each component also includes standard event listeners, such as an action listener for button clicks, that apply the processing logic associated with a particular event.

You define the object model for your Web application in JavaBeans, called managed beans, which the JSF framework manages automatically, deciding when to create beans, maintaining references to them, and removing references when beans are no longer needed. When a bean property is bound to a particular UI component, JSF automatically displays the property's current value in the Web page and sets the property with any newer user-entered value. Specifying the scope for a managed bean determines how long the bean will be available. For example, when you set the scope to "request," the bean is only available to the current Web page request, but when you set the scope to "session," the bean is available to all Web pages in the user's current session, letting you easily pass data from one Web page to another. Scope also tells the JSF framework what a bean's lifecycle should be.

As you'll see when you build the Faces Web applications in this book, Rational Application Developer handles most of your work for you. For each Faces Web page you create, the Page Designer tool creates a special Java class, called a PageCode class, containing that page's processing logic. The PageCode class sets up the context for the current request and gives you the appropriate points to insert the logic for your event listeners. You typically won't edit the PageCode class directly; instead, you'll use the Page Data view to identify the data objects associated with the Web page (such as the JavaBeans that define the application's object model), the Page Designer to create the view for your Web page, and the Quick Edit view to create event listeners.

In the rest of this chapter, we'll take you step-by-step through developing a simple Faces Web application, introducing some of the basic Faces UI components (text fields, radio buttons, check boxes, buttons, and so on) and familiarizing you with the Page Designer. The Web application you'll build consists of two Web pages: an HTML input form for a simple survey (shown in Figure 12) and a second Web page echoing the values entered in the input form. To pass data from one Web page to the other, you'll use a managed bean with "request" scope, binding the Faces UI components of your Web pages to properties in the managed bean.

Installing Rational Application Developer

In order to follow along with the steps in this book, you need to install IBM Rational Application Developer 7.0. If you don't already have a copy, you can download a free trial version at http://www.ibm.com/developerworks/downloads/r/rad. Follow the installation instructions bundled with the program, first installing the IBM Installation Manager, which you use to install, update, and uninstall product packages as well as manage product licenses. The instructions in this book assume that Rational Application Developer is installed in the default folders for shared resources and package groups.

After installing Rational Application Developer, make sure you use the IBM Installation Manager to install the latest product updates. You'll need Rational Application Developer 7.0.0.2 or later to properly use the samples in this book.

Setting up a Web Project

Before you can create your first Web application, you need to do some preparatory work in Rational Application Developer to specify where your Web application will be saved.

Rational Application Developer is organized into a variety of perspectives, or different ways of looking at a development project based on your role on the development team. In this book, you'll use the Web perspective to build Faces Web applications, and, later, you'll use the Java perspective to build Java applets and applications. Within the Web perspective, your Web applications are organized into projects and folders according to their content, such as package folders for Java classes. You can switch perspectives whenever you need to. Within a particular perspective, you'll also see a variety of different editors and views applicable to the work done within that perspective. Don't worry we'll explain how each of these works as we go along.

Starting Rational Application Developer

1. To start Rational Application Developer, select Start -> Programs IBM Software Development Platform -> IBM Rational Application Developer -> IBM Rational Application Developer. When you start Rational Application Developer, a window appears asking which folder you want to use for your workspace (the place where Rational Application Developer saves your work), as shown in Figure 13.

2. Leave the workspace name set to the default, and click OK. After a few seconds, Rational Application Developer's Welcome page appears. On the Welcome page, you can click the various icons to see an overview of the Rational Software Development Platform, what's new in the current version, or tutorials and samples that will teach you how to use the tool. We'll skip the Welcome information for now, but you can always come back to it by selecting Help -> Welcome from the Workbench menu.

3. Click the X on the Welcome pane tab to close it. The Workbench opens in the J2EE perspective. We'll use the Web perspective to work with Faces Web applications, so click the Open Perspective icon ([??]) in the toolbar tab along the top right of the Workbench, and select Web from the list of perspectives. If you don't see Web in the list, select Other ..., select Web in the Open Perspective window, and click OK. The Workbench should now look like Figure 14.

Notice that the Workbench is divided into several toolbars and work areas. Let's take a minute to get familiar with the layout before we continue.

The toolbar along the top right tab shows an icon for each perspective that's currently open, such as the Web perspective ([??]) currently appearing in the Workbench. You can have multiple perspectives open at any given time to switch from one to another, just select its icon. You can also customize this portion of the toolbar by moving it to the left edge of the window or removing the text descriptions now accompanying each icon. To customize, right-click anywhere in the toolbar tab and select the option you want from the context menu.

Along the top of the Workbench are a series of pull-down menus and a toolbar of common commands used to work within the particular perspective you are using. Because the menus and toolbar match the functions available in a given perspective and the editors being used, they will change as you switch from one perspective to another and work with different editors. The toolbar contains a subset of the actions available from the pull-down menus; you can customize it to add, reorganize, or remove toolbar actions according to your preferences.

The work areas within the Workbench are also tailored to the functions available in a given perspective and the editors and views being used. In the Web perspective, you will use the Project Explorer to navigate the various folders and files attached to your Web projects. When you open a file, the editor for its file type appears in the center of the Workbench. For example, the Java Editor appears when you are working with Java source files, and the Page Designer appears when you are working with Web pages. Any associated views appear in the other work areas, such as the Properties view and the Palette (which you'll use to build Faces Web pages). Selection tabs in each work area let you switch from one view to another for example, to select the Properties view to work with the attributes of the various Faces components within a Web page. You can move views from one work area to another if you prefer a different placement. If you ever find that you've customized a perspective more than you intended, you can always select Window -> Reset Perspective to restore the appearance of the current perspective to its original layout.

Creating the Project

Next, you'll use the Web perspective to create a new Web project to contain your Web application. You'll create the project as a Dynamic Web project that is, one that contains dynamic content, such as the Java code for your Web application. You'll also specify an EAR project (called an Enterprise Application) used for deploying and testing the Web project on an application server.

1. To create the project, select File New -> Dynamic Web Project in the Workbench menu.

2. Enter a project name of Survey. Notice that the project location is set to the default for your workspace (the directory specified when you first started Rational Application Developer).

3. Make sure the Add project to an EAR check box is checked, and enter SurveyEAR for the EAR project name.

4. Select WebSphere Application Server v6.1 for the target runtime, and select Faces Project for the configuration. These options specify that the Web pages in your project will run on WebSphere Application Server v6.1 (the Rational Application Developer Test Environment) and that the project will include the necessary class libraries to create Faces Web pages. The window should look like Figure 15.

5. Click Finish.

In the Project Explorer, click the plus (+) signs to expand the content of folders in your Survey and SurveyEAR projects, as shown in Figure 16.

Rational Application Developer automatically created a default folder structure for your projects and placed several control files in the folders. The project structure is organized according to the specifications for packaging J2EE applications. A Web project in which you place the actual content for your Web applications uses the standard structure for Web Archive (WAR) files, also called a Web module. An Enterprise project uses the standard structure for Enterprise Archive (EAR) files. When you create a Dynamic Web project, Rational Application Developer associates the Web project with an Enterprise project and places the Web project's WAR file in the Enterprise project's EAR file, which you can deploy to an application server.

You can associate multiple Web projects with a particular Enterprise project, combining related Web modules into one large J2EE application. Luckily, you don't have to remember all the details for WAR and EAR files, because Rational Application Developer does the packaging for you. Just place your Java source files in Java packages within the Java Resources: src folder, and put the content for your Web pages in the WebContent folder. Rational Application Developer automatically updates the necessary configuration and deployment information for you.

Creating the Web Application

The Survey application you'll build in this chapter consists of two Web pages: an input form, where the user enters their survey information, and a second Web page that echoes the values users enter. To pass data from one Web page to the other, you'll use a Faces managed bean with a "request" scope, binding the bean's properties to Faces UI components in the Web pages. This JavaBean will serve as the object model for your Web application. (In a real application, you'd save the survey information to a database of some sort, but we've saved database work until later in the book.)