JSF 2 DataTable Example

The h:dataTable is one of the most important component that’s coming from the starting of JSF page. JSF 2 support the using of h:dataTable¬†by means of iterating a list of data that’s filled inside a bean’s list to create an HTML table. The most important attribute at the h:dataTable is the value attribute that represents the data over which h:dataTable iterates; the data must be one of the following types:

  • A Java Object (it’s not matter, cause the h:dataTable will iterate once if that object is scalar – not ¬†collection- making the object available in the body of the tag.
  • An Array.
  • An instance of java.util.List
  • An instance of java.sql.ResultSet
  • An instance of javax.servlet.jsp.jstl.sql.Result
  • An instance of javax.faces.model.DataModel.

At this post we would be introducing a simple h:dataTable that’s connected with an instance of Array. As h:dataTable iterates, it makes each item in the array, list, resultSet, etc., available within the body of the tag. The name of the item is specified with an h:dataTable’s var attribute.

Also Read:

The h:dataTable component can contain only h:column and it will discard all other component, but the h:column is capable of rendering an unlimited number of the components. The h:dataTable component provides the developer capability of adding a header and footer for the dataTable that’s being created.

1. Managed Bean

SimpleDataTableBean

package net.javabeat.jsf;
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean
@SessionScoped
public class SimpleDataTableBean {

	private List<Tutorial> tutorials = new ArrayList<Tutorial>();

	public SimpleDataTableBean() {
		this.tutorials.add(new Tutorial(1, "JSF 2"));
		this.tutorials.add(new Tutorial(2, "EclipseLink"));
		this.tutorials.add(new Tutorial(3, "HTML 5"));
		this.tutorials.add(new Tutorial(4, "Spring"));
	}

	public String register() {
		return "registrationInfo";
	}

	public List<Tutorial> getTutorials() {
		return tutorials;
	}

	public void setTutorials(List<Tutorial> tutorials) {
		this.tutorials = tutorials;
	}
}

2. Tutorial Class

Tutorial.java

package net.javabeat.jsf;

public class Tutorial {
	private int tutorialId;
	private String tutorialDescription;

	public Tutorial(int id, String desc){
		this.tutorialId = id;
		this.tutorialDescription = desc;
	}

	public int getTutorialId() {
		return tutorialId;
	}
	public void setTutorialId(int tutorialId) {
		this.tutorialId = tutorialId;
	}
	public String getTutorialDescription() {
		return tutorialDescription;
	}
	public void setTutorialDescription(String tutorialDescription) {
		this.tutorialDescription = tutorialDescription;
	}
}

3. The Views

simpleDataTable.xhtml

<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">
<h:form>
	<h1>
		<h:outputText value="JavaBeat JSF 2.2 Examples" />
	</h1>
	<h2>
		<h:outputText value="dataTable Example" />
	</h2>
	<h:outputText value="JavaBeat Site Provides the Following Tutorials:"/>
	<br/>
	<h:dataTable value="#{simpleDataTableBean.tutorials}" var="tutorial" border="1">
		<h:column>
			<f:facet name="header">
				<h:outputText value="Tutorial ID"/>
			</f:facet>
			<h:outputText value="#{tutorial.tutorialId}"/>
			<f:facet name="footer">
				<h:outputText value="Tutorial ID"/>
			</f:facet>
		</h:column>
		<h:column>
			<f:facet name="header">
				<h:outputText value="Tutorial Description"/>
			</f:facet>
			<h:outputText value="#{tutorial.tutorialDescription}"/>
			<f:facet name="footer">
				<h:outputText value="Tutorial Description"/>
			</f:facet>
		</h:column>
	</h:dataTable>
</h:form>
</html>

4. The Deployment Descriptor

<?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>client</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 2 DataTable Demo

The below snapshot shows you the complete example of using an h:dataTable with its header and footer caption. The snapshot should demonstrate the concept of associate an h:dataTable component with a simple list of Tutorial object and using the concept of var reference for accessing the records inside the body of the h:dataTable.

JSF 2 DataTable Example

Comments

comments

About Amr Mohammed

Speak Your Mind

*