3.Hello nexacro platform

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

이번 장에서는 아래와 같은 내용을 다룹니다. 화면에 'Hello, nexacro platform!'이라는 텍스트를 보여주고 텍스트를 클릭했을 때 경고창에 'nexacro platform 14'이라는 텍스트를 보여주는 애플리케이션을 만듭니다.

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

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

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

C:\Program Files\nexacro\14\nexacrostudio14.exe

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

구성요소

설명

1 프로젝트 탐색기

(Project Explorer)

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

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

2 Form Design

넥사크로플랫폼 애플리케이션 화면 디자인, 스크립트 편집 작업을 수행하는 공간입니다.

3 속성 창

(Properties)

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

4 Output

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

3.2넥사크로플랫폼 프로젝트 만들기프로젝트:만들기

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

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

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

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

[Menu] File > New > Project

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

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


설명

설정값

1 Name

프로젝트 이름

Hello

2 Location

프로젝트 파일 저장 위치

D:\XP\PJ\Hello

3

프로젝트 추가 형식

Create a new Project

'Definition'과 'Layout'까지 설정해주어야 하지만 이번 예제에서는 필요없는 항목이기 때문에 프로젝트 이름과 프로젝트 파일 저장 위치만 지정하고 4 Finish 버튼을 클릭합니다.

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

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

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

C:\Users\[User]\Documents\nexacro\

이미 만든 프로젝트가 열린 상태에서 ADL을 추가할 때는 3 'Create a new Project' 항목 대신에 'Add to Current Project' 항목을 선택할 수 있습니다.

3.3넥사크로플랫폼 애플리케이션 만들기

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

3.3.1폼 만들기 마법사폼:만들기

넥사크로플랫폼 폼을 만들기 위한 메뉴는 아래와 같습니다. New Form Wizard가 실행되며 순서에 따라 새로운 폼을 만듭니다.

[Menu] File > New > Form

새로운 폼을 만들기 위해서는 폼 이름과 서비스 그룹을 저장할 위치를 지정해주어야 합니다. 1 'Name' 항목에 만들려는 폼 이름을 지정하고 2 'Location' 항목에 서비스 그룹을 지정합니다. 서비스 그룹은 기본값으로 Base가 생성되어 있습니다.

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


설명

설정값

1 Name

폼 이름

frm_hello

2 Location

서비스 그룹 (기본값은 Base)

Base

폼의 크기를 지정하는 'Dimension'과 멀티 레이아웃을 지정하는 'Layouts'까지 설정해주어야 하지만 이번 예제에서는 필요없는 항목이기 때문에 폼 이름과 서비스 그룹 항목만 지정하고 3 Finish 버튼을 클릭합니다. 폼의 크기는 기본값(1024x768)으로 설정됩니다.

폼의 기본 크기는 옵션에서 지정할 수 있습니다. [Tools > Options > Form Design > General] 항목에서 'Default Width', 'Default Height' 항목을 수정하면 기본 생성되는 폼의 크기를 수정할 수 있습니다.

3.3.2컴포넌트 배치

새로운 폼이 만들어지면 Form Design 창Form Design 창이 활성화되고 폼 디자인에 필요한 툴바가 활성화됩니다. 활성화된 툴바툴바는 텍스트 속성을 지정하는 'TextStyle' 툴바, 컴포넌트 배치 시 사용하는 'Objects' 툴바, 배치된 컴포넌트의 화면 정렬을 도와주는 'Align' 툴바가 화면에 나타납니다.

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

Form Design 창에서 마우스를 클릭하지 않고 마우스 왼쪽 버튼을 누른 상태에서 드래그하면 원하는 크기로 컴포넌트를 배치할 수 있습니다.

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

3.3.3Generate

수정된 넥사크로플랫폼 애플리케이션을 확인하고 싶다면 Quick ViewQuick View를 사용합니다. Quick View를 실행하는 메뉴는 아래와 같습니다.

[Menu] Build > Quick View > Quick View

Quick View를 실행하려고 하면 아래와 같은 메시지가 나타납니다. 넥사크로플랫폼 애플리케이션은 넥사크로 스튜디오에서 작성된 코드는 바로 실행하지 않고 자바스크립트 코드로 변환(GenerateGenerate)하는 과정이 필요합니다. 변환된 코드는 통합 프레임워크 기반으로 어떤 환경에서든지 사용할 수 있습니다.

Generate PathGenerate:Generate Path는 아래 메뉴에서도 등록할 수 있습니다. Generate Path에는 변환된 자바스크립트 파일이 만들어질 폴더를 지정합니다. 지정된 폴더 아래 프로젝트 이름으로 새로운 폴더가 만들어지면서 자바스크립트 파일이 만들어집니다.

[Menu] Tools > Options > Environment > General > Generate Path

그림 3-1Options[Environment - General]

Working Folder, Generate Path, Base Lib Path 기본 설정은 아래와 같습니다.

Working Folder

C:\Users\[user name]\Documents\nexacro\projects

Generate Path

C:\Users\[user name]\Documents\nexacro\outputs

Base Lib Path

C:\Program Files\nexacro\14\nexacro14lib

넥사크로 스튜디오에서 내부적으로 코드 변환 과정을 실행하며 앞에서 지정한 Generate Path에 필요한 자바스크립트 파일을 만듭니다. 해당 폴더에는 아래와 같은 파일이 생성됩니다.

변환된 자바스크립트 파일이 만들어지면서 Quick View가 실행되는 것을 확인할 수 있습니다.

3.3.4이벤트 추가이벤트 추가

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

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

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

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

this.alert("nexacro platform 14");

이번 예제에서 생성된 폼(frm_hello.xfdl)의 전체 소스 코드는 아래와 같습니다. 넥사크로플랫폼 애플리케이션을 개발하는 과정에서 직접 소스 코드를 수정하지는 않지만, 소스 코드를 보면서 어떻게 애플리케이션이 구성되었는지 확인할 수 있습니다.

<?xml version="1.0" encoding="utf-8"?>
<FDL version="1.5">
  <TypeDefinition url="..\default_typedef.xml"/>
  <Form id="frm_hello" classname="frm_hello" left="0" top="0" width="1024" height="768" titletext="New Form">
    <Layouts>
      <Layout>
        <Static id="Static00" text="Hello, nexacro platform!" left="50" top="50" width="160" height="70" onclick="Static00_onclick"/>
      </Layout>
    </Layouts>
    <Script type="xscript5.0"><![CDATA[
this.Static00_onclick = function(obj:Static,  e:nexacro.ClickEventInfo)
{
 this.alert("nexacro platform 14");
}
]]></Script>
  </Form>
</FDL>