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 1–1.

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...