2.개발환경 설정 & Hello World

Edit

2.1넥사크로 스튜디오

2.1.1설치하기

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

그림 2-1설치1

그림 2-2설치3

그림 2-3설치4

그림 2-4설치5

그림 2-5설치6

그림 2-6설치7

그림 2-7설치8

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

그림 2-8바탕화면아이콘

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

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

2.1.2실행하기

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

1 Perspective

Developer

Project Explorer 창을 앞에 표현

Designer

Resource Explorer 창을 앞에 표현

2 Command Type

Default

메뉴를 CommandBar 타입으로 실행

Ribbon

메뉴를 Ribbon 타입으로 실행

3 Nexacro Studio Theme

Black

Black 테마로 실행

White

White 테마로 실행

최초 실행시 한번만 오픈되며 이후의 설정은 넥사크로 스튜디오의 옵션 메뉴를 이용 합니다.
[Menu] Tools > Option > Environment > General
넥사크로 스튜디오의 화면 구성은 아래와 같습니다.

구성요소

설명

1 Project Explorer

프로젝트 탐색 창입니다.

프로젝트에 포함된 모든 항목과 산출물을 트리 형태로 확인 할 수 있습니다

2 Start Page

Start Page 입니다.

프로젝트를 생성 또는 오픈 할 수 있으며, 새로운 기능, 매뉴얼, 팁 동영상 링크를 제공 합니다.

3 Properties

속성, 이벤트 설정 창입니다.

화면이나 컴포넌트에 대한 속성, 이벤트, 데이터 바인드 정보를 나타냅니다.

4 Output

메시지, 로그 창입니다.

넥사크로 스튜디오로 작업하는 중에 발생하는 각종 메시지와 로그를 표시합니다.

2.2Hello World

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

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

그림 2-9Hello! XPLATFORM

2.2.1프로젝트 생성

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

아래의 방법으로 프로젝트를 생성합니다.
[Menu] File > New > Project
StartPage > New Button
ShortCut: Ctrl+Shift+N
Project Wizard 창이 실행 되며, 순서에 따라 프로젝트를 생성합니다.

그림 2-10프로젝트만들기2


설명

설정값

1 Project Name

프로젝트 명을 지정합니다.

sampleProject

2 Location

프로젝트 파일 저장 위치를 지정합니다.

C:\sampleProject

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

그림 2-11프로젝트만들기5

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

그림 2-12프로젝트만들기5

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

그림 2-13프로젝트만들기5

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

그림 2-14프로젝트만들기6

2.2.2화면 생성

아래의 메뉴 또는 툴바의 New 아이콘을 클릭하여 Form을 생성합니다.
[Menu]  File > New > Form (.xfdl)
ShortCut: Ctrl+N

그림 2-15화면만들기1

넥사크로플랫폼에서는 실행되는 화면을 폼(Form)이라고 부르며 폼(Form)은 xfdl 확장자로 생성되는 XML 파일 입니다.

그림 2-16화면만들기2


설명

설정값

Name

화면 이름을 지정합니다.

Hello

Location

화면 파일 저장 위치를 지정합니다.

Base

width

화면의 크기를 지정합니다.

800

height

600

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

그림 2-17화면만들기3

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

그림 2-18화면만들기5

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

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

그림 2-19Hello1

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

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

버튼을 클릭할 때 발생하는 이벤트가 onclick 이벤트 입니다. 
이벤트 설정은 아래 두가지 방식으로 설정 할 수 있습니다.
기본 함수명으로 설정
onclick 이벤트의 오른쪽 빈 영역을 더블클릭합니다.

그림 2-20화면만들기6

"컴포넌트아이디_이벤트명" 형식로 자바스크립트 함수가 생성됩니다.
this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{

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

그림 2-21화면만들기6

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>

2.2.4실행 확인

Generate

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

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

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

그림 2-22화면만들기8

기본 내문서 위치에 경로가 지정되어 있으며, 로컬 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

그림 2-23화면만들기8

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

그림 2-24화면만들기8

1 넥사크로 에뮬레이터에서 실행 합니다. 
Desktop 이외의 다른 스크린(모바일 등)에서 실행되는 결과를 확인 할 때 사용합니다.
23 넥사크로 브라우저 32bit, 64bit 에서 실행 합니다.
4 웹 브라우저에서 실행 합니다. 
로컬 PC에 설치 되어있는 웹브라우저 목록이 나타납니다.

그림 2-25화면만들기9

넥사크로 웹서버 이용

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

그림 2-26화면만들기9

일반 웹서버 이용

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

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


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

그림 2-27화면만들기9

그림 2-28넥사크로 에뮬레이터 실행

그림 2-29넥사크로 브라우저 실행

그림 2-30웹 브라우저(크롬) 실행

Quick View 창에 Nexacro Browser와 Nexacro Emulator만 나오는 경우가 있습니다. 이는 라이선스를 갱신하지 않아서 발생되는 현상으로 라이선스를 갱신하시면 웹 브라우저 목록을 확인 할 수 있습니다.

라이선스는 고객지원센터에서 발급 가능하며

[Menu] > Help > About nexaro studio 에서 Enter New Licence 에서 갱신 할 수 있습니다.

2.3프로젝트 구성 요소

2.3.1Environment

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

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

그림 2-31프로젝트&파일

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();

2.3.2TypeDefinition

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

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

그림 2-32프로젝트&파일

Objects

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

Modules

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

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

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

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

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

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

    Services

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

    Resource Service

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

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

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

    Type

    파일 확장자

    none

    nothing

    form

    xfdl / xjs / js

    js

    js / xjs

    file

    all

    JSP, ASP, SAP

    nothing

    각각의 Service는 type별로 허용되는 확장자만 관리하므로 그 이외의 파일들은 Project Exploer에서 표시하지 않습니다.

    Protocols

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

    2.3.3App Information

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

    그림 2-33프로젝트&파일

    AppVariables

    애플리케이션과 화면에서 공통으로 사용할 변수와 이차원 형태의 데이터를 지정합니다.
    여러개의 애플리케이션으로 구성한 경우 애플리케이션별 변수 공유가 불가 합니다.
    
    즉, 데스크탑용과 모바일용 두개의 애플리케이션으로 구성하고 각각 실행한 경우, 데스크탑 애플리케이션에서 AppVariable 변수값을 변경하면 모바일용 애플리케이션에서 변경된 AppVariable 변수값을 참조 할 수 없습니다. 애플리케이션별로 독립적으로 관리합니다.
    Dataset
    Dataset은 2차원 테이블 형태로 데이터를 관리하는 오브젝트 입니다. 
    애플리케이션에서 전역적으로 사용하는 2차원 데이터를 관리 합니다.

    그림 2-34프로젝트&파일

    1 Dataset Object를 추가, 삭제 합니다.
    2 Dataset Object의 컬럼 정보를 추가, 삭제 합니다.
    3 Dataset Object 컬럼의 데이터를 추가, 삭제 합니다.
    스크립트는 아래와 같은 방식으로 사용합니다.
    // Application Object 를 이용하여 접근
    var objApp = nexacro.getApplication();
    objApp.Dataset0.getRowCount();
    Variables

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

    그림 2-35프로젝트&파일

    스크립트는 아래와 같은 방식으로 사용합니다.
    // 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();

    Apps의 Script를 호출하여 테스트 할 경우 Launch Project로 실행하여야 합니다.

    단일 화면을 실행하는 Quick View로 테스트 할 경우 동작 되지 않습니다.

    2.3.4프로젝트 생성 산출물

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

    그림 2-36프로젝트&파일

    _resource_

    애플리케이션에서 고정으로 사용하는 Resource 폴더로

    Theme, UserFont 등의 정보를 관리 합니다.

    Base

    애플리케이션에서 생성된 화면, 자바스크립트 라이브러리, 이미지 등의 파일들이

    저장되는 폴더로, 서비스라고 명명합니다.

    기본으로 생성되는 서비스 입니다.

    FrameBase

    프로젝트 생성시 구성한 프레임 안에 들어가는 화면이 생성되는 서비스 입니다.

    Form, Popup

    TypeDefinition > Service 항목에서 추가한 서비스 입니다.

    App_Desktop.xadl

    Project Explorer의 Apps 'App_Desktop' 항목에서 설정한 정보를 갖는 파일입니다.

    appvariables.xml

    Project Explorer의 AppVariables 항목에서 설정한 정보를 갖는 파일입니다.

    environment.xml

    Project Explorer의 Environment 항목에서 설정한 정보를 갖는 파일입니다.

    sampleProject.xprj

    개발시에만 필요한 파일로 넥사크로 스튜디오에서 프로젝트를 관리하는 파일 입니다.

    typedefinition.xml

    Project Explorer의 TypeDefinition 항목에서 설정한 정보를 갖는 파일입니다.

    Base > Hello.xfdl

    애플리케이션에서 생성한 화면 파일로, xfdl 확장자로 생성됩니다.