Hello Nexacro

넥사크로 개발 환경을 이해하고 넥사크로 스튜디오를 다루는 기본적인 방법을 배우기 위해 간단한 앱을 작성해보겠습니다.

이번 장에서는 다음과 같은 내용을 다룹니다. 화면에 'Hello, Nexacro!'이라는 텍스트를 보여주고 텍스트를 클릭했을 때 경고창에 'Nexacro N'이라는 텍스트를 보여주는 앱을 만듭니다.

넥사크로 스튜디오 실행하기

PC에 설치된 넥사크로 스튜디오를 실행합니다. 설치 과정에서 바탕화면에 아이콘을 생성했다면 해당 아이콘을 더블 클릭해 바로 실행할 수 있습니다.

단축 아이콘을 생성하지 않았다면 넥사크로 스튜디오가 설치된 폴더에서 실행 파일을 더블 클릭해 실행할 수 있습니다. 넥사크로 스튜디오가 설치된 경로는 아래와 같습니다.

C:\[Program Files]\TOBESOFT\Nexacro N\Tools\nexacrostudio.exe

넥사크로 스튜디오 설치 후 최초 실행 시에는 어떤 프로젝트도 열리지 않은 상태입니다. 넥사크로 스튜디오의 화면 구성은 아래와 같습니다.


구성요소

설명

1

프로젝트 탐색기

(Project Explorer)

작업 중인 프로젝트의 구성 요소를 표시합니다.

최초 실행 시에는 아무것도 보이지 않습니다.

2

Form Design

넥사크로 앱 화면 디자인, 스크립트 편집 작업을 수행하는 공간입니다.

3

속성 창

(Properties)

폼, 컴포넌트, Dataset 컴포넌트의 속성을 보여주고 편집할 수 있는 공간입니다.

4

Output

오류 메시지나 Generate 메시지, trace() 메소드로 설정한 메시지를 보여주는 공간입니다.

5

Error List

스크립트 작성 중 오류를 실시간으로 확인하고 표시합니다.

넥사크로 프로젝트 만들기

넥사크로 앱을 만들기 위해서는 프로젝트를 먼저 만들어야 합니다. 모든 넥사크로 앱은 프로젝트에서 지정된 속성을 기반으로 사용자 화면에 보이고 동작하게 됩니다.

프로젝트는 새로 만들거나 이미 만들어진 템플릿 프로젝트를 사용할 수 있습니다. 이번 장에서는 새로운 프로젝트를 만듭니다.

모든 작업은 메뉴 또는 툴바, 단축키로 실행할 수 있습니다. 이번 장에서 컴포넌트 배치를 제외한 모든 작업은 메뉴를 기준으로 설명합니다.

넥사크로 프로젝트를 만들기 위한 메뉴는 아래와 같습니다. New Project Wizard가 실행되며 순서에 따라 새로운 프로젝트를 만듭니다.

[Menu] File > New > Project

새로운 프로젝트를 만들기 위해서는 프로젝트 이름과 프로젝트 파일을 저장할 위치를 지정해주어야 합니다. 1 'Name' 항목에 프로젝트 이름을 지정하고 2 'Location' 항목에 저장할 위치를 지정합니다.

이번 예제에서는 아래와 같이 설정합니다.


설명

설정값

1 Name

프로젝트 이름

Hello

2 Location

프로젝트 파일 저장 위치

[원하는 폴더]\Hello

Screen 항목과 Screen Detail 항목을 설정합니다. 이번 장에서는 기본값을 그대로 사용합니다. Screen 항목은 'Desktop'을 선택하고 자동으로 생성되는 Screen 정보도 그대로 사용합니다.

Frame 항목은 "Full" 옵션을 선택합니다. "Full" 옵션을 선택하면 기본 프레임 구조와 Form을 생성합니다. Screen 관련 설정이나 Frame 설정은 프로젝트 생성 후에 수정할 수 있습니다. [Finish] 버튼을 클릭해 프로젝트를 생성합니다.

프로젝트가 만들어지면서 프로젝트 탐색창에 프로젝트 구성 요소가 표시됩니다. 각 구성 요소에 대한 세부적인 설명은 이번 예제에서 다루지 않고 넥사크로 앱 만들기로 넘어갑니다.

이번 장에서 설명하는 경로는 윈도우 10 운영체제를 기준으로 설명합니다. 운영체제에 따라 설정된 경로가 달라질 수 있습니다.

Location 항목을 따로 지정해주지 않으면 아래 경로로 자동 지정됩니다.

C:\Users\[User]\Documents\TOBESOFT\Nexacro N\projects\

넥사크로 앱 만들기

넥사크로 엡은 폼(Form)을 기반으로 동작합니다. 프로젝트가 앱을 위한 무대를 만든 것이라면 무대를 꾸미고 동선을 배치하고 효과를 추가하는 작업은 폼에서 담당합니다.

컴포넌트 배치

Project Explorer 하단에 생성된 Form_Work 항목을 더블 클릭하면 Form Design 창이 활성화됩니다.

화면에 보이는 툴바는 설정에 따라 달라질 수 있습니다. 화면에 나타나는 툴바는 [View > Toolbars] 메뉴에서 설정할 수 있습니다.

넥사크로 스튜디오 메뉴는 리본 메뉴와 커맨드 메뉴 중 하나를 선택해 사용할 수 있습니다. 이 문서에서는 커맨드 메뉴로 설정된 상태에서 설명합니다.

넥사크로 앱에서 글자를 표기할 때는 Static 컴포넌트를 사용합니다. 'Objects' 툴바에서 Static 컴포넌트 를 마우스로 선택하고 Form Design 창에서 배치하기 원하는 위치를 마우스로 클릭하면 기본값으로 정해진 크기로 Static 컴포넌트가 배치됩니다.

컴포넌트를 Form Design 창에 배치할 때 크기를 조정하고자 한다면 'Objects' 툴바에서 컴포넌트를 마우스로 선택하고 컴포넌트를 그리기 시작할 위치에서 마우스 왼쪽 버튼을 누른 상태에서 마우스를 드래그하면 원하는 크기로 컴포넌트를 배치할 수 있습니다. 컴포넌트를 배치한 이후에도 마우스로 컴포넌트를 선택하고 컴포넌트의 크기를 조정할 수 있습니다.

Static 컴포넌트의 텍스트를 수정할 때는 컴포넌트를 선택한 후 단축키(F2)를 누르면 편집 모드로 전환되며 직접 수정할 수 있습니다. Form Design 창이 아닌 속성 창에서도 해당 속성을 수정할 수 있습니다. Static 컴포넌트를 선택하고 속성 창에서 text 속성 항목을 수정합니다.

수정할 속성명을 알고 있는 경우에는 찾기 원하는 문자열을 검색창에 입력하면 원하는 항목을 바로 찾을 수 있습니다. 이번 예제에서는 'text'라는 문자열을 입력했습니다. 그리고 text 속성값을 "Hello, Nexacro N"으로 수정합니다.

컴포넌트의 텍스트를 Form Design 창에서 직접 수정할 때 컴포넌트를 클릭해서 선택하고 다시 클릭해서 텍스트 편집 상태로 들어갑니다. 클릭 사이의 간격이 짧으면 더블클릭으로 인식되어 onclick 이벤트 스크립트 편집창으로 이동합니다.

디자인 화면에서 Static 컴포넌트를 제외한 영역을 클릭하면 Form이 선택됩니다. 속성창에서 width, height 속성값을 300, 200으로 수정하고 저장합니다.

NRE(Nexacro Runtime Environment)에서 앱 실행하기

작성한 넥사크로 앱을 확인하고 싶다면 Quick View를 사용합니다. Quick View를 실행하는 메뉴는 아래와 같습니다.

[Menu] Generate > Quick View

실행 옵션을 설정할 수 있는 창이 표시됩니다. 기본 설정으로 [Run] 버튼을 클릭합니다.

이벤트 추가

Static 컴포넌트를 더블클릭했을 때 경고창을 보여주는 기능을 추가합니다. 사용자의 특정 행위나 조건에 따라 다른 동작이 발생하는 것을 이벤트라고 합니다.

넥사크로 스튜디오에서 Static 컴포넌트를 선택하고 속성창에서 1[Event] 아이콘 선택 후 onclick 항목 2입력창을 더블클릭합니다.

넥사크로 스튜디오에서 클릭 이벤트를 추가할 때는 Form Design 창에서 해당 컴포넌트를 더블클릭해주면 됩니다. 작업 창에 Form Script 창으로 전환되면서 이벤트를 지정하는 함수가 자동으로 만들어집니다.

this.Static00_onclick = function(obj:nexacro.Static,e:nexacro.ClickEventInfo)
{
	
};

만들어진 함수에는 해당 컴포넌트를 클릭했을 때 실행될 동작을 지정할 수 있습니다. 경고창에 특정 문구를 보여주는 코드를 추가합니다.

this.alert("Nexacro N");

메뉴 [Generate > Quick View]를 선택하고 설정창에서 [Run] 버튼을 클릭해 앱을 실행하고 "Hello, Nexacro N"이라는 텍스트 영역을 클릭하면 아래와 같이 경고창이 표시됩니다.

WRE(Web Runtime Environment)에서 앱 실행하기

메뉴 [Generate > Quick View]를 선택하고 설정창에서 Browser 항목에서 실행할 웹브라우저를 선택합니다.

[Run] 버튼을 클릭하면 선택한 웹브라우저(Chrome)이 실행되고 화면이 표시됩니다.

"Hello, Nexacro N"이라는 텍스트 영역을 클릭하면 아래와 같이 경고창이 표시됩니다.

이번 장에서는 아래와 같은 내용을 살펴보았습니다.