JSF 表單命令按鈕示例

2018-02-20 13:44 更新

JSF教程 - JSF表單命令按鈕示例


h:commandButton標(biāo)簽渲染類型為“submit"的HTML輸入元素。

下面的JSF代碼

<h:commandButton value="Click Me!" onclick="alert("Hello World!");" />

被渲染成以下HTML代碼。

<input type="submit" name="j_idt10:j_idt13" value="Click Me!"
   onclick="alert("Hello World!");" />

標(biāo)簽屬性

屬性描述
id標(biāo)簽的標(biāo)識(shí)
rendered布爾值; false將抑制渲染
styleClass級(jí)聯(lián)樣式表(CSS)類名稱
value值綁定
valueChangeListener響應(yīng)值更改的方法綁定
required布爾值; 如果為true，則根據(jù)需要標(biāo)記標(biāo)簽
coords形狀為矩形，圓形或多邊形的元素的坐標(biāo)
dir文本的方向。 有效值為 ltr (從左到右)和 rtl (從右到左)。
disabled輸入元素或按鈕的禁用狀態(tài)
style內(nèi)聯(lián)樣式信息
tabindex指定制表符索引的數(shù)值
target打開文檔的框架的名稱
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)按鈕的事件處理程序
onreset表單重置的事件處理程序
onselect選擇文本的事件處理程序

例子

以下代碼來自login.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"
      >
 
    <h:body>
      
      <h1>login.xhtml</h1>
      
    </h:body>

</html>

下面的代碼來自UserBean.java。

package cn.w3cschool.common;


import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
 
@ManagedBean(name="user")
@SessionScoped
public class UserBean{
 
  public String goLoginPage(){
    
    return "login";
    
  }
}

以下代碼來自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"
      >
    <h:head></h:head>
    <h:body>
      
      <h1>JSF 2 button and commandButton example</h1>
      
      <h:form>
      <ol>
        <li>
          <h:commandButton value="submit" type="submit" action="#{user.goLoginPage}" />
        </li>
        <li>
          <h:commandButton value="reset" type="reset" />
        </li>
        <li>
          <h:commandButton value="button" type="button" />
        </li>
        <li>
          <h:commandButton value="Click Me" type="button" onclick="alert("h:commandButton");" />
        </li>
        <li>
          <h:button value="buton" />
        </li>
        <li>
          <h:button value="Click Me" onclick="alert("h:button");" />
        </li>
        <li>
          <h:button value="buton" outcome="login" />
        </li>
      </ol>
      </h:form>
      
    </h:body>

</html>
下載 Form_CommandButton.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)