In JSF 2.2 the manipulation of Data Table has been never easier and specifically when it comes to finding out which row the user selected for removal. In JSF 2.2 the removing happened without using of passed parameters or binding the DataTable component into its corresponding Java Object – Like HTMLDataTable – for being manipulated from there. Simply what you have to do is to identify your Plain Old Java Object (POJO) by overriding the equals and pass the object being removed into the remove method. This tutorial highlights the simple example for how to delete a row in datatable.
1. Student POJO
Student.java
package net.javabeat.jsf.data;
public class Student {
private String name;
private String major;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getMajor() {
return major;
}
public void setMajor(String major) {
this.major = major;
}
public boolean equals(Object obj){
// The identification here is through of using the name of the student
if(obj instanceof Student){
if(this.name.equals(((Student)obj).getName())){
return true;
}
}
return false;
}
}
2. Managed Bean
RegisterBean.java
package net.javabeat.jsf;
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import net.javabeat.jsf.data.Student;
@ManagedBean
@SessionScoped
public class RegisterBean {
private Student student = new Student();
private List<Student> students = new ArrayList<Student>();
public Student getStudent() {
return student;
}
public void setStudent(Student student) {
this.student = student;
}
public List<Student> getStudents() {
return students;
}
public void setStudents(List<Student> students) {
this.students = students;
}
public String addStudent(){
this.students.add(student);
this.student = new Student();
return "";
}
public String delete(Student std){
this.students.remove(std);
return "";
}
}
3. The View
index.xhtml
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<f:view>
<h:form>
<h1>JavaBeat JSF 2.2 Examples</h1>
<h2>JSF2 DataTable - Deleting Rows Example</h2>
<h:panelGrid columns="2" border="1">
<h:outputText value="Enter Student Name:"/>
<h:inputText value="#{registerBean.student.name}"/>
<h:outputText value="Enter Student Major:"/>
<h:inputText value="#{registerBean.student.major}"/>
</h:panelGrid>
<br/>
<h:commandButton value="Add Student" action="#{registerBean.addStudent}"/>
<br/>
<br/>
<h:dataTable value="#{registerBean.students}" var="student" border="1">
<h:column>
<f:facet name="header">
<h:outputText value="Student Name"/>
</f:facet>
<h:outputText value="#{student.name}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Student Major"/>
</f:facet>
<h:outputText value="#{student.major}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Delete Student"/>
</f:facet>
<h:commandLink value="Delete" action="#{registerBean.delete(student)}"/>
</h:column>
</h:dataTable>
</h:form>
</f:view>
</html>
3. Faces Configuration File
faces-config.xml
<?xml version="1.0" encoding="UTF-8"?> <faces-config xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd" version="2.2"> <application> <resource-bundle> <base-name>net.javabeat.jsf.application</base-name> <var>msg</var> </resource-bundle> </application> </faces-config>
4. The Deployment Descriptor
web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5" metadata-complete="true"> <context-param> <description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2 </description> <param-name>javax.faces.STATE_SAVING_METHOD</param-name> <param-value>server</param-value> </context-param> <context-param> <param-name>javax.faces.application.CONFIG_FILES</param-name> <param-value>/WEB-INF/faces-config.xml</param-value> </context-param> <servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>/faces/*</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.xhtml</url-pattern> </servlet-mapping> <listener> <listener-class>com.sun.faces.config.ConfigureListener</listener-class> </listener> </web-app>
5. JSF DataTable Delete Row Demo
The below snapshot, shows you the using of the newly feature added for removing the rows from a data table using the passing pojo java object directly into the method that responsible of removal operation.
- The admins can add whatever students they want.
- The admins can remove whatever students they want.
- The deletion process has assumed that the uniqueness is covered through the name of the student. However, you have ability to consider whatever kind of identification. But consider the needs to override the equals method in the Student.
JavaScript Date Object