2.Hello nexacro platform

Edit

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

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

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

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

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

C:\[Program Files]\nexacro\[Install Version]\nexacrostudio17.exe

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

구성요소

설명

1 프로젝트 탐색기

(Project Explorer)

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

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

2 Form Design

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

3 속성 창

(Properties)

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

4 Output

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

5 Error List

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

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

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

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

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

넥사크로플랫폼 프로젝트를 만들기 위한 메뉴는 아래와 같습니다. 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\nexacro\[Install Version]\projects\

2.3넥사크로플랫폼 앱 만들기

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

2.3.1컴포넌트 배치

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

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

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

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

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

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

수정할 속성명을 알고 있는 경우에는 찾기 원하는 문자열을 1번 창에 입력하면 원하는 항목을 바로 찾을 수 있습니다. 이번 예제에서는 'text'라는 문자열을 입력했습니다.

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

2.3.2Generate

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

[Menu] Generate > Quick View

넥사크로 스튜디오에서 작성된 코드는 바로 실행하지 않고 자바스크립트 코드로 변환(Generate)하는 과정이 필요합니다. Generate는 Form을 생성하거나 수정 후 저장할 때 자동으로 처리됩니다. 아래 메뉴를 사용해 현재 열린 프로젝트를 Generate 할 수 있습니다.

[Menu] Generate > Application

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

[Menu] Tools > Options > Project > Generate > Generate Path

그림 2-1Options[Environment - General]

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

Working Folder

C:\Users\[User]\Documents\nexacro\[Install Version]\projects

Generate Path

C:\Users\[User]\Documents\nexacro\[Install Version]\outputs

Base Lib Path

C:\[Program Files]\nexacro\[Install Version]\nexacro17lib

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

[_resource_/_theme_]
[FrameBase]
[nexacro17lib]
environment_xml.js
Application_Desktop.xadl.js
Application_Desktop.xadl.quickview.js
index.html
launch.html
popup.html
quickView.html
start.json

넥사크로플랫폼 버전에 따라 생성되는 파일명이나 폴더명은 변경될 수 있습니다.

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

2.3.3이벤트 추가

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

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

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

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

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

this.alert("nexacro platform 17");

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

Form_Work.xfdl

<?xml version="1.0" encoding="utf-8"?>
<FDL version="2.1">
  <Form id="Form_Work" width="1280" height="720" titletext="Form_Work">
    <Layouts>
      <Layout width="1280" height="720" screenid="Desktop_screen">
        <Static id="Static00" taborder="0" text="Hello, nexacro platform!" left="51" top="42" width="179" height="68" onclick="Static00_onclick"/>
      </Layout>
    </Layouts>
    <Script type="xscript5.1"><![CDATA[
this.Static00_onclick = function(obj:nexacro.Static,e:nexacro.ClickEventInfo)
{
    this.alert("nexacro platform 17");
};
]]></Script>
  </Form>
</FDL>