We use JSF datatable to display Table of information. We can also use the datatable to edit / delete and add new records. Below I have explained how I have done it using h:dataTable.

Here I assume that you already have a JSF application running. If you are new to JSF and would like to setup a freash project on JSF on eclipse please go through the JSF Beginners tutorial.
JSF Tutorials for beginners

The application explained here displays employee data (name and address) in a datatable. User can also select records from the table and add / edit / delete records also. I am using ajax4Jsf library for the effect of selecting a row.

The final jsf page works as follows:
User can click on column named ‘Select One’. The data gets populated to the below table. User can edit or delete the record. If user edits the record he clicks save button to save it. If user wants to delete the record he will click delete. If user wants to enter new row, he can click cancel (if any row has been selected) and enter new record and save it.The new record will appear in the table.

Setup: Ajax4Jsf Configuration

Dowload:

ajax4jsf.jar (http://labs.jboss.com/portal/jbossajax4jsf/downloads)

And  oscache-2.2.jar (http://www.mmbase.org/download/jars/oscache-2.2.jar)

Copy them to the web-inf/lib directory.

Open web.xml file and include following in appropriate places:

<context-param>

<param-name>org.ajax4jsf.SKIN</param-name>

<param-value>DEFAULT</param-value>

</context-param>

<filter>

<display-name>Ajax4jsf Filter</display-name>

<filter-name>ajax4jsf</filter-name>

<filter-class>org.ajax4jsf.Filter</filter-class>

</filter>

<filter-mapping>

<filter-name>ajax4jsf</filter-name>

<url-pattern>/*</url-pattern>

</filter-mapping>

JSF Beans:

Create a package named: com.myapp.example. Create a bean called EmployeeBean like below:

package com.myapp.example;

public class EmployeeBean {

private String name;

private String address;

private Integer empId;

public EmployeeBean(){}

public EmployeeBean(Integer empId,String name, String address){

this.name = name;

this.address = address;

this.empId = empId;

}

public EmployeeBean(EmployeeBean bean){

this.empId = bean.getEmpId();

this.name = bean.getName();

this.address = bean.getAddress();

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public String getAddress() {

return address;

}

public void setAddress(String address) {

this.address = address;

}

public Integer getEmpId() {

return empId;

}

public void setEmpId(Integer empId) {

this.empId = empId;

}

}

Now create a Managed bean called EmployeeActionBean and copy contents  below:

package com.myapp.example;

import java.util.List;

import java.util.ArrayList;

import javax.faces.component.html.HtmlDataTable;

import javax.faces.context.FacesContext;

import javax.faces.application.FacesMessage;

public class EmployeeActionBean {

List<EmployeeBean> employees;

HtmlDataTable table;

int selectedRowIndex = -1;

EmployeeBean currentEmp = new EmployeeBean();

public HtmlDataTable getTable() {

return table;

}

public void setTable(HtmlDataTable table) {

this.table = table;

}

public EmployeeActionBean(){

employees = new ArrayList<EmployeeBean>();

employees.add(new EmployeeBean(1,”Mark”,”A666/88, XX Street, Pune”));

employees.add(new EmployeeBean(2,”Smitha”,”6/88, AA Street, Delhi”));

employees.add(new EmployeeBean(3,”Babita”,”BB/88, BB Street, Chennai”));

employees.add(new EmployeeBean(4,”Rajesh”,”098, CC Street, Mangalore”));

employees.add(new EmployeeBean(5,”Rina”,”77, DDD Street, Bangalore”));

employees.add(new EmployeeBean(6,”Rita”,”88, EE Street, Hydrabad”));

employees.add(new EmployeeBean(7,”Ramya”,”6, FF Street, Pune”));

}

public List<EmployeeBean> getEmployees() {

return employees;

}

public void setEmployees(List<EmployeeBean> employees) {

this.employees = employees;

}

public int getSelectedRowIndex() {

return selectedRowIndex;

}

public void setSelectedRowIndex(int selectedRowIndex) {

this.selectedRowIndex = selectedRowIndex;

}

public void setSelectedItem() {

String rowIndex = (String) FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get(“selectedRowIndex”);

int iRowIndx = Integer.parseInt(rowIndex);

selectedRowIndex = iRowIndx;

table.setRowIndex(iRowIndx);

EmployeeBean empBeanTmp = (EmployeeBean) table.getRowData();

//if(questionBeanTmp.getAnswers() == null || questionBeanTmp.getAnswers().size() == 0){

try{

currentEmp = new EmployeeBean(empBeanTmp); // creating new for edit.. will not affect origional

}catch(Exception e){

e.printStackTrace();

}

}

public String saveUpdateAction(){

if(currentEmp.getName() == null || currentEmp.getName().trim().equals(“”)){

FacesContext.getCurrentInstance().addMessage(null,new FacesMessage(FacesMessage.SEVERITY_ERROR, “Name Required!”,”Please Enter Name”));

return “error”;

}

if(currentEmp.getAddress() == null || currentEmp.getAddress().trim().equals(“”)){

FacesContext.getCurrentInstance().addMessage(null,new FacesMessage(FacesMessage.SEVERITY_ERROR, “Address Required!”,”Please Enter Address”));

return “error”;

}

if(currentEmp.getEmpId() == null){

Integer i = (employees.get(employees.size() -1)).getEmpId()+1;

employees.add(new EmployeeBean(i,currentEmp.getName(),currentEmp.getAddress()));

currentEmp = new EmployeeBean();

selectedRowIndex = -1;

}else{

for(EmployeeBean emp:employees){

if(emp.getEmpId() == currentEmp.getEmpId())

{

EmployeeBean emptmp = emp;

emptmp.setName(currentEmp.getName());

emptmp.setAddress(currentEmp.getAddress());

}

}

}

return “success”;

}

public String DeleteAction(){

if(currentEmp.getEmpId() == null || currentEmp.getEmpId()== 0 ){

FacesContext.getCurrentInstance().addMessage(null,new FacesMessage(FacesMessage.SEVERITY_ERROR, “Selection Required!”,”Please Select a Record”));

return “error”;

}

for(int i=0;i<employees.size();i++){

if(employees.get(i).getEmpId() == currentEmp.getEmpId())

{

employees.remove(i);

break;

}

}

currentEmp = new EmployeeBean();

selectedRowIndex = -1;

return “success”;

}

public void ClearAction(){

currentEmp = new EmployeeBean();

selectedRowIndex = -1;

}

public EmployeeBean getCurrentEmp() {

return currentEmp;

}

public void setCurrentEmp(EmployeeBean currentEmp) {

this.currentEmp = currentEmp;

}

}

Configure the Bean

Enter following in the Faces-config.xml inside <faces-config> tag.

<managed-bean>

<managed-bean-name>employeeActionBean</managed-bean-name>

<managed-bean-class>com.myapp.example.EmployeeActionBean</managed-bean-class>

<managed-bean-scope>session</managed-bean-scope>

</managed-bean>

Create a file named employeeAction.jsp  and copy the below contents:

<%@taglib uri=”http://java.sun.com/jsf/html” prefix=”h”%>

<%@taglib uri=”http://java.sun.com/jsf/core” prefix=”f”%>

<%@ taglib uri=”https://ajax4jsf.dev.java.net/ajax” prefix=”a4j”%>

<html>

<body bgcolor=”#FFFFFF” text=”#000000″ topmargin=”0″>

<f:view>

<h:form id=”frmEditEmployees”>

<table border=”0″ cellspacing=”0″ cellpadding=”0″>

<tr >

<td colspan=”2″>

<h:messages id=”msg1″ errorStyle=”color:red;font-family:Tahoma;font-size:12px;font-weight:bold;”

infoStyle=”color:blue;font-family:Tahoma;font-size:12px;font-weight:bold;”  />

</td>

</tr>

<tr>

<td width=”100%”>

<h:dataTable id=”empTable”

value=”#{employeeActionBean.employees}”

binding=”#{employeeActionBean.table}”

var=”emp”

>

<h:column>

<f:facet name=”header” >

<h:outputText style=”font-size:12px;” value=”is Selected” id=”h0″/>

</f:facet>

<h:graphicImage

value=”/checkmark.gif”

alt=”Current Selection”

rendered=”#{employeeActionBean.table.rowIndex==guruTestsActionBean.selectedRowIndex}”

id=”selectedicon”></h:graphicImage>

</h:column>

<h:column>

<f:facet name=”header” >

<h:outputText style=”font-size:12px;” value=”Select One” id=”h1″/>

</f:facet>

<a4j:commandLink  action=”#{employeeActionBean.setSelectedItem}”

rendered=”#{employeeActionBean.table.rowIndex!=employeeActionBean.selectedRowIndex}”

reRender=”empTable,detailtab” >

<h:graphicImage value=”/edit_icon.gif”    alt=”Click here to edit the record” />

<f:param name=”selectedRowIndex” value=”#{employeeActionBean.table.rowIndex}”/>

</a4j:commandLink>

</h:column>

<h:column>

<f:facet name=”header” >

<h:outputText style=”font-size:12px;” value=”Employee Name” id=”h2″/>

</f:facet>

<h:outputText style=”font-size:12px;” value=”#{emp.name}” />

</h:column>

<h:column>

<f:facet name=”header” >

<h:outputText style=”font-size:12px;” value=”Employee Address” id=”h3″/>

</f:facet>

<h:outputText style=”font-size:12px;” value=”#{emp.address}” />

</h:column>

</h:dataTable>

</td>

</tr>

<tr>

<td>

<br />

</td>

</tr>

<tr>

<td>

<h:panelGrid id=”detailtab”>

Name: <h:inputText value=”#{employeeActionBean.currentEmp.name}” /> <br/>

Address:    <h:inputText value=”#{employeeActionBean.currentEmp.address}” /> <br/>

<h:commandButton value=”Save” action=”#{employeeActionBean.saveUpdateAction}” /> &nbsp; &nbsp; &nbsp;

<h:commandButton value=”Cancel” action=”#{employeeActionBean.ClearAction}” /> &nbsp; &nbsp; &nbsp;

<h:commandButton value=”Delete” action=”#{employeeActionBean.DeleteAction}” />

</h:panelGrid>

</td>

</tr>

</table>

</h:form>

</f:view>

</body>

</html>

Also download following 2 images which are used in the jsp file.

http://www.skill-guru.com/blog/wp-content/uploads/2009/08/edit_icon.gif

http://www.skill-guru.com/blog/wp-content/uploads/2009/08/checkmark.gif

Now start the tomcat and run the jsf file you will see something like below: