 |
    DisplayTagとJavaScriptによる高機能なテーブルの作成この記事のURLhttp://japan.internet.com/developer/20060509/25.html
著者：Stephen Strenn
海外internet.com発の記事
はじめにもしあなたがWebアプリケーション開発者ならば、データをテーブルとして表示するための作業を毎日行っていることでしょう。本稿では、DisplayTagライブラリと簡単なJavaScriptを使用して、さまざまな機能を備えたJSPページ用のテーブルを短時間で作成する方法を紹介します。具体的には、次のような機能を持ったテーブルを作成します。
本稿では、いくつもの注文の明細行を表示するDisplayTagExというサンプルアプリケーションを紹介します。まずはDisplayTagExのライブデモを見てください（画面例は図1を参照）。DisplayTagExアプリケーションでは、1つ1つの注文ごとに明細行をグループ化し、各グループの小計を示します。ユーザーが行のどこかをクリックすると、選択した項目に関する詳細情報のページにジャンプします。リスト1とリスト2に、それぞれ「OrderDetails.jsp」と「displaytagex.css」のソースを示します。 図1 DisplayTagライブラリと簡単なJavaScriptで高機能のテーブルを実現したDisplayTagExサンプルアプリケーション  リスト1 図1のテーブルを生成するための＜display＞コード（「OrderDetails.jsp」より）
<display:table name="${orderDetails}" export="true" id="row" class="dataTable" defaultsort="1" defaultorder="ascending" pagesize="16" cellspacing="0" decorator="org.displaytag.decorator.TotalTableDecorator"> <display:column property="id" title="ID" class="hidden" headerClass="hidden" media="html" /> <display:column property="customerName" title="Customer" sortable="true" group="1" class="customer" headerClass="customer" /> <display:column property="orderNumber" title="Order Number" sortable="true" group="2" class="orderNumber" headerClass="orderNumber" /> <display:column property="orderDate" title="Order Date" sortable="true" format="{0,date,short}" group="3" class="orderDate" headerClass="orderDate" /> <display:column property="productName" title="Product" sortable="true" class="productName" /> <display:column property="quantity" title="Quantity" sortable="true" class="quantity" headerClass="quantity" /> <display:column property="total" title="Line Item Total" sortable="true" format="{0,number, currency}" total="true" class="lineItemTotal" headerClass="lineItemTotal" /> </display:table> リスト2 Displaytagex.css
.dataTable {
background-color: white;
border: 1px solid #000066;
font-size : 9pt;
margin: 5px;
width:100%;
}
.dataTable th {
border-right: 1px solid #c8c8ff;
padding-left: 2px;
padding-right:12px;
font-family: arial, helvetica, sans-serif;
font-weight: bold;
color: white;
background-color: #000066;
margin-right: 10px;
white-space: nowrap;
}
.dataTable td {
font-family: verdana, arial, helvetica, sans-serif;
padding-left: 2px;
}
.dataTable tr.total td {
white-space: nowrap;
vertical-align: top;
font-weight: bold;
border-top: 1px solid black;
padding-bottom: 10px;
}
.dataTable tr.total td.customer {
visibility: hidden;
}
.dataTable td.hidden {
display: none;
}
.dataTable th.hidden {
display: none;
}
.dataTable th.r {
text-align: right;
padding-right: 10px;
}
.dataTable th.c {
text-align: center;
}
.dataTable td.r {
text-align: right;
padding-right: 10px;
}
.dataTable td.c {
text-align: center;
}
.dataTable tr.odd {
background-color: whitesmoke;
}
.dataTable tr.even {
background-color: #d6cfe6;
}
.dataTable th a ,.dataTable th a:visited {
text-align: left;
color: white;
}
.dataTable th a:hover {
color: #ffcc00;
background-color: transparent;
}
.dataTable .order1 {
background-position: right;
background-image: url(../images/arrow_up.gif);
background-repeat: no-repeat;
}
.dataTable .order2 {
background-position: right;
background-image: url(../images/arrow_down.gif);
background-repeat: no-repeat;
}
.pagelinks {
color: #999999;
margin: 5px;
}
.pagelinks img {
vertical-align: middle;
}
span.export {
padding: 0 4px 1px 20px;
font-size: x-small;
text-align: center;
}
span.excel {
background-image: url(../images/ico_file_excel.png);
background-repeat: no-repeat;
width: 16px;
}
span.csv {
background-image: url(../images/ico_file_csv.png);
background-repeat: no-repeat;
width: 16px;
}
span.xml {
background-image: url(../images/ico_file_xml.png);
background-repeat: no-repeat;
width: 16px;
}
span.pdf {
background-image: url(../images/ico_file_pdf.png);
background-repeat: no-repeat;
width: 16px;
}
span.rtf {
background-image: url(../images/ico_file_rtf.png);
background-repeat: no-repeat;
width: 16px;
}
.dataTable tr.rowMouseOver {
background-image: url(../images/selected.gif);
background-repeat: repeat-x;
background-color: #ffff99;
}
html,body {
width: 100%;
height: 100%;
margin: 0px;
font-family: arial, helvetica, sans-serif;
font-size: 9pt;
}
.pageHeader {
height: 60px;
background-image: url(../images/header.gif);
background-repeat: repeat-x;
}
.pageHeaderText {
font-size: 30px;
margin-left: 5px;
color: whitesmoke;
font-family: "century gothic", verdana, arial, helvetica,本稿のサンプルアプリケーションの開発および配置に使用した環境は、DisplayTagライブラリv1.1、JDK 5.0、MyEclipse 4.1、Tomcat 5.5です。ただし、ここで紹介した手順は、JSPを使ったWebアプリケーション開発の現場ならば、どんな環境でも応用できます。 DisplayTagライブラリを使用する理由 まず、なぜDisplayTagライブラリを使用するのかを考えてみましょう。JSTLやHTMLでデータテーブルを作成してはいけないのでしょうか？ そのような方法でテーブルを作成することも可能ですが、問題は、膨大な手間がかかることです。実際、動的データを表示するごく単純なテーブルを作成するにも、 1つの方法は、JSFベースのアプリケーションに切り替えることです。例えば、ApacheのTomahawkライブラリの ここで紹介しておきたいのが、eXtremecomponentsの DisplayTagライブラリのインストール自分で開発しているWebアプリケーションにDisplayTagの機能を追加するには、次のようにします。
本稿のサンプルアプリケーションを実際のアプリケーションサーバーにインストールして実行するには、次のようにします（ここではTomcat 5を想定）。
基本的な使い方実際にDisplayTagライブラリを使用するには、次の3段階のプロセスを踏みます。
<%@ 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> この例では、 DisplayTagライブラリには何十という機能があり、表示しようとする個々のテーブルについて、それぞれの機能を細かく設定することができます。この設定を行う最も効率的な方法は、「displaytag.properties」ファイル（リスト3参照）に記述することです。 リスト3 Displaytag.properties
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」には、 <display:table ... > <display:setProperty name="paging.banner.placement" value="bottom" /> </display:table> 列の並べ替えと書式設定 テーブル内の列を並べ替え可能にするには、その列に 既定では、現在表示されているページ上のデータだけが並べ替えられます（後述の「ページナビゲーション」を参照）。この動作を変更するには、「displaytag.properties」ファイルに テーブルデータを書式設定するには、書式を適用したい列に 行のグループ化と小計の計算DisplayTagの大きな特徴の1つは、行のグループ化と小計の計算の機能を組み込みで備えていることです。例えば、数多くの注文の明細行をデータソースから取得し、その結果を表示したいとします。このような場合によく問題になるのが、同じ情報が繰り返し表示されることです。同じ注文を構成する連続した明細行では、同じ顧客名、注文番号、注文日などが繰り返されることになります。このような状態だと、どの明細行がどの注文に関連付けられているのかが判別しにくくなります。 DisplayTagは、グループ属性を持つ列（例えば また、テーブルにTotalTableDecoratorというテーブル装飾を指定していることに注目してください。これにより、 ページナビゲーション DisplayTagでは、 これらのプロパティの使い方を示すために、具体的な例を1つ紹介しておきます。
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>
このやや複雑なプロパティは、すべてのページングリンクを表示するときに、図2のようなバナーを出力することをDisplayTagに指示しています。 図2 DisplayTagExのすべてのページングリンクを表示するページングバナー  ここでは、 Excel、PDFなどへのエクスポート DisplayTagで表現したテーブルのデータをCSV（Comma Separated Value）、XML、Excel、PDF、RTFにエクスポートするには、テーブル属性を1つ追加し、プロパティをいくつか設定し、それぞれのエクスポートタイプについて まず、テーブルに ページナビゲーションのときと同様に、DisplayTagにはエクスポート関連のプロパティが数多く用意されています。既定のプロパティは「displaytag.properties」ファイルで設定します。サポートされているすべての形式をユーザーが使用できるようにする場合は、通常は 例えば、今回のサンプルアプリケーションでは、エクスポート形式のリスト（エクスポートバナー）を右端に配置し、このリストにpagelinksというCSSクラスを適用したいので、「displaytag.properties」ファイルに次のように記述しています（リスト3参照）。
export.banner=<div class="pagelinks" align="right">{0}</div>
この設定だけを見ると少々分かりにくいのですが、エクスポートバナーが描画されるときには、個々のエクスポート形式のハイパーリンクが「export format」クラスの
span.excel {
background-image: url(../images/ico_file_excel.png);
background-repeat: no-repeat;
width: 16px;
}
エクスポートしたデータのファイル名を設定するには、 Javascriptによる行操作今回のサンプルアプリケーションのもう1つの要件は、ユーザーが行をマウスポインタで指すとその行が強調表示され、行のどこかをクリックすると、その行についての識別情報を含んだ新しい要求が生成されるようにすることです。この要件を満たすには、何らかのJavaScriptを取り入れる必要があります。 サンプルアプリケーションでは、「RowHandlers.js」というJavaScriptファイルを用意し（リスト4参照）、その中に
リスト4 Rowhandlers.js
// Adds onmouseover, onmouseout, and onclick handlers // to each table row. // The onmouseover handler changes the row’s class attribute to // rowMouseOver. The onmouseout handler changes it back. // The onclick function makes a request for the specified url, // including the innerHTML of the specified column // as a request parameter. function addRowHandlers(tableId, rowClassName, url, paramName, columnIndex) { var previousClass = null; var table = document.getElementById(tableId); var rows = table.getElementsByTagName("tr"); for (i = 1; i < rows.length; i++) { rows[i].onmouseover = function () { previousClass = this.className; this.className = this.className + " " + rowClassName ; }; rows[i].onmouseout = function () { this.className = previousClass; }; rows[i].onclick = function () { var cell = this.getElementsByTagName("td")[columnIndex]; var paramValue = cell.innerHTML; location.href = url + "?" + paramName + "=" + paramValue; }; } } この「RowHandlers.js」を自作のJSPで利用するには、次のようにします。
<script src="js/RowHandlers.js" language="javascript" type="text/javascript" /></script>
<body onload= "addRowHandlers(’row’, ’rowMouseOver’, 手順2のタグの意味を解釈してみましょう。まず、ページの サンプルアプリケーションでは、「OrderDetails.jsp」（リスト1参照）が前述の「RowHandlers.js」を使用しています。また、「OrderDetails.jsp」では、行IDの値を非表示の列に配置するという手法を使っています。この列を非表示にするために、 DisplayTagは、JSP内にテーブルデータを簡単に表示したいときに役立つオープンソースのタグライブラリです。このライブラリは幅広い用途に利用でき、例えば検索アプリケーションでは検索結果を特定の列で並べ替え、そこから製品リストにジャンプさせるページナビゲーションを実現できますし、財務レポートアプリケーションでは数値の書式設定、グループ集計、PDFへのエクスポートの機能を利用できます。可能性は無限にあり、おそらく読者の皆さんが開発しているWebアプリケーションでも、DisplayTagがお役に立つでしょう。 まずサンプルアプリケーションをダウンロードし、実際に試してみてください。その後、「OrderDetails.jsp」をテンプレートとして使い、目的に合ったダイナミックテーブルを作成してみましょう。ダウンロードサンプルに収録されているCSSファイル、JavaScriptファイル、プロパティファイル、画像ファイルは、そのままの形で利用しても、個々のアプリケーションに合わせて必要に応じて改変してもかまいません。 著者紹介Stephen Strenn（Stephen Strenn）
カリフォルニア大学デービス校で電子工学の修士号を取得。Cogito Research Groupの主任調査員であり、赤外線検出器企業のコンサルタントを務める。進化計算、人工知能、ロボット工学の分野でいくつかの著作を発表。
|
sans-serif;
font-weight: bold;
text-align: left;
display:inline;
white-space: nowrap;
}
.leftMenu {
white-space: nowrap;
height: 100%;
background-color: #d6cfe6;
font-family: verdana, arial, helvetica, sans-serif;
}
.content {
width: 100%;
padding: 10px;
}
.rightColumn {
width: 3px;
}
.customer {
width: 20%;
text-align: left;
}
.orderNumber {
width: 10%;
text-align: left;
}
.orderDate {
text-align: center;
width: 10%;
}
.productName {
width: 25%;
}
.quantity {
text-align: center;
width: 10%;
}
.lineItemTotal {
text-align: right;
width: 15%;
padding-right:10px;
}
.logo {
border-top: 1px solid #000066;
border-left: 1px solid #000066;
border-bottom: 1px solid #000066;
display:inline;
text-align: right;
}
.code {
font-family: verdana, arial, helvetica, "courier new", monospace;
font-size: 9pt;
}
.borderedInline {
display: inline;
border: 1px solid black;
}
a:link {
color: #000099;
text-decoration: none;
background-color: transparent;
font-weight: bold;
}
a:visited {
color: #000099;
text-decoration: none;
background-color: transparent;
font-weight: bold;
}
a:hover {
color: #d68000;
background-color: transparent;
font-weight: bold;
}
img {
border: 0px;
}