Hey guys in this post, we will discuss displaying the list of objects from Managed Bean in JSF with complete example.
Table of Contents
Overview
@ManagedBeanhelps us to access the bean properties inside the JSF pages@ApplicationScopedshares the same data throughout the application
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">
<h:head>
<title>Dashboard</title>
</h:head>
<h:body>
<h2>Employees List</h2>
<hr/>
<ul>
<ui:repeat var="employee" value="#{employeeDataUtil.employees}">
<li>#{employee.name} - #{employee.department} - #{employee.email}</li>
</ui:repeat>
</ul>
</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.
