Introduction
Hello and welcome, readers! We hope you are doing well.
Today, we will discuss how to add a data table in JSF. After completing this article, you will clearly understand the JSF Data Table. So follow the article till the end. Without further ado, let’s jump into the implementation and see how to add some data to a table.
Implementation
To put the example application into action, follow these steps.
- Create a demo project in any IDE that supports Java Web applications, such as NetBeans. For the subsequent implementation program, we will employ the Apache Netbeans IDE.
- Select the web application project type from the Java with Maven category.
- Pick any practical name for your project and packages.
- Choose Java EE 7 for the web and the GlassFish Server.
- Select Properties after right-clicking the project name in the project window's folder section.
- Under the Frameworks tab, add the Java Server Faces framework.
- Modify the "index.xhtml," "StudentBean.java", and other files per the code below.
- Compile and run the application to see if it is being compiled in the previously configured environment.
- Create the web application and deploy it as a war file via the GlassFish server. The program's output should be displayed in the default browser window after execution.
Folder Structure
As previously stated, the folder structure should resemble the image below.
(Folder structure of JSF web application)
Code
StudentBean.java:
package com.mycompany.demoproject;
import java.io.Serializable;
import java.math.BigDecimal;
import java.util.ArrayList;
import java.util.Arrays;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean(name="student")
@SessionScoped
public class StudentBean implements Serializable{
private static final long serialVersionUID = 1L;
String studentId;
String studentName;
BigDecimal height;
int rank;
public String getStudentId() {
return studentId;
}
public void setStudentId(String studentId) {
this.studentId = studentId;
}
public String getStudentName() {
return studentName;
}
public void setStudentName(String studentName) {
this.studentName = studentName;
}
public BigDecimal getHeight() {
return height;
}
public void setHeight(BigDecimal height) {
this.height = height;
}
public int getRank() {
return rank;
}
public void setRank(int rank) {
this.rank = rank;
}
private static final ArrayList<Student> studentList =
new ArrayList<>(Arrays.asList(
new Student("200465", "Arpita Priyadarsini",
new BigDecimal("156.60"), 1),
new Student("200466", "Bijay Kumar",
new BigDecimal("175.00"), 2),
new Student("200467", "Fiza Afreen",
new BigDecimal("168.00"), 8),
new Student("200468", "Anoushka Karkoon",
new BigDecimal("163.70"), 3),
new Student("200469", "Arpita Kumari",
new BigDecimal("170.00"), 10)
));
public ArrayList<Student> getStudentList() {
return studentList;
}
public String addAction() {
Student student = new Student(this.studentId, this.studentName, this.height, this.rank);
studentList.add(student);
return null;
}
public String deleteAction(Student student) {
studentList.remove(student);
return null;
}
public static class Student{
String studentId;
String studentName;
BigDecimal height;
int rank;
public Student(String studentId, String studentName,
BigDecimal height, int rank) {
this.studentId = studentId;
this.studentName = studentName;
this.height = height;
this.rank = rank;
}
public String getStudentId() {
return studentId;
}
public void setStudentId(String studentId) {
this.studentId = studentId;
}
public String getStudentName() {
return studentName;
}
public void setStudentName(String studentName) {
this.studentName = studentName;
}
public BigDecimal getHeight() {
return height;
}
public void setHeight(BigDecimal height) {
this.height = height;
}
public int getRank() {
return rank;
}
public void setRank(int rank) {
this.rank = rank;
}
}
}index.xhtml:
<?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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>Add Data to Data Table</title>
</h:head>
<h:body>
<h1>Demonstration of Add Data to Data Table in JSF</h1>
<h:form>
<h:dataTable value="#{student.studentList}" var="s">
<h:column>
<f:facet name="header">Student ID</f:facet>
#{s.studentId}
</h:column>
<h:column>
<f:facet name="header">Student Name</f:facet>
#{s.studentName}
</h:column>
<h:column>
<f:facet name="header">Height</f:facet>
#{s.height}
</h:column>
<h:column>
<f:facet name="header">Student Rank</f:facet>
#{s.rank}
</h:column>
<h:column>
<f:facet name="header">Action</f:facet>
<h:commandLink value="Delete" action="#{student.deleteAction(s)}" />
</h:column>
</h:dataTable>
<h3>Add Student</h3>
<hr/>
<table>
<tr>
<td>Student Id :</td>
<td><h:inputText size = "10" value = "#{student.studentId}" /></td>
</tr>
<tr>
<td>Name :</td>
<td><h:inputText size = "10" value = "#{student.studentName}" /></td>
</tr>
<tr>
<td>Height :</td>
<td><h:inputText size = "5" value = "#{student.height}" /></td>
</tr>
<tr>
<td>Rank :</td>
<td><h:inputText size = "5" value = "#{student.rank}" /></td>
</tr>
<tr>
<td><h:commandButton value = "Add Student"
action = "#{student.addAction()}" /></td>
</tr>
</table>
</h:form>
</h:body>
</html>Output 1(Before Clicking the Add Student Button)
Output 2(After Clicking the Add Student Button)
34+ registered 
