Ajaxフレームワーク UI部品リファレンス
目次 索引 前ページ次ページ
第4章 機能付加部品> 4.2 フォーカス制御機能付加部品

4.2.1 FocusManager

FocusManagerは、フォーカスを制御する部品であり、任意のキーでのフォーカスの移動およびフォーカスの移動順番を指定することができます。

FocusManagerは、ページ内に複数記述することができます。この場合の注意事項は以下のとおりです。

[図: 複数のFocusManagerの動作]

パターンBの場合、FocusManagerの切替えは、JavaScriptから行います。

以下に例を示します。

<script type="text/javascript">
//<![CDATA[
  function changeFocusManager () {
    // FocusManagerの切替え
    manager1.setProperty("enabled", false);
    manager2.setProperty("enabled", true);
  }

//]]>
</script>


<div rcf:type="FocusManager" rcf:id="manager1" rcf:targets="..."></div>
<div rcf:type="FocusManager" rcf:id="manager2" rcf:targets="..." rcf:enabled="false"></div>

上記の例では、FocusManagerはmanager1およびmanager2の2つが定義されており、manager2は無効(enabledプロパティがfalse)になっています。
JavaScriptのchangeFocusManager関数では、manager1を無効にし、manager2を有効にすることにより、FocusManagerをmanager2に切り替えています。


■記述形式

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

または

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


子要素を指定することはできません。

■プロパティ

表の項目の意味は、“Text”の“プロパティ”を参照してください。

名前

データ型

説明

省略

省略値

属性指定

更新

部分更新

targets

Array

フォーカスを制御する部品IDのリストを指定します。
(注1)

不可

-

値

可

不可

rotate

Boolean

フォーカス移動の循環(rotate)の有効/無効を指定します。

  • true:フォーカスがリストの最後の部品にあるときに、フォーカスを次に移動しようとすると、リストの最初の部品にフォーカスが移動します。
  • false:フォーカスは最後の部品から動きません。

可

false

値

不可

不可

tabEnabled

Boolean

ブラウザのデフォルトのTabキーでのフォーカス移動の有効/無効を指定します。

  • true: Tabキーでのフォーカス移動可
  • false: Tabキーでのフォーカス移動不可

可

true

値

不可

不可

nextKey

String

フォーカスを次に移すキーリスト
(注2)

可

13
(Enterキー)

値

不可

不可

previousKey

String

フォーカスを前に移すキーリスト
(注2)

可

13+SHIFT
(Enterキー+Shiftキー)

値

不可

不可

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

注1) targetsプロパティ
targetsプロパティでは、フォーカスを制御する部品のIDのリストを指定します。指定できる部品は以下のとおりです。

targetsプロパティは、RadioButtonGroupおよびCheckBoxGroupのグループごとか、またはグループに含まれる画面部品のどちらかにだけ指定できます。

また、このリストはフォーカスの移動順番も示しており、リストで指定された順番でフォーカスが移動します。

以下の例では、textInput1、textarea1、select1の順番でフォーカスが移動します。

<div rcf:id="textInput1" rcf:type="TextInput"></div>
<div rcf:id="select1" rcf:type="Select"></div>
<div rcf:id="textarea1" rcf:type="TextArea"></div>
<div rcf:type="FocusManager"
       rcf:targets="textInput1;textarea1;select1" ... ></div>

また、targetsプロパティの値は、動的に変更することができます。変更するには、setPropertyメソッドを利用します。

注2) キーの指定
nextKeyプロパティおよびpreviousKeyプロパティでは、フォーカスを移動させるキーを指定します。
キー指定は、“+”を区切り文字とし、以下を指定できます。

キーコードは必須であり、最初に指定する必要があります。

正しい指定例

内容

13

Enterキー

13+SHIFT

Enterキー + Shiftキー

13+CTRL+SHIFT

Enterキー + Ctrlキー + Shiftキー


誤った指定例

内容

SHIFT

キーコードが指定されていなので、設定不可

CTRL+13

キーコードが最初に指定されていないので、設定不可

キーコードには、数字の直接指定のほか、以下の別名を指定することができます。
別名による指定は、その別名が表すキーの実際のキーコードを指定した場合と同様に動作します。
例えば、“ENTER+SHIFT”は、“13+SHIFT”と同じ値として扱います。

別名

対象となるキー

実際のキーコード

BACKSPACE

Backspaceキー

8

TAB

Tabキー

9

ENTER

Enterキー

13

ESC

Escキー

27

SPACE

スペースキー

32

PAGEUP

PageUpキー

33

PAGEDOWN

PageDownキー

34

END

Endキー

35

HOME

Homeキー

36

LEFT

←(左カーソルキー)

37

UP

↑(上カーソルキー)

38

RIGHT

→(右カーソルキー)

39

DOWN

↓(下カーソルキー)

40

INSERT

Insertキー

45

DELETE

Deleteキー

46

F1

F1キー

112

F2

F2キー

113

F3

F3キー

114

F4

F4キー

115

F5

F5キー

116

F6

F6キー

117

F7

F7キー

118

F8

F8キー

119

F9

F9キー

120

F10

F10キー

121

F11

F11キー

122

F12

F12キー

123

Tabキーによるフォーカス移動の制御

ブラウザは、デフォルトでTabキーおよびTabキー+Shiftキーでフォーカス移動が可能です。

FocusManagerを使用した場合でも、デフォルトではブラウザのTabキーによるフォーカス移動は有効です。
ブラウザのTabキーによるフォーカス移動を禁止し、FocusManagerを利用してTabキーによるフォーカス移動をしたい場合は、以下のように指定します。

■イベントリスナ

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

■JavaScript API

■nextメソッド

メソッド

next()

引数

なし

戻り値

なし

例外

なし

説明

フォーカスを次に移動します。

■previousメソッド

メソッド

previous()

引数

なし

戻り値

なし

例外

なし

説明

フォーカスを前に移動します。

■getFocusedComponentIdメソッド

メソッド

getFocusedComponentId()

引数

なし

戻り値

フォーカスを保持している部品ID(String)

例外

なし

説明

フォーカスを保持している部品IDを取得します。
フォーカスを保持している部品が、FocusManagerでフォーカスを制御していない場合は、空文字を返します。

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

■補足事項

フォーカス移動キー設定時には、以下の注意事項があります。

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