対象読者
この記事を読むのに必要な知識を以下にまとめます。
- Java
- JavaScript
- jQuery、jQuery UI
- HTML、CSS
必要な環境
dataforms.jarを使用した開発では、以下を使用しています。
- JDK1.8
- Eclipse 4.5以上
- Tomcat 7以上
HtmlTableクラスの機能
dataforms.jarには<table></table>タグに対応するHtmlTableというクラスが用意されています。HtmlTableクラスのインスタンスには各種フィールドクラスを配置することができ、それに対応したリスト（List<Map<String, Object>>型のデータ）を、対応する<table></table>タグに展開する機能を持ちます。
まずテーブルクラスの動作を確認するために、以下の簡単なテーブルを配置したSimpleHtmlTableForm.javaを作成します。
package pagesample.page;
import java.math.BigDecimal;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import dataforms.controller.Form;
import dataforms.field.base.FieldList;
import dataforms.field.base.TextField;
import dataforms.field.sqltype.IntegerField;
import dataforms.field.sqltype.NumericField;
import dataforms.htmltable.HtmlTable;
/**
* 単純なHTMLテーブルを配置したフォーム。
*
*/
public class SimpleHtmlTableForm extends Form {
/**
* コンストラクタ。
*/
public SimpleHtmlTableForm() {
super(null);
FieldList flist = new FieldList();
flist.addField(new TextField("text1")).setSortable(true).setSpanField(true);
flist.addField(new TextField("text2")).setSortable(true).setSpanField(true);
flist.addField(new IntegerField("integer1")).setSortable(true).setSpanField(true);
flist.addField(new NumericField("numeric1", 10, 2)).setSortable(true).setSpanField(true);
HtmlTable table = new HtmlTable("simpleTable", flist);
this.addHtmlTable(table);
}
/**
* テーブルに表示するデータ。
*/
private static final Object[][] DATA = {
{"xxx", "yyy", Integer.valueOf(100), BigDecimal.valueOf(200.12)}
, {"aaa", "bbb", Integer.valueOf(30), BigDecimal.valueOf(20.13)}
, {"ccc", "ddd", Integer.valueOf(1000), BigDecimal.valueOf(2000.1)}
, {"000", "001", Integer.valueOf(5), BigDecimal.valueOf(5.1)}
, {"ggg", "hhh", Integer.valueOf(2), BigDecimal.valueOf(20.1)}
};
@Override
public void init() throws Exception {
super.init();
// フォームに表示するデータを設定。
List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
for (Object[] r: DATA) {
Map<String, Object> m = new HashMap<String, Object>();
int idx = 0;
m.put("text1", r[idx++]);
m.put("text2", r[idx++]);
m.put("integer1", r[idx++]);
m.put("numeric1", r[idx++]);
list.add(m);
}
this.setFormData("simpleTable", list);
}
}
次に開発ツールの「ページJavaクラス作成」を使用し、以下のようにテーブル操作無し、フォーム無しのページを作成します。
このように作成したSimpleHtmlTablePage.javaのコンストラクタで、SimpleHtmlTableFormのインスタンスをSimpleHtmlTablePageに追加します。以下ソースの太字部分がこの修正です。
package pagesample.page;
import dataforms.app.page.base.BasePage;
import dataforms.dao.Dao;
import dataforms.dao.Table;
/**
* ページクラス。
*/
public class SimpleHtmlTablePage extends BasePage {
/**
* コンストラクタ。
*/
public SimpleHtmlTablePage() {
this.addForm(new SimpleHtmlTableForm());
}
・・・ 中略 ・・・
}
このソースをコンパイルした後、開発ツールの「Webリソース作成」でHTMLを作成すると以下の通りになります。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="mainDiv">
<form id="simpleHtmlTableForm">
<div class="formHeader">xxx</div>
<table class="responsive">
<tbody>
</tbody>
</table>
<div class="hScrollDiv">
<table id="simpleTable">
<thead>
<tr>
<th>
text1
</th>
<th>
text2
</th>
<th>
integer1
</th>
<th>
numeric1
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span id="simpleTable[0].text1"></span>
</td>
<td>
<span id="simpleTable[0].text2"></span>
</td>
<td>
<span id="simpleTable[0].integer1"></span>
</td>
<td>
<span id="simpleTable[0].numeric1"></span>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</body>
</html>
このHTMLにはidが"simpleTable"の<table></table>タグが出力されています。そのテーブルの中には1行分の<tr></tr>タグが出力されており、その中にはHtmlTableクラスで設定されたフィールドに対応した<span></span>タグが出力されています。フィールドに対応するタグが<span></span>になっているのは、HtmlTableに配置したフィールドに対しsetSpanField(true)というメソッドを呼び出し、<span></span>タグを出力するように設定しているからです。また、この<span></span>タグには"テーブルID[0].フィールドID"という形式のIDが設定されています。
HtmlTable.jsは複数行のリストをテーブルに表示する場合、この出力された1行分の<tr></tr>タグの内容を複製しデータを設定するようになっています。ただし各フィールドのID内の[]内は行インデックスが設定されます。つまり2行目のフィールドIDは"テーブルID[1].フィールドID"のようになります。このページを表示すると下図のようになります。このテーブル内の各フィールドは、setSortable(true)メソッドが呼び出されているため、カラムソートが可能になっています。
この状態だと数値項目も左寄せのままなので、以下の通り数値項目の<td></td>タグに右寄せのスタイルを設定します。
・・・ 前略 ・・・
<tbody>
<tr>
<td>
<span id="simpleTable[0].text1"></span>
</td>
<td>
<span id="simpleTable[0].text2"></span>
</td>
<td style="text-align: right;">
<span id="simpleTable[0].integer1"></span>
</td>
<td style="text-align: right;">
<span id="simpleTable[0].numeric1"></span>
</td>
</tr>
</tbody>
・・・ 後略 ・・・
この修正を行ったページを表示すると、下図のようにinteger1とnumeric1の値が右寄せ表示になります。
