4.3.2 RadioButtonGroup

Ajaxフレームワーク UI部品リファレンス

目次索引

第4章機能付加部品

> 4.3 グループ化機能

4.3.2 RadioButtonGroup

RadioButtonGroupは、複数のRadioButtonからなる相互排他的なグループを形成する機能付加部品です。

記述形式
プロパティ
イベントリスナ
JavaScript API

ラジオボタングループを形成することにより、以下が可能になります。

RadioButtonGroupに属するRadioButtonは、HTMLの同名のラジオボタン群と同様の動きをする
- グループのRadioButton群で1つのフォーカスを構成
- グループ内の選択状態を、カーソルキーで変更可能
FocusManager制御対象
- RadioButtonGroup自体をFocusManagerのフォーカス移動対象として指定可能
- 構成するRadioButtonを直接FocusManagerのフォーカス移動対象とする設定は無効

■記述形式

<div rcf:type="RadioButtonGroup" rcf:targets="xxx1; xxx2; ... "></div>

または

<span rcf:type="RadioButtonGroup" rcf:targets="xxx1; xxx2; ... "></span>

子要素は記述できません。
本部品は画面に表示されないため、<div>タグおよび<span>タグのどちらで記述しても違いはありません。

■プロパティ

表の項目の意味は、“表の項目の意味”を参照してください。

名前	データ型	説明	省略	省略値	属性指定	更新	部分更新
targets	Array	グループを形成するRadioButtonのidのリストです。グループ内のカーソルキーによるフォーカスの制御は、本プロパティの指定順に従います。本プロパティが以下の値の場合は、エラーとなります。指定されたidを持つ部品が存在しない指定されたidを持つ部品がRadioButtonではない指定されたRadioButtonのvalueが空文字列であるグループ内に同じvalueを持つRadioButtonが存在する	不可	-	値	不可	不可
selectedValue	String	選択されているRadioButtonのvalueです。すべてのRadioButtonが非選択の場合は空文字列になります。グループ内のどのvalueとも一致しない値が指定された場合は、エラーとなります。初期値として本プロパティを利用する場合の注意本プロパティが空文字列の場合、checkedプロパティがtrueのRadioButtonのなかで、targetsの指定順が最後のものを選択状態にします。空文字列以外の場合、RadioButtonのcheckedプロパティ指定は無効とし、本プロパティで指定された値を持つRadioButtonが選択状態となります。	可	""	値、バインド	可	不可

名前

データ型

説明

省略

省略値

属性指定

更新

部分更新

targets

Array

グループを形成するRadioButtonのidのリストです。
グループ内のカーソルキーによるフォーカスの制御は、本プロパティの指定順に従います。
本プロパティが以下の値の場合は、エラーとなります。

指定されたidを持つ部品が存在しない
指定されたidを持つ部品がRadioButtonではない
指定されたRadioButtonのvalueが空文字列である
グループ内に同じvalueを持つRadioButtonが存在する

不可

値

不可

selectedValue

String

選択されているRadioButtonのvalueです。すべてのRadioButtonが非選択の場合は空文字列になります。
グループ内のどのvalueとも一致しない値が指定された場合は、エラーとなります。

初期値として本プロパティを利用する場合の注意
本プロパティが空文字列の場合、checkedプロパティがtrueのRadioButtonのなかで、targetsの指定順が最後のものを選択状態にします。
空文字列以外の場合、RadioButtonのcheckedプロパティ指定は無効とし、本プロパティで指定された値を持つRadioButtonが選択状態となります。

可

値、バインド

可

不可

そのほかにも、画面部品および機能付加部品で共通のプロパティを指定することができます。詳細は、“画面部品共通プロパティ”、および“機能付加部品共通プロパティ”を参照してください。

ラジオボタングループの形成

ラジオボタングループを形成するには、targetsプロパティにグループに含めるRadioButtonのidのリストを指定します。

以下に例を示します。

...
<span rcf:id="radioButton1" rcf:type="RadioButton" rcf:value="val1" rcf:label="ラジオボタン1"></span>
<span rcf:id="radioButton2" rcf:type="RadioButton" rcf:value="val2" rcf:label="ラジオボタン2"></span>
 ...
<span rcf:id="group1" rcf:type="RadioButtonGroup" rcf:targets="radioButton1; radioButton2" ... ></span>
 ...

フォーカス制御

RadioButtonGroupをFocusManagerに登録することにより、グループ単位でフォーカスを制御します。

ラジオボタングループ内のフォーカスの移動はカーソルキーで行うことができ、フォーカスの移動順番は、targetsプロパティに指定された順番になります。

■イベントリスナ

名前	説明	イベントオブジェクト
onSelected	グループ内のRadioButtonが選択されたときに呼ばれます。	CheckStatusChangeEvent
onDeselected	グループ内のRadioButtonの選択が解除されたときに呼ばれます。 (注)	CheckStatusChangeEvent

注) イベント発生順はdeselected→selected

部品共通のイベントリスナは、“画面部品共通イベントリスナ”を参照してください。

■JavaScript API

固有のJavaScript APIはありません。部品共通のJavaScript APIは、“画面部品共通JavaScript API”を参照してください。

目次索引