The First Time Ever I Saw Your Face: Getting Started with JavaServer Faces
Over the years, there have been many frameworks for developing Web-based applications. First came servlets and JSP, but these technologies left a lot of work for developers to build from the ground up each time they built an application.
Apache Struts attempted to address this problem by providing lots of out-of-the-box functionality that could be easily configured, including page navigation, internationalization, and predefined hooks for connecting business logic to the user interface. Although this gave developers a leg up on raw servlets or JSP development, there was still room for improvement.
Now, JavaServer Faces improves on Struts by providing even more pre-built, reusable functionality to developers, including improved navigation functionality, internationalization support, forms input validation, data conversion, and perhaps most powerful of all, a true model-view-controller design for creating web-based applications. Here, I will explore the many features of JSF by developing a small application that takes advantage of what this framework has to offer.
What Is JSF?
JSF is a community-based development effort to bring true model-view-controller design to web-based applications. This new framework provides standard, reusable components for building a web page, built-in support for internationalization, built-in hooks for forms input validation and data conversion, and a standard method for linking client-side events to server-side application processing.
According to the Java Community Process site for JSF, which can be found at http://www.jcp.org/en/jsr/detail?id=127, the goals of JSF are as follows:
- Create a standard GUI component framework which can be leveraged by development tools to make it easier for tool users to both create high quality GUIs and manage the GUI's connections to application behavior.
- Define a set of simple lightweight Java base classes for GUI components, component state, and input events. These classes will address GUI lifecycle issues, notably managing a component's persistent state for the lifetime of its page.
- Provide a set of common GUI components, including the standard HTML form input elements. These components will be derived from the simple set of base classes that can be used to define new components.
- Provide a JavaBeans model for dispatching events from client-side GUI controls to server-side application behavior.
- Define APIs for input validation, including support for client-side validation.
- Specify a model for internationalization and localization of the GUI.
- Automatic generation of appropriate output for the target client, taking into account all available client configuration data, such as browser version, and so forth.
- Automatic Generation of output containing required hooks for supporting accessibility, as defined by WAI.
In a nutshell, JSF provides everything you need to render a client-appropriate UI to the user, get and validate the user's input, and connect the UI to the server-side processes that make up the application.
Tools of the Trade
To get started writing a JSF application, you will need to download an implementation of the JSF specification. An easy way to get one is to grab a copy of Sun's J2EE 1.4 application server. This server can be downloaded at http://java.sun.com/j2ee/1.4/download.html. You also can download the Apache MyFaces implementation at http://myfaces.apache.org/ and install it on your own particular application server instance.
The Hangman Application
Now, it's time to get started with JSF!
The application you'll develop is a word game called Hangman. In this game, a player is presented with a word puzzle, shown as blanks to be filled in. The player guesses a letter, and if it is correct, the letter is shown in the puzzle.
Each time the player guesses incorrectly, a message indicates that the letter is not in the puzzle. If the player guesses too many times, the game ends, the answer to the puzzle is revealed, and the player has a chance to play again.
The player can try to solve the puzzle any time during the game. If the player guesses the puzzle correctly, he wins, and has a chance to play a new game. If the guess is incorrect, it does not count against the number of guesses used.
The steps for developing any JSF application are:
- Develop the application pages using JSF components.
- Define page navigation in the jsf-config.xml file.
- Develop the Java beans for the business logic.
- Add forms validation to the application.
In the following sections, I'll tell you about various important points about each of these steps. When you're done, you'll have a fully functioning word game.
The faces-config.xml File
Before you jump into developing the application, you must create a faces-config.xml file. Every JSF application must have a faces-config.xml file in which security policies, business logic bean definitions, validation classes, conversion classes, and navigation rules for the application are defined. This file must be present in the WEB-INF directory of the application, along with web.xml, to begin development. I'll show you all of the parts of this file in detail later. A complete listing of the faces-config.xml file is available here.
Creating the User Interface
The application needs pages to perform the following functions:
- newGame.jsp: The first page of the application. This page will allow the player to enter his name, choose a difficulty level, and start the game.
- showPuzzle.jsp: This page is where the puzzle is shown and the player has a chance to guess a letter or solve the puzzle. If the player correctly guesses a letter, it is shown in the puzzle. If not, a message will tell the user that the letter was not in the puzzle, or that the letter was already guessed.
- youWin.jsp: On this page, the player receives a congratulatory message for solving the puzzle, and a link is shown to get back to the new game page.
- youLose.jsp: On this page, the answer to the puzzle is shown, and a link is shown to get back to the new game page.
- index.jsp: This page is the default page that comes up whenever a player visits the default application URL, http://localhost:8080/hangman/. It will automatically forward the player to the newGame.jsp page.
To develop the JSP pages that make up the application, you'll use the standard components that are available in JavaServer Faces. These are analogous to the normal HTML tags for form rendering and user input.