JSF 表單單選按鈕示例

2018-02-20 13:43 更新

JSF教程 - JSF表單單選按鈕示例


以下部分顯示如何使用JSF中的創(chuàng)建單選按鈕。

h:selectOneRadio標(biāo)簽呈現(xiàn)一組類型為“radio”的HTML輸入元素，并使用HTML表格和標(biāo)簽標(biāo)簽對其進(jìn)行格式化。

下面的JSF代碼

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

被渲染成以下HTML代碼

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

標(biāo)簽屬性

屬性描述
id標(biāo)簽的標(biāo)識
binding引用在backing bean中使用的組件
rendered布爾值; false將抑制渲染
styleClass級聯(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)容類型的逗號分隔列表
accept-charset表單的字符編碼的逗號或空格分隔列表。
alt非文字元素(例如圖片)的替代文字
border元素的邊框?qū)挾鹊南袼刂?/td>
charset鏈接資源的字符編碼
coords形狀為矩形，圓形或多邊形的元素的坐標(biāo)
dir文本的方向。 有效值為 ltr (從左到右)和 rtl (從右到左)。
disabled輸入元素或按鈕的禁用狀態(tài)
hreflang使用 href 屬性指定的資源的基本語言;
lang元素的屬性和文本的基本語言
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)證

硬編碼RadioButton

以下代碼來自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>
        Hard-coded with "f:selectItem": 
       <h:selectOneRadio value="#{user.item}">
         <f:selectItem itemValue="Red" itemLabel="Color - Red" />
         <f:selectItem itemValue="Green" itemLabel="Color - Green" />
         <f:selectItem itemValue="Blue" itemLabel="Color - Blue" />
       </h:selectOneRadio>

    <br /><br />
      <h:commandButton value="Submit" action="result" />
    <h:commandButton value="Reset" type="reset" />
      </h:form>
    </h:body>
</html>

以下代碼來自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>Selected: #{user.item}</p>
</h:body>
</html>

下面的代碼來自UserBean.java。

package cn.w3cschool.common;

import java.io.Serializable;
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 implements Serializable{
  public String item;
  
  public String getItem() {
    return item;
  }

  public void setItem(String i) {
    this.item = i;
  }
}

下載 Form_RadioButton_Hardcode.zip

RadioButton內(nèi)部項(xiàng)目

以下代碼來自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>
        Generated by Object array and iterate with var :
       <h:selectOneRadio value="#{user.item}">
         <f:selectItems value="#{user.itemValue}" var="c"
         itemLabel="#{c.label}" itemValue="#{c.value}" />
       </h:selectOneRadio>

    <br /><br />
      <h:commandButton value="Submit" action="result" />
    <h:commandButton value="Reset" type="reset" />
      </h:form>
    </h:body>
</html>

以下代碼來自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>Selected: #{user.item}</p>
</h:body>
</html>

下面的代碼來自UserBean.java。

package cn.w3cschool.common;

import java.io.Serializable;
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 implements Serializable{
  public String item;
  
  public String getItem() {
    return item;
  }

  public void setItem(String i) {
    this.item = i;
  }
  //Generated by Object array
  public static class Item{
    public String label;
    public String value;
    
    public Item(String l, String v){
      this.label = l;
      this.value = v;
    }
    
    public String getLabel(){
      return label;
    }
    
    public String getValue(){
      return value;
    }
  }
  public Item[] itemList;
  
  public Item[] getItemValue() {
    
    itemList = new Item[3];
    itemList[0] = new Item("Color - Red", "Red");
    itemList[1] = new Item("Color - Green", "Green");
    itemList[2] = new Item("Color - Blue", "Blue");
    
    return itemList;
  }  
}

下載 Form_RadioButton_Inner_Item.zip

映射生成的單選按鈕

下面的代碼來自UserBean.java。

package cn.w3cschool.common;

import java.io.Serializable;
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 implements Serializable{
  public String item;
  
  public String getItem() {
    return item;
  }

  public void setItem(String i) {
    this.item = i;
  }
  //Generated by Map
  private static Map<String,Object> itemValue;
  static{
    itemValue = new LinkedHashMap<String,Object>();
    itemValue.put("Color - Red", "Red"); //label, value
    itemValue.put("Color - Green", "Green");
    itemValue.put("Color - Blue", "Blue");
  }
  
  public Map<String,Object> getItemValue() {
    return itemValue;
  }  
}

以下代碼來自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>
        Generated by Map :
       <h:selectOneRadio value="#{user.item}">
         <f:selectItems value="#{user.itemValue}" />
       </h:selectOneRadio>

    <br /><br />
      <h:commandButton value="Submit" action="result" />
    <h:commandButton value="Reset" type="reset" />
      </h:form>
    </h:body>
</html>

以下代碼來自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>Selected: #{user.item}</p>
</h:body>
</html>
下載 Form_RadioButton_Generated_By_Map.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)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號