JSF <h: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>

實例

以下是文件：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

如果程序沒有錯誤，應該會看到以下結果 -

JSF

生成的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>

JSF教程

HTML標籤

轉換器

驗證

表格

事件處理

Facelets技術

高級部分

JSF <h:panelGrid>標籤

實例

測試運行