JSF 2 radio buttons example

In JSF, “h:selectOneRadio” tag is used to render a set of HTML input element of type “radio“, and format it with HTML table and label tag.

//JSF...
<h:selectOneRadio value="#{user.favColor1}">
    <f:selectItem itemValue="Red" itemLabel="Color1 - Red" />
    <f:selectItem itemValue="Green" itemLabel="Color1 - Green" />
    <f:selectItem itemValue="Blue" itemLabel="Color1 - Blue" />
</h:selectOneRadio>
//HTML output...
<table>
<tr>
  <td>
    <input type="radio" name="j_idt6:j_idt8" id="j_idt6:j_idt8:0" value="Red" />
    <label for="j_idt6:j_idt8:0"> Color1 - Red</label></td>
  <td>
    <input type="radio" name="j_idt6:j_idt8" id="j_idt6:j_idt8:1" value="Green" />
    <label for="j_idt6:j_idt8:1"> Color1 - Green</label></td>
  <td>
    <input type="radio" name="j_idt6:j_idt8" id="j_idt6:j_idt8:2" value="Blue" />
    <label for="j_idt6:j_idt8:2"> Color1 - Blue</label>
  </td>
</tr>
</table>

JSF 2.0 “h:selectOneRadio” example

A JSF 2.0 example to show the use of “h:selectOneRadio” tag to render radio buttons, and populate the data in 3 different ways :

  • Hardcoded values in “f:selectItem” tag.
  • Generate values with a Map and put it into “f:selectItems” tag.
  • Generate values with an Object array and put it into “f:selectItems” tag, then represent the value with a “var” attribute.

1. Backing Bean

A backing bean to hold the submitted data.

package com.mkyong;

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 favColor1;
    public String favColor2;
    public String favColor3;
    
    //getter and setter methods 

    //Generated by Map
    private static Map<String,Object> color2Value;
    static{
        color2Value = new LinkedHashMap<String,Object>();
        color2Value.put("Color2 - Red", "Red"); //label, value
        color2Value.put("Color2 - Green", "Green");
        color2Value.put("Color3 - Blue", "Blue");
    }
    
    public Map<String,Object> getFavColor2Value() {
        return color2Value;
    }
    
    //Generated by Object array
    public static class Color{
        public String colorLabel;
        public String colorValue;
        
        public Color(String colorLabel, String colorValue){
            this.colorLabel = colorLabel;
            this.colorValue = colorValue;
        }
        
        public String getColorLabel(){
            return colorLabel;
        }
        
        public String getColorValue(){
            return colorValue;
        }
        
    }
    
    public Color[] color3List;
    
    public Color[] getFavColor3Value() {
        
        color3List = new Color[3];
        color3List[0] = new Color("Color3 - Red", "Red");
        color3List[1] = new Color("Color3 - Green", "Green");
        color3List[2] = new Color("Color3 - Blue", "Blue");
        
        return color3List;
    }
    
}

2. JSF Page

A JSF page to demonstrate the use “h:selectOneRadio” tag.

<?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>
        
        <h1>JSF 2 radio button example</h1>
        <h:form>
        
            1. Hard-coded with "f:selectItem" : 
        <h:selectOneRadio value="#{user.favColor1}">
            <f:selectItem itemValue="Red" itemLabel="Color1 - Red" />
            <f:selectItem itemValue="Green" itemLabel="Color1 - Green" />
            <f:selectItem itemValue="Blue" itemLabel="Color1 - Blue" />
        </h:selectOneRadio>
        
        <br />
        
            2. Generated by Map :
        <h:selectOneRadio value="#{user.favColor2}">
            <f:selectItems value="#{user.favColor2Value}" />
        </h:selectOneRadio>
        
            <br />
        
             3. Generated by Object array and iterate with var :
        <h:selectOneRadio value="#{user.favColor3}">
            <f:selectItems value="#{user.favColor3Value}" var="c"
            itemLabel="#{c.colorLabel}" itemValue="#{c.colorValue}" />
        </h:selectOneRadio>
        
            <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>
        
        <h1>JSF 2 radio button example</h1>
        
        <h2>result.xhtml</h2>
        
        <ol>
            <li>user.favColor1 : #{user.favColor1}</li>
            <li>user.favColor2 : #{user.favColor2}</li>
            <li>user.favColor3 : #{user.favColor3}</li>
        </ol>
    </h:body>
</html>

3. Demo

jsf2-radio-button-example-1

When “submit” button is clicked, link to “result.xhtml” and display the submitted radio button values.
jsf2-radio-button-example-2

How to select radio button value by default?

In JSF, the radio button values of “f:selectItems” tag is selected if it matched to the “value” of “h:selectOneRadio” tag. In above example, if you set favColor2 to “Red” :

@ManagedBean(name="user")
@SessionScoped
public class UserBean{

    public String[] favColor = "Red";

    //...

The “favColor2″ radio button, “Red” option is selected by default.

转载于:https://www.cnblogs.com/ghgyj/p/4765384.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值