JSF 2ラジオボタンの例

JSFでは、 " h:selectOneRadio "タグを使用して、 " radio "タイプのHTML入力エレメントのセットをレンダリングし、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> <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"の例

ラジオボタンをレンダリングするための "**  h:selectOneRadio ** "タグの使用方法を示すJSF 2.0の例を示し、3つの異なる方法でデータを設定します。

.  "**  f:selectItem ** "タグのハードコードされた値.

. マップで値を生成し、それを "**  f:selectItems ** "タグに入れます.

. オブジェクト配列を使って値を生成し、それを "**  f:selectItems ** "に入れる

タグを使用し、値を "**  var ** "属性で表します。

===  1.バッキングビーン

送信されたデータを保持するバッキングBean。

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ページ

"**  h:selectOneRadio ** "タグの使用方法を示すJSFページ。

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

デモ

jsf2-radio-button-example-1、title = "jsf2-radio-button-example-1"、幅= 640、高さ= 451

「送信」ボタンをクリックすると、「result.xhtml」にリンクし、送信されたラジオボタンの値を表示します。

jsf2-radio-button-example-2、title = "jsf2-radio-button-example-2"、幅= 640、高さ= 373

デフォルトでラジオボタンの値を選択する方法は?

JSFでは、 " h:selectOneRadio "タグの "value"と一致する場合、 " f:selectItems "タグのラジオボタン値が選択されます。上記の例では、favColor2を "Red"に設定した場合:

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

    public String[]favColor = "Red";

   //...

「favColor2」ラジオボタン、「赤」オプションがデフォルトで選択されています。

ソースコードをダウンロードする

ダウンロード - リンク://wp-content/uploads/2010/10/JSF-2-RadioButtons-Example.zip[JSF-2-RadioButtons-Example.zip](10KB)