JSF 表單命令按鈕示例

2018-02-20 13:44 更新

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


h:commandButton標簽渲染類型為“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!");" />

標簽屬性

屬性描述
id標簽的標識
rendered布爾值; false將抑制渲染
styleClass級聯(lián)樣式表(CSS)類名稱
value值綁定
valueChangeListener響應值更改的方法綁定
required布爾值; 如果為true，則根據(jù)需要標記標簽
coords形狀為矩形，圓形或多邊形的元素的坐標
dir文本的方向。 有效值為 ltr (從左到右)和 rtl (從右到左)。
disabled輸入元素或按鈕的禁用狀態(tài)
style內(nèi)聯(lián)樣式信息
tabindex指定制表符索引的數(shù)值
target打開文檔的框架的名稱
title用于輔助功能的標題。 瀏覽器通常為標題的值創(chuàng)建工具提示
width元素的寬度
onblur失去焦點的事件處理程序
onchange值更改的事件處理程序
onclick鼠標按鈕的事件處理程序點擊該元素
ondblclick雙擊鼠標按鈕的事件處理程序
onfocus元素接收焦點的事件處理程序
onkeydown按鍵的事件處理程序
onkeypress鍵按下并釋放的事件處理程序
onkeyupKey的事件處理程序發(fā)布
onmousedown鼠標按鈕的事件處理程序
onmousemove鼠標移動的事件處理程序
onmouseout鼠標左的事件處理程序
onmouseover鼠標移動到的事件處理程序
onmouseup釋放鼠標按鈕的事件處理程序
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

運行

將生成的WAR文件從目標文件夾復制到Tomcat部署文件夾，并運行Tomcat-Install-folder/bin/startup.bat。

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

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

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號