2.6.5 UI部品のフォーカス制御

TextInputやCalendarなどのフォーカス設定可能なUI部品間で、フォーカスの移動順序の制御を行うには、以下の2通りの方法があります。

また、RCF.setFocus関数を使用して、ユーザロジックから特定の部品にフォーカスを設定することもできます。

なお、フォーカス制御の各機能は、組み合わせて使用することができます。

UI部品のtabIndexプロパティを使用したフォーカス制御

tabIndexプロパティを持つUI部品では、その値を設定することにより、HTMLのtabindex属性と同じ効果を得ることができます。

以下に、tabIndexプロパティを使用したフォーカス制御の例を示します。

  <div rcf:type="TextInput" rcf:tabIndex="1"></div>
  <div rcf:type="CheckList" rcf:tabIndex="0" rcf:value="foo;bar"></div>
  <div rcf:type="Calendar" rcf:tabIndex="2"></div>

上記の例では、Tabキーを押すと、TextInput部品→Calendar部品→CheckList部品の順でフォーカスが移動します。

FocusManager部品を使用したフォーカス制御

FocusManager部品を利用すると、任意のキーでの部品間のフォーカス制御や、フォーカス制御範囲の切替えが可能になります。FocusManager部品の詳細は、“UI部品リファレンス”を参照してください。

以下に、FocusManager部品を使用したフォーカス制御の例を示します。

  <div rcf:id="input1" rcf:type="TextInput"></div>
  <div rcf:id="list1" rcf:type="CheckList" rcf:value="foo;bar"></div>
  <div rcf:id="cal1" rcf:type="Calendar"></div>

  <div rcf:type="FocusManager" rcf:targets="input1;cal1;list1"     ←フォーカス移動順にUI部品のIDを指定 
       rcf:tabEnabled="false"></div>                               ←Tabキーでのフォーカス移動を無効化

上記の例では、Tabキーでのフォーカス移動を無効化しています。また、Enterキーを押すと、TextInput部品→Calendar部品→CheckList部品の順でフォーカスが移動します。

RCF.setFocus関数を使用したフォーカスの設定

RCF.setFocus関数を使用して、ユーザロジックからUI部品にフォーカスを設定することができます。

以下に、RCF.setFocus関数の記述形式を示します。

RCF.setFocus(id)

id
フォーカスを設定するUI部品のID文字列を指定します。

以下に、RCF.setFocus関数の使用例を示します。

  <div rcf:id="button1" rcf:type="Button"
       rcf:onClick="window1.show()">Window表示</div>     // (1)

  <div rcf:id="window1" rcf:type="Window"
       rcf:mode="1" rcf:closeButton="true"
       rcf:onShow="RCF.setFocus('input1')"               // (2)
       rcf:onHide="RCF.setFocus('button1')">             // (3)
       <div rcf:id="input1" rcf:type="TextInput"></div>
  </div>

上記の例では、以下のように動作します。
(1) Button(ID=button1)がクリックされると、Window(ID=window1)を表示します。
(2) window1表示時に、window1内のTextInput(ID=input1)にフォーカスを設定します。
(3) window1を非表示にする際、button1にフォーカスを戻します。

以下に、RCF.setFocus関数に関する注意事項を示します。

フォーカス設定可能な部品は、FocusManager部品が対象とする部品と同じです。
- フォーム部品(Textは除く)
- TabPanel
- TableView
- TableEdit
- DataGrid
- Calendar
- CalendarButton
- TreeView
- ScrapingView(コンテンツ内は除く)
- CheckBoxGroup
- RadioButtonGroup

以下の場合、RCF.setFocus関数はフォーカスを設定しないで、例外を通知します。
( )内は、例外オブジェクトのメッセージ番号です。
- 指定されたIDを持つUI部品が存在しない場合
  (メッセージ番号なし、メッセージ本文に[UndeclaredComponentIdError]と設定される)
- 指定されたUI部品がフォーカスを設定できない部品の場合 (RCF11014)
- 指定されたUI部品が無効化されている場合 (RCF11015)
- 指定されたUI部品、またはそのUI部品の親要素が表示されていない場合 (RCF11016)