JSF PanelGrid示例

2018-02-20 13:29 更新

JSF教程 - JSF PanelGrid示例


h:panelGrid標(biāo)記渲染一個(gè)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)識(shí)
binding引用在backing bean中使用的組件
rendered布爾值; false將抑制渲染
styleClass級(jí)聯(lián)樣式表（CSS）類(lèi)名稱(chēng)
value值綁定
bgcolor表的背景顏色
border表格邊框的寬度
cellpadding表格單元周?chē)奶畛?/td>
cellspacing表格單元格之間的間距
columnClasses列的CSS類(lèi)的逗號(hào)分隔列表
columns表中的列數(shù)
footerClass表的頁(yè)腳的CSS類(lèi)
frame框架框架側(cè)面的規(guī)格    圍繞要繪制的表格; 有效值:    none，above，below，hsides，vsides，lhs，rhs，box，border
headerClass表頭的CSS類(lèi)
rowClasses列的CSS類(lèi)的逗號(hào)分隔列表
rules細(xì)胞之間畫(huà)線的規(guī)格;    有效值:組，行，列，全部
summary表的摘要“使用的目的和結(jié)構(gòu)    用于諸如語(yǔ)音的非視覺(jué)反饋
dir文本的方向。 有效值為 ltr (從左到右)和 rtl (從右到左)。
lang元素的屬性和文本的基本語(yǔ)言
border元素的邊框?qū)挾鹊南袼刂?/td>
lang元素的屬性和文本的基本語(yǔ)言
title用于輔助功能的標(biāo)題。 瀏覽器通常為標(biāo)題的值創(chuàng)建工具提示
width元素的寬度
onblur失去焦點(diǎn)的事件處理程序
onchange值更改的事件處理程序
onclick鼠標(biāo)按鈕的事件處理程序點(diǎn)擊該元素
ondblclick雙擊鼠標(biāo)按鈕的事件處理程序
onfocus元素接收焦點(diǎn)的事件處理程序
onkeydown按鍵的事件處理程序
onkeypress鍵按下并釋放的事件處理程序
onkeyupKey的事件處理程序發(fā)布
onmousedown鼠標(biāo)按鈕的事件處理程序
onmousemove鼠標(biāo)移動(dòng)的事件處理程序
onmouseout鼠標(biāo)左的事件處理程序
onmouseover鼠標(biāo)移動(dòng)到的事件處理程序
onmouseup釋放鼠標(biāo)按鈕的事件處理程序

例子

以下代碼來(lái)自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>

以下代碼來(lái)自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>

下面的代碼來(lái)自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

運(yùn)行

將生成的WAR文件從目標(biāo)文件夾復(fù)制到Tomcat部署文件夾，并運(yùn)行Tomcat-Install-folder/bin/startup.bat。

Tomcat完成啟動(dòng)后，在瀏覽器地址欄中鍵入以下URL。

http://localhost:8080/simple-webapp/demo.xhtml
以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)