Rich UI의 이벤트 핸들링

모든 위젯에는 런타임 이벤트에 대한 응답에서 호출되는 함수를 지정하기 위한 특성 세트가 포함되어 있습니다. 이 경우 함수를 이벤트 핸들러라고 합니다.

이벤트

다음 표에서는 특정 유형의 위젯이 특정 이벤트에 응답하는 경우 사용 가능한 이벤트를 나열합니다. 예를 들어 단추는 onChange가 아니라 onClick에 응답합니다. 또한 두 사용자 조치에 "포커스 획득"(위젯을 탭하거나 선택) 또는 "포커스 유실"(다른 위젯을 탭하거나 선택) 조치가 포함되어 있음을 참고하십시오.

표 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 크기인 두 단추가 브라우저 창의 왼쪽 위에 나란히 있고 사용자가 두 번째 단추의 중간을 정확하게 클릭하는 경우 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 특성 절)을 참조하십시오.