免費AI編程助手
JSF PanelGrid示例
2018-02-20 13:29 更新
JSF教程 - JSF PanelGrid示例
h:panelGrid標(biāo)記渲染一個HTML“table"元素。
以下JSF標(biāo)記
<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標(biāo)記。
<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>
標(biāo)簽屬性
| 屬性 | 描述 |
|---|---|
| id | 標(biāo)簽的標(biāo)識 |
| binding | 引用在backing bean中使用的組件 |
| rendered | 布爾值; false將抑制渲染 |
| styleClass | 級聯(lián)樣式表（CSS）類名稱 |
| value | 值綁定 |
| bgcolor | 表的背景顏色 |
| border | 表格邊框的寬度 |
| cellpadding | 表格單元周圍的填充 |
| cellspacing | 表格單元格之間的間距 |
| columnClasses | 列的CSS類的逗號分隔列表 |
| columns | 表中的列數(shù) |
| footerClass | 表的頁腳的CSS類 |
| frame | 框架框架側(cè)面的規(guī)格 圍繞要繪制的表格; 有效值: none，above，below，hsides，vsides，lhs，rhs，box，border |
| headerClass | 表頭的CSS類 |
| rowClasses | 列的CSS類的逗號分隔列表 |
| rules | 細胞之間畫線的規(guī)格; 有效值:組，行，列，全部 |
| summary | 表的摘要“使用的目的和結(jié)構(gòu) 用于諸如語音的非視覺反饋 |
| dir | 文本的方向。 有效值為 ltr (從左到右)和 rtl (從右到左)。 |
| lang | 元素的屬性和文本的基本語言 |
| border | 元素的邊框?qū)挾鹊南袼刂?/td> |
| lang | 元素的屬性和文本的基本語言 |
| title | 用于輔助功能的標(biāo)題。 瀏覽器通常為標(biāo)題的值創(chuàng)建工具提示 |
| width | 元素的寬度 |
| onblur | 失去焦點的事件處理程序 |
| onchange | 值更改的事件處理程序 |
| onclick | 鼠標(biāo)按鈕的事件處理程序點擊該元素 |
| ondblclick | 雙擊鼠標(biāo)按鈕的事件處理程序 |
| onfocus | 元素接收焦點的事件處理程序 |
| onkeydown | 按鍵的事件處理程序 |
| onkeypress | 鍵按下并釋放的事件處理程序 |
| onkeyup | Key的事件處理程序發(fā)布 |
| onmousedown | 鼠標(biāo)按鈕的事件處理程序 |
| onmousemove | 鼠標(biāo)移動的事件處理程序 |
| onmouseout | 鼠標(biāo)左的事件處理程序 |
| onmouseover | 鼠標(biāo)移動到的事件處理程序 |
| onmouseup | 釋放鼠標(biāo)按鈕的事件處理程序 |
例子
以下代碼來自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文件從目標(biāo)文件夾復(fù)制到Tomcat部署文件夾，并運行Tomcat-Install-folder/bin/startup.bat。
Tomcat完成啟動后，在瀏覽器地址欄中鍵入以下URL。
http://localhost:8080/simple-webapp/demo.xhtml
以上內(nèi)容是否對您有幫助：
更多建議：