Browse DevX
Sign up for e-mail newsletters from DevX


Creating Highly Functional Tables in JSP Using DisplayTag and JavaScript-2 : Page 2




Building the Right Environment to Support AI, Machine Learning and Deep Learning

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 add DisplayTag capabilities to your own web application:

  1. Copy the JARs from the sample application's DisplayTagEx/WebContent/WEB-INF/lib directory into your web application's WEB-INF/lib directory. You can also download the latest DisplayTag libraries and dependencies from displaytag.sourceforge.net.
  2. Copy the sample application's DisplayTagEx/WebContent/css directory into the root of your web application. Note that displaytagex.css contains all of the CSS styles described in this article.
  3. Copy the sample application's DisplayTagEx/WebContent/images directory into the root of your web application. The files in this directory provide images for things like page navigation (first, previous, next, last) and sorting (ascending/descending).
  4. Copy the sample application's DisplayTagEx/src/displaytag.properties file into the top-level source directory for your web application. The properties file is described in the next section.

To install and run the article's sample application on your own app server (assumed here to be Tomcat 5):

  1. Create a directory called DisplayTagEx under Tomcat's /webapps directory.
  2. Copy the contents of the sample application's DisplayTagEx/WebContent/ into Tomcat's /webapps/DisplayTagEx.
  3. Run Tomcat.
  4. Point your browser at http://localhost:8080/DisplayTagEx.

Basic Usage
Once the required libraries are installed, using the DisplayTag library is a simple three-step process:

  1. Import the tag library at the top of your JSP:

    <%@ taglib uri="http://displaytag.sf.net" prefix="display" %>

  2. Link to a CSS file:

    <link rel="stylesheet" type="text/css" href="css/displaytagex.css">

  3. Add a <display:table> tag with nested <display:column> tags. For example:

    <display:table name="${orderDetails}" class="dataTable"> <display:column property="customerName" /> <display:column property="productName" /> </display:table>

In this example, <display:table> is drawing data from the EL expression ${orderDetails}. In the article's sample application, orderDetails is an ArrayList of OrderDetail objects that is created when the context is initialized. The table's class attribute has been set to dataTable, which corresponds to the .dataTable style in the CSS file displaytagex.css (see Listing 2). DisplayTag automatically sets the class attribute of alternating rows to odd and even, making it easy to assign them different colors. Note that while odd and even are DisplayTag CSS class names, dataTable is a name of my own choosing.

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:

<display:table … > <display:setProperty name="paging.banner.placement" value="bottom" /> </display:table>

Thanks for your registration, follow us on our social networks to keep up-to-date