Rich UI でのイベント処理

ウィジェットにはすべて、ランタイム・イベントに応答して起動される関数を指定するための、プロパティー・セットが含まれています。この場合の関数は、イベント・ハンドラー とも呼ばれます。

イベント

次の表に、使用可能なイベントを示します。ただし、特定のタイプのウィジェットは特定のイベントに応答します。例えば、ボタンは onClick に応答し、onChange には応答しません。また、2 つのユーザー・アクションには、「フォーカスを得る」(ウィジェットにタブで移動するかウィジェットを選択する) または「フォーカスを失う」(別のウィジェットにタブで移動するか別のウィジェットを選択する) が関係することにも注意してください。

表 1. イベント
イベント 意味
onChange onChange は、ユーザーがウィジェットを変更したとき、およびスクリーン内のフォーカスをそのウィジェットから移動したときに発生します。変更を取り消したときにも発生します。
onClick onClick は、ユーザーがウィジェットをクリックしたときに発生します。
onFocusGained onFocusGained は、ウィジェットがフォーカスを得ると発生します。
onFocusLost onFocusLost は、ウィジェットがフォーカスを失うと発生します。JavaScript の同等のイベントは onBlur です。
onKeyDown onKeyDown は、ユーザーがいずれかのキーを押したときに発生します。多くのブラウザーでは、このイベントは、ユーザーがキーを押している限り、繰り返し発生します。onKeyDown が発生するたびに、onKeyPress の発生が続きます。
onKeyPress onKeyPress は、ユーザーがいずれかのキーを押したときに発生します。多くのブラウザーでは、このイベントは、ユーザーがキーを押している限り、繰り返し発生します。onKeyPress が発生するたびに、onKeyDown の発生が先行します。
onKeyUp onKeyUp は、(キーを押している) ユーザーがキーを離したときに発生します。
onMouseDown onMouseDown は、ユーザーがいずれかのマウス・ボタンを押したときに発生します。
onMouseMove onMouseMove は、スクリーン内のカーソルがウィジェットの境界内に存在する間に、ユーザーがマウスを移動したときに繰り返し発生します。
onMouseOut onMouseOut は、ユーザーがマウスを移動して、スクリーン内のカーソルがウィジェットから外れたときに発生します。
onMouseOver onMouseOver は、JavaScript では onMouseIn と呼ばれているイベントです。 このイベントは、ユーザーがマウスを移動して、スクリーン内のカーソルがウィジェット内に入ったときに発生します。このイベントは、例えば、ページの特定のパーツのカーソル記号を変更する場合に使用します。
onMouseUp onMouseUp は、ユーザー (マウス・ボタンを押している) がマウス・ボタンを離したときに発生します。
onSelect onSelect は、textArea ウィジェットまたは textField ウィジェットでテキストが選択されたときに発生します。
例えば、次の構文では、「ボタン」ウィジェットを宣言し、ユーザーがウィジェットをクリックすると、click という名前の関数が起動されます。
myButton Button { text = "Copy Input to Output", onClick ::= click };

演算子 ::= は、click という名前の関数を動的配列に追加します。ここでは、ユーザーがウィジェットを宣言したときに、各配列がイベントに指定された、イベント関連の配列のセットが即時に使用可能になることが想定されます。

所定のイベントに対して複数のイベント・ハンドラーを指定する場合、イベント・ハンドラーが実行される順序は、配列内のエレメントの順序です。次に、構文例を示します。
myButton Button { text = "Start", onClick ::= click, onClick ::= function02 };
イベント・ハンドラーを動的配列に追加するために、演算子 ::= をコードで使用することもできます。以下に例を示します。
myButton.onClick ::= function03;

この例では、ユーザーがクリックすると関数が click、function02、function03 の順に起動されます。

イベント・レコード

イベント・ハンドラーはそれぞれ、イベントに関する詳細情報を提供するレコードを受け取ります。イベント・レコードはイベント・タイプで、次のフィールドが含まれています。
ch INT
イベントを発生させたキー・ストローク (ある場合) の ASCII コードです。
x INT
所定のウィジェットの左方を基準とした x 座標 (ピクセル単位) です。 例えば、10 x 10 のボタンの真ん中をクリックした場合、x の値は 5 です。
y INT
所定のウィジェットの上部を基準とした y 座標 (ピクセル単位) です。 例えば、10 x 10 のボタンの真ん中をクリックした場合、y の値は 5 です。
clientX INT
ブラウザー・ウィンドウの左方を基準としたマウス・ポインターの x 座標 (ピクセル単位) です。 例えば、それぞれ 10 x 10 の 2 つのボタンがブラウザー・ウィンドウの左上に並んでいて、2 番目のボタンの真ん中をクリックした場合、x の値は 15 です。
clientY INT
ブラウザー・ウィンドウの上部を基準としたマウス・ポインターの y 座標 (ピクセル単位) です。 例えば、それぞれ 10 x 10 の 2 つのボタンがブラウザー・ウィンドウの左上に並んでいて、2 番目のボタンの真ん中をクリックした場合、y の値は 5 です。
screenX INT
画面の左方を基準としたマウス・ポインターの x 座標 (ピクセル単位) です。 この値は、ワークステーションのモニター解像度に応じて変わります。
screenY INT
画面の上部を基準としたマウス・ポインターの y 座標 (ピクセル単位) です。 この値は、ワークステーションのモニター解像度に応じて変わります。
widget ANY
イベントが添付されるウィジェット。
mousebutton INT
押されたマウス・ボタンを示す数値。
イベント・タイプのレコードにも次の関数が含まれていますが、いずれもパラメーターがありません。
preventDefault()
ブラウザーがデフォルトの動作を実行しないようにします。例えば、ユーザーがハイパーテキスト・リンクをクリックしたときの標準的な結果を回避できます。次のアウトラインでは、指定された条件が有効である場合にのみ、ユーザーのクリックがブラウザーに渡されます。
hLink HyperLink { text = "www.ibm.com", 
                  href = "http://www.ibm.com", 
                  onClick ::= handleClickLink };

function handleClickLink(e Event in)
   
   // allow access only to personnel with an explicitly specified status
   if (...)
      return;
   end
   e.preventDefault();
end
stopPropagation()
『イベント伝搬』で説明されている動作を発生させるために Rich UI イベント定義によって使用されます。

イベント伝搬

コンテナー内のウィジェットが指定されたタイプのイベント・ハンドラーのセットを持っていない場合、そのイベントをコンテナーで使用できます。例えば、あるボタンがボックス (B という名前) 内にあり、そのボタンが onClick イベントを処理しない場合、そのイベントを B で使用できます。この動作はイベント伝搬と呼ばれ、コンテナーのコンテナーに、コンテナー階層の任意のレベルまで拡張します。例えば、B 自体がボックス (A) 内にあり、ボタンも B も onClick イベントを処理しない場合、そのイベントを A で使用できます。

コンテナー階層内のいずれかのレベルでイベントがウィジェットによって処理される と、そのイベントはそれを埋め込んでいるウィジェットには伝搬されません。

カスタム・イベント・タイプ

Rich UI により、組織専用のイベント・タイプを定義する方法が提供されます。 詳細については、『Rich UI ウィジェット・セットの拡張』の具体的には @VEEvent プロパティーのセクションを参照してください。


フィードバック