JSF 2 radio buttons example

时间 2019-11-18

标签 jsf 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.html

//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 :java

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.this

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.3d

<?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…code

<?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

When “submit” button is clicked, link to “result.xhtml” and display the submitted radio button values.
orm

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” :xml

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

    public String[] favColor = "Red";

    //...

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

1. JSF 2.0 hello world example
2. web------JSF ----2
3. Example 2
4. Bitmap Buttons
5. Toggle Buttons（一）
6. B. Two Buttons
7. Struts 2 Interceptors Example
8. lib3ds 2.0 example 2
9. PayPal smart payment buttons
10. Dialog without Buttons、Dialog with Buttons Bottom与Dialog with Buttons Right区别
更多相关文章...
• Thymeleaf扩展2(Say Hello) - Thymeleaf 教程
• QBC的2种检索方式 - Hibernate教程
• C# 中 foreach 遍历的用法
• RxJava操作符（二）Transforming Observables