How to create a simple JSF2 and Primefaces Application in Eclipse

Background

This article demonstrates how to create a simple JSF that uses Primefaces in Eclipse.

Software Environment

Windows 7 Professional SP1
Eclipse – Kepler Release
Java 1.7 (1.7.0_67 – Windows x86)
JSF 2.2
- Downloaded, and referenced as part of a Dynamic Web Project in Eclipse
Primefaces 4.0
- Downloaded from www.primefaces.org
- Place it in the project in WebContent\WEB-INF\lib and reference it

Create a Dynamic Web Project

1. Choose File -> Other… -> Dynamic Web Project (Under Web folder)

2. Specify Project Details

[wp_ad_camp_1]

For this article, we set Target runtime to Apache Tomcat v7.0, module version to 3.0, and Configuration to “JavaServer Faces v2.2 Project”. Then, click Next.

Just click next on the second screen.

Leave things as they are and just simply click Next again.

When you reach this point, your eclipse may or may not list anything in JSF Implementation Library right after choosing the Type (e.g., User Library). Click the download button (bluish icon of a diskette with an arrow pointing downward) just located to the right of the list control.

Downloading the JSF Library

Accept the license agreement, and click Finish.

[wp_ad_camp_2]

Click Finish.

Download PrimeFaces 4.0

Once primefaces-4.0.jar has been downloaded successfully, put the file in WebContent\WEB-INF\lib in the Eclipse project.

Java Classes

We need two classes – Java Bean and JSF-managed bean classes.

The Java Bean

package com.turreta.primefaces.data;

public class CarBean {

	private String make;
	private String model;
	private String color;
	private String id;

	public CarBean() {
	}

	public CarBean(String id, String make, String model, String color) {
		this.id = id;
		this.make = make;
		this.model = model;
		this.color = color;
	}

	public String getId() {
		return id;
	}

	public void setId(String id) {
		this.id = id;
	}

	public String getMake() {
		return make;
	}

	public void setMake(String make) {
		this.make = make;
	}

	public String getModel() {
		return model;
	}

	public void setModel(String model) {
		this.model = model;
	}

	public String getColor() {
		return color;
	}

	public void setColor(String color) {
		this.color = color;
	}
}

package com.turreta.primefaces.data;

public class CarBean {

private String make;

private String model;

private String color;

private String id;

public CarBean() {

}

public CarBean(String id, String make, String model, String color) {

this.id = id;

this.make = make;

this.model = model;

this.color = color;

}

public String getId() {

return id;

}

public void setId(String id) {

this.id = id;

}

public String getMake() {

return make;

}

public void setMake(String make) {

this.make = make;

}

public String getModel() {

return model;

}

public void setModel(String model) {

this.model = model;

}

public String getColor() {

return color;

}

public void setColor(String color) {

this.color = color;

}

JSF-Managed Bean

package com.turreta.primefaces.data;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

import javax.annotation.PostConstruct;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.context.FacesContext;

import org.primefaces.event.SelectEvent;
import org.primefaces.event.UnselectEvent;

@ManagedBean(name = "dtSelectionView")
@ViewScoped
public class SelectionView implements Serializable {

	private static final long serialVersionUID = -5733066119822460711L;
	private List<CarBean> cars2;
	private CarBean selectedCar;

	@PostConstruct
	public void init() {
		cars2 = new ArrayList<CarBean>();
		cars2.add(new CarBean("1", "mk1", "md1", "c1"));
		cars2.add(new CarBean("2", "mk2", "md2", "c2"));
		cars2.add(new CarBean("3", "mk3", "md3", "c3"));
		cars2.add(new CarBean("4", "mk4", "md4", "c4"));
		cars2.add(new CarBean("5", "mk5", "md5", "c5"));

	}

	public List<CarBean> getCars2() {
		return cars2;
	}

	public void onRowSelect(SelectEvent event) {
		FacesMessage msg = new FacesMessage("Car Selected",
				((CarBean) event.getObject()).getMake());
		FacesContext.getCurrentInstance().addMessage(null, msg);

		CarBean s = (CarBean) event.getObject();
		setSelectedCar(s);
		System.out.println(s.getMake());
		System.out.println(s.getModel());
		System.out.println(s.getColor());
	}

	public void onRowUnselect(UnselectEvent event) {
		FacesMessage msg = new FacesMessage("Car Unselected",
				((CarBean) event.getObject()).getMake());
		FacesContext.getCurrentInstance().addMessage(null, msg);
	}

	public CarBean getSelectedCar() {
		return selectedCar;
	}

	public void setSelectedCar(CarBean selectedCar) {
		this.selectedCar = selectedCar;
	}
}

package com.turreta.primefaces.data;

import java.io.Serializable;

import java.util.ArrayList;

import java.util.List;

import javax.annotation.PostConstruct;

import javax.faces.application.FacesMessage;

import javax.faces.bean.ManagedBean;

import javax.faces.bean.ViewScoped;

import javax.faces.context.FacesContext;

import org.primefaces.event.SelectEvent;

import org.primefaces.event.UnselectEvent;

@ManagedBean(name = "dtSelectionView")

@ViewScoped

public class SelectionView implements Serializable {

private static final long serialVersionUID = -5733066119822460711L;

private List<CarBean> cars2;

private CarBean selectedCar;

@PostConstruct

public void init() {

cars2 = new ArrayList<CarBean>();

cars2.add(new CarBean("1", "mk1", "md1", "c1"));

cars2.add(new CarBean("2", "mk2", "md2", "c2"));

cars2.add(new CarBean("3", "mk3", "md3", "c3"));

cars2.add(new CarBean("4", "mk4", "md4", "c4"));

cars2.add(new CarBean("5", "mk5", "md5", "c5"));

}

public List<CarBean> getCars2() {

return cars2;

}

public void onRowSelect(SelectEvent event) {

FacesMessage msg = new FacesMessage("Car Selected",

((CarBean) event.getObject()).getMake());

FacesContext.getCurrentInstance().addMessage(null, msg);

CarBean s = (CarBean) event.getObject();

setSelectedCar(s);

System.out.println(s.getMake());

System.out.println(s.getModel());

System.out.println(s.getColor());

}

public void onRowUnselect(UnselectEvent event) {

FacesMessage msg = new FacesMessage("Car Unselected",

((CarBean) event.getObject()).getMake());

FacesContext.getCurrentInstance().addMessage(null, msg);

}

public CarBean getSelectedCar() {

return selectedCar;

}

public void setSelectedCar(CarBean selectedCar) {

this.selectedCar = selectedCar;

}

The View

<?xml version="1.0" encoding="ISO-8859-1" ?> 
<!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:c="http://java.sun.com/jsf/core" 
	xmlns:ui="http://java.sun.com/jsf/facelets" 
	xmlns:h="http://java.sun.com/jsf/html" 
	xmlns:p="http://primefaces.org/ui"> 

<!-- 
***************************************
<h:head> is very important. Otherwise, 
your control loses out on UI styles. 
***************************************
-->
<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<title>Insert title here</title>
</h:head>
<h:body>
	<p:panel>
		<br />
		<br /> 
		<h:outputLabel value="Car Listing"></h:outputLabel>
		<h:form>
			<p:growl id="msgs" showDetail="true" />
			<p:dataTable id="singleDT" var="car" value="#{dtSelectionView.cars2}"
				selectionMode="single" selection="#{dtSelectionView.selectedCar}"
				rowKey="#{car.id}">
				<p:column headerText="Id">
					<h:outputText value="#{car.id}" />
				</p:column>
				<p:column headerText="Year">
					<h:outputText value="#{car.make}" />
				</p:column>
				<p:column headerText="Brand">
					<h:outputText value="#{car.model}" />
				</p:column>
				<p:column headerText="Color">
					<h:outputText value="#{car.color}" />
				</p:column>
			</p:dataTable>
			<br />
			<p:selectOneMenu value="#{MenuTest.menuSelected}">
				<c:selectItem itemValue="m001" itemLabel="Menu 1" />
				<c:selectItem itemValue="m002" itemLabel="Menu 2" />
				<c:selectItem itemValue="m003" itemLabel="Menu 3" />
			</p:selectOneMenu>
		</h:form>
	</p:panel>
</h:body>
</html>

<?xml version="1.0" encoding="ISO-8859-1" ?>

<!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:c="http://java.sun.com/jsf/core"

xmlns:ui="http://java.sun.com/jsf/facelets"

xmlns:h="http://java.sun.com/jsf/html"

xmlns:p="http://primefaces.org/ui">

<!--

***************************************

<h:head> is very important. Otherwise,

your control loses out on UI styles.

***************************************

-->

<h:head>

<title>Insert title here</title>

</h:head>

<h:body>

<p:panel>

<br />

<h:outputLabel value="Car Listing"></h:outputLabel>

<h:form>

<p:growl id="msgs" showDetail="true" />

<p:dataTable id="singleDT" var="car" value="#{dtSelectionView.cars2}"

selectionMode="single" selection="#{dtSelectionView.selectedCar}"

rowKey="#{car.id}">

<p:column headerText="Id">

<h:outputText value="#{car.id}" />

</p:column>

<p:column headerText="Year">

<h:outputText value="#{car.make}" />

</p:column>

<p:column headerText="Brand">

<h:outputText value="#{car.model}" />

</p:column>

<p:column headerText="Color">

<h:outputText value="#{car.color}" />

</p:column>

</p:dataTable>

<br />

<p:selectOneMenu value="#{MenuTest.menuSelected}">

<c:selectItem itemValue="m001" itemLabel="Menu 1" />

<c:selectItem itemValue="m002" itemLabel="Menu 2" />

<c:selectItem itemValue="m003" itemLabel="Menu 3" />

</p:selectOneMenu>

</h:form>

</p:panel>

</h:body>

</html>

Sample Output

Download the Project

[wp_ad_camp_3]

https://www.dropbox.com/s/42mbsyqjmzse77s/JSFPrimeFacesApp.zip?dl=0

Background

Software Environment

Create a Dynamic Web Project

1. Choose File -> Other… -> Dynamic Web Project (Under Web folder)

2. Specify Project Details

Downloading the JSF Library

Download PrimeFaces 4.0

Java Classes

The Java Bean

JSF-Managed Bean

The View

Sample Output

Download the Project

Related Articles

You Might Also Like

Search the site