Skip to main content

Getting started with PrimeFaces on GlassFish v3

Posted by wvreeven on January 7, 2010 at 5:35 AM PST

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.

This entry was originally posted on the AMIS Technology Blog.

AttachmentSize
primefaces_split_pane.png2.52 KB
primefaces_fileUpload_1.png4.39 KB
primefaces_fileUpload_2.png6.82 KB
primefaces_fileUpload_3.png9.12 KB
PrimeFacesTest.zip8.07 KB

Comments

<p>&nbsp;&nbsp;hello;</p> <p style="margin-top: 0px; ...

hello;
thanks for your interesting tutoriel, but my problem is that i can't define the attribute size for my <p:layoutUnit> tag.
it displays this error: "The attribute size is not defined in the component's interface".
so how i can define the size?
my best regards

Problems right out of the gate...

Hi Wouter, A few things when trying to follow this tutorial. 1) Creating a project out of Netbeans 6.8 using the Maven Web Application archetype produces no WEB-INF directory or a containing web.xml file. What web.xml file am I to update? 2) Your instructions for updating mappings in the web.xml (comparing to your completed project) would seem to be incomplete. 3) Finally, even after grabbing your project code and deploying it (no compile issues) server is complaining about a 404 issue. I'm using NB 6.8 with released GF 3 domain.

Exception on startup

After a successful build of PrimeFacesTest in NeBeans v. 6.7.1, the following error was raised when I ran it: "INFO: Initializing Mojarra (1.2_10-b01-FCS) for context '/PrimeFacesTest' SEVERE: WebModule[/PrimeFacesTest]PWC1275: Exception sending context initialized event to listener instance of class com.sun.faces.config.ConfigureListener com.sun.faces.config.ConfigurationException: CONFIGURATION FAILED! cvc-enumeration-valid: Value '2.0' is not facet-valid with respect to enumeration '[1.2]'. It must be a value from the enumeration. at com.sun.faces.config.ConfigManager.initialize(ConfigManager.java:213)" I didn't find this issue discussed on the PrimeFaces Forum. Is it necessary to build your project in NetBeans v. 6.8? I have Maven 2.2.1 and GlassFish v3 Prelude installed. In the browser, for context /PrimeFacesTest, I get HTTP 503 error: "The requested service ( ) is not currently available."

You need to install the

You need to install the GlassFish v3 plugin and GlassFish v3 to be able to use JSF 2.0 in NetBeans 6.71. Even better: please download NetBeans 6.8 and use that :-)

 

HTH, Wouter