Jsf Datatable example
Requirements
- Eclipse IDE for Java EE Developers (Download).
- Apache Tomcat 7 (Download).
- JSF Library file(2.0.10 binary) (javax.faces-2.0.10.jar).
Project structure:
Edit the web.xml file,
[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_3_0.xsd"
id="WebApp_ID" version="3.0">
<display-name>DataTableJsf</display-name>
<welcome-file-list>
<welcome-file>index.xhtml</welcome-file>
</welcome-file-list>
<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>
</web-app>
[/xml]
Edit the faces-config.xml file,
[xml]
<?xml version="1.0" encoding="UTF-8"?>
<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"
version="2.0">
<managed-bean>
<managed-bean-name>emp</managed-bean-name>
<managed-bean-class>in.javadomain.Bean.EmpDetailsList</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
</faces-config>
[/xml]
Create a Bean class (EmpDetailsList) and paste the below code,
[java]
package in.javadomain.Bean;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean
@SessionScoped
public class EmpDetailsList {
private static final empDetail[] empList = new empDetail[] {
new empDetail("100", "Naveen", 5000), new empDetail("101", "Divya", 9000),
new empDetail("102", "Hems", 6000),
new empDetail("103", "Rvs", 11000),
new empDetail("104", "Chudar", 7000) };
public empDetail[] getempList() {
return empList;
}
public static class empDetail {
String empId;
String empName;
int empSalary;
public empDetail(String employeeId, String employeeName,
int employeeSalary) {
this.empId = employeeId;
this.empName = employeeName;
this.empSalary = employeeSalary;
}
public String getEmpId() {
return empId;
}
public void setEmpId(String empId) {
this.empId = empId;
}
public String getEmpName() {
return empName;
}
public void setEmpName(String empName) {
this.empName = empName;
}
public int getEmpSalary() {
return empSalary;
}
public void setEmpSalary(int empSalary) {
this.empSalary = empSalary;
}
}
}
[/java]
Create a DataTable.xhtml file and paste the below code,
[html]
<?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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<h:body>
<h:form>
<h:dataTable value="#{emp.empList}" var="dt">
<h:column>
<f:facet name="header">Employee Id</f:facet>
#{dt.empId}
</h:column>
<h:column>
<f:facet name="header">Employee Name</f:facet>
#{dt.empName}
</h:column>
<h:column>
<f:facet name="header">Employee Salary</f:facet>
#{dt.empSalary}
</h:column>
</h:dataTable>
</h:form>
</h:body>
</html>
[/html]
Run the DataTable.xhtml (right click on this fle -> Run as -> Run On server).
[plain gutter=”false”] Note:Ensure you have created the server already. [/plain]
Output:
Download the Source code:
Recommended Jsf Books: