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.
hello,
I need some advice on using primefaces on a web app,my boss insists that i make the components in the backing bean and bind them to components in the jsp page but i cant find much support for doing that in prime faces.I need advice on which method is better binding components to instances of d components in the backing bean or making them in the jsp page itself
I’ll add this to external articles wiki of PrimeFaces. By the way upcoming 2.0.0. version enhances resource management with JSF 2.0 APIs. Sounds superb idea, thanks and keep on posting!
visit this site please <a href=”http://www.blindsale.co.uk/”>Blinds</a>
Â
Can you show the import for the FileUploadListener?
NetBeans can’t find it. PrimeFaces2.2.1 and NetBeans7.0.1
Hi , i am using primefaces +jsf+spring  webflow ….But sadly file upload is not working please tell me the what problem…..listener is not fired…
Hi,
When ever I ‘m trying layout component I’m getting “UI layout initialization error” and also It says ” The center pane element is does not exist.The center pane is required element”
Thanks
Hi.. Wouter,, thanks for the great article, I’ll add this to external articles wiki of PrimeFaces. By the way upcoming 2.0.0. version enhances resource management with JSF 2.0 APIs. p:resources is not necessary and Resource Servlet is auto registered with GlassFish so it is zero configuration.
It is certainly a teasing introduction to PrimeFaces. Do you have any experiences in combining PrimeFaces with other JSF component libraries – JBoss RichFaces, Trinidad, ADF Faces?
Blessed, correct name of the servlet is org.primefaces.resource.ResourceServlet
Eye catching write-up. I am in the process of integrating prime faces into an eshop app I am working on. I ran into an error message saying org.primefaces.ui.resource.ResourceServlet cannot be found. I looked into the jar in my meaven repo and could not see it either. There are only two property files in the org.primefaces.ui. Am I missing something here? I am actually using maven, Spring, JPA, tomcat, jsf 2.0 mojarra. Is the jar incomplete?
I’ve used PrimeFaces with other component libraries such as RichFaces, IceFaces and etc. it plays along well with othe frameworks but after doing some work I saw that I don’t need RF and IF at all, dumped them all and moved on my way with PF. It’s really rapid RIA when it comes to development with PrimeFaces.
To be honest, I never heard of PrimeFaces till a few weeks ago. I don’t have any experience with it. However, PrimeFaces has quite a few interesting components and that’s why I started to try it out.
Very interesting article Wouter. It is certainly a teasing introduction to PrimeFaces. Do you have any experiences in combining PrimeFaces with other JSF component libraries – JBoss RichFaces, Trinidad, ADF Faces?
Thanks for adding this article to the external articles wiki of PrimeFaces. I tried PrimaFaces with zero config but it doesn’t work yet. Any idea when we may expect this?
Hi Wouter, thanks for the great article, I’ll add this to external articles wiki of PrimeFaces. By the way upcoming 2.0.0 version enhances resource management with JSF 2.0 APIs. p:resources is not necessary and Resource Servlet is auto registered with GlassFish so it is zero configuration. 🙂
Thanks for your tip. Readers of this post should note that Matthias says in his blog entry that the debate about whether or not to use the @ManagedBean annotation is still going on. However, I do see the benefits of using CDI instead, especially more extended scopes and the EL support.
Hello,
a little tip. Don’t use the @ManagedBean annotation. Go for CDI:
http://matthiaswessendorf.wordpress.com/2009/12/30/jsf-2-and-cdi-a-nice-combo/