<h:panelGrid>标签呈现HTML “table”元素。
以下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>
被渲染成以下HTML标签 -
<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>
实例
以下是文件：result.xhtml 中的代码 -
<?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>
Number : <h:outputText value="#{user.number}" />
</h:body>
</html>
以下是文件：index.xhtml 中的代码 -
<?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>
<h:form>
<h:panelGrid columns="3">
Enter a number :
<h:inputText id="number" value="#{user.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>
以下是文件：UserBean.java 中的代码 -
package com.yiibai;
import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean(name="user")
@SessionScoped
public class UserBean implements Serializable{
int number;
public int getNumber() {
return number;
}
public void setNumber(int number) {
this.number = number;
}
}
测试运行
打开 NetBeans创建一个Web工程：PanelGrid，并使用上面的文件代码。Tomcat启动完成后，在浏览器地址栏中输入以下URL。
http://localhost:8084/PanelGrid
如果程序没有错误，应该会看到以下结果 -
生成的HTML源代码如下所示 -
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><body>
<form id="j_idt3" name="j_idt3" method="post" action="/panelGrid/faces/index.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt3" value="j_idt3" />
<table>
<tbody>
<tr>
<td>
Enter a number :
</td>
<td><input id="j_idt3:number" type="text" name="j_idt3:number" value="4" size="20" /></td>
<td></td>
</tr>
</tbody>
</table>
<input type="submit" name="j_idt3:j_idt7" value="Submit" /><input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="-8284978550398349110:8223611473065586830" autocomplete="off" />
</form></body>
</html>
