国外主机测评 - 国外VPS，国外服务器，国外云服务器，测评及优惠码
JSF教程 – JSF PanelGrid示例
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>
标签属性
| 属性 | 描述 |
|---|---|
| id | 标签的标识 |
| binding | 引用在backing bean中使用的组件 |
| rendered | 布尔值; false将抑制渲染 |
| styleClass | 级联样式表（CSS）类名称 |
| value | 值绑定 |
| bgcolor | 表的背景颜色 |
| border | 表格边框的宽度 |
| cellpadding | 表格单元周围的填充 |
| cellspacing | 表格单元格之间的间距 |
| columnClasses | 列的CSS类的逗号分隔列表 |
| columns | 表中的列数 |
| footerClass | 表的页脚的CSS类 |
| frame | 框架框架侧面的规格 围绕要绘制的表格; 有效值: none，above，below，hsides，vsides，lhs，rhs，box，border |
| headerClass | 表头的CSS类 |
| rowClasses | 列的CSS类的逗号分隔列表 |
| rules | 细胞之间画线的规格; 有效值:组，行，列，全部 |
| summary | 表的摘要“使用的目的和结构 用于诸如语音的非视觉反馈 |
| dir | 文本的方向。 有效值为 ltr (从左到右)和 rtl (从右到左)。 |
| lang | 元素的属性和文本的基本语言 |
| border | 元素的边框宽度的像素值 |
| lang | 元素的属性和文本的基本语言 |
| title | 用于辅助功能的标题。 浏览器通常为标题的值创建工具提示 |
| width | 元素的宽度 |
| onblur | 失去焦点的事件处理程序 |
| onchange | 值更改的事件处理程序 |
| onclick | 鼠标按钮的事件处理程序点击该元素 |
| ondblclick | 双击鼠标按钮的事件处理程序 |
| onfocus | 元素接收焦点的事件处理程序 |
| onkeydown | 按键的事件处理程序 |
| onkeypress | 键按下并释放的事件处理程序 |
| onkeyup | Key的事件处理程序发布 |
| onmousedown | 鼠标按钮的事件处理程序 |
| onmousemove | 鼠标移动的事件处理程序 |
| onmouseout | 鼠标左的事件处理程序 |
| onmouseover | 鼠标移动到的事件处理程序 |
| onmouseup | 释放鼠标按钮的事件处理程序 |
例子
以下代码来自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>
以下代码来自demo.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 cn.w3cschool.common;
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;
}
}
下载 PanelGrid.zip
运行
将生成的WAR文件从目标文件夹复制到Tomcat部署文件夹，并运行Tomcat-Install-folder/bin/startup.bat。
Tomcat完成启动后，在浏览器地址栏中键入以下URL。
http://localhost:8080/simple-webapp/demo.xhtml
