Rich UI의 이벤트 핸들링
모든 위젯에는 런타임 이벤트에 대한 응답에서 호출되는 함수를 지정하기 위한 특성 세트가 포함되어 있습니다. 이 경우 함수를 이벤트 핸들러라고 합니다.
이벤트
다음 표에서는 특정 유형의 위젯이 특정 이벤트에 응답하는 경우 사용 가능한 이벤트를 나열합니다. 예를 들어 단추는 onChange가 아니라 onClick에 응답합니다. 또한 두 사용자 조치에 "포커스 획득"(위젯을 탭하거나 선택) 또는 "포커스 유실"(다른 위젯을 탭하거나 선택) 조치가 포함되어 있음을 참고하십시오.
| 이벤트 | 의미 |
|---|---|
| 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 크기인 두 단추가 브라우저 창의 왼쪽 위에 나란히 있고 사용자가 두 번째 단추의 중간을 정확하게 클릭하는 경우 x 값은 15입니다.
- clientY INT
- 브라우저 창의 위쪽에 해당하는 마우스 포인터의 y 좌표(픽셀)입니다. 예를 들어 각각 10 x 10 크기인 두 단추가 브라우저 창의 왼쪽 위에 나란히 있고 사용자가 두 번째 단추의 중간을 정확하게 클릭하는 경우 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 특성 절)을 참조하십시오.