Using JSF to Display Table Data

This page describes the process of using JSF to manage data that appears in tables.

Below you see an example data table where each item has:

  1. A textbox where user can specify the quantity
  2. An edit button where they can select a basket
  3. Submit/add buttons that act on the whole collection of baskets.

Using DataTables

When you surface links to allow the user to select the current row object then bind with data table and use dataTable.rowData().

Steps to follow in order to use DataTables:

  • Create an HtmlDataTable attribute in your managed bean.
  • Create a List<GiftBasket> attribute that will hold the backing data
  • Create getter/setters for both attributes
  • In your <h:dataTable> element include a binding and value attributes that points to the htmlDataTable, and the backing List you added to the managed bean.

The Managed Bean is defined like this…

private List<GiftBasket> list = new ArrayList<GiftBasket>();
private HtmlDataTable dataTable;
    // getters setters omitted.

The dataTable is defined like this in the JSP. As you can see a “backing” list is still necessary to hold the table data.

<h:dataTable var="giftBasket" value="#{page1MB.list}" binding="#{page1MB.dataTable}">

The Action column is defined like this in the JSP.

    <f:facet name="header"><h:outputText value="Action"/></f:facet>
    <h:commandLink value="edit" action="#{page1MB.editBasket}"/>

The Add button is mapped to the following method. It populates the backing list with data.

	public String addAllGiftBaskets() {
		list = giftBasketDataManager.getAllGiftBaskets();
		return null; // stay on the same page

As you can see the value attribute points to a standard ArrayList.

When you run the code the system should print “Edit basket called for: ” at the server console.

    public String editBasket() {
        GiftBasket basket = (GiftBasket)dataTable.getRowData();
        System.out.println("Edit basket called for: " + basket);
        return null;

Using ListDataModel

DataModels allow you to do what dataTables can do. Examples for ListDataModel or any other DataModel are rare on the internet. the following article describes some more information about the topic: http://forums.sun.com/thread.jspa?threadID=653909

The following example is based on the screen shot above.

The big difference when using ListDataModel is that you only need to specify the “value” attribute of the dataTable element. A binding to a HtmlDataTable attribute is not necessary.

<h:dataTable var="giftBasket" value="#page1MB.selectedGiftBasketDataModel}" >

In your Managed Bean you define the following attribute.

private ListDataModel selectedGiftBasketDataModel =
    new ListDataModel(new ArrayList<GiftBasket>());

To populate the table with data you click the add button and that executes the following code in the managed bean.

	public String addAllGiftBaskets() {
		List<GiftBasket> list = giftBasketDataManager.getAllGiftBaskets();
		return null;

To get a reference to the data for a single row that was selected just do the following:

	public String editBasket() {
		GiftBasket basket = (GiftBasket)selectedGiftBasketDataModel.getRowData();
		System.out.println("Edit basket called for: " + basket);
		return null; // stay on the same page

To print data for all the rows, do the following.

	public String printResults() {
		List<GiftBasket> list = (List<GiftBasket>) selectedGiftBasketDataModel.getWrappedData();

		for(GiftBasket basket : list) {
		return null; // stay on the same page

Complete JSP

This is the “ListDataModel” version of the JSP used in the above example:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="f"  uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h"  uri="http://java.sun.com/jsf/html"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Page 1</title>
<link rel="stylesheet" type="text/css" href="styles/style.css" />
<h:form id="myform">
<h:messages showDetail="#{true}" showSummary="#{false}" />
    <div id="left" style="margin-bottom: 20px;">
		The following is an example a user input form created from a database.

	<h:dataTable var="giftBasket" value="#{page1MB.selectedGiftBasketDataModel}" >
			<f:facet name="header"><h:outputText value="ID"/></f:facet>
			<h:outputText value="#{giftBasket.id}"/>
			<f:facet name="header"><h:outputText value="Gift Basket Type"/></f:facet>
			<h:outputText value="#{giftBasket.type}"/>
			<f:facet name="header"><h:outputText value="Quantity"/></f:facet>
			<h:inputText value="#{giftBasket.quantity}" size="4"/>
			<f:facet name="header"><h:outputText value="Action"/></f:facet>
			<h:commandLink value="edit" action="#{page1MB.editBasket}"/>
	<h:commandButton value="submit" action="#{page1MB.printResults}"/>
	<h:commandButton value="add" action="#{page1MB.addAllGiftBaskets}"/>

0 Responses to “Using JSF to Display Table Data”

  1. Leave a Comment

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 77 other followers

August 2010
« Jun   Sep »

Blog Stats

  • 846,577 hits

%d bloggers like this: