JSF Datatable Example with Arraylist





Hey guys in this post, we will discuss displaying the list of objects in JSF datatable component with Example

Overview


  • @ManagedBean helps us to access the bean properties inside the JSF pages
  • @ApplicationScoped shares the same data throughout the application
  • <h:datatable> tag is used to loop through the arraylist, it takes value attribute which will hold the list of objects.
  • <h:column> defines the column name and the column value
  • <f:facet> defines the column header

Complete example


We will create this example step by step, follow this tutorial till the end

Read More:

Create Dynamic Web Project


To create a dynamic web project, you can read the following tutorial

Create a bean


Create Employee.java file inside the in.bushansirgur.jsf.beans package and add the following content

package in.bushansirgur.jsf.beans;

import javax.faces.bean.ManagedBean;

@ManagedBean
public class Employee {
	
	private String name;
	
	private String department;
	
	private String email;
	
	public Employee() {
	
	}
	
	public Employee(String name, String department, String email) {
		this.name = name;
		this.department = department;
		this.email = email;
	}

	public String getName() {
		return name;
	}

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

	public String getDepartment() {
		return department;
	}

	public void setDepartment(String department) {
		this.department = department;
	}

	public String getEmail() {
		return email;
	}

	public void setEmail(String email) {
		this.email = email;
	}
}

Create a Util class


Create EmployeeDataUtil.java file inside the in.bushansirgur.jsf.util package and add the following content

package in.bushansirgur.jsf.util;

import java.util.ArrayList;
import java.util.List;

import javax.faces.bean.ApplicationScoped;
import javax.faces.bean.ManagedBean;

import in.bushansirgur.jsf.beans.Employee;

@ManagedBean
@ApplicationScoped
public class EmployeeDataUtil {
	
	private List<Employee> employees;
	
	public EmployeeDataUtil() {
		loadSampleData();
	}
	
	public void loadSampleData() {
		employees = new ArrayList<>();
		
		employees.add(new Employee("Bushan", "IT", "[email protected]"));
		employees.add(new Employee("Bharatrh", "IT", "[email protected]"));
		employees.add(new Employee("Chaitra", "Sales", "[email protected]"));
	}
	
	public List<Employee> getEmployees() {
		return employees;
	}	
}

Note that we have added the @ApplicationScoped annotation to the class and this class shares the same data across the application

Create a Response page


Create dashboard.xhtml file inside the WebContent and add the following content

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
		xmlns:h="http://xmlns.jcp.org/jsf/html"
		xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
		xmlns:c="http://xmlns.jcp.org/jsf/core">

	<h:head>
		<title>Dashboard</title>
	</h:head>
	
	<h:body>
		
		<h2>Employees List</h2>
		<hr/>
		<h:dataTable value="#{employeeDataUtil.employees}" var="employee" border="1">
			
			<h:column>
			
				<c:facet name="header">Name</c:facet>	
				#{employee.name}
			
			</h:column>
			<h:column>
			
				<c:facet name="header">Department</c:facet>	
				#{employee.department}
			
			</h:column>
			<h:column>
			
				<c:facet name="header">Email</c:facet>	
				#{employee.email}
			
			</h:column>
			
		</h:dataTable>
		
	</h:body>

</html>

Run the app


To run the application, right click on the project, select Run As -> choose Run on Server

Open the browser, navigate to the URL http://localhost:8080/JSF-hello-world/faces/register-form.xhtml
16

That’s it for this post. If you like this post, then please share this with your friends and collogues. Also share this post on your social media profiles as well.



About the author

Bushan Sirgur

Hey guys, I am Bushan Sirgur from Banglore, India. Currently, I am working as an Associate project in an IT company.

View all posts

Leave a Reply

Your email address will not be published. Required fields are marked *