JSF 2, Maven, Tomcat 7 and Eclipse integration

This is the first article of a series of articles that I will dedicate to the JSF technology. In this series, I will implement a complete web application that shows how to integrate many frameworks: Primefaces, Prettyfaces, JasperReports, Freemarker, Hibernate etc...
But now we will begin by setting up a simple JSF2 project using Eclipse and Maven. Please notice that I suppose you already have Java 7, Eclipse Juno and Tomcat 7 installed on your machine.
Once you have all of these prepared, here are the steps to create a simple JSF 2, Maven enabled project:
  1) Install the m2eclipse plugin, you can find the path to install site here. (You can also use the Eclipse Marketplace from the Help menu).

  2) Once you finished the m2eclipse installation and restarted Eclipse, you can create new maven enabled projects: File->New->Other->Maven->Maven Project.

  3) Next you need to specify the project location. I let it with default values:

4) Now you need to choose an Archetype for your project which is "in short, Archetype is a Maven project templating toolkit" (introduction to Archetypes here). You should select the "maven-archetype-webapp" entry:

  5) Next you need to specify the Archetype parameters: Group Id and Artifact Id (here a link to maven naming conventions) and then press finish:

  6) Once the project created, we need to add some facets to it. Right click the project. Choose Properties. Then select "Project Faces". By default there is no facets for this project, so you should select: "Convert to faceted form...":

  7) Once converted, Eclipse show you a list of available facets. By default the Java facet should be selected. You need to verify the version to be used and select if not selected the 1.7 version. Also, select the Dynamic Web Module 3.0 facet, click Apply and then Ok:

  8) After adding these facets, Eclipse will automatically add some elements to your projects, like the "Java Resources" part. Also there is a folder named WebContent that is created, you should delete it.

  9) Now we need to add the Apache Tomcat 7 plugin to our project. So in the pom.xml file, ensure your build part looks like this:

    jsfsample2
    
  
      maven-compiler-plugin
      
          
          1.7
          1.7
      
      2.3.2
  
  
   org.apache.tomcat.maven
   tomcat7-maven-plugin
   2.0
  
 
 src/main/webapp/WEB-INF/classes
  

And now, just run it:

Right click the project -> Run -> Run Configurations -> Right click Maven Build -> New. For the base directory, click Browse Workspace and select our project from the list. In the goals input, give: tomcat7:run and click Apply and Close. Please use tomcat7:run instead of tomcat7:run-war (shown in picture). The latter Goal will require restarting Tomcat even when changing xhtml files.

By now everything is prepared, we only need to add some code and maven config to add JSF2 dependencies.

Implementation

For this first article of the JSF series, we will implement two simple pages: one as a login page and the other as the user home page that will display user profile.

1) Add JSF Maven dependencies

There are two dependencies to include in the pom.xml file (Project Object Model file under the project) for a JSF 2 application to run under Tomcat 7. We need also to configure the "maven-compiler-plugin" to use Java 7, so our pom.xml file should be like this:

  4.0.0
  com.raissi
  jsfsample1
  war
  0.0.1-SNAPSHOT
  jsfsample1 Maven Webapp
  http://maven.apache.org
  
    
      junit
      junit
      3.8.1
      test
    
    
    
  com.sun.faces
  jsf-api
  2.1.7
 
 
  com.sun.faces
  jsf-impl
  2.1.7
 
    
  
  
    jsfsample1
    
  
      maven-compiler-plugin
      
          1.7
          1.7
      
      2.3.2
  
 

src/main/webapp/WEB-INF/classes
  

Notice, that with every change in the pom.xml file, you need to right click the project -> Maven -> Update Project.

2) JSF implementation

Now that everything is in place, we should begin the implementation of our application. The first thing to do is to configure our deployment descriptor (web.xml file, under: src/main/webapp/WEB-INF). We need to declare the Faces Servlet (the servlet that will handle all user requests to jsf pages). So here is the result:

  First JSF Sample
  
  
    javax.faces.PROJECT_STAGE
    Development
  
  
  
    Faces Servlet
    javax.faces.webapp.FacesServlet
  
  
    Faces Servlet
    *.jsf
  
  
    index.jsp
  
  
  
  

Now, you add a faces-config.xml file, which will be just empty for now:

Now we can begin to implement our pages and Java classes. As we said previously, our first example will be a simple app that allows user login and profile display. So we need a User class that will represent a user. This is called a DTO: Data Transfer Object; it will handle data transferred between the layers of our application.  We also need a ManagedBean in which we will define our actions that will be called from xhtml pages (The View in the MVC2 Design Pattern). ManagedBeans also will contain data to be displayed in the View.
So here is the User class:

package com.raissi.entities;

import java.io.Serializable;

public class User implements Serializable{

 private static final long serialVersionUID = 3571343460175211199L;
 
 private String login;
 private String password;
 private String firstName;
 private String lastName;
 
 public User(String login, String password, String firstName, String lastName) {
  super();
  this.login = login;
  this.password = password;
  this.firstName = firstName;
  this.lastName = lastName;
 }
 
 public String getLogin() {
  return login;
 }
 public void setLogin(String login) {
  this.login = login;
 }
 public String getPassword() {
  return password;
 }
 public void setPassword(String password) {
  this.password = password;
 }
 public String getFirstName() {
  return firstName;
 }
 public void setFirstName(String firstName) {
  this.firstName = firstName;
 }
 public String getLastName() {
  return lastName;
 }
 public void setLastName(String lastName) {
  this.lastName = lastName;
 }
 
}

You can see that it is a simple class to represent user entities. It will be used to transfer data between different layers (business, persistence, presentation) in Model part of the application. Remember that JSF is a MVC2 technology.
And here the UserManagedBean:

package com.raissi.managedbeans;

import java.io.Serializable;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

import com.raissi.entities.User;

@ManagedBean(name="userManagedBean")
@SessionScoped
public class UserManagedBean implements Serializable{

 private static final long serialVersionUID = 152717293232892353L;
 private static final String HOME_PAGE="home?faces-redirect=true";
 private User user;
 private String userLogin;
 private String password;
 
 public String login(){
  if(userLogin != null && password != null){
   return someLoginMethod();
  }
  return "login?faces-redirect=true";
 }
 
 private String someLoginMethod(){
  if(userLogin.equals("tom") && password.equals("tom")){
   user = new User(userLogin, password, "Tom", "Hanks");
   return HOME_PAGE;
  }else if(userLogin.equals("forrest") && password.equals("forrest")){
   user = new User(userLogin, password, "Forrest", "Gump");
   return HOME_PAGE;
  }
  return "login?faces-redirect=true";
 }

 public User getUser() {
  return user;
 }

 public void setUser(User user) {
  this.user = user;
 }

 public String getUserLogin() {
  return userLogin;
 }

 public void setUserLogin(String userLogin) {
  this.userLogin = userLogin;
 }

 public String getPassword() {
  return password;
 }

 public void setPassword(String password) {
  this.password = password;
 } 
}

The UserManagedBean contains two String properties (userLogin and password). They will be filled with user input in the login page. This class contains also a User property, it will be constructed based on what credentials are submitted when the login() method (action) is called. Basically, this method will make a call to a business class that will fetch user from a database or another persistent data via the DAO layer. For now, we just use an internal method that only accept two login values, tom and forrest.
With JSF 2 also, we can just specify the name of the view to which we want to redirect user as a return of our actions. No need to define our mappings in faces-config.
Now we provide the xhtml pages that are responsible for the View part in our application. Notice that JSP technology is replaced with Facelets in JSF (especially JSF 2).
The login.xhtml page: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html 
xmlns:f="http://java.sun.com/jsf/core" 
xmlns:h="http://java.sun.com/jsf/html" 
xmlns="http://www.w3.org/1999/xhtml">
 
    
        
        
    
    
     

Please enter your credentials: tom/tom or forrest/forrest

        
        
    
    
     
     
     
    
   
    
    
     
     
    
    
   
        
        
     
    

</html>

In this page we define two inputs, one for the login and one for the password. We also define a button and the corresponding action to be called when it's pressed. In the UserManagedBean#login() method we decided that user will be redirected to the home view if login is successful. For now, this page will just display a welcome message to the user, displaying his full name:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html 
xmlns:f="http://java.sun.com/jsf/core" 
xmlns:h="http://java.sun.com/jsf/html" 
xmlns="http://www.w3.org/1999/xhtml">
 
    
        
    
    
    
     Welcome home dear 
    
    
     Dear guest, you are not allowed to see this content
    
    
</html>

In the home page (home.xhtml), notice that we used the rendered attribute of panelGrid. This attribute is used to display (render) components based on particular conditions. These conditions here are whether the user property in UserManagedBean is empty or not. In other word, do we have a loggedin user or not.
Finally, you should have noticed that in our web.xml descriptor we defined an index.jsp page as welcome file. This will be a simple page, that just redirect user to login page. Here is the index.jsp page to be placed under: src/main/webapp

<% response.sendRedirect("pages/login.jsf"); %>

Notice the .jsf extension used to call the login view. In fact, we declared the Faces Servlet (in web.xml) to handle only requests to .jsf views. If a user calls a page with .xhtml extension, then, JSF components won't be rendered.
The final structure of our eclipse project is as in the picture:

If you want to load JS/CSS/Images with JSF components (as we did in login.xhtml page with the style.css file), then you should place those resources under: main/webapp/resources directory.
Now you want to test the application. Right click the project -> Run As -> (Select the name you gave to the Run Configuration explained when adding the project to Tomcat 7: step 9 in configuration part).
Finally, if you followed this tutorial literally you can call the login page via this URL: http://localhost:8080/jsfsample1/pages/login.jsf

Conclusion

In this introductory article, we saw how to create a JSF2 maven based project with Eclipse, and how to run it using a Run Configuration with Tomcat7.

In next part of this JSF series, we will integrate Primefaces and Prettyfaces libraries to our application.