PrimeFaces is a component library for JSF and has huge component support.
Working with PrimeFaces is very much easy because there is a single jar, no mandatory other dependencies, no mandatory configuration is required.
Ok, in this tutorial I am going to explain how to create a Maven based PrimeFaces project and create a simple registration for and validate the form.
I am using JDK1.6.26 and Tomcat 7.0.32.
Step#1
Create Maven Project and add the following repositories, dependencies in pom.xml
Configure JSF2's FacesServlet configurtion in web.xml
Create RegistrationForm bean.
Now go to http://localhost:8080/primfaces-demo/registration.xhtml
Here key things to note are:
1. We need to add primefaces taglib using xmlns:p="http://primefaces.org/ui"
2. PrimeFaces Command Button/Links bydefault use Ajax submit. So to do non-ajax submit we should use ajax="false".
3. To enable autocompletion for <p:> tags, right click on project --> Properties --> ProjectFacests --> Select Java Server Faces 2.0 checkbox and Apply.
Src -> sivalabs.in
Working with PrimeFaces is very much easy because there is a single jar, no mandatory other dependencies, no mandatory configuration is required.
Ok, in this tutorial I am going to explain how to create a Maven based PrimeFaces project and create a simple registration for and validate the form.
I am using JDK1.6.26 and Tomcat 7.0.32.
Step#1
Create Maven Project and add the following repositories, dependencies in pom.xml
Step#2<dependencies> <dependency> <groupId>com.sun.faces</groupId> <artifactId>jsf-api</artifactId> <version>2.1.6</version> <scope>runtime</scope> </dependency> <dependency> <groupId>com.sun.faces</groupId> <artifactId>jsf-impl</artifactId> <version>2.1.6</version> <scope>runtime</scope> </dependency> <dependency> <groupId>org.primefaces</groupId> <artifactId>primefaces</artifactId> <version>3.0</version> </dependency> <dependency> <groupId>org.primefaces.themes</groupId> <artifactId>bluesky</artifactId> <version>1.0.2</version> </dependency> </dependencies> <repositories> <repository> <id>maven2-repository.dev.java.net</id> <name>Java.net Repository for Maven</name> <url>http://download.java.net/maven/2</url> </repository> <repository> <id>prime-repo</id> <name>Prime Repo</name> <url>http://repository.primefaces.org</url> </repository> </repositories> <build> <finalName>primefaces-demo</finalName> </build>
Configure JSF2's FacesServlet configurtion in web.xml
<servlet>
<servlet-name>FacesServlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>FacesServlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>FacesServlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
<context-param>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>client</param-value>
</context-param>
<!--Blusky theme for PrimeFaces -->
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>bluesky</param-value>
</context-param>
Step#3Create RegistrationForm bean.
package com.rsuna.pfdemo.mb.ui;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
public class RegistrationForm
{
private Integer userId;
private String userName;
private String password;
private String firstName;
private String lastName;
private String email;
private String phone;
private Date dob;
private String gender;
private List<String> interests = new ArrayList<String>();
private boolean subscribeToNewsLetter;
//setters/getters
}Create RegistrationBean which is a Managed Bean.
package com.rsuna.pfdemo.mb;
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import com.rsuna.pfdemo.mb.ui.RegistrationForm;
@ManagedBean
@RequestScoped
public class RegistrationBean
{
private RegistrationForm registrationForm = null;
private List<String> interests = null;
private List<String> genders = null;
public RegistrationBean()
{
this.interests = new ArrayList<String>();
this.interests.add("Sports");
this.interests.add("Gadgets");
this.interests.add("Politics");
this.interests.add("Technology");
this.genders = new ArrayList<String>();
this.genders.add("Male");
this.genders.add("Female");
}
public String register()
{
System.out.println("register.....");
//store data in DB
System.out.println(this.registrationForm);
return "welcome";//go to welcome.xhtml
}
public RegistrationForm getRegistrationForm()
{
if(this.registrationForm == null){
this.registrationForm = new RegistrationForm();
}
return registrationForm;
}
public void setRegistrationForm(RegistrationForm registrationForm)
{
this.registrationForm = registrationForm;
}
public List<String> getInterests()
{
return interests;
}
public void setInterests(List<String> interests)
{
this.interests = interests;
}
public List<String> getGenders()
{
return genders;
}
public void setGenders(List<String> genders)
{
this.genders = genders;
}
}Step#4: Create registration.xhtml JSF page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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.org/ui">
<h:head>
</h:head>
<h:body>
<h2>Registration Form</h2>
<h:form>
<p:fieldset legend="Registration Form" widgetVar="regWidget" style="width: 600px;">
<h:panelGrid columns="3" width="550" border="0">
<h:outputLabel value="UserName" />
<p:inputText value="#{registrationBean.registrationForm.userName}"
id="userName"
required="true"
requiredMessage="UserName is required"
validatorMessage="UsesrName should be of length from 5 to 15 chars"
>
<f:validateLength minimum="5" maximum="15" for="userName"></f:validateLength>
</p:inputText>
<p:message for="userName"/>
<h:outputLabel value="Password" />
<p:password value="#{registrationBean.registrationForm.password}"
id="password"
required="true"
requiredMessage="Password is required"
validatorMessage="Password should be of length from 5 to 15 chars"
>
<f:validateLength minimum="5" maximum="15" for="password"></f:validateLength>
</p:password>
<p:message for="password" />
<h:outputLabel value="FirstName" />
<p:inputText value="#{registrationBean.registrationForm.firstName}"
id="firstName"
required="true"
requiredMessage="FirstName is required"
validatorMessage="FirstName should be of length from 5 to 15 chars"
>
<f:validateLength minimum="5" maximum="15" for="firstName"></f:validateLength>
</p:inputText>
<p:message for="firstName" />
<h:outputLabel value="LastName" />
<p:inputText value="#{registrationBean.registrationForm.lastName}"
id="lastName"></p:inputText>
<p:message for="lastName" />
<h:outputLabel value="Email" />
<p:inputText value="#{registrationBean.registrationForm.email}"
id="email"
validatorMessage="Invalid Email">
<f:validateRegex pattern="[a-zA-Z0-9]+@[a-zA-Z]+.[a-zA-Z]{2,3}"></f:validateRegex>
</p:inputText>
<p:message for="email" />
<h:outputLabel value="Phone" />
<p:inputText value="#{registrationBean.registrationForm.phone}"
id="phone"></p:inputText>
<p:message for="phone" />
<h:outputLabel value="DOB" />
<p:calendar value="#{registrationBean.registrationForm.dob}"
id="dob"
converterMessage="Invalid Date"
pattern="dd-MM-yyyy">
</p:calendar>
<p:message for="dob" />
<h:outputLabel value="Gender" />
<h:selectOneRadio id="gender"
value="#{registrationBean.registrationForm.gender}" >
<f:selectItems value="#{registrationBean.genders}"
var="gOp"
itemLabel="#{gOp}"
itemValue="#{gOp}"/>
</h:selectOneRadio>
<p:message for="gender" />
<h:outputLabel value="Interests" />
<p:selectManyCheckbox id="interests"
value="#{registrationBean.registrationForm.interests}"
layout="pageDirection">
<f:selectItems value="#{registrationBean.interests}" var="intrOp"></f:selectItems>
</p:selectManyCheckbox>
<p:message for="interests" />
<p:commandButton value="Register" action="#{registrationBean.register}" ajax="false"></p:commandButton>
</h:panelGrid>
</p:fieldset>
</h:form>
</h:body>
</html>Step#5:
Now go to http://localhost:8080/primfaces-demo/registration.xhtml
Here key things to note are:
1. We need to add primefaces taglib using xmlns:p="http://primefaces.org/ui"
2. PrimeFaces Command Button/Links bydefault use Ajax submit. So to do non-ajax submit we should use ajax="false".
3. To enable autocompletion for <p:> tags, right click on project --> Properties --> ProjectFacests --> Select Java Server Faces 2.0 checkbox and Apply.
Src -> sivalabs.in
