码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-06-30 23:18:20      阅读:280      评论:0      收藏:0      [点我收藏+]

标签:style   http   java   使用   art   html   

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>


画面
bubuko.com,布布扣

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>


bubuko.com,布布扣

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


bubuko.com,布布扣

[ END ]

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

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

标签:style   http   java   使用   art   html   

原文地址:http://www.cnblogs.com/j3eee/p/3815999.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!