넥사크로 스튜디오

설치하기

넥사크로플랫폼 개발 도구인 넥사크로 스튜디오를 설치합니다. 배포된 설치 파일을 실행하면 특별한 설정 절차 없이 아래 설치를 진행합니다.

설치가 끝나면 바탕화면에 nexacrostudio17 아이콘이 생성됩니다.

넥사크로 스튜디오가 설치된 경로는 아래와 같습니다.

C:\[Program Files]\nexacro\17\nexacrostudio17.exe

실행하기

넥사크로 스튜디오를 실행 하고 개발 환경을 확인 합니다. 
최초 실행시 아래와 같은 설정창이 먼저 오픈 됩니다.

최초 실행시 한번만 오픈되며 이후의 설정은 넥사크로 스튜디오의 옵션 메뉴를 이용 합니다.

[Menu] Tools > Option > Environment > General

넥사크로 스튜디오의 화면 구성은 아래와 같습니다.

Hello World

넥사크로 스튜디오에서 Hello World를 만들어 보면서 개발환경을 이해하고 생성 산출물의 종류와 기능을 이해합니다.

소스참고
nexacro17_Education_Materials\Sample\EduProject\Base\Hello.xfdl

프로젝트 생성

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

아래의 방법으로 프로젝트를 생성합니다.

[Menu] File > New > Project
StartPage > New Button
ShortCut: Ctrl+Shift+N

Project Wizard 창이 실행 되며, 순서에 따라 프로젝트를 생성합니다.

스크린 정보를 설정합니다.
스크린이란 넥사크로 애플리케이션을 데스크탑, 모바일 등의 다른 환경에서 구동 시 필요한 정보 입니다.
Desktop으로 설정하고 애플리케이션의 사이즈를 입력합니다.

애플리케이션 프레임 유형을 지정 합니다.
프레임은 하나의 브라우저에서 화면을 어떻게 분할해서 사용할 것에 대한 정보입니다.

Details Setting 탭에서 프레임의 상세 설정을 할 수 있습니다.

다음과 같이 프로젝트가 생성된 것을 확인 할 수 있습니다.

화면 생성

아래의 메뉴 또는 툴바의 New 아이콘을 클릭하여 Form을 생성합니다.

[Menu]  File > New > Form (.xfdl)
ShortCut: Ctrl+N

생성 되는 컴포넌트 크기와 좌표의 기본 단위를 설정합니다. 크기와 좌표는 픽셀 또는 퍼센트 단위로 설정이 가능 합니다.
기본 값을 유지하고 Finish 버튼을 클릭하여 화면을 생성 합니다.

Project Explorer의 Base안에 Hello 라는 화면이 생성되며, 상단에 화면에서 사용할 수 있는 컴포넌트 툴바가 활성화 됩니다.

컴포넌트 배치 & 스크립트 작성

상단의 컴포넌트 툴바에서 버튼 컴포넌트를 선택하고 화면 원하는 위치에 드로잉하여 컴포넌트를 생성합니다.

컴포넌트의 속성을 변경 합니다.
Properties 창 세번째 아이콘을 선택하시면 컴포넌트에서 사용할 수 있는 속성 목록을 확인 할 수 있습니다.
text 속성을 "Hello World" 로 변경합니다.

컴포넌트에 이벤트 설정을 합니다.
Properties 창 네번째 아이콘을 선택하면 컴포넌트에서 발생 가능한 이벤트 목록을 확인 할 수 있습니다.

버튼을 클릭할 때 발생하는 이벤트가 onclick 이벤트 입니다. 
이벤트 설정은 아래 두가지 방식으로 설정 할 수 있습니다.

기본 함수명으로 설정

onclick 이벤트의 오른쪽 빈 영역을 더블클릭합니다.

"컴포넌트아이디_이벤트명" 형식로 자바스크립트 함수가 생성됩니다.

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

};

사용자 함수명으로 설정

빈 영역을 더블클릭하지 않고 원하는 함수명을 입력 후 엔터 적용하면 입력한 함수명으로 설정 할 수 있습니다.

this.fn_click = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{

};

생성한 함수에 다음과 같이 스크립트를 작성합니다.

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

작성한 화면의 전체 소스는 아래와 같이 xml로 구성 됩니다.

<?xml version="1.0" encoding="utf-8"?>
<FDL version="2.0">
  <Form id="Hello" width="800" height="600" titletext="New Form">
    <Layouts>
      <Layout height="600" mobileorientation="landscape" width="800">
        <Button id="Button00" taborder="0" text="Hello World" left="63" top="47" width="164" height="75" onclick="Button00_onclick"/>
      </Layout>
    </Layouts>
    <Script type="xscript5.1"><![CDATA[
this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.alert("Hello World");
};
]]></Script>
    <Objects/>
  </Form>
</FDL>

실행 확인

Generate

넥사크로플랫폼은 작성된 소스 코드를 바로 실행하지 않고 자바스크립트 코드로 변환(Generate) 하는 과정이 필요합니다. Generate는 Form을 생성, 수정 후 저장하는 시점에 자동으로 처리합니다.

아래 메뉴에서 Generate Path 확인 할 수 있습니다.

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

기본 내문서 위치에 경로가 지정되어 있으며, 로컬 PC설정에 따라 변경하여 사용 합니다.

위에서 생성한 Hello 화면을 아래와 같이 자바스크립트 형식으로 Generate하고, 이 Generate 된 파일을 실행하여 결과를 확인 합니다.

(function()
{
    return function()
    {
        if (!this._is_form)
            return;
        
        var obj = null;
-- 중략 --        
            // UI Components Initialize
            obj = new Button("Button00","63","47","164","75",null,null,null,null,null,null,this);
            obj.set_taborder("0");
            obj.set_text("Hello World");
            this.addChild(obj.name, obj);
-- 중략 --        
        // User Script
        this.registerScript("Hello.xfdl", function() {

        this.Button00_onclick = function(obj,e)
        {
        	this.alert("Hello World");
        };
-- 중략 --        
    };
}
)();

Quick View

Generate 된 파일을 실행하여 결과를 확인 합니다.

아래 메뉴 또는 상단 툴바 Quickview 아이콘을 클릭하여 확인 할 수 있습니다.

[Menu] Generate > Quickview 
ShortCut: Ctrl+F6

실행 환경 창이 오픈이 되며 여러 형태로 결과를 확인 할 수 있습니다.

1 넥사크로 에뮬레이터에서 실행 합니다. 
Desktop 이외의 다른 스크린(모바일 등)에서 실행되는 결과를 확인 할 때 사용합니다.

23 넥사크로 브라우저 32bit, 64bit 에서 실행 합니다.

4 웹 브라우저에서 실행 합니다. 
로컬 PC에 설치 되어있는 웹브라우저 목록이 나타납니다.

넥사크로 웹서버 이용

넥사크로플랫폼에는 웹서버 기능이 포함되어 있습니다. 
넥사크로 내장 웹서버를 이용하여 실행 할 경우 하단의 "Use Local Web Server" 를 체크하고 실행합니다.

일반 웹서버 이용

로컬 PC에 설정한 웹 서버를 이용하여 실행 합니다.

넥사크로 스튜디오의 옵션창에서 Generate Path를 로컬에 설정한 웹서버 디렉토리로 변경 합니다.
예) "C:\Tomcat 8.0\webapps\sampleProject"


변경 후 Generate > Application 메뉴를 이용하여 Generate를 먼저 수행 합니다. 
Quick View 창에서 하단의 체크를 해제 하고 로컬에 설정한 웹 서버 경로를 입력하여 실행합니다.

프로젝트 구성 요소

Environment

Environment는 실행 환경 정보를 가지고 있는 설정 파일로 애플리케이션에서 사용하는 Screen, Variables, Cookies 등을 설정 합니다.

Environment 항목을 더블 클릭 또는 마우스 우클릭 Edit 메뉴를 통하여 편집합니다.

Screen

스크린 정보 입니다.
애플리케이션을 다양한 디바이스에서 동일하게 실행 할 경우 스크린 정보를 추가하여 사용 합니다. 
우측 상단의 + - 버튼을 이용하여 추가, 삭제 합니다.

프로젝트가 실행될 논리적인 스크린 정보를 관리합니다. 애플리케이션을 다양한 디바이스에서 동일하게 실행 할 경우 스크린 정보를 추가하여 사용 합니다.
스크린 기준으로 애플리케이션이 실행 됩니다.
우측 상단의 + - 버튼을 이용하여 추가, 삭제 합니다.

Variables

애플리케이션과 화면에서 공통으로 사용할 변수를 지정합니다.
해당 변수는 브라우저의 로컬 스토리지에 관리됩니다.

스크립트는 아래와 같은 방식으로 사용합니다.

// Variable 값 반환
var sValue = nexacro.getEnvironmentVariable("Env_Var1");

// Variable 추가
nexacro.setEnvironmentVariable("Env_Var1", "nexacro platform");

// Variable 제거
nexacro.removeEnvironmentVariable("Env_Var1");

Cookies

브라우저 쿠키로 처리될 변수를 설정 합니다. 
좌측의 + - 버튼을 이용하여 추가, 삭제 합니다.

스크립트는 아래와 같은 방식으로 사용합니다.

// Cookie 값 반환
var envCookie = nexacro.getCookieVariable("Env_Cookie1");

// Cookie 추가
nexacro.setCookieVariable("Env_Cookie1", "nexacro platform");

// Cookie 제거
nexacro.removeCookieVariable("Env_Cookie1");

웹 브라우저 개발자 도구에서 확인 할 수 있습니다.

HTTP Header

HTTP Header 영역에 포함하여 전송할 변수를 설정 합니다.
좌측의 + - 버튼을 이용하여 추가, 삭제 합니다.

스크립트로 접근은 아래와 같은 방식으로 사용합니다.

// HTTP Header 값 반환
var headerValue = nexacro.getHTTPHeaderVariable("Env_Http1");

// HTTP Header 추가
nexacro.setHTTPHeaderVariable("Env_Http1", "nexacro platform");

// HTTP Header 제거
nexacro.removeHTTPHeaderVariable("Env_Http1");

패킷 분석기를 통해서 확인 할 수 있습니다.

Script

Environment에서 공통으로 정의하는 스크립트 또는, 여러개의 애플리케이션에서 같이 사용 할 스크립트를 작성 합니다.

this.Env_Script = function()
{
	return "Env Script Call";
}

스크립트로 접근은 아래와 같은 방식으로 사용합니다.

// Environment Object를 이용하여 접근
var objEnv = nexacro.getEnvironment();
objEnv.Env_Script();

TypeDefinition

넥사크로플랫폼에서 사용되는 오브젝트와 생성한 물리적인 파일이 존재하는 디렉토리의 경로 등을 관리합니다.

하위 항목을 더블 클릭하여 편집 할 수 있습니다.

Objects

Module 정보와 Module에 정의 되어 있는 오브젝트를 관리 합니다.

Modules

넥사크로 오브젝트를 모듈 단위로 관리 합니다. json 형태로 정의 하여 Module로 등록을 해야 넥사크로 오브젝트로 사용 할 수 있습니다.

1 등록된 모듈의 하위에는 json파일에 정의 되어 있는 Object의 목록이 나타 납니다.

2 오른쪽의 Object 항목에 이미 등록 되어 있는 Object는 체크박스로 표현이 됩니다.
+ 기호를 클릭하여 새로운 Object를 추가 할 수 있습니다.

0. N/A

   호를 클릭하여 Object 항목에 신규로 등록 할 수 있습니다.

Objects

넥사크로플랫폼에서 사용할 오브젝트를 관리 합니다.
앞쪽의 +, - 버튼을 이용하여 오브젝트를 추가, 삭제 합니다.
Image 항목은 컴포넌트 툴바에 표현된 아이콘을 의미하며, Width, Height 항목에서 컴포넌트가 생성될때의 기본 사이즈를 지정 할 수 있습니다.

등록한 오브젝트는 화면 컴포넌트 툴바에 추가되어 표현 됩니다.

Services

애플리케이션을 구성하는 Form, Script, Image 등의 경로를 설정 합니다.

Resource Service

프로젝트에서 고정되어 사용되는 정보로 사용자가 편집 할 수 없습니다.

User Service

화면, 스크립트, 서버 경로 등을 설정하여 사용합니다.
Base 서비스가 기본으로 생성되며, 프로젝트 생성 시 프레임 구조를 선택한 경우 FrameBase라는 서비스에 프레임에 들어갈 Form까지 자동 생성됩니다.

+, - 버튼을 이용하여 서비스를 추가 삭제 합니다.
PrefixID는 스크립트에서 사용할 약어이며, URL은 윈도우에 생성할 물리적인 폴더명 입니다.
지정하는 Type에 따라 서비스에 표시되는 파일 타입이 제한 됩니다.

Protocols

넥사크로플랫폼에서는 기본 HTTP 프로토콜을 사용해 요청과 응답을 처리합니다. 
사용자 환경에 따라 데이터를 암호화하거나 원하는 형식으로 변환해 처리가 필요한 경우 프로토콜 어댑터를 설정 합니다.

App Information

애플리케이션 정보를 관리 합니다.

AppVariables

애플리케이션과 화면에서 공통으로 사용할 변수와 이차원 형태의 데이터를 지정합니다.
여러개의 애플리케이션으로 구성한 경우 애플리케이션별 변수 공유가 불가 합니다.

즉, 데스크탑용과 모바일용 두개의 애플리케이션으로 구성하고 각각 실행한 경우, 데스크탑 애플리케이션에서 AppVariable 변수값을 변경하면 모바일용 애플리케이션에서 변경된 AppVariable 변수값을 참조 할 수 없습니다. 애플리케이션별로 독립적으로 관리합니다.

Dataset

Dataset은 2차원 테이블 형태로 데이터를 관리하는 오브젝트 입니다. 
애플리케이션에서 전역적으로 사용하는 2차원 데이터를 관리 합니다.

1 Dataset Object를 추가, 삭제 합니다.
2 Dataset Object의 컬럼 정보를 추가, 삭제 합니다.
3 Dataset Object 컬럼의 데이터를 추가, 삭제 합니다.

스크립트는 아래와 같은 방식으로 사용합니다.

// Application Object 를 이용하여 접근
var objApp = nexacro.getApplication();
objApp.Dataset0.getRowCount();

Variables

애플리케이션에서 전역적으로 사용하는 변수를 관리 합니다.

스크립트는 아래와 같은 방식으로 사용합니다.

// Application Object 를 이용하여 접근
var objApp = nexacro.getApplication();
objApp.gv_name;

Apps 'App_Desktop'

mainframe

애플리케이션의 메인 화면을 구성하는 요소입니다. 프레임 구조를 이용하여 여러 형태의 메인 화면 구성이 가능합니다.

Trays

애플리케이션의 Tray 영역에 표시되는 아이콘 및 Tooltip 등을 정의 합니다.

Script

하나의 애플리케이션에서 사용할 스크립트를 정의 합니다.

this.app_script = function ()
{
	this.alert("App Script");
};

스크립트는 아래와 같은 방식으로 사용합니다.

// Application Object 를 이용하여 접근
var objApp = nexacro.getApplication();
objApp.app_script();

프로젝트 생성 산출물

실습을 통해 생성된 프로젝트와 화면 관련 파일은 다음과 같습니다.