Jsf-panelgrid-tag
JSF-h:panelGrid
h:panelタグは、HTMLの「テーブル」要素をレンダリングします。
JSFタグ
<h:panelGrid id = "panel" columns = "2" border = "1"
cellpadding = "10" cellspacing = "1">
<f:facet name = "header">
<h:outputText value = "Login"/>
</f:facet>
<h:outputLabel value = "Username"/>
<h:inputText />
<h:outputLabel value = "Password"/>
<h:inputSecret/>
<f:facet name = "footer">
<h:panelGroup style = "display:block; text-align:center">
<h:commandButton id = "submit" value = "Submit"/>
</h:panelGroup>
</f:facet>
</h:panelGrid>
レンダリングされた出力
<table id = "j_idt10:panel" border = "1" cellpadding = "10" cellspacing = "1">
<thead>
<tr><th colspan = "2" scope = "colgroup">Login</th></tr>
</thead>
<tfoot>
<tr>
<td colspan = "2">
<span style = "display:block; text-align:center">
<input id = "j_idt10:submit" type = "submit"
name = "j_idt10:submit" value = "Submit"/>
</span>
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td><label>Username</label></td>
<td><input type = "text" name = "j_idt10:j_idt17"/></td>
</tr>
<tr>
<td><label>Password</label></td>
<td><input type = "password" name = "j_idt10:j_idt21" value = ""/></td>
</tr>
</tbody>
</table>
タグ属性
S.No | Attribute & Description |
---|---|
1 |
id コンポーネントの識別子 |
2 |
binding バッキングBeanで使用できるコンポーネントへの参照 |
3 |
rendered ブール値。 falseはレンダリングを抑制します |
4 |
styleClass カスケードスタイルシート(CSS)クラス名 |
5 |
value コンポーネントの値、通常は値バインディング |
6 |
bgcolor テーブルの背景色 |
7 |
border テーブルの境界線の幅 |
8 |
cellpadding テーブルセルの周りのパディング |
9 |
cellspacing テーブルセル間の間隔 |
10 |
columnClasses 列のCSSクラスのカンマ区切りリスト |
11 |
columns テーブル内の列数 |
12 |
footerClass テーブルフッターのCSSクラス |
13 |
frame frame描画されるテーブルを囲むフレームの側面の仕様。有効な値:none、above、below、hsides、vsides、lhs、rhs、box、border |
14 |
headerClass テーブルヘッダーのCSSクラス |
15 |
rowClasses 列のCSSクラスのカンマ区切りリスト |
16 |
rules セル間に描画される線の仕様。有効な値:グループ、行、列、すべて |
17 |
summary 音声などの視覚以外のフィードバックに使用されるテーブルの目的と構造の概要 |
18 |
dir テキストの方向。 有効な値は ltr (左から右)および rtl (右から左)です。 |
19 |
lang 要素の属性とテキストの基本言語 |
20 |
border 要素の境界線幅のピクセル値 |
21 |
title アクセシビリティのために使用される、要素を説明するタイトル。 視覚的なブラウザは通常、タイトルの価値に関するツールチップを作成します |
22 |
width 要素の幅 |
23 |
onblur 要素がフォーカスを失います |
24 |
onchange 要素の価値の変化 |
25 |
onclick マウスボタンが要素上でクリックされた |
26 |
ondblclick マウスボタンが要素上でダブルクリックされます |
27 |
onfocus 要素がフォーカスを受け取る |
28 |
onkeydown キーが押された |
29 |
onkeypress キーが押され、その後解放されます |
30 |
onkeyup キーが解放されます |
31 |
onmousedown マウスボタンが要素上で押されています |
32 |
onmousemove マウスが要素の上を移動する |
33 |
onmouseout マウスは要素の領域を離れます |
34 |
onmouseover マウスが要素の上に移動する |
35 |
onmouseup マウスボタンが離された |
応用例
上記のタグをテストするテストJSFアプリケーションを作成しましょう。
Step | Description |
---|---|
1 | Create a project with a name helloworld under a package com.finddevguides.test as explained in the JSF - First Application chapter. |
2 | Modify home.xhtml as explained below. Keep rest of the files unchanged. |
3 | Compile and run the application to make sure business logic is working as per the requirements. |
4 | Finally, build the application in the form of war file and deploy it in Apache Tomcat Webserver. |
5 | Launch your web application using appropriate URL as explained below in the last step. |
home.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>JSF Tutorial!</title>
</head>
<body>
<h2>h:panelGrid example</h2>
<hr/>
<h:form>
<h:panelGrid id = "panel" columns = "2" border = "1"
cellpadding = "10" cellspacing = "1">
<f:facet name = "header">
<h:outputText value = "Login"/>
</f:facet>
<h:outputLabel value = "Username"/>
<h:inputText />
<h:outputLabel value = "Password"/>
<h:inputSecret/>
<f:facet name = "footer">
<h:panelGroup style = "display:block; text-align:center">
<h:commandButton id = "submit" value = "Submit"/>
</h:panelGroup>
</f:facet>
</h:panelGrid>
</h:form>
</body>
</html>
すべての変更を完了したら、JSF-最初のアプリケーションの章で行ったようにアプリケーションをコンパイルして実行します。 すべてがアプリケーションで問題ない場合、次の結果が生成されます。