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>
[ END ]
JSF2.0 タグ一覧 (h:panelGrid) 編