JSF 表單復(fù)選框示例

2018-02-20 13:43 更新

JSF教程 - JSF表單復(fù)選框示例


以下部分顯示如何使用JSF標(biāo)記創(chuàng)建HTML復(fù)選框。

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

以下JSF標(biāo)記

<h:selectBooleanCheckbox value="Remember Me" id="chkRememberMe" />

渲染到以下HTML標(biāo)記。

<input id="jsfForm1:chkRememberMe" type="checkbox" 
   name="jsfForm1:chkRememberMe" checked="checked" />

h:selectManyCheckbox標(biāo)簽呈現(xiàn)一組HTML輸入元素，并使用HTML表格和標(biāo)簽標(biāo)簽格式化。

JSF中的以下標(biāo)記

<h:selectManyCheckbox value="#{userData.data}">
   <f:selectItem itemValue="1" itemLabel="Item 1" />
   <f:selectItem itemValue="2" itemLabel="Item 2" />
</h:selectManyCheckbox>

被渲染到以下HTML標(biāo)記中。

<table>
   <tr>
      <td><input name="j_idt6:j_idt8" id="j_idt6:j_idt8:0" value="1" 
            type="checkbox" checked="checked" />
         <label for="j_idt6:j_idt8:0" class=""> Item 1</label>
      </td>
      <td><input name="j_idt6:j_idt8" id="j_idt6:j_idt8:1" value="2" 
            type="checkbox" checked="checked" />
         <label for="j_idt6:j_idt8:1" class=""> Item 2</label>
      </td>     
   </tr>
</table>

標(biāo)簽屬性

屬性描述
id標(biāo)簽的標(biāo)識(shí)
binding引用在backing bean中使用的組件
rendered布爾值; false將抑制渲染
styleClass級(jí)聯(lián)樣式表(CSS)類名稱
value值綁定
valueChangeListener響應(yīng)值更改的方法綁定
converter轉(zhuǎn)換器類名
validator附加到組件的驗(yàn)證器的類名
required布爾值; 如果為true，則根據(jù)需要標(biāo)記標(biāo)簽
accesskey給予一個(gè)元素的焦點(diǎn)
accept表單的內(nèi)容類型的逗號(hào)分隔列表
accept-charset表單的字符編碼的逗號(hào)或空格分隔列表。
alt非文字元素(例如圖片)的替代文字
border元素的邊框?qū)挾鹊南袼刂?/td>
charset鏈接資源的字符編碼
coords形狀為矩形，圓形或多邊形的元素的坐標(biāo)
dir文本的方向。 有效值為 ltr (從左到右)和 rtl (從右到左)。
disabled輸入元素或按鈕的禁用狀態(tài)
hreflang使用 href 屬性指定的資源的基本語(yǔ)言;
lang元素的屬性和文本的基本語(yǔ)言
maxlength文本字段的最大字符數(shù)
readonly輸入字段的只讀狀態(tài)
style內(nèi)聯(lián)樣式信息
tabindex指定制表符索引的數(shù)值
target打開文檔的框架的名稱
title用于輔助功能的標(biāo)題。 瀏覽器通常為標(biāo)題的值創(chuàng)建工具提示
type鏈接類型; 例如樣式表
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選擇文本的事件處理程序
immediate在生命周期的早期進(jìn)行過程驗(yàn)證

h:selectBooleanCheckbox單個(gè)復(fù)選框

以下代碼來(lái)自demo.xhtml。

它使用h:selectBooleanCheckbox創(chuàng)建一個(gè)復(fù)選框。

<?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"
      >
    <h:body>
      <h:form>
      <h2>1. Single checkbox</h2>
      <h:selectBooleanCheckbox value="#{user.rememberMe}" /> Remember Me
      
      <h:commandButton value="Submit" action="result" />
    <h:commandButton value="Reset" type="reset" />

      </h:form>
      
    </h:body>

</html>

下面的代碼來(lái)自UserBean.java。

package cn.w3cschool.common;

import java.util.Arrays;
import java.util.LinkedHashMap;
import java.util.Map;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
 
@ManagedBean(name="user")
@SessionScoped
public class UserBean{
 
  public boolean rememberMe;

  public boolean isRememberMe() {
    return rememberMe;
  }

  public void setRememberMe(boolean rememberMe) {
    this.rememberMe = rememberMe;
  }

}

以下代碼來(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"
      >
 
    <h:body>
      
      <h1>JSF 2 checkboxes example</h1>
      
      <h2>result.xhtml</h2>
      
      <ol>
        <li>user.rememberMe : #{user.rememberMe}</li>
      </ol>
    </h:body>

</html>
下載 Form_CheckBoxSingle.zip

硬編碼復(fù)選框

以下代碼來(lái)自demo.xhtml。

它使用h:selectManyCheckbox和f:selectItem to創(chuàng)建硬編碼復(fù)選框項(xiàng)。

<?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"
      >
    <h:body>
      <h:form>
      <h2>Mutiple checkboxes</h2>
      
      1. Hard-coded with "f:selectItem" : 
       <h:selectManyCheckbox value="#{user.favNumber1}">
         <f:selectItem itemValue="1" itemLabel="Number1 - 1" />
         <f:selectItem itemValue="2" itemLabel="Number1 - 2" />
         <f:selectItem itemValue="3" itemLabel="Number1 - 3" />
         <f:selectItem itemValue="4" itemLabel="Number1 - 4" />
         <f:selectItem itemValue="5" itemLabel="Number1 - 5" />
       </h:selectManyCheckbox>
      
      <br />

      <h:commandButton value="Submit" action="result" />
    <h:commandButton value="Reset" type="reset" />

      </h:form>
      
    </h:body>

</html>

以下代碼來(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"
      >
 
    <h:body>
      
      <h1>JSF 2 checkboxes example</h1>
      
      <h2>result.xhtml</h2>
      
      <ol>
        <li>user.favNumber1 : #{user.favNumber1InString}</li>
      </ol>
    </h:body>

</html>

下面的代碼來(lái)自UserBean.java。

package cn.w3cschool.common;


import java.util.Arrays;
import java.util.LinkedHashMap;
import java.util.Map;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
 
@ManagedBean(name="user")
@SessionScoped
public class UserBean{

  public String[] favNumber1;

  public String[] getFavNumber1() {
    return favNumber1;
  }
  public void setFavNumber1(String[] favNumber1) {
    this.favNumber1 = favNumber1;
  }

  public String getFavNumber1InString() {
    return Arrays.toString(favNumber1);
  }
  

}

下載Form_CheckBox_Hardcoded.zip

數(shù)組生成的復(fù)選框

以下代碼來(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">
 
    <h:body>
      <h1>JSF 2 checkboxes example</h1>
      <h2>result.xhtml</h2>
      <ol>
        <li>user.favNumber2 : #{user.favNumber2InString}</li>
      </ol>
    </h:body>
</html>

下面的代碼來(lái)自UserBean.java。

它定義了一個(gè)getFavNumber2Value()方法來(lái)返回硬編碼數(shù)組作為復(fù)選框項(xiàng)目值。

package cn.w3cschool.common;


import java.util.Arrays;
import java.util.LinkedHashMap;
import java.util.Map;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
 
@ManagedBean(name="user")
@SessionScoped
public class UserBean{
  public String[] favNumber2;
  
  public String[] getFavNumber2() {
    return favNumber2;
  }

  public void setFavNumber2(String[] favNumber2) {
    this.favNumber2 = favNumber2;
  }
  //Generated by Array
  public String[] getFavNumber2Value() {
    
    favNumber2 = new String[5];
    favNumber2[0] = "Number2 - 1";
    favNumber2[1] = "Number2 - 2";
    favNumber2[2] = "Number2 - 3";
    favNumber2[3] = "Number2 - 4";
    favNumber2[4] = "Number2 - 5";
    
    return favNumber2;
  }
  public String getFavNumber2InString() {
    return Arrays.toString(favNumber2);
  }    
}

以下代碼來(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">
    <h:body>
      <h:form>
      <h2>Mutiple checkboxes</h2>
      
      Generated by Array :
       <h:selectManyCheckbox value="#{user.favNumber2}">
         <f:selectItems value="#{user.favNumber2Value}" />
       </h:selectManyCheckbox>
       
      <br />

      <h:commandButton value="Submit" action="result" />
    <h:commandButton value="Reset" type="reset" />

      </h:form>
      
    </h:body>

</html>
下載Form_CheckBox_Generated_By_Array.zip

映射生成的復(fù)選框

以下代碼來(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">
    <h:body>
      <h1>JSF 2 checkboxes example</h1>
      <h2>result.xhtml</h2>
      <ol>
        <li>user.favNumber3 : #{user.favNumber3InString}</li>
      </ol>
    </h:body>
</html>

下面的代碼來(lái)自UserBean.java。

package cn.w3cschool.common;


import java.util.Arrays;
import java.util.LinkedHashMap;
import java.util.Map;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
 
@ManagedBean(name="user")
@SessionScoped
public class UserBean{
  public String[] favNumber3;
  public String[] getFavNumber3() {
    return favNumber3;
  }

  public void setFavNumber3(String[] favNumber3) {
    this.favNumber3 = favNumber3;
  }
  //Generated by Map
  private static Map<String,Object> number3Value;
  static{
    number3Value = new LinkedHashMap<String,Object>();
    number3Value.put("Number3 - 1", "1"); //label, value
    number3Value.put("Number3 - 2", "2");
    number3Value.put("Number3 - 3", "3");
    number3Value.put("Number3 - 4", "4");
    number3Value.put("Number3 - 5", "5");
  }
  
  public Map<String,Object> getFavNumber3Value() {
    return number3Value;
  }

  public String getFavNumber3InString() {
    return Arrays.toString(favNumber3);
  }    
}

以下代碼來(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"
      >
    <h:body>
      <h:form>
      <h2>Mutiple checkboxes</h2>
      
      Generated by Map :
       <h:selectManyCheckbox value="#{user.favNumber3}">
         <f:selectItems value="#{user.favNumber3Value}" />
       </h:selectManyCheckbox>
       
      <br />

      <h:commandButton value="Submit" action="result" />
    <h:commandButton value="Reset" type="reset" />

      </h:form>
      
    </h:body>

</html>

下載Form_CheckBox_Generated_By_Map.zip

復(fù)選框多個(gè)復(fù)選框

下面的代碼來(lái)自UserBean.java。

package cn.w3cschool.common;

import java.util.Arrays;
import java.util.LinkedHashMap;
import java.util.Map;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
 
@ManagedBean(name="user")
@SessionScoped
public class UserBean{
  public String[] favNumber4;
  public String[] getFavNumber4() {
    return favNumber4;
  }
  public void setFavNumber4(String[] favNumber4) {
    this.favNumber4 = favNumber4;
  }
  public static class Number{
    public String numberLabel;
    public String numberValue;
    
    public Number(String numberLabel, String numberValue){
      this.numberLabel = numberLabel;
      this.numberValue = numberValue;
    }
    public String getNumberLabel(){
      return numberLabel;
    }
    public String getNumberValue(){
      return numberValue;
    }
  }
  public Number[] number4List;
  
  public Number[] getFavNumber4Value() {
    
    number4List = new Number[5];
    number4List[0] = new Number("Number4 - 1", "1");
    number4List[1] = new Number("Number4 - 2", "2");
    number4List[2] = new Number("Number4 - 3", "3");
    number4List[3] = new Number("Number4 - 4", "4");
    number4List[4] = new Number("Number4 - 5", "5");
    
    return number4List;
  }
  
  public String getFavNumber4InString() {
    return Arrays.toString(favNumber4);
  }
    
}

以下代碼來(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">
    <h:body>
      <h:form>
      <h2>Mutiple checkboxes</h2>
      
      Generated by Object with var :
       <h:selectManyCheckbox value="#{user.favNumber4}">
         <f:selectItems value="#{user.favNumber4Value}" var="n"
         itemLabel="#{n.numberLabel}" itemValue="#{n.numberValue}" />
       </h:selectManyCheckbox>
       
      <br />

      <h:commandButton value="Submit" action="result" />
    <h:commandButton value="Reset" type="reset" />

      </h:form>
      
    </h:body>

</html>

以下代碼來(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"
      >
    <h:body>
      <p>user.favNumber4 : #{user.favNumber4InString}</p>
    </h:body>
</html>
下載Form_CheckBox_Multiple_CheckBoxes.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)