According to the PrimeFaces website, “PrimeFaces is an open source component suite for Java Server Faces featuring 70+ Ajax powered rich set of JSF components. Additional TouchFaces module features a UI kit for developing mobile web applications.“. Since it is an OpenSource JSF implementation that is very close to releasing JSF 2.0 compliant components, I figured it was time to try it out on GlassFish v3.

A very easy and powerful way of creating Java EE 6 compliant applications, is to use NetBeans 6.8, which comes with great GlassFish v3 and Maven support. The first thing to do is to create a new Maven Web Application. The wizard that helps you create it allows you to specify the Java EE version, which in this case should be 6. In order to make sure the PrimeFaces libraries are included in your project, add the next dependency to your pom.xml file

<dependency>
 <groupId>org.primefaces</groupId>
 <artifactId>primefaces</artifactId>
 <version>2.0.0.RC</version>
</dependency>

Since the PrimeFaces jars are hosted on the PrimeFaces Maven repository, you’ll need to add the repository as well:

<repository>
 <id>prime-repo</id>
 <name>Prime Technology Maven Repository</name>
 <url>http://repository.prime.com.tr/</url>
 <layout>default</layout>
</repository>

PrimeFaces makes use of a servlet to get hold of resources, like css and JavaScript. Therefore, you need to register the Resource Servlet in web.xml like this

<servlet>
 <servlet-name>Resource Servlet</servlet-name>
 <servlet-class>org.primefaces.resource.ResourceServlet</servlet-class>
</servlet>
<servlet-mapping>
 <servlet-name>Resource Servlet</servlet-name>
 <url-pattern>/primefaces_resource/*</url-pattern>
</servlet-mapping>

A split pane

A simple index.xhtml file with a split pane may then look like this

<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:p="http://primefaces.prime.com.tr/ui">
  <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
   <title>PrimeFaces Test</title>
   <p:resources />
  </head>
  <body>
   <p>
    <p:layout style="width:400px;height:200px;">
     <p:layoutUnit position="west" size="100">Left Pane</p:layoutUnit>
     <p:layoutUnit position="center">Right Pane</p:layoutUnit>
    </p:layout>
   </p>
  </body>
 </html>

which looks like this

The left bar is the one being dragged by the mouse.

File upload

Another nice PrimeFaces component is the fileUpload component. It supports single and multiple file uploads. To be able to use the fileUpload component, a few Apache Commons dependencies need to be added:

<dependency>
 <groupId>commons-fileupload</groupId>
 <artifactId>commons-fileupload</artifactId>
 <version>1.2.1</version>
</dependency>
<dependency>
 <groupId>org.apache.commons</groupId>
 <artifactId>commons-io</artifactId>
 <version>1.3.2</version>
</dependency>

Next, a filter needs to be added to web.xml and the JavaServer Faces state saving method should be set to server. So, add these lines to web.xml

<context-param>
 <param-name>javax.faces.PROJECT_STAGE</param-name>
 <param-value>Development</param-value>
</context-param>
<context-param>
 <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
 <param-value>server</param-value>
</context-param>
<filter>
 <filter-name>PrimeFaces FileUpload Filter</filter-name>
 <filter-class>org.primefaces.webapp.filter.FileUploadFilter</filter-class>
 <init-param>
  <param-name>thresholdSize</param-name>
  <param-value>51200</param-value>
 </init-param>
 <init-param>
  <param-name>uploadDirectory</param-name>
  <param-value>/tmp</param-value>
 </init-param>
</filter>
<filter-mapping>
 <filter-name>PrimeFaces FileUpload Filter</filter-name>
 <servlet-name>Faces Servlet</servlet-name>
</filter-mapping>

Then a JSF ManagedBean is needed to handle the file uploads. A very simple one, that doesn’t do anything with the uploaded files at all, may look like this

@ManagedBean(name = "fileUploadController")
@RequestScoped
public class FileUploadController implements FileUploadListener {
 @Override
 public void processFileUpload(FileUploadEvent event) throws AbortProcessingException {
  System.out.println("Uploaded: " + event.getFile().getFileName());
  FacesMessage msg = new FacesMessage("Succesful", event.getFile().getFileName() + " is uploaded.");
  FacesContext.getCurrentInstance().addMessage(null, msg);
 }
}

Finally, change index.xhtml to this

<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:p="http://primefaces.prime.com.tr/ui">
  <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
   <title>PrimeFaces Test</title>
   <p:resources />
  </head>
  <body>
   <p>
    <h:form id="form" enctype="multipart/form-data" prependId="false">
     <p:growl id="messages" />
     <p:layout style="width:400px;height:200px;">
      <p:layoutUnit position="west" size="100">Left Pane</p:layoutUnit>
      <p:layoutUnit position="center">Right Pane</p:layoutUnit>
     </p:layout>
     <p:fileUpload fileUploadListener="#{fileUploadController.processFileUpload}" id="documentToUpload"
                   allowTypes="*.jpg;*.png;*.gif;" description="Images" update="messages"/>
    </h:form>
   </p>
  </body>
 </html>

Redeploy and the result looks like this

Conclusion

It is quite easy to get started with PrimeFaces using Maven and GlassFish. Please bear in mind that the fileUpload component is quite picky concerning the order in which the filters are specified in web.xml in case there is more than one. Please see this forum thread for more info.

In case you’re having troubles following the instructions in this blog, here is my NetBeans project. Since it is a Maven project you should be able to open it in Eclipse or any other IDE.