JSF 2 panelGrid示例

最新推荐文章于 2021-02-12 19:40:16 发布

cyan20115

最新推荐文章于 2021-02-12 19:40:16 发布

阅读量334

点赞数

文章标签： xhtml java

在JSF中，“ h：panelGrid ”标记用于生成HTML表格标记，以将JSF组件从左到右，从上到下以行和列的布局放置。

例如，您曾经使用如下HTML表格标签对JSF组件进行分组：

的HTML

<table>
<tbody>
<tr>
	<td>
		Enter a number : 
	</td>		
	<td>
		<h:inputText id="number" value="#{dummy.number}" 
			size="20" required="true"
			label="Number" >
			<f:convertNumber />
		</h:inputText>
	</td>
	<td>
		<h:message for="number" style="color:red" />
	</td>
</tr>
</tbody>
</table>

使用“ h：panelGrid ”标签，您无需输入任何HTML表格标签即可获得与上面相同的表格布局：

h：panelGrid

<h:panelGrid columns="3">
			
	Enter a number : 
				
	<h:inputText id="number" value="#{dummy.number}" 
		size="20" required="true"
		label="Number" >
		<f:convertNumber />
	</h:inputText>
				
	<h:message for="number" style="color:red" />
			
</h:panelGrid>

注意
“ column”属性是可选的，该属性定义布局JSF组件所需的列数，默认为1。

h：panelGrid示例

一个JSF 2.0示例，向您展示如何使用“ h：panelGrid ”标签正确地布置组件。

1.托管豆

用于演示的虚拟bean。

package com.mkyong;

import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
 
@ManagedBean(name="dummy")
@SessionScoped
public class DummyBean implements Serializable{
	
	int number;

	public int getNumber() {
		return number;
	}

	public void setNumber(int number) {
		this.number = number;
	}
	
}

2. JSF页面

一个JSF XHTML页面，使用“ h：panelGrid ”标签将JSF组件放置在3列布局中。

<?xml version="1.0" encoding="UTF-8"?>
<!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"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      >
    <h:body>
    	
    	<h1>JSF 2 panelGrid example</h1>
		
	<h:form>
		<h:panelGrid columns="3">
			
			Enter a number : 
				
			<h:inputText id="number" value="#{dummy.number}" 
				size="20" required="true"
				label="Number" >
				<f:convertNumber />
			</h:inputText>
				
			<h:message for="number" style="color:red" />
			
		</h:panelGrid>
			
		<h:commandButton value="Submit" action="result" />
			
	</h:form>	
    </h:body>
</html>

输出以下HTML结果：

<?xml version="1.0" encoding="UTF-8"?>
<!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">

<body>    	
    <h1>JSF 2 panelGrid example</h1>
	<form id="j_idt6" name="j_idt6" method="post" 
		action="/JavaServerFaces/faces/default.xhtml" 
                enctype="application/x-www-form-urlencoded">
	<input type="hidden" name="j_idt6" value="j_idt6" />

	<table>
	<tbody>
	<tr>
		<td>
			Enter a number : 
		</td>
		<td>
			<input id="j_idt6:number" type="text" 
                              name="j_idt6:number" value="0" size="20" />
		</td>
		<td></td>
	</tr>
	</tbody>
	</table>

	<input type="submit" name="j_idt6:j_idt10" value="Submit" />
        <input type="hidden" .... />
	</form>
</body>
</html>