Every Web developer has to tangle with tables. A new open source library, DisplayTag, can make life with tables much more organized. Find out how to combine the DisplayTag library with JavaScript to make a slick app that displays line item details.
by Stephen Strenn
| |||
isplaying data in a table is everyday work for Web application developers. In this 10-minute solution, you will learn how to quickly create feature-rich tables for your JSP pages using the DisplayTag library and a little JavaScript. Specifically, the table features that we want include:
The specific environment used to develop and deploy the article's sample application was DisplayTag library v1.1, JDK 5.0, MyEclipse 4.1, and Tomcat 5.5. However, the steps described in this article apply to any JSP developer looking to add data tables to his or her web application. http://assets.devx.com/articlefigs/15427.png Figure 1. A Better Table: DisplayTagEx uses the DisplayTag library and a little JavaScript.
|
Why Use DisplayTag? So why use DisplayTag anyway? Why not build your data tables with JSTL and HTML? It certainly is possible to create tables this way; the problem is that it requires a large amount of drudge work. In fact, getting even the simplest table of dynamic data to display requires use of the <table>, <tr>, <td>, <c:forEach>, <c:choose>, <c:when>, and <c:out> tags. Switching to a JSF-based application would help. For example, the <t:dataTable> tag from Apache's Tomahawk library eliminates the need for the JSTL and HTML tags, and provides built-in support for column sorting. Another option would be Oracle's recently open-sourced ADF component library, which includes the <af:table> tag. It supports column sorting, page navigation, and row selection. However it does not support exporting of the table's data. And as indicated above, these solutions have a significant drawback in that they only work in JSF-based applications. An honorable mention should be made here of the eXtremecomponents <ec:table> tag, which admirably meets most of our requirements. It lacks only row grouping and subtotals. DisplayTag Installation
To install and run the article's sample application on your own app server (assumed here to be Tomcat 5):
Basic Usage
The DisplayTag library has dozens and dozens of features, and while it is possible to configure each and every one of them for each and every table you want to display, a preferable solution is to modify displaytag.properties (see Listing 3). This file lets you to set the default value of table properties that are likely to remain the same throughout a web site. An example from the sample application's displaytag.properties is paging.banner.placement=top. This sets the default location of the page navigation banner on top of the table. If you wish to override this property (or any other property) for a particular table, simply nest a <display:setProperty> tag within the table, as in:
|
Column Sorting and Formatting Any column of a table can be made sortable by giving it a sortable attribute—as in <display:column sortable="true">. This makes the column title a hyperlink that allows the user to sort the table's data in ascending or descending order. When the HTML for the table is generated, the column's header cell is output as <th class="order1"> (ascending) or <th class="order2"> (descending). This makes it easy to add up or down arrows as CSS background images for the column header. Note that by default, DisplayTag will only sort the data on the currently displayed page (see Page Navigation, below). To change this behavior, you can add a sort.amount=list property to displaytag.properties, as has been done in the sample application. Table data can be formatted by adding a format="Pattern" attribute to the column where you want to apply formatting. The Pattern attribute can be any valid java.text.MessageFormat pattern. For example, <display:column format="{0,date,short}"> would output a date such as November 1st, 2003, in the form 11/1/03 (the actual format is locale-specific in this case). Row Grouping and Subtotals DisplayTag will group all rows that contain repeating data in any column that sports a group attribute, as in <display:column group="1">. In the article's sample application, I have set group="1" for the customer column, group="2" for the order number column, and group="3" for the order date column, which results in all three columns being grouped together (see Listing 1). Adding a TotalTableDecorator to a table will cause the values of any column that has a total attribute to be summed up by group and output on a separate row beneath the group. DisplayTag outputs the row with a CSS class of total, making it easy to apply a special style to subtotal rows. To set the table decorator you would use <display:table decorator="org.displaytag.decorator.TotalTableDecorator">. To enable subtotaling in a column, you would use <display:column total="true">. Page Navigation To illustrate how these properties are used, consider the following: This rather convoluted property tells DisplayTag to output a banner, similar to that shown in Figure 2, when all paging links are to be displayed.
A <div> is used here to set the CSS style for the banner to pagelinks. {1} is a placeholder that represents a link to the first page of data. Here it is being used as the target URL for a clickable image. {2}, {3}, and{4} are placeholders for the previous, next, and last pages, respectively. {0} is a special placeholder that outputs links to a set of numbered pages. Exporting Data to Excel, PDF, et al. DisplayTag will display an export banner for tables whose export attribute is set—e.g. <display:table export="true">. As with page navigation, there are a large number of export properties to configure. Default properties should be set in the displaytag.properties file. Assuming that you want all of the supported formats to be made available to the user, the properties that are typically modified include export.banner and export.format.filename. For example, in the sample application, I wanted to enforce right alignment and to apply the pagelinks CSS class to the list of export formats. So, in the displaytag.properties file (see Listing 3), I wrote: Less obvious here is that when the export banner is rendered, each export format hyperlink is rendered within a <span> whose class is "export format"—e.g. <span class="export excel">. Accordingly, the sample application has a CSS class associated with each format, as in: To set the filename of the exported data, modify the export.format.filename properties, as in export.pdf.filename=data.pdf. Javascript Row Handlers The sample application has a JavaScript file, RowHandlers.js (see Listing 4), with a function called addRowHandlers() that adds three event handlers to each row in an HTML table:
In the sample application, OrderDetails.jsp (see Listing 1) uses RowHandlers.js as described above. OrderDetails.jsp also employs a little sleight of hand by placing the row id values in a hidden column. This is accomplished by setting the <display:column>'s class and headerClass attributes to hidden, which is a CSS style whose display property is none. This is a simple but effective method for keeping data available in the request scope without having to display it to the user. DisplayTag is an open-source tag library that makes it easy to display tables of data in JSP's. And its applicability is almost limitless—from search results that require page navigation to product listings that benefit from column sorting to financial reports that can take advantage of numeric formatting, group subtotals, and PDF export. The list goes on and on, and I am sure that you will find uses for it in your own web application. So what's next? Download the sample application and try it out. After that, you can use OrderDetails.jsp as a template for your own dynamic tables. The CSS file, JavaScript file, properties file, and images included in the download can be used as is, or modified as needed to suit the style of your application. |