JSF Framework

Pass Objects List from Managed Beans to View in JSF Framework


Create Maven Project

On the Eclipse, create a Maven project

Click Next button and select maven-archetype-webapp

Click Next button and enter Project Information:

  • GroupId: LearnJSFFrameworkWithRealApps
  • Artifact Id: LearnJSFFrameworkWithRealApps
  • Package: com.demo

Click Finish button to finish create Maven project. Add Libraries and Dynamic Web Module as below:

  1. Select project and right click, select Properties menu
  2. Select Project Facets on left side
  3. Select Dynamic Web Module
  4. Select JavaServer Faces




Configure web.xml

Open web.xml file in src\main\webapp\WEB-INF folder and add configurations for JSF Framework as below:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	id="WebApp_ID" version="2.5">
	<display-name>LearnJSFFrameworkWithRealApps</display-name>
	<context-param>
		<param-name>javax.faces.PROJECT_STAGE</param-name>
		<param-value>Development</param-value>
	</context-param>
	<welcome-file-list>
		<welcome-file>faces/index.xhtml</welcome-file>
	</welcome-file-list>
	<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>
	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>*.jsf</url-pattern>
	</servlet-mapping>
	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>*.faces</url-pattern>
	</servlet-mapping>
	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>*.xhtml</url-pattern>
	</servlet-mapping>
</web-app>

Configure pom.xml

Open pom.xml file and add configurations for JSF Framework as below:

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>com.demo</groupId>
	<artifactId>LearnJSFFrameworkWithRealApps</artifactId>
	<packaging>war</packaging>
	<version>1.0-SNAPSHOT</version>
	<name>LearnJSFFrameworkWithRealApps Maven Webapp</name>
	<url>http://maven.apache.org</url>

	<dependencies>
		<dependency>
			<groupId>com.sun.faces</groupId>
			<artifactId>jsf-api</artifactId>
			<version>2.2.8</version>
		</dependency>
		<dependency>
			<groupId>com.sun.faces</groupId>
			<artifactId>jsf-impl</artifactId>
			<version>2.2.17</version>
		</dependency>
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
			<version>1.2</version>
		</dependency>
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>servlet-api</artifactId>
			<version>2.5</version>
		</dependency>
		<dependency>
			<groupId>javax.servlet.jsp</groupId>
			<artifactId>jsp-api</artifactId>
			<version>2.1</version>
		</dependency>
		<dependency>
			<groupId>com.sun.el</groupId>
			<artifactId>el-ri</artifactId>
			<version>1.0</version>
		</dependency>
	</dependencies>

	<build>
		<finalName>LearnJSFFrameworkWithRealApps</finalName>
		<plugins>
			<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-compiler-plugin</artifactId>
				<version>2.3.1</version>
				<configuration>
					<source>1.6</source>
					<target>1.6</target>
				</configuration>
			</plugin>
		</plugins>
	</build>
</project>

Create Resources

Images

Create new folder named resources in src\main\webapp folder. In this folder, create new folder named images. Copy images need show to this folder




Entity Class

Create new package, named com.entities. In this package, create a entity class: Product.java

Product.java

package com.entities;

public class Product {

	private String id;
	private String name;
	private String photo;
	private double price;
	private int quantity;

	public String getId() {
		return id;
	}

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

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getPhoto() {
		return photo;
	}

	public void setPhoto(String photo) {
		this.photo = photo;
	}

	public double getPrice() {
		return price;
	}

	public void setPrice(double price) {
		this.price = price;
	}

	public int getQuantity() {
		return quantity;
	}

	public void setQuantity(int quantity) {
		this.quantity = quantity;
	}

	public Product() {
	}

	public Product(String id, String name, String photo, double price, int quantity) {
		this.id = id;
		this.name = name;
		this.photo = photo;
		this.price = price;
		this.quantity = quantity;
	}

}

Create Managed Bean

Create new package named com.demo in src/main/java folder. In this package, create new java class named DemoManagedBean.java as below: 

package com.demo;

import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import com.entities.Product;

@SessionScoped
@ManagedBean(name = "demoManagedBean")
public class DemoManagedBean {

	private List<Product> products;

	public List<Product> getProducts() {
		return products;
	}

	public void setProducts(List<Product> products) {
		this.products = products;
	}

	public DemoManagedBean() {
		this.products = new ArrayList<Product>();
		this.products.add(new Product("p01", "name 1", "thumb1.gif", 2, 3));
		this.products.add(new Product("p02", "name 2", "thumb1.gif", 8, 6));
		this.products.add(new Product("p02", "name 2", "thumb2.gif", 6, 3));
	}

}

Create View

Create new xhtml file named index.xhtml in src\main\webapp as below: 

<?xml version="1.0" encoding="UTF-8"?>
<!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:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
	<title>Demo Page</title>
</h:head>
<h:body>

	<h3>Product List</h3>
	<h:dataTable var="product" value="#{demoManagedBean.products}"
		border="1" cellpadding="2" cellspacing="2">
		<h:column>
			<f:facet name="header">Id</f:facet>
			#{product.id}
		</h:column>
		<h:column>
			<f:facet name="header">Name</f:facet>
			#{product.name}
		</h:column>
		<h:column>
			<f:facet name="header">Photo</f:facet>
			<h:graphicImage library="images" name="#{product.photo}"></h:graphicImage>
		</h:column>
		<h:column>
			<f:facet name="header">Price</f:facet>
			#{product.price}
		</h:column>
		<h:column>
			<f:facet name="header">Quantity</f:facet>
			#{product.quantity}
		</h:column>
		<h:column>
			<f:facet name="header">Total</f:facet>
			#{product.price * product.quantity}
		</h:column>
	</h:dataTable>

</h:body>
</html>

Structure of Project




Run Application

Select project, right click and select Run on Server menu

Access index.xhtml page with following url:

http://localhost:8080/LearnJSFFrameworkWithRealApps/faces/index.xhtml

Output


Related Posts

Pass Object from Managed Beans to View in JSF Framework

Pass Data from Managed Beans to View in JSF Framework

Delete Data from Database with Hibernate in JSF Framework