JSF2.0 タグ一覧 (h:panelGrid) 編

JSF の HTML (UIComponent) 系タグにはテーブルを作成するタグが2種類用意されています。
これらのタグと固有機能系タグを組み合わせることでテーブルを使用した画面を作成可能です。

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>


画面
JSF2.0 タグ一覧 (h:panelGrid) 編

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 属性を指定しなかった場合は列が1列に、border 属性を指定しなかった場合は枠線がなくなります。

<tr></tr> タグと <td></td> タグは <h:panelGrid> と </h:panelGrid> の間で宣言したタグの内容を元に自動的に生成されます。
今回は 12個の <h:outputText/> を宣言しており、列数 (columns 属性) に「3」を指定していますので
4行×3列のテーブルとして出力されています。

他にも数多くの属性を指定可能ですが、ここでは一部を紹介するにとどめます。
(*) h:panelGrid に指定可能な属性の詳細はこちらをご参照ください。

HTML の <table>タグと同様、cellpadding 属性や cellspacing 属性を指定可能です。

ex.) <h:panelGrid ~略~ cellpadding="0" cellspacing="0"/> での HTML と画面

<table border="1" cellpadding="0" cellspacing="0">
~ 略 ~
</table>


JSF2.0 タグ一覧 (h:panelGrid) 編

また、行毎、列毎に 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>


JSF2.0 タグ一覧 (h:panelGrid) 編

[ END ]

JSF2.0 タグ一覧 (h:panelGrid) 編,布布扣,bubuko.com

JSF2.0 タグ一覧 (h:panelGrid) 編

上一篇:Silverlight动画学习笔记(三):缓动函数


下一篇:centos系统如何查看mysql是否启动