Introduction
This tutorial shows how to setup Primefaces component suite for a JSF or a Facelets project along with Richfaces in Netbeans6.x. Furthermore, you can learn how to make a hello world application using Primefaces in JSF. First let me give a small intro about Primefaces, which is an open source component suite for Java Server Faces and contains so many obliging features. At first Primefaces is a light weight component that contains more than seventy ajax powered JSF components with rich look and feel. In addition it has TouchFaces module features which is a UI kit used for developing mobile web applications. Also the most important thing is Primefaces is compatable with other components libraries like Richfaces, even the ajax integration part can be attained without any conflicts. Thats ok!! Now let us come to the point this article explains the configuration features of Primefaces with Netbeans6.x.
Prerequisites
- IDE – Netbeans 6.x
- Tomcat 6.x/Glassfish/Jboss
- JDK 1.5 and above
I assume you have all the prerequisites which I had mention above. Now let us move to the Configuration part of primefaces with Netbeans6.x which can be accomplished by five easy steps,
Step1(Setup the project)
In Step1, let us see how to set up a JSF web project in Netbeans6.x. Select File —> Newproject —> Choose category as Java Web and select Web Application in Projects and click next —> Give your desired name for the project and click next —> Choose your server and the JavaEE Version and click next —> Select Java ServerFaces check box for the JSF project or Facelets checkbox for the Facelets project in the Framework. Now we had created a web project and next we can move to the second step.
Step2(Library Configurations)
In step two, Let us see how to configure the required libraries for the Primefaces, Downloading Primefaces binaries can be done by two options. Manual Download(Option1), we need to manually download all the required libraries of Primefaces. Alternatively, you may use Maven if you are a Maven user(Option2), Good news for you because maven itself automatically download the required binaries of Primefaces.
Manual Download(Option1)
Download and ensure that your projects WEB-INF/lib directory contains the below jar files inorder to use Primefaces library together with Richfaces in a JSF project and for Facelets projects add necessary jar files, the link JSF+Facelets+Richfaces Installation Guide would be helpful to do so. You can also download the latest Primefaces jar files from the PrimeFaces google code project site.
- primefaces-ui-0.9.3.jar
- optimus0.8.0.jar
- facestrace1.1.0.jar
- commons-beanutils.jar
- commons-collections.jar
- commons-digester.jar
- commons-logging.jar
- jsf-api.jar
- jsf-impl.jar
- jstl.jar
- commons-discovery-0.4.jar
- commons-codec-1.4.jar
- slf4j-api-1.5.8.jar
- slf4j-simple-1.5.8.jar
- guice-2.0.jar
- richfaces-api-3.3.1.GA.jar
- richfaces-impl-3.3.1.GA.jar
- richfaces-ui-3.3.1.GA.jar
Note: optimus0.8.0.jar and facestrace1.1.0.jar is requirement optional and it doest not required to make the UI components work.
Maven(Option2)
I am not aware of using maven practically, but theoretically I have passed through maven. I like it because it contains good features for managing the libraries. I got this resource from the download section of Primefaces. The following repository definition should be added in repositories section of pom.xml file .
<repository> <id>prime-repository</id> <name>Prime Technology Maven Repository</name> <url>http://repository.prime.com.tr/</url> <layout>default</layout> </repository>
Add the dependency configuration for the user interface components like the below example
<dependency> <groupId>org.primefaces</groupId> <artifactId>primefaces-ui</artifactId> <version>0.9.3</version> </dependency>
I hope you had configured the libraries either by following option1 or option2. If so stay tuned, now let us move to the next step.
Step3(web.xml configuration)
In step3, let us configure the web.xml for the Primefaces.
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"></pre> <context-param> <param-name>com.sun.faces.verifyObjects</param-name> <param-value>false</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>javax.faces.STATE_SAVING_METHOD</param-name> <param-value>client</param-value> </context-param> <!--Configuration for Richfaces--> <filter> <display-name>RichFaces Filter</display-name> <filter-name>richfaces</filter-name> <filter-class>org.ajax4jsf.Filter</filter-class> </filter> <filter-mapping> <filter-name>richfaces</filter-name> <servlet-name>Faces Servlet</servlet-name> <dispatcher>REQUEST</dispatcher> <dispatcher>FORWARD</dispatcher> <dispatcher>INCLUDE</dispatcher> </filter-mapping> <!--End of the configuration part for Richfaces--> servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>/faces/*</url-pattern> </servlet-mapping> <context-param> <param-name>org.richfaces.SKIN</param-name> <param-value>classic</param-value> </context-param> <!-- Configuration part for the Primefaces--> <servlet> <servlet-name>Resource Servlet</servlet-name> <servlet-class> org.primefaces.resource.ResourceServlet </servlet-class> <load-on-startup>2</load-on-startup> </servlet> <servlet-mapping> <servlet-name>Resource Servlet</servlet-name> <url-pattern>/primefaces_resource/*</url-pattern> </servlet-mapping> <!-- End of the configuration part for the Primefaces--> <session-config> <session-timeout> 30 </session-timeout> </session-config> <welcome-file-list> <welcome-file>faces/welcomeJSF.jsp</welcome-file> </welcome-file-list> </web-app>
In the above configuration, Primefaces configuration for the JSF project is specified. If you want to configure Primefaces for the Facelets projects add the Facelets neccesary configuration in the web.xml and also you can see the loading order of servlets is specified. Servlets with lower values are loaded before servlets with higher values. So the servlet(Faces Servlet) that manages the request processing lifecycle for web applications which utilize the JavaServer Faces to construct the user interface is loaded first and the PrimeFaces UI module’s servlet(Resource Servlet) loaded second. Now the web.xml configuration part gets over and let us move to the next step.
Step4(Taglib specifications)
In step4, Let us learn how to specify the taglibs for the Facelets or JSF projects. For Facelets projects, though the Facelets web page are created in the xhtml documents, the taglibs should be specified like the below
<html xmlns:p="http://primefaces.prime.com.tr/ui" />
As you all know for JSF project, the JSF web page are created in the JSP documents, the taglibs should be specified like the below
<%@ taglib uri="http://primefaces.prime.com.tr/ui" prefix="p" %>
So far we had completed most of the configurations and only one more step is there to finish the set up process of Primefaces in Netbeans6.x.
Step5(Resources Components)
The resource components should be added between the head tag of the page, inorder to include the css and script resources.
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <p:resources/> </head>
Setup process of Primefaces in Netbeans6.x has been completed and now let us create a hello world page using Primefaces UI components. The following code should be conjured to do so,
<%@page contentType="text/html" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%> <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%> <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%> <%@ taglib uri="http://primefaces.prime.com.tr/ui" prefix="p" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <f:view> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>Hello World</title> <p:resources/> </head> <body> <h:form id="helloWorldPageForm"> <p:panel id="primefacesPanel" header="Hello World" footer="Footer" style="position: relative; width: 500px; " > <h:outputText value="Primefaces is great. My first application using Primefaces"/> </p:panel> </h:form> </body> </html> </f:view>
By invoking the above code, we had created a Hello World demo application which contains a Primefaces panel, You can also use Richfaces components together with the Primefaces components. I am sure you dont believe, Even the ajax integration part between these libraries works well have a try on it. Now let us have a look on the snap of our Hello World application.
Hello World Application’s Demo Snap
Thatsall folks. I hope this article clearly explains the Setup of Primefaces in a JSF or Facelets projects along with Richfaces library in Netbeans6.x. If you find this article is quite useful, Dont forget to share with me by your valuable comments. Have a joyous code day.
Hi, thanks for the great introduction. I’ve added a link to PrimeFaces wiki.
Well-loved. Like or Dislike:
17 
10
[Reply]
Hi cagatay.civici, Thanks for honouring my article!!
Well-loved. Like or Dislike:
8 
3
[Reply]
Thank you for the step by step introduction. It is very helpful. A Question: We invoke the above jsp page containing the primefaces tag similar to as any other jsf page. Eg# http://myurl/mypage.jsf. So how (or who) is using the Servlet mapping for “Resource Servlet” (as declared in web.xml
Abhi
[Reply]
cagataycivici Reply:
November 21st, 2009 at 4:06 am
Hi, Resource Servlet is used internally by PrimeFaces to load resources like scripts, css and images. You never need to use it explicitly.
[Reply]
Gift Sam Reply:
November 21st, 2009 at 12:58 pm
Hi Abhijit,
Thanks for your comment. As cagataycivic said Primefaces loads the resources like script, css and images Internally. In web.xml I have specified the loading order of the servlet, Servlets with lower values are loaded before servlets with higher values. So the servlet(Faces Servlet)that manages the request processing lifecycle for web applications which utilize the JavaServer Faces to construct the user interface is loaded first and the PrimeFaces UI module’s servlet(Resource Servlet) loaded second.
[Reply]
Hi Gift,
Thanks for the article. Very informative. How about another blog post that explains mixing and matching richfaces and primefaces components?
[Reply]
Gift Sam Reply:
November 20th, 2009 at 10:32 pm
Hi James,
Thank you very much for your valuable comment. Will surely post in the forth coming days!!
[Reply]
Gift Sam
Your article was just great. In about an hour, (I had to download a few things, configure here and there and thre it was. I managed to do a small example in a Seam + Richfaces + Primefaces + Facelets + Hibernate JPA, + EJB3, etc, etc and deploy to to a JBoss AS 4.2.3 and, of course Eclipse 3.4.2 + JBossTools
Congratulations to Primefaces people. I will continue testing it. Looks promissing!!
[Reply]
Gift Sam Reply:
November 29th, 2009 at 7:23 pm
Very Happy to hear that you had configured Primefaces in one hour with the help of this Article. Thank you so much for your valuable feedback!!
[Reply]
Thomas Reply:
February 3rd, 2010 at 6:48 pm
[Reply]
Christopher Esquea Reply:
February 26th, 2010 at 4:24 am
Hey Antonio, hi first. i know its probably a while, hope you can respond.
How did you manage to configure primeFaces to work with Seam + Richfaces + facelets + hibernate JPA + EJB3 and make a successful deploy on jboss server with the eclipse and jbossTools
I’ve been trying to this for over a month now and i have managed to get richfaces and seam ETC, to work but every time i try to add primeFaces to the project i get an exception either on the server when deploying or when trying to access a .seam page like home.seam for example. I keep getting stack trace after stack trace. I have posted on PrimeFaces forum, but i havent gotten too far from when i started.
Thanks in advance
Christopher Esquea
[Reply]
Christopher Esquea Reply:
February 26th, 2010 at 9:29 pm
Got it, Thanks For The Guidance Gift Sam.
If anyone needs sum help to get started with seam + primefaces + eclipse and jboss AS, send me a p. message through the primefaces forum under chec69
thanks Gift Sam again.
[Reply]
[...] YUI charts. At first you need to configure Primefaces for a JSF application. I hope the article “Step by step tutorial to setup Primefaces in Netbeans” would be helpful to do so, we also should need the prerequisites which is given [...]
Wondering if the org.ajax4jsf.Filter is required for primefaces? Is primefaces using a4j for partial page rendering?
[Reply]
Hi Steven Shaw,
Thanks for your comments and your question is substantive. In this article, I have configured Primefaces together with Richfaces. So I had stated org.ajax4jsf.Filter in the web.xml. If you want configure Primefaces alone with JSF, kindly neglect the Richfaces configuration in web.xml and also remove the Richfaces library.
[Reply]
[...] article, you need to configure Primefaces along with JSF in your favourite IDE. I hope the article “Step by step tutorial to setup Primefaces in Netbeans” would be helpful to do so, and also we should have the prerequisites stated [...]
Hello,
I am very much new to JSF. But somehow i configured web.xml and now all components work but as soon as i added PrimeFaces framework, the page stopped working.
This is my web.xml
javax.faces.PROJECT_STAGE
Development
Faces Servlet
javax.faces.webapp.FacesServlet
1
Faces Servlet
/faces/*
Resource Servlet
org.primefaces.resource.ResourceServlet
Resource Servlet
/primefaces_resource/*
30
faces/index.xhtml
This is my page
Facelet Title
Here is some new Content
And here is my index.xhtml
The code compiles nicely.
When i type
http://localhost:8080/FaceletMasterPage/faces/ContentPage.xhtml
in the address bar it works correctly.
But when i type-
http://localhost:8080/FaceletMasterPage/primefaces_resource/ContentPage.xhtml
It throws resource not found 404.
What can be wrong?
Thanks in advance
This is header
Default content
This is footer
[Reply]
Gift Sam Reply:
January 24th, 2010 at 10:10 pm
Hi Sanjay,
No worries!! I reckon the application runs perfectly. The path “http://localhost:8080/FaceletMasterPage/primefaces_resource/ContentPage.xhtml” which you had given is wrong, the path which you had specified first is correct. You should not add “primefaces_resource” instead of “faces”. This is the cause of the 404 error page. Try to invoke a primefaces component in your JSF application and kindly let me know. Also To comment in this article, Kindly wrap your source code by following the link http://wordpress.org/extend/plugins/syntaxhighlighter-plus/other_notes/
[Reply]
hi there,
congrats on this nice tutorial!
I’m using Netbeans 6.8 with tomcat 6.0.20.
I use only JSF no richfaces.
I’ve followed every step of this tutorial but the problem I’m having is that the jsp page doesn’t Render the primeface compopenent (the p:panel). All I get is exactly this :
Hello World
Primefaces is great. My first application using Primefaces
Footer
without any graphics. Can someone help me on this please?
[Reply]
here are my web.xml
Faces Servlet
javax.faces.webapp.FacesServlet
1
Faces Servlet
/faces/*
Resource Servlet
org.primefaces.ui.resource.ResourceServlet
2
Resource Servlet
/primefaces_resources/*
com.sun.faces.allowTextChildren
true
30
faces/welcomeJSF.jsp
and this is my jsp page:
Hello World
and these are the jars I used:
atmosphere-compat-jbossweb-0.5.jar
atmosphere-compat-tomcat-0.5.jar
atmosphere-compat-weblogic-0.5.jar
atmosphere-runtime-0.5.jar
barbecue-1.5-beta1.jar
commons-fileupload-1.2.1.jar
commons-io-1.4.jar
commons-logging-1.1.1.jar
facestrace-1.1.1-SNAPSHOT.jar
itext-1.4.8.jar
jcommon-1.0.0.jar
jdom-1.0.jar
jfreechart-1.0.0.jar
jsf-api-2.0.2-FCS.jar
jsf-impl-2.0.2-FCS.jar
jstl-1.2.jar
junit-3.8.jar
log4j-1.2.13.jar
poi-3.2-FINAL.jar
rome-1.0.jar
primefaces-2.0.0.jar
commons-codec-1.4.jar
commons-discovery-0.4.jar
guice-2.0.jar
slf4j-api-1.5.11.jar
slf4j-simple-1.5.11.jar
[Reply]
sorry the jsp page I used is:
[Reply]
I am looking for the source code of the article: Annotation Driven JSF-Spring-JPA-Spring Security-Orchestra to download. The link furnished is broken.
please help me
Kwame
[Reply]
[...] of charts first we need to configure Primefaces for a JSF application. I hope the article “Step by step tutorial to setup Primefaces in Netbeans” would be helpful to do so, and also we should have the prerequisites stated [...]
[...] article, you need to configure Primefaces along with JSF in your favourite IDE. I hope the article “Step by step tutorial to setup Primefaces in Netbeans” would be helpful to do so, and also we should have the prerequisites stated [...]
@thenotifier
I have the same problem…
someone knows how to fix it?
[Reply]
@thorv
@thenotifier
This should resolve the problem. Change the servlet class and the URL Pattern of Resource servlet.
Resource servlet – “org.primefaces.resource.ResourceServlet”
URL Pattern – “/primefaces_resource/*”
Also, I had updated the article’s web.xml.
[Reply]
Shlomit Shachor Reply:
October 3rd, 2011 at 5:21 pm
Resource Servlet
org.primefaces.ui.resource.ResourceServlet
2
Resource Servlet
/primefaces_resources/*
[Reply]
Nice one thanks for the step by step
[Reply]
I have done the same as above mentioned code but i didn’t get skin .. i want blue skin out project … we are using jsf 1.2..
thanks…
[Reply]
using netbeans 6.9, have jar in web/inf/lib my site can’t find the primefaces js files from the urls generated from the resources tag… is there something i need to go to get the url right ?
[Reply]
Hi,
I am not able to integrate PrimeFaces with JSF 2.0. Can anyone suggest where I can find the latest jar files for JSF 2.0?
[Reply]
Hello
i want to configure PrimefaceMobile+JSF(2.0)+JPA(2.0) please give me suggestion for it how can i configure it in web.xml and face-config.xml
Thanks in Advance…
[Reply]
I have been surfing online more than three hours
today, yet I never found any interesting article like yours.
It is pretty worth enough for me. In my view, if
all webmasters and bloggers made good content as you did,
the net will be a lot more useful than ever before.
[Reply]
I ran across this blog on http://www.techbrainwave.com/?
p=198 and if I could I’d like to point out to you some interesting things or ideas. Maybe you can write your next articles relating to these ideas. I’m
keen to read more things related to what you’re talking about.
[Reply]