Hey guys in this post, we will discuss displaying the list of objects in JSF datatable component with Example
Table of Contents
Overview
@ManagedBeanhelps us to access the bean properties inside the JSF pages@ApplicationScopedshares 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:
- Check the Complete JavaServer Faces (JSF) Tutorial
- Check the Complete Spring Data JPA Tutorial
- Check the Complete Spring Security Tutorial
- Check the Javascript Projects for Beginners
- Check the Spring JDBC Tutorial
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
—
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.
