JSF-h：selectOneRadio

h：selectOneRadioタグは、「radio」タイプのHTML入力要素のセットをレンダリングします。 HTMLテーブルとラベルタグでフォーマットします。

JSFタグ

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

レンダリングされた出力

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

タグ属性

S.No	Attribute & Description
1	id コンポーネントの識別子
2	binding バッキングBeanで使用できるコンポーネントへの参照
3	rendered ブール値。 falseはレンダリングを抑制します
4	styleClass カスケードスタイルシート（CSS）クラス名
5	value コンポーネントの値、通常は値バインディング
6	valueChangeListener 値の変更に応答するメソッドにバインドするメソッド
7	converter コンバータークラス名
8	validator 作成され、コンポーネントにアタッチされるバリデーターのクラス名
9	required ブール値。 trueの場合、関連フィールドに値を入力する必要があります
10	accesskey 通常、システム定義のメタキーと組み合わせて、要素にフォーカスを与えるキー
11	accept フォームのコンテンツタイプのカンマ区切りリスト
12	accept-charset フォームの文字エンコードのコンマまたはスペース区切りリスト。 accept-charset 属性は、 acceptcharset という名前のJSF HTML属性とともに指定されます。
13	alt 画像やアプレットなどの非テキスト要素の代替テキスト
14	charset リンクされたリソースの文字エンコード
15	coords 形状が長方形、円、または多角形である要素の座標
16	dir テキストの方向。有効な値は ltr （左から右）および rtl （右から左）です。
17	disabled 入力要素またはボタンの無効状態
18	hreflang href* 属性で指定されたリソースのベース言語。 hreflang は href でのみ使用できます。
19	lang 要素の属性とテキストの基本言語
20	maxlength テキストフィールドの最大文字数
21	readonly 入力フィールドの読み取り専用状態。テキストは読み取り専用フィールドで選択できますが、編集できません
22	rel 現在のドキュメントと href 属性で指定されたリンクとの関係
23	rev href* で指定されたアンカーから現在のドキュメントへの逆方向リンク。属性の値は、リンクタイプのスペース区切りリストです。
24	rows テキスト領域に表示される行の数。 h：dataTable には rows 属性がありますが、HTMLパススルー属性ではありません。
25	shape 領域の形状。有効な値： default、rect、circle、poly 。（デフォルトは地域全体を意味します）
26	style インラインスタイル情報
27	tabindex タブインデックスを指定する数値
28	target ドキュメントが開かれているフレームの名前
29	title アクセシビリティのために使用される、要素を説明するタイトル。視覚的なブラウザは通常、タイトルの価値に関するツールチップを作成します
30	type リンクのタイプ。たとえば、 stylesheet
31	width 要素の幅
32	onblur 要素がフォーカスを失います
33	onchange 要素の価値の変化
34	onclick マウスボタンが要素上でクリックされた
35	ondblclick マウスボタンが要素上でダブルクリックされます
36	onfocus 要素がフォーカスを受け取る
37	onkeydown キーが押された
38	onkeypress キーが押され、その後解放されます
39	onkeyup キーが解放されます
40	onmousedown マウスボタンが要素上で押されています
41	onmousemove マウスが要素の上を移動する
42	onmouseout マウスは要素の領域を離れます
43	onmouseover マウスが要素の上に移動する
44	onmouseup マウスボタンが離された
45	onreset フォームがリセットされました
46	onselect 入力フィールドでテキストが選択されています
47	disabledClass 無効な要素のCSSクラス
48	enabledClass 有効な要素のCSSクラス
49	layout 要素のレイアウト方法の仕様：lineDirection（水平）またはpageDirection（垂直）
50	border 要素の境界線

応用例

上記のタグをテストするテストJSFアプリケーションを作成しましょう。

Step	Description
1	Create a project with a name helloworld under a package com.finddevguides.test as explained in the JSF - First Application chapter.
2	Modify home.xhtml as explained below. Keep rest of the files unchanged.
3	Create result.xhtml in the webapps directory as explained below.
4	Create UserData.java as a managed bean under package com.finddevguides.test as explained below.
5	Compile and run the application to make sure business logic is working as per the requirements.
6	Finally, build the application in the form of war file and deploy it in Apache Tomcat Webserver.
7	Launch your web application using appropriate URL as explained below in the last step.

UserData.java

package com.finddevguides.test;

import java.io.Serializable;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name = "userData", eager = true)
@SessionScoped
public class UserData implements Serializable {
   private static final long serialVersionUID = 1L;
   public String data = "1";

   public String getData() {
      return data;
   }

   public void setData(String data) {
      this.data = data;
   }
}

home.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:f = "http://java.sun.com/jsf/core"
   xmlns:h = "http://java.sun.com/jsf/html">

   <head>
      <title>JSF Tutorial!</title>
   </head>

   <h:body>
      <h2>h:selectManyCheckbox example</h2>
      <hr/>

      <h:form>
         <h3>Radio Button</h3>
         <h:selectOneRadio value = "#{userData.data}">
            <f:selectItem itemValue = "1" itemLabel = "Item 1"/>
            <f:selectItem itemValue = "2" itemLabel = "Item 2"/>
            <f:selectItem itemValue = "3" itemLabel = "Item 3"/>
            <f:selectItem itemValue = "4" itemLabel = "Item 4"/>
            <f:selectItem itemValue = "5" itemLabel = "Item 5"/>
         </h:selectOneRadio>
         <h:commandButton value = "Submit" action = "result"/>
      </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:f = "http://java.sun.com/jsf/core"
   xmlns:h = "http://java.sun.com/jsf/html"
   xmlns:ui = "http://java.sun.com/jsf/facelets">

   <head>
      <title>JSF Tutorial!</title>
   </head>

   <h:body>
      <h2>Result</h2>
      <hr/>
      #{userData.data}
   </h:body>
</html>

すべての変更を完了したら、JSF-最初のアプリケーションの章で行ったようにアプリケーションをコンパイルして実行します。すべてがアプリケーションで問題ない場合、次の結果が生成されます。

JSF h：selectOneRadio

任意のオプションを選択して、[送信]ボタンを押します。アイテム3を選択しました。選択した結果が表示されます。

JSF h：selectOneRadio1

Jsf-selectoneradio-tag

目次