Rich UI でのイベント処理
ウィジェットにはすべて、ランタイム・イベントに応答して起動される関数を指定するための、プロパティー・セットが含まれています。この場合の関数は、イベント・ハンドラー とも呼ばれます。
イベント
次の表に、使用可能なイベントを示します。ただし、特定のタイプのウィジェットは特定のイベントに応答します。例えば、ボタンは onClick に応答し、onChange には応答しません。また、2 つのユーザー・アクションには、「フォーカスを得る」(ウィジェットにタブで移動するかウィジェットを選択する) または「フォーカスを失う」(別のウィジェットにタブで移動するか別のウィジェットを選択する) が関係することにも注意してください。
| イベント | 意味 |
|---|---|
| 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 ウィジェットでテキストが選択されたときに発生します。 |
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 プロパティーのセクションを参照してください。