JSF - h:panelGrid

h:panelGrid 標籤渲染一個 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>

標籤屬性

序號	屬性 & 描述
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 圍繞表格的框架的側面要繪製的框架規範；有效值：none、above、below、hsides、vsides、lhs、rhs、box、border
14	headerClass 表格表頭的 CSS 類
15	rowClasses 列的 CSS 類名的逗號分隔列表
16	rules 在單元格之間繪製的線的規範；有效值：groups、rows、columns、all
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 應用程式來測試上述標籤。

步驟	描述
1	在 `com.tutorialspoint.test` 包下建立一個名為 `helloworld` 的專案，如《JSF - 第一個應用程式》一章所述。
2	修改 `home.xhtml`，如下所示。保持其餘檔案不變。
3	編譯並執行應用程式，以確保業務邏輯按要求工作。
4	最後，將應用程式構建成 war 檔案，並將其部署到 Apache Tomcat Web 伺服器。
5	使用下面最後一步中說明的相應 URL 啟動您的 Web 應用程式。

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 - 第一個應用程式章節中一樣編譯並執行應用程式。如果您的應用程式一切正常，這將產生以下結果。

jsf_basic_tags.htm

列印頁面