4.이벤트 함수 생성

사용자가 컴포넌트를 마우스로 클릭하거나 포커스를 이동하는 등 어떤 동작을 하거나 컴포넌트의 상태가 변경될때 이벤트가 발생합니다. 이벤트 함수를 지정해놓으면 해당하는 이벤트 발생 시 원하는 동작을 처리할 수 있습니다.

4.1속성창에서 Button 컴포넌트의 onclick 이벤트 함수 생성하기

1

디자인 화면에 Button 컴포넌트를 배치합니다. 배치된 Button 컴포넌트를 선택하고 속성창에서 이벤트 아이콘을 선택합니다. 속성창에 컴포넌트의 이벤트 목록이 표시됩니다.

2

onclick 이벤트 항목 오른쪽에 함수명을 입력합니다. 함수명을 입력하지 않고 빈칸을 더블클릭하면 ["컴포넌트 id"+"_"+"이벤트명"]으로 함수명을 자동 생성합니다.

3

디자인 화면에서 스크립트 화면으로 이동하면 생성된 이벤트 함수를 확인할 수 있습니다. 아래와 같은 코드가 생성됩니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
    
};

4

이벤트 함수 내에 경고 대화상자를 표시하는 alert 메소드를 추가합니다. Button 컴포넌트를 클릭하는 이벤트가 발생 시 Button00_onclick 이벤트 함수가 호출되며 이벤트 함수 내에 alert 메소드가 실행됩니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
    this.alert("TEST");    
};

5

변경된 내용을 저장하고 툴바에서 [QuickView] 항목을 선택합니다. 넥사크로 브라우저가 실행되면서 화면에 Button 컴포넌트가 표시됩니다. Button 컴포넌트를 클릭하면 경고 대화상자가 표시됩니다.

4.2Edit 컴포넌트에 입력된 텍스트 확인하기

1

디자인 화면에 Edit 컴포넌트를 배치합니다. 배치된 Edit 컴포넌트를 선택하고 속성창에서 이벤트 아이콘을 선택합니다. 이벤트 항목 중 onchanged 이벤트를 선택하고 이벤트 함수를 생성합니다.

2

디자인 화면에서 스크립트 화면으로 이동하면 생성된 이벤트 함수를 확인할 수 있습니다. 이벤트 함수 코드 내에 아래와 같은 코드를 추가합니다. Edit 컴포넌트에 값을 입력하고 Enter 키를 입력하거나 다른 컴포넌트로 포커스를 이동하면 입력된 텍스트를 Output 창에 표시합니다.

this.Edit00_onchanged = function(obj:nexacro.Edit,e:nexacro.ChangeEventInfo)
{
    trace(e.posttext);
};

이벤트 함수 실행 시에 2개의 파라미터를 전달합니다. 첫 번째 파라미터는 이벤트가 발생한 컴포넌트이며 두 번째 파라미터는 이벤트와 관련된 정보를 담고 있는 EventInfo 오브젝트입니다. EventInfo 오브젝트에 어떤 정보가 담겨있는지는 도움말에서 확인할 수 있습니다. 도움말에서 onchanged 이벤트 항목을 찾아가면 ChangeEventInfo 오브젝트로 연결되는 링크를 확인할 수 있습니다.

ChangeEventInfo 오브젝트에서 사용할 수 있는 속성 정보를 확인할 수 있습니다.

3

변경된 내용을 저장하고 툴바에서 [QuickView] 항목을 선택합니다. 넥사크로 브라우저가 실행되면서 화면에 Edit 컴포넌트가 표시됩니다. Edit 컴포넌트에 텍스트를 입력하고 Enter 키를 입력합니다. 넥사크로 스튜디오의 Output 창에서 입력된 텍스트를 확인할 수 있습니다.

4.3하나의 이벤트 함수를 여러 컴포넌트에서 사용하기

1

디자인 화면에 Button 컴포넌트를 2개 배치합니다. 배치된 Button 컴포넌트 중 하나를 선택하고 속성창에서 이벤트 아이콘을 선택합니다. 이벤트 항목 중 onclick 이벤트를 선택하고 이벤트 함수를 생성합니다. 이벤트 함수명은 자동으로 생성하지 않고 "Button_onclick"으로 지정합니다.

2

디자인 화면에서 스크립트 화면으로 이동하면 생성된 이벤트 함수를 확인할 수 있습니다. 이벤트 함수를 다음과 같이 작성합니다.

this.Button_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
    this.alert(e.fromobject.id);
};

Button 컴포넌트 클릭 시 해당 컴포넌트의 id 값을 경고 대화상자에 표시합니다.

3

이전에 선택하지 않았던 Button 컴포넌트를 선택하고 속성창에서 이벤트 항목 중 onclick 이벤트를 선택하고 이벤트 함수를 생성합니다. 이벤트 함수명은 자동으로 생성하지 않고 이전 단계에서 생성한 "Button_onclick"으로 지정합니다.

4

변경된 내용을 저장하고 툴바에서 [QuickView] 항목을 선택합니다. 넥사크로 브라우저가 실행되면서 화면에 2개의 Button 컴포넌트가 표시됩니다. Button 컴포넌트를 클릭하면 각 Button 컴포넌트의 id값을 경고대화상자에 표시합니다.

예제에서는 Button 컴포넌트 클릭 시 id값을 표시하는 간단한 예제를 보여주었지만 실제 코드에서는 사용자가 클릭한 Button 컴포넌트의 id값을 확인해 다른 작업을 수행하도록 할 수 있습니다.