Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

dataforms.jar API解説――HtmlTableクラス

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2018/06/14 14:00

 dataforms.jarにはフォームに配置できる各種フィールドクラスが実装されています。これらのフィールドクラスは、HTMLの<input ... />や</select>...</select>タグに対応して動作します。前回はフィールドクラスと各種HTMLタグとの関係を解説しました。 今回はHtmlTableクラスと<table></table>タグの関係を解説します。

目次

対象読者

この記事を読むのに必要な知識を以下にまとめます。

  • 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を作成します。

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に追加します。以下ソースの太字部分がこの修正です。

SimpleHtmlTablePage.java
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を作成すると以下の通りになります。

SimpleHtmlTablePage.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)メソッドが呼び出されているため、カラムソートが可能になっています。

SimpleHtmlTablePageの表示結果

 この状態だと数値項目も左寄せのままなので、以下の通り数値項目の<td></td>タグに右寄せのスタイルを設定します。

SimpleHtmlTablePage.htmlの数値項目の右寄せ
    ・・・ 前略 ・・・
    <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の値が右寄せ表示になります。

スタイル変更後のSimpleHtmlTablePageの表示結果

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 高柳 正彦(タカヤナギ マサヒコ)

    経験年数30年を超えた、システムエンジニアです。一応管理職のはずですが、未だにコードを書いています。この仕事を長々とやっていると、それなりにノウハウがたまってきます。そのノウハウをまとめたものができないかと思い、独自のフレームワークを作り始めました。そのフレームワークもそれなりに使えるようになってき...

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5