DisplayTagライブラリを使用する理由
まず、なぜDisplayTagライブラリを使用するのかを考えてみましょう。JSTLやHTMLでデータテーブルを作成してはいけないのでしょうか？ そのような方法でテーブルを作成することも可能ですが、問題は、膨大な手間がかかることです。実際、動的データを表示するごく単純なテーブルを作成するにも、<table>、<tr>、<td>、<c:forEach>、<c:choose>、<c:when>、<c:out>というタグを使用しなければなりません。
1つの方法は、JSFベースのアプリケーションに切り替えることです。例えば、ApacheのTomahawkライブラリの<t:dataTable>タグを使用すれば、JSTLやHTMLのタグを使わずに済み、なおかつ列の並べ替え機能を実現できます。また、最近オープンソース化されたOracleのADFコンポーネントライブラリを使うという方法もあります。このライブラリの<af:table>タグは、列の並べ替え、ページナビゲーション、行の選択をサポートしています（しかし、テーブルデータのエクスポートには対応していません）。ただし、これらの方法には、JSFベースのアプリケーションでしか機能しないという大きな欠点があります。
ここで紹介しておきたいのが、eXtremecomponentsの<ec:table>タグです。これは我々が求める要件をほぼ満たしており、グループ化と小計の計算ができないだけです。
DisplayTagライブラリのインストール
自分で開発しているWebアプリケーションにDisplayTagの機能を追加するには、次のようにします。
- サンプルアプリケーションの「DisplayTagEx/WebContent/WEB-INF/lib」ディレクトリに含まれている一連のJARを、Webアプリケーションの「WEB-INF/lib」ディレクトリにコピーします。最新のDisplayTagライブラリと従属ファイルをdisplaytag.sourceforge.netからダウンロードしてもかまいません。
- サンプルアプリケーションの「DisplayTagEx/WebContent/css」ディレクトリを、Webアプリケーションのルートにコピーします。このディレクトリ内の「displaytagex.css」には、本稿で説明するCSSスタイルがすべて含まれています。
- サンプルアプリケーションの「DisplayTagEx/WebContent/images」ディレクトリを、Webアプリケーションのルートにコピーします。このディレクトリには、ページナビゲーション（先頭へ、前へ、次へ、末尾へ）と並べ替え（昇順/降順）の機能に使われる画像が入っています。
- サンプルアプリケーションの「DisplayTagEx/src/displaytag.properties」ファイルを、Webアプリケーションの最上位のソースディレクトリにコピーします。このプロパティファイルについては次の節で説明します。
本稿のサンプルアプリケーションを実際のアプリケーションサーバーにインストールして実行するには、次のようにします（ここではTomcat 5を想定）。
- Tomcatの「/webapps」ディレクトリの下に「DisplayTagEx」というディレクトリを作成します。
- サンプルアプリケーションの「DisplayTagEx/WebContent/」の内容をTomcatの「/webapps/DisplayTagEx」にコピーします。
- Tomcatを実行します。
- ブラウザから「http://localhost:8080/DisplayTagEx」を参照します。
基本的な使い方
実際にDisplayTagライブラリを使用するには、次の3段階のプロセスを踏みます。
- JSPの先頭でタグライブラリをインポートします。
- CSSファイルにリンクします。
<display:table>タグを追加し、このタグ内に<display:column>タグを記述します。例えば次のようにします。
<%@ taglib uri="http://displaytag.sf.net" prefix="display" %>
<link rel="stylesheet" type="text/css"
href="css/displaytagex.css">
<display:table name="${orderDetails}" class="dataTable"> <display:column property="customerName" /> <display:column property="productName" /> </display:table>
この例では、<display:table>タグは${orderDetails}というEL式からデータを取得しています。本稿のサンプルアプリケーションにおいて、orderDetailsは、コンテキストの初期化時に作成されるOrderDetailオブジェクトのArrayListを表します。ここではテーブルのclass属性をdataTableに設定していますが、これはCSSファイル「displaytagex.css」（リスト2参照）内の.dataTableスタイルに対応します。DisplayTagライブラリは、表の奇数行と偶数行のclass属性をそれぞれoddとevenに自動的に設定するので、それぞれに異なる背景色を簡単に割り当てることができます。なお、oddとevenはDisplayTag CSSのクラス名ですが、dataTableというクラス名は私が自由に付けたものです。
DisplayTagライブラリには何十という機能があり、表示しようとする個々のテーブルについて、それぞれの機能を細かく設定することができます。この設定を行う最も効率的な方法は、「displaytag.properties」ファイル（リスト3参照）に記述することです。
sort.amount=list
paging.banner.placement=top
paging.banner.all_items_found=
paging.banner.some_items_found=
paging.banner.one_item_found=
paging.banner.onepage=
paging.banner.full=<div class="pagelinks" align="right"><a href={1}>
<img src="images/first.gif"></a><a href={2}>
<img src="images/prev.gif"></a>{0}<a href={3}>
<img src="images/next.gif"></a><a href={4}>
<img src="images/last.gif"></a></div>
paging.banner.first=<div class="pagelinks" align="right"><a href={1}>
<img src="images/first.gif"></a><a href={2}>
<img src="images/prev.gif"></a>{0}<a href={3}>
<img src="images/next.gif"></a><a href={4}>
<img src="images/last.gif"></a></div>
paging.banner.last=<div class="pagelinks" align="right"><a href={1}>
<img src="images/first.gif"></a><a href={2}>
<img src="images/prev.gif"></a>{0}<a href={3}>
<img src="images/next.gif"></a><a href={4}>
<img src="images/last.gif"></a></div>
export.banner=<div class="pagelinks" align="right">{0}</div>
export.types=csv excel xml pdf rtf
export.excel=true
export.csv=true
export.xml=true
export.pdf=true
export.rtf=true
export.excel.class=org.displaytag.export.excel.DefaultHssfExportView
export.pdf.class=org.displaytag.export.DefaultPdfExportView
export.rtf.class=org.displaytag.export.DefaultRtfExportView
export.excel.filename=data.xls
export.pdf.filename=data.pdf
export.xml.filename=data.xml
export.csv.filename=data.csv
export.rtf.filename=data.rtf
このファイルでは、Webサイト全体で共通して適用するテーブルプロパティのデフォルト値を設定します。例えば、サンプルアプリケーションの「displaytag.properties」には、paging.banner.placement=topという行が含まれています。これは、ページナビゲーションバナーを既定でテーブルの上に配置することを意味します。特定のテーブルでこのプロパティ（またはその他のプロパティ）の既定値とは異なる設定を使用したい場合は、次のようにテーブル内に<display:setProperty>タグを入れ子で記述します。
<display:table ... > <display:setProperty name="paging.banner.placement" value="bottom" /> </display:table>
