JSF Part 1: Primefaces and Maven

This blog illustrates how to configure and develop a JSF application with primefaces. We shall see primeface's dataTable component and dark-hive theme in action.

Step 1
Download and Install JDK 1.6, Maven and your favorite web application container(tomcat,jboss,glassfish)

Step 2
Create a maven application with archetype "maven-archetype-webapp". Ask Google if you need help running this archetype.

Step 3
Add maven repositories for Java Web and Primefaces (see pom.xml preview below)

Step 4
Add maven dependencies for servlet, jsp, jstl, jsf and primefaces (see pom.xml preview below)

pom.xml

   .
   .
<repositories>
    <repository>
        <id>jboss</id>
        <name>JBoss Maven Repository</name>
        <url>https://repository.jboss.org/nexus/content/groups/public/</url>
    </repository>
    <repository>
        <id>primefaces-repo</id>
        <name>Prime Technology Maven Repository</name>
        <url>http://repository.prime.com.tr</url>
        <layout>default</layout>
    </repository>
</repositories>

<dependencies>
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>servlet-api</artifactId>
        <version>2.5</version>
    </dependency>
    <dependency>
        <groupId>javax.servlet.jsp</groupId>
        <artifactId>jsp-api</artifactId>
        <version>2.0</version>
    </dependency>
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>jstl</artifactId>
        <version>1.2</version>
    </dependency>
    <dependency>
        <groupId>com.sun.faces</groupId>
        <artifactId>jsf-api</artifactId>
        <version>2.0.3</version>
    </dependency>
    <dependency>
        <groupId>com.sun.faces</groupId>
        <artifactId>jsf-impl</artifactId>
        <version>2.0.3</version>
    </dependency>
    <dependency>
        <groupId>org.primefaces</groupId>
        <artifactId>primefaces</artifactId>
        <version>2.2</version>
    </dependency>
    <dependency>
        <groupId>org.primefaces.themes</groupId>
        <artifactId>dark-hive</artifactId>
        <version>1.0.1</version>
    </dependency>
</dependencies>
   .
   .

Step 5
Add JSF and Primefaces configuration in web application configuration

web.xml

   .
   .
<context-param>
    <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
    <param-value>server</param-value>
</context-param>
<context-param>
    <param-name>javax.faces.DEFAULT_SUFFIX</param-name>
    <param-value>.xhtml</param-value>
</context-param>
<context-param>
    <param-name>facelets.DEVELOPMENT</param-name>
    <param-value>true</param-value>
</context-param>
<context-param>
    <param-name>com.sun.faces.validateXml</param-name>
    <param-value>true</param-value>
</context-param>
<context-param>
    <param-name>primefaces.THEME</param-name>
    <param-value>dark-hive</param-value>
</context-param>
<servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
</servlet>
<servlet>
    <servlet-name>Resource Servlet</servlet-name>
    <servlet-class>org.primefaces.resource.ResourceServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<servlet-mapping>
    <servlet-name>Resource Servlet</servlet-name>
    <url-pattern>/primefaces_resource/*</url-pattern>
</servlet-mapping>
   .
   .

  
Step 6
Develop Employee Pojo and Employee Service classes

Employee.java

public class Employee {
    private String id;
    private String name;
    private String dept;

    // add getter and setter methods
}

EmployeeService.java

public class EmployeeService {
    // return list of all employees
    public List<Employee> getAllEmployees() {    
    .
    }
}

Step 7
Develop Employee bean class(with annotation) for our view

EmployeeBean.java

@ManagedBean
public class EmployeeBean {
    private EmployeeService employeeService = new EmployeeService();
    
    public List<Employee> getEmployees() {
        return employeeService.getAllEmployees();
    }
}

Step 8
Develop xhtml page to view all employees in a datatable

results.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.prime.com.tr/ui">

<h:head>
    <title>Employees</title>
</h:head>
<h:body>
    <h:form prependId="false">
        <p:dataTable value="#{employeeBean.employees}" var="emp">
            <f:facet name="header">
                <h:outputText value="Employees" />
            </f:facet>
            <p:column>
                <f:facet name="header">
                    <h:outputText value="Id" />
                </f:facet>
                <h:outputText value="#{emp.id}" />
            </p:column>
            <p:column>
                <f:facet name="header">
                    <h:outputText value="Name" />
                </f:facet>
                <h:outputText value="#{emp.name}" />
            </p:column>
            <p:column>
                <f:facet name="header">
                    <h:outputText value="Dept" />
                </f:facet>
                <h:outputText value="#{emp.dept}" />
            </p:column>
        </p:dataTable>
    </h:form>
</h:body>
</html>

Step 9
Run the application in your webapp container and test it using the following URL

http://localhost:<Port>/<WebAppContext>/faces/results.xhtml

Download Project
You can download my project from google code. SVN URL is http://ingenious-camel.googlecode.com/svn/trunk/JSF1PrimeFacesMaven/