So we know JSP is great for the presentation layer; but JavaServer Faces (JSF) makes it even easier. According to the "source" (Sun), JSF "offers a clean separation between behavior and presentation." Web applications built using JSF technology can "map HTTP requests to component-specific event handling and manage UI elements as stateful objects on the server." JavaServer Faces technology provides a rich architecture for managing component state, processing component data, validating user input, and handling events.
This example shows how to add JSF functionality to a JSP-based web application (manually). The application simply requests some user information (name, email, zip code), and displays it in the ensuing page upon submission (source code has samples of the plain JSPs). The example is done in NetBeans 5.5 (with SJSAS u9). The application server already supports JSF (reference implementation), so there's no need to add libraries and such. This example simply "activates" the JSF framework.
CREATE A JSF CONFIGURATION FILE
The faces-config.xml file defines the JavaBean as it'll be used in JSF pages, as well as introduce navigation rules (which page gets displayed when a link or button is clicked). Here's how it's done in NetBeans 5.5:
- Right-click the web application | New -> File/Folder -> XML -> XML Document [Next].
- Filename = faces-config; Folder = (browse) -> Web Pages -> WEB-INF [Next].
- Select DTD-Constrained Document [Next].
- Select DTD Public ID: "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN". DTD System ID: "http://java.sun.com/dtd/web-facesconfig_1_1.dtd". Document Root: "faces-config". [Finish].
= The configuration file is created in the appropriate location (WEB-INF).
CREATE THE MANAGED BEAN
- Next, create a JavaBean that will represent the data we will be gathering. The bean has the three properties (name, email, zip code), along with the appropriate setter/getter methods.
- New -> File/Folder -> Web -> JSF Managed Bean [Next].
- Class name: UserInfo. Package: beans. [Finish].
- In the class source, enter the bean properties as String variables.
- Right-click the source code and select Refactor -> Encapsulate Fields .... The wizard allows you to give the properties private access and to create setters/getters JavaBeans-style.
DEFINE THE NAVIGATION CASES
Navigation rules specify what page is displayed when the [Submit] button is clicked in the information request page, and where we do when the return link in the display page is displayed.
- Right-click the source of faces-config.xml and select JavaServer Faces -> Create Navigation Cases ...
- From view: /index.jsp. From action: submit. To view: /showinfo.jsp. Redirect: yes. This rule says that when we click the submit button in index.jsp, then showinfo.jsp will be displayed.
- Repeat for the return command: From view: /showinfo.jsp. From action: return. To view: /index.jsp. Redirect: yes.
MODIFY THE REQUEST AND DISPLAY JSP PAGES
The page index.jsp now needs to be rewitten with JSF markup. Basically, you import a couple of tag libraries (HTML and JSF core) and specify the form and view. Components (the input fields of the form) are connected to the JavaBean. The submit button is assigned an action. (see source).
- No longer need form tag attributes action and method, nor do we need parameter names for the input fields of the form. That's only the beginning of making things simpler.
- Everything inside the html tag gets additionally enclosed in a f:view tag.
- A form is enclosed in a h:form tag.
- index.jsp shows how to use h:inputText to connect the input fields the bean properties (set). It also shows how to use h:commandButton and set its action.
- showinfo.jsp shows how to read these properties and use h:commandLink.
UPDATE THE WEB DESCRIPTOR FILE
- So that web.xml defines the JSF configuration file and JSF default servlet.
You can access your now-JSF application by calling "index.faces" insteads of index.jsp.
[Source Code].
