Ajaxフレームワーク UI部品リファレンス
目次 索引 前ページ次ページ
第2章 画面部品> 2.1 フォーム部品

2.1.13 SelectList

SelectListは、単一選択および複数選択が可能なリストを表示する部品です。

■表示例

■記述形式

<div rcf:type="SelectList" ... ></div>


子要素は指定できません。


本部品は前後に改行コードが挿入されて表示されます。

■プロパティ

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

名前

データ型

説明

省略

省略値

属性指定

更新

部分更新

options

Array

選択項目を表す値のリストを指定します。
表示されるラベルは、labelProviderプロパティの指定に従います。

可

[]

値、バインド(注3)

可

可

labelProvider

getLabel()関数を持つオブジェクト

各選択項目の文字列を確定する関数を指定します。options配列のメンバに応じた文字列変換ロジックを定義します。getLabel()関数には、options配列の個々の要素が渡されます。
nullを指定した場合、デフォルトlabelProviderが使用されます。詳細は、“デフォルトlabelProvider”を参照してください。
以下の場合はエラーとなります。

  • nullおよびObject以外の値が指定された場合
  • getLabel()関数を持たないObjectが指定された場合

可

null(デフォルトlabelProvider)

値

不可

不可

multiple

Boolean

複数選択または単一選択を指定します。

  • true:複数選択
  • false:単一選択

可

false

値

不可

不可

selectedIndex

Number

単一選択(multiple=false)の場合

  • 選択されている項目のインデックス(先頭は0)を指定します。
  • 選択状態の初期値を指定できます。
  • -1を指定した場合は、選択が解除されます。
  • 無効な値を指定した場合は、エラー(RCF13302)となります。

複数選択(multiple=true)の場合

optionsプロパティの値が変更された場合、本プロパティは-1(選択なし)に設定されます。

可

-1

値、バインド

可(注1)

不可

selectedIndexes

NumberのArray

選択されている項目のインデックス(先頭は0)配列を指定します。
選択順にインデックスが格納されます。
このプロパティにより選択状態の初期値を指定できます。
何も選択されていない場合は、長さ0の配列となります。
無効な値が指定された場合は、エラー(RCF13302)となります。
単一選択(multiple=false)の場合、部品の初期化後に本プロパティを変更しようとするとエラー(RCF11002)となります。“multipleとselectedIndex、selectedIndexesの関係について”を参照してください。
optionsプロパティの値が変更された場合、本プロパティは長さ0の配列(選択なし)に設定されます。

可

[]

値、バインド

可(注2)

可(注2)

title

String

optionsプロパティがStringの配列の場合、またはObjectの配列で、かつ各Objectがtitle属性でない場合、ツールチップで表示されるテキストを指定します。
なお、optionsプロパティがObjectの配列で、かつObjectがtitle属性の場合は、その値がツールチップとして表示されます。

可

""

値

可

不可

enabled

Boolean

本部品の有効/無効を指定します。

  • true:有効
  • false:無効
    操作できなくなりイベントも発生しません。

可

true

値、バインド

可

不可

tabIndex

Number

Tabキーで移動するフォーカスの順番を指定します。
HTMLのtabindex属性と同様の指定ができます。1以上の整数を指定した場合、数字の小さい順にフォーカスが移動します。
FocusManagerによるフォーカス移動には関係しません。

可

0

値

可

不可

renderer

render関数を持つオブジェクト

ラベルや項目のインデックスを入力値として各項目の表示用ノードを出力する関数を指定します。
nullが指定された場合には、ラベルの値をそのまま表示します。
以下の場合は、エラー(RCF13303)となります。

  • nullおよびObject以外の値が指定された場合
  • render()関数を持たないObjectが指定された場合

可

null

値

不可

不可

注1) 単一選択(multiple=false)の場合にだけ更新可能
注2) 複数選択(multiple=true)の場合にだけ更新可能
注3) Objectの配列の場合は、バインディング式だけ記述可能

部品共通のプロパティも指定できます。詳細は、“画面部品共通プロパティ”を参照してください。


titleプロパティに、長い文字列を指定すると以下のような現象が起こることがあります。

なお、空文字列を指定した場合は、表示されません。


デフォルトlabelProvider
項目リストの配列(options)のメンバ型によって、以下のように動作が異なります。

メンバ型

説明

String型

引数を加工せずそのまま返却します。

Object型

オブジェクトのlabelプロパティの値をラベル文字列とします。labelプロパティ以外は無視します。(注)

注) Selectのように、個々の項目にenabled/disabledを指定することはできません。

optionsプロパティにObjectの配列を利用する場合の定義例を以下に示します。

<script type="text/javascript">
//<![CDATA[
  /**
   * 各オブジェクトには以下のように labelプロパティを定義します。
   * titleプロパティが存在する場合、その項目の補足情報にその値が使用されます。
   *   {
   *    label: "[項目のラベル]",
   *    title: "[項目の補足情報]"
   *  }
   **/

   // foo, barというラベルを持つ2つの項目を作成する場合
   var obj = {
   userOptions : [
      { label:"foo", title:"fooタイトル" },
      { label:"bar", title:"barタイトル" }
   ]
  }
//]]>
</script>

<!-- モデル定義 -->
<div rcf:type="Model" rcf:id="model1" rcf:object="obj"></div>
<!-- SelectList定義 -->
<div rcf:type="SelectList" rcf:options="{model1.userOptions}"></div>


labelProviderプロパティ
labelProviderプロパティには、getLabel関数を持つオブジェクトを指定します。getLabel関数は、リスト項目の文字列を生成するユーザロジックを記述します。

項目リストの配列(options)メンバがObject(プロパティ:nameとtel)の場合の記述例を、以下に示します。

<script type="text/javascript">
//<![CDATA[
  // labelProviderの定義
  var userLabelProvider = {
    getLabel: function(item) {
      return "名前は" + item.name + "です。電話は" + item.tel + "です。";
    }
  }
  // optionsの定義
  var obj = {
  userOptions : [
    { name:"Taro YAMADA",   tel: "xxx-xxx-xxxx"},
    { name:"Hanako TANAKA", tel: "yyy-yyy-yyyy"}
  ]
}
//]]>
</script>

<!-- モデル定義 -->
<div rcf:type="Model" rcf:id="model1" rcf:object="obj"></div>
<!-- SelectList定義 -->
<div rcf:type="SelectList" rcf:options="{model1.userOptions}" rcf:labelProvider="userLabelProvider"></div>


multipleとselectedIndex、selectedIndexesの関係について
multipleの値によって、selectedIndexおよびselectedIndexesの扱いは以下のようになります。
rendererプロパティ
rendererプロパティには、render関数を持つオブジェクトを指定します。render関数には、リスト項目を表示する領域のDOMノードと、そのほかの項目情報がパラメタとして渡されます。render関数内のユーザロジックでDOMノードを操作することで、リスト項目の表示を制御できます。

render関数のパラメタを以下に示します。

順

パラメタ名

型

説明

1

node

DOM Node

項目リストを表示する領域のDOMノードを指定します。

2

item

Object

options配列のメンバを指定します。

3

label

String

itemをlabelProviderで変換した文字列です。

4

index

Number

options配列の中のindexを指定します。

rendererプロパティに渡すオブジェクトの例を以下に示します。

<script type="text/javascript">
//<![CDATA[
var user_Renderer = {
  /**
   * param node 項目を表示する領域のDOMノード
   * param item(Object型またはString型) options配列のn番目要素
   * param label(String型) options配列のn番目要素をlabelProviderにより変換した結果の文字列
   * param index(Number型)  n番目
   */
render: function(node, item, label, index) {
   //
   //以下ユーザ定義ロジック
   //
   node.innerHTML = '<img src="img.png"></img>';
   node.appendChild(document.createTextNode(label));
  }
}
//]]>
</script>

<div rcf:type="SelectList" rcf:renderer="user_Renderer"></div>

■スタイルプロパティ

部品全体のスタイルプロパティを以下に示します。

パーツ名

プレフィックス

クラス名

使用可能なスタイル

部品全体

なし

rcf-SelectList
  • サイズ
  • カラー
  • フォント(lineHeightを除く)
  • テキスト(textIndent、textAlign、whiteSpaceを除く)
  • ボーダー
  • パディング

詳細は、“スタイルプロパティ”を参照してください。

選択項目のスタイル

プレフィックス

クラス

スタイルプロパティ

説明

デフォルト

optionSelected
(選択項目)

rcf-SelectList-optionSelected

backgroundColor

選択項目の背景色を指定します。

#004E98

color

選択項目のフォント色を指定します。

#FFFFFF(白)

optionHovered
(マウスオーバー項目)

rcf-SelectList-optionHovered

backgroundColor

マウスオーバー項目の背景色を指定します。

#316AC5

color

マウスオーバー項目のフォント色を指定します。

#FFFFFF(白)

表示とスタイルプロパティの関係

本部品のスタイルプロパティは、CheckListと同じです。ただし、チェックボックスの表示はありません。詳細は、“CheckList”の“スタイルプロパティ”を参照してください。

■イベントリスナ

名前

説明

イベントオブジェクト

onFocus

部品がフォーカスを得たときに呼ばれます。

ActionEvent

onBlur

部品がフォーカスを失ったときに呼ばれます。

onChange
(注)

部品の選択状態が変更されたときに呼ばれます。

onOptionSelected
(注)

項目が選択されたときに呼ばれます。

OptionStateChangeEvent

onOptionDeselected
(注)

項目の選択が解除されたときに呼ばれます。
単一選択の場合、optiondeselected、optionselectedの順番でイベントが発生します。

注) マウス、キーボードなどの入力装置によってUI部品を操作した場合に呼ばれるイベントリスナ

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

■JavaScript API

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

目次 索引 前ページ次ページ
Copyright 2008 FUJITSU LIMITED