[ H e p o n ' s T r i c k C u b e J a v a

[ h:dataTableで1件のデータを複数行で描画するサンプル(その1) ]

■2005/9/1
　Hepon

■環境：JSF1.1

■h:dataTableで1件のデータを複数行で描画するサンプルは、
　2種類あります。

　dataTableのcolumn内にdataTableを入れる(ネストする)方法と、
　入れないで実現する方法、のふたつです。
　まずはdataTableを入れる(ネストする)方法から。

　h:dataTableでデータを表示する際、h:dataTableを普通に使うと、
　下図のように1件のデータは1行で表示されます。

「文字で出力」というカラムの「aaa」が1行目のデータの1つめの要素で、
2つ目の要素はその右の「eee」ですね。
このように、1件のデータは１行で表示されます。
そして、columnの中にはJSFのタグ以外のものは一切置くことができません。
<br>といったHTMLタグをはじめとして、普通のテキストすら置けません。
というか、置いても完全に無視されます。
よってcolumnの中で改行して2行にする、といったことができません。

さて、こうした状況の中で、1件のデータで20個の要素を表示したいとします。
となると、困ってしまうわけです。
普通に横並びに20個カラムを並べていくと、
とんでもなく横長なひどい画面の出来上がりです。
しかしh:dataTableには1件のデータを2行で表示したりするような機能はありません。
それでも1件のデータを2行で表現したいわけです。
そこでそれを可能にするために工夫してみました。
まずは以下の完成後の図を見て下さい。

何をしているか、何となくわかりますでしょうか？
まず、ヘッダ部分は普通のHTMLです。
ヘッダの下の本体部分がh:dataTableです。
そして、h:dataTableではcolumnは３つしか使っていません。
左のチェックボックスの部分で1つ。
上段、下段1、下段2、下段3の部分で1つ。
右の備考欄の部分で1つ。
3つのcolumnの内、中央のcolumnの中が、2行になっています。

columnの中にはJSFのタグしか置けない、ということは、
JSFのh:dataTableなら置けるのではないか、ということで
h:dataTableを2つ設置してみた所、なんとh:dataTableをネストすることができました。
内側のh:dataTableでは1件しかデータの入っていないダミーのリストを使って
1回まわして1行分だけ作成して、そこのcolumnで外側のh:dataTableのデータを
表示させている、といった部分が若干ややこしいですが、
後は特に説明せずともソースを見てもらえればわかるかと思います。
以下のソースを見て下さい。


        <!-- ↓ふたつめのテーブルのヘッダ部分 -->
        <table width="700" bgcolor="#FFFFFF" border="0" cellpadding="1"　cellspacing="3">
            <thead>
                <tr bgcolor="#FFCCDD">
                    <th colspan="5">１件のデータに対して、データを複数行で表現するテスト</th>
                </tr>
                <tr bgcolor="#FFCCDD">
                    <th rowspan="2" width="18"> </th>
                    <th  colspan="3">上段</th>
                    <th rowspan="2" width="300">備考欄</th>
                </tr>
                <tr bgcolor="#FFCCDD">
                    <th width="74">下段１</th>
                    <th width="74">下段２</th>
                    <th width="74">下段３</th>
                </tr>
            </thead>
            <tbody>
            <tr><td></td></tr>
            </tbody>
        </table>
        
        <!-- ↓ふたつめのテーブル -->
        <h:dataTable value="#{dataTable001Bean.testlist}" var="ttlist" border="1" bgcolor="#FFCCDD" cellpadding="0" cellspacing="0" rowClasses="table_odd,table_even">

            <h:column>
                <h:selectBooleanCheckbox id="column004" value="#{ttlist.column004}" />
            </h:column>
            
            <h:column>
                <h:dataTable value="#{dataTable001Bean.dummylist}" var="tttlist" border="1" bgcolor="#FFCCDD" cellpadding="0" cellspacing="0">
                    <h:column>
                        <h:inputText id="colmun006" value="#{ttlist.column006}" size="55" maxlength="12" />
                    </h:column>
                </h:dataTable>
                
                <h:dataTable value="#{dataTable001Bean.dummylist}" var="ttttlist" border="1" bgcolor="#FFCCDD" cellpadding="0" cellspacing="0">
                    <h:column>
                        <h:inputText id="colmun001x" value="#{ttlist.column001}" readonly="true" styleClass="readonly" size="16" style="text-align:right" />
                    </h:column>
                    <h:column>
                        <h:inputText id="colmun002x" value="#{ttlist.column002}" size="16" maxlength="12" style="text-align:right" />
                    </h:column>
                    <h:column>
                        <h:inputText id="colmun003x" value="#{ttlist.column003}" size="16" maxlength="12" style="text-align:right" />
                    </h:column>
                </h:dataTable>
            </h:column>
            
            <h:column>
                <h:inputText id="colmun005" value="#{ttlist.column005}" size="72" maxlength="12" />
            </h:column>
        
        </h:dataTable>

以下、全てのソースです。

★DataTable001Bean.java


package demo;

import java.util.ArrayList;

/**
 * Created by Exadel Studio
 *
 *
 */
public class DataTable001Bean {

    private ArrayList testlist;
    private ArrayList dummylist;


    public DataTable001Bean() {
        testlist = new ArrayList();
        testlist.add(new DataTable002Bean("aaa","eee",false));
        testlist.add(new DataTable002Bean("bbb","fff",true));
        testlist.add(new DataTable002Bean("ccc","ggg",false));
        testlist.add(new DataTable002Bean("ddd","hhh",true));
        dummylist = new ArrayList();
        dummylist.add(new DataTable002Bean("zzz","aaa",false));
    }
	
    public ArrayList getTestlist() {
        return testlist;
    }
    public void setTestlist(ArrayList testlist) {
        this.testlist = testlist;
    }

    public ArrayList getDummylist() {
        return dummylist;
    }
    public void setDummylist(ArrayList dummy) {
        this.dummylist = dummy;
    }
}

★DataTable001Bean.java


package demo;

public class DataTable002Bean {

    private String column001;
    private String column002;
    private String column003;
    private boolean column004;
    private String column005;
    private String column006;
	
    public DataTable002Bean(String str1,String str2,boolean boo){
		
        column001 = str1;
        column002 = str2;
        column003 = str1;
        column004 = boo;
        column005 = "←上段と下段で１つづつ、あわせて２つのdataTableを使用している。";
        column006 = "上段でひとつのdataTableを使用している。";
    }

    public String getColumn001() {
        return column001;
    }
    public void setColumn001(String column001) {
        this.column001 = column001;
    }

    public String getColumn002() {
        return column002;
    }
    public void setColumn002(String column002) {
        this.column002 = column002;
    }

    public String getColumn003() {
        return column003;
    }
    public void setColumn003(String column003) {
        this.column003 = column003;
    }

    public boolean isColumn004() {
        return column004;
    }
    public void setColumn004(boolean column004) {
        this.column004 = column004;
    }

    public String getColumn005() {
        return column005;
    }
    public void setColumn005(String column005) {
    this.column005 = column005;
    }

    public String getColumn006() {
        return column006;
    }
    public void setColumn006(String column006) {
        this.column006 = column006;
    }
}

★dataTable.jsp


<!-- ↓日本語を表示する為に必要 -->
<%@ page contentType="text/html;charset=Shift_JIS" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

<!-- ********************* -->

<HTML>
    <HEAD>
        <!-- CSS -->
        <link rel="StyleSheet" href="css/contract.css" type="text/css" />
        <title>h:dataTable サンプル</title>
    </HEAD>
    <body bgcolor="white">
    
    <!-- ↓全てのJSFはこのタグの中に -->
    <f:view>
    
    <!-- ********************* -->

        <h1><h:outputText value="h:dataTable サンプル"/></h1>
        <h:outputText value="2005/8/25/Thu/Hepon"/>
        <br><br>
        
        <!-- ********************* -->

        <!-- ↓ひとつめのテーブル -->
        <h:dataTable value="#{dataTable001Bean.testlist}" var="tlist" border="1" bgcolor="#FFCCDD" cellpadding="3" cellspacing="3" width="700">

            <f:facet name="header">
                <h:outputText value="ヘッダ表示テスト" />
            </f:facet>
            
            <h:column>
                <f:facet name="header">
                    <h:outputText value="文字で出力" />
                </f:facet>
                <h:outputText id="colmun001" value="#{tlist.column001}" />
            </h:column>
            
            <h:column>
                <f:facet name="header">
                    <h:outputText value="inputの入力可能タイプ" />
                </f:facet>
                <h:inputText id="colmun002" value="#{tlist.column002}" size="7" maxlength="6" />
            </h:column>
            
            <h:column>
                <f:facet name="header">
                    <h:outputText value="inputの入力不可タイプ/右寄せ" />
                </f:facet>
                <h:inputText id="colmun003" value="#{tlist.column003}" size="7" readonly="true" maxlength="6" style="text-align:right" />
            </h:column>
            
            <f:facet name="footer">
                <h:outputText value="フッタ表示テスト" />
            </f:facet>
        
        </h:dataTable>
        
        <!-- ********************* -->
        <br><br>

        <!-- ↓ふたつめのテーブルのヘッダ部分 -->
        <table width="700" bgcolor="#FFFFFF" border="0" cellpadding="1"　cellspacing="3">
            <thead>
                <tr bgcolor="#FFCCDD">
                    <th colspan="5">１件のデータに対して、データを複数行で表現するテスト</th>
                </tr>
                <tr bgcolor="#FFCCDD">
                    <th rowspan="2" width="18"> </th>
                    <th  colspan="3">上段</th>
                    <th rowspan="2" width="300">備考欄</th>
                </tr>
                <tr bgcolor="#FFCCDD">
                    <th width="74">下段１</th>
                    <th width="74">下段２</th>
                    <th width="74">下段３</th>
                </tr>
            </thead>
            <tbody>
            <tr><td></td></tr>
            </tbody>
        </table>
        
        <!-- ↓ふたつめのテーブル -->
        <h:dataTable value="#{dataTable001Bean.testlist}" var="ttlist" border="1" bgcolor="#FFCCDD" cellpadding="0" cellspacing="0" rowClasses="table_odd,table_even">

            <h:column>
                <h:selectBooleanCheckbox id="column004" value="#{ttlist.column004}" />
            </h:column>
            
            <h:column>
                <h:dataTable value="#{dataTable001Bean.dummylist}" var="tttlist" border="1" bgcolor="#FFCCDD" cellpadding="0" cellspacing="0">
                    <h:column>
                        <h:inputText id="colmun006" value="#{ttlist.column006}" size="55" maxlength="12" />
                    </h:column>
                </h:dataTable>
                
                <h:dataTable value="#{dataTable001Bean.dummylist}" var="ttttlist" border="1" bgcolor="#FFCCDD" cellpadding="0" cellspacing="0">
                    <h:column>
                        <h:inputText id="colmun001x" value="#{ttlist.column001}" readonly="true" styleClass="readonly" size="16" style="text-align:right" />
                    </h:column>
                    <h:column>
                        <h:inputText id="colmun002x" value="#{ttlist.column002}" size="16" maxlength="12" style="text-align:right" />
                    </h:column>
                    <h:column>
                        <h:inputText id="colmun003x" value="#{ttlist.column003}" size="16" maxlength="12" style="text-align:right" />
                    </h:column>
                </h:dataTable>
            </h:column>
            
            <h:column>
                <h:inputText id="colmun005" value="#{ttlist.column005}" size="72" maxlength="12" />
            </h:column>
        
        </h:dataTable>
        
        <!-- ********************* -->

    </f:view>

    </body>
</HTML>

★index.jsp


<!doctype html public "-//w3c//dtd html 4.0 transitional//en">

<html>
<head>
</head>
<body>
    <jsp:forward page="/pages/dataTable.jsf" />
</body>
</html>

★web.xml


<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
 <display-name>htc002</display-name>
 <context-param>
  <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
  <param-value>server</param-value>
 </context-param>
 <context-param>
  <param-name>javax.faces.CONFIG_FILES</param-name>
  <param-value>/WEB-INF/faces-config.xml</param-value>
 </context-param>
 <listener>
  <listener-class>com.sun.faces.config.ConfigureListener</listener-class>
 </listener>
 <servlet>
  <servlet-name>Faces Servlet</servlet-name>
  <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
  <load-on-startup>1</load-on-startup>
 </servlet>
 <servlet-mapping>
  <servlet-name>Faces Servlet</servlet-name>
  <url-pattern>*.jsf</url-pattern>
 </servlet-mapping>
</web-app>

★faces-config.xml


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN"
                              "http://java.sun.com/dtd/web-facesconfig_1_1.dtd">
<faces-config>
 <managed-bean>
  <managed-bean-name>dataTable001Bean</managed-bean-name>
  <managed-bean-class>demo.DataTable001Bean</managed-bean-class>
  <managed-bean-scope>session</managed-bean-scope>
 </managed-bean>
 <lifecycle/>
 <application>
  <locale-config/>
 </application>
 <factory/>
</faces-config>

★contract.css


.readonly
{
    border:1pt solid #888888;
    background-color:#B0B0B0;
    color:#000000;
    font-size:10pt;
    width:auto;
}

tr.table_odd
{
    background-color:transparent;
}

tr.table_even
{
    background-color:#ffffbb;
}