Java Server Faces and IDEA 7

-          Damodar Chetty

-          January 20, 2007

 

Updated on Feb 11, 2008: Appendix added for Tomcat 5.5 and JSF 1.1.

 

In today’s article, I’m going to focus on setting up a simple JSF application in IDEA 7. Fortunately, most of the steps are the same as we encountered in the earlier discussion of setting up web applications using IDEA. I’ll highlight the differences as we go along.

 

Note that JSF 1.2 requires a container that implements JSP 2.1 and Java Servlet 2.5, such as Tomcat 6. If you intend to deploy to a previous version such as Tomcat 5.5, then see my comments in the Appendix to this article.

 

On the last step of the Create Project wizard, pick JSF 1.2, using the Sun reference implementation.

 

Clicking Finish drops you into a finished project.

 

As you can see in the deployment view, your WEB-INF\lib folder now shows the JARs required for your JSF implementation. In addition, your WEB-INF also contains an empty JSF faces-config.xml configuration file.

 

It is impressive how easy it is to setup a blank project that we can now modify. To get a better understanding of our new project, let’s begin by exploring the Project Settings tabs.

 

 

The first difference is the presence of the JSF facet attached to your module, which describes your selected JSF implementation.

 

The next difference is the presence of an entry in the Libraries tab that provides a collection of JARs that comprise the JSF implementation.

 

 

 

Your Web facet now has an entry that deploys the JSF libraries to WEB-INF\lib (using the JSF 1.2 library name).

 

In your Java EE Build settings, remember to pick Build on frame deactivation, to enable hot deploy support.

 

For today, our goal is to exercise JSF in terms of basic request processing, component creation, managed bean handling, and navigation. In other words, we’re going to do a quick skim over JSF’s capabilities.Our basic app will display a simple input text control that accepts your name, and returns a hello world message.

 

The default web.xml created for you defines a FacesServlet and maps it to all URLs that either end in .faces, or are referenced using /faces/*.

Step 1: index.jsp

This is the first page displayed when you access our web application using the URL http://localhost:8080/faces/index.jsp. This page declares the standard JSF core and HTML tag libraries, and displays a simple text box that you can type in your name. A submit button submits the form back to the FacesServlet. JSF Expression Language is used to bind the input text component to the name property of the appropriate managed bean.

 

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>

<!doctype html public “-//w3c//dtd html 4.0 transitional//en”>

<html>

  <head>

    <meta http-equiv=”Content-Type” content=”text/html;charset=iso-8859-1”>

    <title>Login</title>

  </head>

  <body>

    Say Hello.<br/><br/>

    <f:view>

      <h:form>

        <h:outputLabel for="userName">

          <h:outputText value="Enter your name"/>

        </h:outputLabel>

        <h:inputText id="userName" value="#{user.name}"/><br/>

        <h:commandButton action="submit" value="Say Hello"/>

      </h:form>

    </f:view>

  </body>

</html>

 

This is the rendered page:

Step 2: Hello.jsp

This is the destination page displayed after the Say Hello button is clicked on the initial page. In this page, we actually retrieve the value from the managed bean from the session.

 

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head><title>Simple jsp page</title></head>

<body>Helloooooo ${user.name}</body>

</html>

 

The page rendered is a very simple greeting:

 

 

Step 3: User.java

 

This is the backing bean for our form component. It’s a very simple JavaBean that exposes the name property.

 

package com.swengsol.user;

 

public class User {

private String name;

  public String getName() { return name; }

  public void setName(String newValue) { name = newValue; }

}

 

Step 4: Faces-Config.xml

Finally, we connect all the pieces together using the JSF configuration file. Note the declaration of the managed bean which places the User bean in session scope. Also note the navigation rule that defines that an outcome of  “submit”, as fired by the command button on the index.jsp file, will render the Hello.jsp page.

 

<?xml version='1.0' encoding='UTF-8'?>

<faces-config xmlns="http://java.sun.com/xml/ns/javaee"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"

version="1.2">

  <navigation-rule>

    <from-view-id>/index.jsp</from-view-id>

    <navigation-case>

      <from-outcome>submit</from-outcome>

      <to-view-id>/Hello.jsp</to-view-id>

    </navigation-case>

  </navigation-rule>

  <managed-bean>

    <managed-bean-name>user</managed-bean-name>

    <managed-bean-class>com.swengsol.user.User</managed-bean-class>

    <managed-bean-scope>session</managed-bean-scope>

  </managed-bean>

</faces-config>

Step 5: Create a Run/Debug configuration

Create a local Tomcat configuration as we saw before, but this time, specify the startup page as shown.

 

Make sure that you deploy the Web Facet in the Deployment tab, else you'll see an ugly red cross across your configuration.

 

That’s it! Now run the configuration and you’re good to go.

 

Appendix - Running JSF with Tomcat 5.5

I was queried by a reader who was receiving the following exception:

29.01.2008 12:44:19 org.apache.catalina.core.StandardContext listenerStart
SEVERE: Error configuring application listener of class com.sun.faces.config.ConfigureListener
java.lang.NoClassDefFoundError: javax/el/ExpressionFactory

 

If you see this error you're probably running this exercise under an older version of Tomcat. Note that  Tomcat 5.5 implements the Servlet 2.4 and JavaServer Pages 2.0 specifications. However, JSF 1.2 requires a container that implements JSP 2.1 and Java Servlet 2.5.

 

To get this tutorial running under a previous version of Tomcat, use the following steps:

 

Step A.1: Create a JSF 1.1 web project

When creating the new project, pick a JSF 1.1 implementation.

 

Your project's lib folder would then look like this:

Step A.2: Edit Hello.jsp

All other files will remain the same, except for Hello.jsp, which needs to be modified as:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>

<html>

<head>

  <title>Simple jsp page</title>

</head>

<body>Helloooooo

 <f:view>

   <h:outputText value="#{user.name}"/>!

 </f:view>

</body>

</html>

 

Step A.3: Set up a Run/Debug Configuration

Pick a 5.5 server in the Application Server field of your Run configuration:

 

That's it!

 

Note that another workaround may be to skip the JSP engine completely, and use Facelets for templating - searching the web should yield enough pointers on how to get started.

 

Good luck!