JSF2.0 タグ一覧 (h:panelGrid) 編
JSF の HTML (UIComponent) 系タグにはテーブルを作成するタグが２種類用意されています。
これらのタグと固有機能系タグを組み合わせることでテーブルを使用した画面を作成可能です。
6. テーブル関連タグ
(*) HTML 系タグの詳細はこちらをご参照ください。
(*) JSF 固有機能系タグの詳細はこちらをご参照ください。
6.1. h:panelGrid
HTML の <table> タグに対応しています。
sample6_1.xhtml
<h:body>
<h:panelGrid columns="3" border="1">
<h:outputText value="コード"/>
<h:outputText value="分類"/>
<h:outputText value="備考"/>
<h:outputText value="book_001"/>
<h:outputText value="小説"/>
<h:outputText value="散文で作成された虚構の物語として定義される。"/>
<h:outputText value="book_002"/>
<h:outputText value="技術本"/>
<h:outputText value="各分野において目的を達成するために用いられる手段・手法をまとめた書物。"/>
<h:outputText value="book_003"/>
<h:outputText value="雑誌"/>
<h:outputText value="逐次刊行物であり定期刊行物である出版物の一種。"/>
</h:panelGrid>
</h:body>
画面
HTML
<body>
<table border="1">
<tbody>
<tr>
<td>コード</td>
<td>分類</td>
<td>備考</td>
</tr>
<tr>
<td>book_001</td>
<td>小説</td>
<td>散文で作成された虚構の物語として定義される。</td>
</tr>
<tr>
<td>book_002</td>
<td>技術本</td>
<td>各分野において目的を達成するために用いられる手段・手法をまとめた書物。</td>
</tr>
<tr>
<td>book_003</td>
<td>雑誌</td>
<td>逐次刊行物であり定期刊行物である出版物の一種。</td>
</tr>
</tbody>
</table>
</body>
(*) 一部改行を追加しています。
h:panelGrid は <table><tbody> ... </tbody></table> に変換されます。
上記例では columns 属性と border 属性を指定していますが、いずれも必須ではありません。columns 属性を指定しなかった場合は列が１列に、border 属性を指定しなかった場合は枠線がなくなります。
<tr></tr> タグと <td></td> タグは <h:panelGrid> と </h:panelGrid> の間で宣言したタグの内容を元に自動的に生成されます。
今回は 12個の <h:outputText/> を宣言しており、列数 (columns 属性) に「3」を指定していますので
４行×３列のテーブルとして出力されています。
他にも数多くの属性を指定可能ですが、ここでは一部を紹介するにとどめます。
(*) h:panelGrid に指定可能な属性の詳細はこちらをご参照ください。
HTML の <table>タグと同様、cellpadding 属性や cellspacing 属性を指定可能です。
ex.) <h:panelGrid ～略～ cellpadding="0" cellspacing="0"/> での HTML と画面
<table border="1" cellpadding="0" cellspacing="0">
～ 略 ～
</table>
また、行毎、列毎に CSS を指定可能です。
rowClasses 属性で行毎のクラスを、columnClasses属性で列毎のクラスを指定します。いずれも「, (カンマ)」で区切ることで必要数指定します。
ex.) <h:panelGrid ～略～ rowClasses="title,data,data,data" columnClasses="center,center"> での HTML/CSS と画面
<table border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr class="title">
<td class="center">コード</td>
<td class="center">分類</td>
<td>備考</td>
</tr>
<tr class="data">
<td class="center">book_001</td>
<td class="center">小説</td>
<td>散文で作成された虚構の物語として定義される。</td>
</tr>
<tr class="data">
<td class="center">book_002</td>
<td class="center">技術本</td>
<td>各分野において目的を達成するために用いられる手段・手法をまとめた書物。</td>
</tr>
<tr class="data">
<td class="center">book_003</td>
<td class="center">雑誌</td>
<td>逐次刊行物であり定期刊行物である出版物の一種。</td>
</tr>
</tbody>
</table>
<style type="text/css">
.title {
font-weight: bold;
text-align: center;
}
.center {
text-align: center;
}
.data {
}
</style>
