애플리케이션의 목적에 따라 단순히 정보를 보여주기 위한 용도로만 만들 수 있습니다. 하지만 업무용 시스템에서는 데이터를 입력하고 조회하고 결과를 처리하는 용도로 많이 사용됩니다. 이번 장에서는 사용자가 어떤 조작을 했을 때 이를 처리하는 방식을 살펴봅니다.
Button 컴포넌트 클릭했을 때 메시지 표시하기
넥사크로 N의 기본적인 이벤트 처리 방식을 살펴봅니다.
1
화면에 Button 컴포넌트를 배치합니다.
2
속성창에서 Event 아이콘을 클릭합니다.
속성창은 Property(속성)이 기본 선택 상태입니다. Property 선택 시에는 속성 목록이 표시되고 Event 선택 시에는 이벤트 목록이 표시됩니다.
3
Event 목록 중에서 onclick 항목을 찾아 입력 영역을 더블 클릭합니다.
onclick 이벤트는 사용자가 Button 컴포넌트를 클릭했을 때 발생하는 이벤트입니다.
[컴포넌트 id 속성값]_[이벤트명] 형태의 값이 입력되고 화면이 스크립트 모드로 변경됩니다.
4
생성된 스크립트에 다음과 같이 명령을 추가합니다.
사용자가 Button 컴포넌트를 클릭했을 때 onclick 이벤트가 발생하고 아래 funtion(이벤트 핸들러 함수)에 작성된 명령을 실행하게 됩니다.
this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
this.alert("TEST");
};5
넥사크로 스튜디오 상단에 있는 툴바 중에서 돋보기 모양 아이콘(QuickView)을 클릭합니다.
6
웹브라우저에 Button 컴포넌트가 표시되는지 확인합니다.
7
Button 컴포넌트를 클릭하고 메시지가 표시되는지 확인합니다.
사용자가 입력한 내용을 메시지로 표시하기
이번에는 사용자가 Edit 컴포넌트에 입력한 내용을 Button 컴포넌트 클릭 시 메시지로 표시하는 방법을 살펴봅니다.
1
화면에 Edit 컴포넌트와 Button 컴포넌트를 배치합니다.
2
Button 컴포넌트를 선택하고 속성창에서 Event 아이콘을 클릭합니다.
3
Event 목록 중에서 onclick 항목을 찾아 입력 영역을 더블 클릭합니다.
[컴포넌트 id 속성값]_[이벤트명] 형태의 값이 입력되고 화면이 스크립트 모드로 변경됩니다.
4
생성된 스크립트에 다음과 같이 명령을 추가합니다.
Edit 컴포넌트에 입력된 값은 value 속성값으로 저장됩니다. 이 값을 가져와서 Button 컴포넌트 클릭 시 메시지로 표시합니다.
this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
this.alert("Hello, "+this.Edit00.value);
};5
넥사크로 스튜디오 상단에 있는 툴바 중에서 돋보기 모양 아이콘(QuickView)을 클릭합니다.
6
웹브라우저에 Edit 컴포넌트와 Button 컴포넌트가 표시되는지 확인합니다.
7
Edit 컴포넌트의 여러분의 이름을 입력합니다.
8
Button 컴포넌트를 클릭하고 Edit 컴포넌트에 입력한 내용과 함께 메시지가 표시되는지 확인합니다.
더 많은 내용 찾아보기
넥사크로 스튜디오에서는 코드 작성 시 활용할 수 있는 다양한 기능을 지원합니다. 개발도구 가이드에서 다양한 사용 방법을 살펴보세요.
개발도구 가이드
QuickCode를 사용하면 코드 작성 없이 다양한 이벤트를 처리할 수 있습니다. 개발도구 가이드에서 QuickCode에 대해 살펴보세요.
개발도구 가이드