Data Bound table components

Data Bound table components

Data-bound table components in JavaServer Faces (JSF) are used to display tabular data fetched from a backend source such as a database or a managed bean collection. These components provide a structured way to render data in rows and columns, supporting features like pagination, sorting, and filtering. Here’s an explanation followed by a Java example for a data-bound table component in JSF:

Data Bound table components

Explanation

  • 1.  Purpose:
    • Data-bound table components are designed to efficiently display large datasets in a tabular format.
    • They enable developers to bind data from managed beans or other sources to the UI, dynamically rendering rows based on the data size.
  • 2.  Features:
    • Data Binding:  They bind to a collection of data (e.g., a list of objects retrieved from a managed bean) using a value attribute.
    • Pagination:  Allows displaying data in manageable chunks by limiting the number of rows per page.
    • Sorting:  Supports sorting columns based on specific criteria such as ascending or descending order.
    • Filtering:  Enables filtering data based on user-defined criteria to display relevant subsets of data.
  • 3.  Commonly Used Components:
    • <h:dataTable>:  Core JSF component for rendering a data table.
    • <h:column>:  Defines a column within <h:dataTable> to display specific properties or fields from the data objects.
    • Additional components like <h:outputText>, <h:inputText>, etc., can be nested within <h:column> to customize cell rendering.

Java Example

Here’s an example demonstrating the use of <h:dataTable> to display a list of objects in JSF:

Managed Bean (EmployeeBean.java)
java
package com.example.beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import java.util.ArrayList;
import java.util.List;

@ManagedBean
@RequestScoped
public class EmployeeBean {

    private List<Employee> employees;

    public EmployeeBean() {
        // Simulated data retrieval or initialization
        employees = new ArrayList<>();
        employees.add(new Employee(1, "John Doe", "Developer", 5000));
        employees.add(new Employee(2, "Jane Smith", "Designer", 4500));
        employees.add(new Employee(3, "Mike Johnson", "Manager", 6000));
    }

    public List<Employee> getEmployees() {
        return employees;
    }

    public void setEmployees(List<Employee> employees) {
        this.employees = employees;
    }

    // Employee class definition with getters and setters
    public static class Employee {
        private int id;
        private String name;
        private String role;
        private double salary;

        public Employee(int id, String name, String role, double salary) {
            this.id = id;
            this.name = name;
            this.role = role;
            this.salary = salary;
        }

        // Getters and setters for id, name, role, and salary
        public int getId() {
            return id;
        }

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

        public String getName() {
            return name;
        }

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

        public String getRole() {
            return role;
        }

        public void setRole(String role) {
            this.role = role;
        }

        public double getSalary() {
            return salary;
        }

        public void setSalary(double salary) {
            this.salary = salary;
        }
    }
}

JSF Page (employee_table.xhtml)
xml
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
    <title>Employee Table Example</title>
</h:head>
<h:body>
    <h2>Employee List</h2>
    <h:dataTable value="{employeeBean.employees}" var="emp" border="1">
        <h:column>
            <f:facet name="header">ID</f:facet>
            {emp.id}
        </h:column>
        <h:column>
            <f:facet name="header">Name</f:facet>
            {emp.name}
        </h:column>
        <h:column>
            <f:facet name="header">Role</f:facet>
            {emp.role}
        </h:column>
        <h:column>
            <f:facet name="header">Salary</f:facet>
            {emp.salary}
        </h:column>
    </h:dataTable>
</h:body>
</html>

Explanation of Example

  • Managed Bean (EmployeeBean.java):  This managed bean (EmployeeBean) initializes a list of Employee objects in its constructor. It provides a getter method getEmployees() to retrieve this list.
  • JSF Page (employee_table.xhtml):  This JSF page uses <h:dataTable> to display the list of employees ({employeeBean.employees}). Each <h:column> defines a column in the table, displaying specific properties (id, name, role, salary) from each Employee object.

Attributes Used:

  • value=”{employeeBean.employees}”: Binds the data table to the employees list in EmployeeBean.
  • var=”emp”: Defines a variable emp to refer to each Employee object iteratively within the table.
  • <h:column>: Each column displays a specific property (id, name, role, salary) of the Employee object using EL expressions ({emp.property}).

This example demonstrates how <h:dataTable> in JSF can be used to create a data-bound table component, rendering a list of objects (Employee instances) in a tabular format. It showcases the simplicity and power of JSF components for displaying dynamic data in web applications.