3.넥사크로플랫폼 애플리케이션 구조

넥사크로 스튜디오에서 애플리케이션을 개발할 때는 XML 기반의 넥사크로플랫폼 프로그래밍 언어와 자바스크립트를 사용하며 애플리케이션을 테스트하거나 배포할 때는 자바스크립트로 변환된 파일이 배포됩니다. 이렇게 배포된 애플리케이션은 넥사크로플랫폼 통합 프레임워크를 기반으로 만들어지고 동작합니다.

이번 장에서는 넥사크로플랫폼 개발 시 사용되는 파일과 동작 방식에 대해 설명합니다. 작동원리에 배포과정도 포함되지만, 여기서는 배포에 대한 부분은 언급하지 않습니다. 배포에 대한 설명은 별도로 배포되는 관리자 가이드 문서를 참조하세요.

3.1넥사크로플랫폼 애플리케이션 파일

넥사크로플랫폼 애플리케이션 개발 시 사용하는 파일은 넥사크로 스튜디오에서 사용되는 파일과 변환 이후 사용하는 파일로 구분할 수 있습니다. 모바일 앱 형태로 배포하거나 외부 라이브러리를 사용하는 경우에는 추가적인 파일이 필요로 할 수 있지만, 여기에서는 기본 프로젝트를 기준으로 설명합니다.

아래 표에서는 넥사크로 스튜디오에서 작성된 파일이 어떤 식으로 변환되어 배포되는지를 보여줍니다.

넥사크로 스튜디오

변환된 파일

비고

A.xprj

넥사크로 스튜디오에서 개발 시에만 참조

A.xadl

A.xadl.js

Build > Generate Application 메뉴에서 변환

default_typedef.xml

A.xadl.js 내 loadTypedefition 함수에서 처리

globalvars.xml

A.xadl.js 내 on_loadGlobalVariables 함수에서 처리

Form_A.xfdl

./Base/Form_A.xfdl.js

Build > Generate File 메뉴에서 개별 변환 가능

default.xtheme

./_theme_/default/theme.css.js

넥사크로플랫폼 애플리케이션이 실행 시에는 최초 호출되는 HTML 문서에서 변환된 A.xadl.js 파일을 호출하고 해당 파일에 설정된 로딩 과정을 거쳐 나머지 파일들의 정보를 얻습니다.

변환된 파일에 대한 상세한 설명은 다루지 않으며 여기에서는 넥사크로 스튜디오에서 넥사크로플랫폼 애플리케이션 작성 시 사용되는 파일에 대해 다룹니다.

3.1.1ADLADL(Application Definition Language) File

ADL 파일은 Application Definition Language의 약자로, Application구성에 필요한 모든 요소를 정의합니다.

ADL 파일이 정의하는 주요 요소들은 아래와 같습니다.

요소

설명

Object 배포

(link)

- 애플리케이션 실행에 필요한 오브젝트들(Dataset, Grid등)을 나열하고 버전 정보를 등록합니다.

- 이 정보는 Type Definition 파일에 저장되고, ADL에서는 url 링크 정보만 관리합니다.

Theme 구성

(link)

- 애플리케이션 화면에 보이는 디자인 형식을 정의합니다.

- Theme는 이미지파일과 CSS의 조합으로 구성됩니다.

- 이 정보는 Theme 파일에 저장되고, ADL에서는 url 링크 정보만 관리합니다.

CSS

(link)

- 애플리케이션의 CSS를 정의합니다.

- Theme에 등록한 CSS외에 추가로 CSS를 등록할 때 사용합니다.

- 이 정보는 CSS 파일에 저장되고, ADL에서는 url 링크 정보만 관리합니다.

Global Variable

(link)

- 애플리케이션 내의 여러 화면이 사용하는 공통 변수들을 등록합니다.

- 공통 변수의 종류는 variant변수, Dataset 등을 포함한 Object들과 Image가 있습니다.

- 이 정보는 Global Variable 파일에 저장되고, ADL에서는 url 링크 정보만 관리합니다.

Global Script

- 애플리케이션이 사용하는 공통 Function들을 정의합니다.

- 애플리케이션 자체의 Event Function을 구현합니다.

ADL파일은 넥사크로 스튜디오에서 자동으로 관리합니다.

넥사크로 스튜디오상의 프로젝트 탐색 창에서 다루는 내용들이 대부분 ADL 파일에 저장되는 내용입니다. 다음은 넥사크로 스튜디오에서 프로젝트 탐색 창의 화면입니다.


설명

1

프로젝트명입니다. 하나의 프로젝트에는 여러 개의 ADL이 등록될 수 있습니다

2

Type Definition정보를 저장합니다.

3

Global Variable정보를 저장합니다.

4

ADL명 입니다.

5

화면배치입니다. ChildFrame하나만 등록되었으므로 단일 프레임 모델입니다.

6

Screen 구성을 저장합니다.

7

CSS 구성을 저장합니다.

8

테마 구성을 저장합니다.

9

Form들을 정의하고 등록합니다.

Project Explorer에서 정의한 내용은 하나의 파일에만 저장되는 것이 아니라, 여러 개의 파일로 분리하여 저장됩니다. 그 중에 Root에 해당하는 파일이 ADL 파일 입니다.

ADL 파일은 프로젝트 탐색 창 외에 소스나 스크립트로 직접 편집이 가능합니다.


설명

1

ADL에서 마우스 오른 버튼을 클릭한 후, “Edit Source”를 클릭하면 ADL의 내용을 편집할 수 있습니다.

2

ADL에서 마우스 오른 버튼을 클릭한 후, “Edit Script”를 클릭하면 ADL의 Global Script를 편집할 수 있습니다.

다음은 ADL의 내용을 편집하는 화면입니다.

3.1.2Type DefinitionType Definition File

Type Definition 파일은 넥사크로플랫폼 애플리케이션이 필요로 하는 파일에 관련된 정보를 갖고 있습니다. 넥사크로플랫폼에서 사용하는 컴포넌트는 자바스크립트를 기반으로 만들어졌습니다. 로직이 구현된 자바스크립트 파일을 모듈이라고 하고 이 중에서 애플리케이션 개발에 사용할 오브젝트를 개발 시 선택할 수 있습니다. 그 외 애플리케이션 개발 시 서비스 그룹을 정의하고 배포와 관련된 옵션을 설정합니다.

다음은 Type Definition 편집 창의 화면입니다.

Type Definition 파일이 정의하는 주요 요소들은 아래와 같습니다.


요소

설명

1

모듈 정보

자바스크립트로 개발된 모듈 정보를 담고 있습니다.

- 자체 개발된 모듈을 추가할 수 있습니다.

- js 또는 json 파일 형태로 등록할 수 있습니다. 각 파일간에 의존성을 가지는 경우에는 순서에 맞게 등록해야 합니다.

2

오브젝트 정보

애플리케이션 실행에 필요한 오브젝트 정보를 담고 있습니다.

- 지정된 오브젝트가 배포에 포함됩니다.

- 각 오브젝트는 모듈을 기반으로 지정됩니다.

3

서비스 그룹

프로젝트 규모에 따라 내부적으로 서비스 그룹을 정의합니다.

- 각 서비스 그룹은 개별적으로 캐시 수준을 설정할 수 있습니다.

4

배포 옵션

애플리케이션의 배포 관련 정보(런타임 버전)를 지정합니다.

3.1.3Global VariableGlobal Variable File

Global Variable 파일은 넥사크로플랫폼 애플리케이션의 여러 화면들이 사용하는 공통 변수들을 등록합니다.

공통 변수로 등록할 수 있는 변수의 종류로는 Variant 변수, Dataset 등을 포함한 Object들과 Image가 있습니다.

Global Variable 파일이 정의하는 변수는 아래와 같습니다.

요소

설명

Dataset 변수

- Dataset을 등록하고 element들을 설정합니다.

Variable 변수

- Variant Type의 변수를 등록합니다.

Image 변수

- 공통으로 사용될 이미지를 등록합니다.

다음은 Global Variable중 Dataset을 등록하는 화면입니다.

Project > GlobalVariable > Insert GlobalVariables Item > Dataset

Global Variable 파일을 일괄적으로 편집하고자 할 때에는 아래 메뉴에서 소스를 열어 편집할 수 있습니다.

Project > GlobalVariable > Edit Source

아래 그림과 같이 추가된 Global Variable를 스크립트에서 접근해 사용할 수 있습니다.

// Variable
var test = application.all["var_sample"];
var test = application.var_sample;

// Dataset
var objDs = application.all["dsSample"];
objDs.setColumn(1,"cust_zip","078543"); 
application.dsSample.setColumn(1,"cust_zip","078543");

application 오브젝트의 스코프에 직접 변수를 선언한 경우에는 all 속성을 통해 접근할 수 없습니다. 스크립트에서 추가한 변수를 all 속성을 통해 접근하려면 setVariable 메소드를 사용해야 합니다.

application.aaa = "TEST";
trace(application.aaa); // TEST
trace(application.all["aaa"]); // undefined

// setVariable
application.setVariable("aaa", "TEST");
trace(application.aaa); // TEST
trace(application.all["aaa"]); // TEST

3.1.4테마 / 스타일

넥사크로플랫폼에서 스타일과 테마란 화면 상에 보이는 UI 요소들의 디자인을 정의하는 것을 의미합니다. 버튼을 예로 들면, 투명도, 폰트, 색상, 그림자, 번짐과 기울임 등의 효과를 버튼 컴포넌트에게 주는 것을 의미합니다.

테마와 스타일의 차이점은 이미지 파일의 포함 여부입니다. 테마는 스타일에 이미지를 추가한 형태입니다. 그러므로 이미지를 사용하는 테마는 스타일과 비교하면 좀 더 다양한 UI 디자인을 할 수 있습니다.

3.1.5FDL 파일

FDL 파일은 사용자 화면 Form을 정의합니다. 사용자에게 보이는 화면 배치뿐만 아니라 UI 로직 수행을 위한 스크립트를 포함한 다양한 정보를 담고 있습니다.

FDL 파일은 ADL 파일과 더불어 넥사크로플랫폼 애플리케이션에서 가장 중요한 파일입니다.

FDL 파일이 정의하는 주요 요소는 다음과 같습니다.

요소

설명

컴포넌트 배치

- Visible Object인 컴포넌트를 배치하는 정보를 갖고 있습니다.

- 컴포넌트의 속성 및 이벤트를 설정합니다.

오브젝트 설정

- Dataset 등 Invisible Object의 Property 및 Event를 설정합니다.

Script

- Form을 포함한 모든 오브젝트의 Event Function을 스크립트로 작성합니다.

- Event Function외에도 필요한 Function들을 스크립트로 작성합니다.

Style

- Form에서 사용하는 Style을 등록합니다. 여기서 사용하는 Style은 ADL에서 등록한 Style보다 우선권을 갖습니다.

BindItem

- Form, 컴포넌트, Invisible Object들과 Dataset을 연결하는 BindItem Object를 설정합니다.

3.2애플리케이션 구동 시나리오

넥사크로플랫폼 애플리케이션이 실행되는 과정은 아래와 같습니다.

3.2.1bootstrap

애플리케이션을 로딩하기 위해 관련 정보를 확인하고 필요한 자원을 가져오는 과정을 설명합니다. 이 과정을 부트스트랩이라고 표현합니다.


HTML5

Runtime

1

index.html

start.json

start_android.json

start_ios.json

2

get bootstrap info

3


update engine

4

update resource (data)

5

load framework files

6

load component modules

7

load application

일반적으로 부트스트랩은 컴퓨터가 외부 입력 없이 스스로 시작할 준비를 하는 과정을 의미합니다. 주로 메모리에 담긴 정보를 기반으로 동작하며 부팅(booting)이라고 표현하기도 합니다.

https://en.wikipedia.org/wiki/Bootstrapping

넥사크로플랫폼 애플리케이션 실행과정에서 사용하는 부트스트랩이라는 용어는 애플리케이션을 시작할 준비를 하는 과정이라는 표현을 담고 있습니다.

3.2.2애플리케이션 로딩

애플리케이션이 실행되기 위해 애플리케이션과 연결된 폼을 로딩하는 과정은 아래와 같습니다.

  1. ADL 로딩

  2. ADL 실행

  3. TypeDefinition 구문 분석(parsing)

  4. 서비스 등록

  5. 클래스 목록 저장

  6. 서브파일 다운로드 및 실행

  7. Application 초기화

  8. 기본 클래스 등록

  9. Application 속성 설정

  10. Mainframe 생성 및 초기화

  11. MainFrame 내 Frame 생성

  12. Form 로딩

  13. Application, MainFrame, Frame 이벤트핸들러 등록

  14. 이벤트 발생: Application.onloadtypedefinition

  15. GlobalVariables 생성

  16. 이벤트 발생: Application.onloadingglobalvariables

  17. 메소드 호출: MainFrame.createComponent

  18. 메소드 호출: MainFrame.on_created

  19. 이벤트 발생: Application.onload

  20. 이벤트 발생: Form.onload

서브파일은 include 방식으로 연결되는 스크립트 파일 등을 의미합니다.

로딩 순서에 따라 아직 생성되지 않는 항목은 사용할 수 없습니다.

예를 들어 onloadtypedefinition 이벤트 함수 내에서 GlobalVariables에 접근하게 되면 undefined로 표시됩니다.


this.application_onloadtypedefinition = function(obj:Application, e:nexacro.LoadEventInfo)

{

trace(application.all['Variable0']); //undefined

}

3.2.3폼 로딩

앞에서 설명한 애플리케이션 로딩 항목에서 'Form 로딩'부터 'Form.onload 이벤트 발생' 사이의 과정을 좀 더 상세히 살펴보면 아래와 같습니다.

  1. Form 로딩

  2. Form 실행

  3. 서브파일 다운로드 및 실행

  4. Form 초기화

  5. Form Style 속성 설정

  6. Form 속성 설정

  7. 오브젝트, 컴포넌트, 바인드아이템(BindItem) 생성

  8. 엔진 내부에서 처리하는 스크립트 수행

  9. 이벤트핸들러 등록

  10. 오브젝트, 컴포넌트 메소드 호출: Object.createComponent

  11. 이벤트 발생: Form.oninit

  12. 메소드 호출: Form.on_created

  13. 오브젝트, 컴포넌트 메소드 호출: Object.on_created

  14. 이미지 로딩, transaction 처리

  15. 이벤트 발생: Form.onload

Form에 포함된 Object, Component는 지정된 Z-Order 순서대로 생성합니다.

div, tab 컴포넌트는 url 속성으로 연결된 Form을 가져오는 네트워크 속도에 따라 로딩이 끝나는 시점이 달라질 수 있습니다.

3.3주요 화면 요소

넥사크로플랫폼 애플리케이션은 사용자가 조작할 수 있는 애플리케이션 UI를 보여주기 위해 여러 가지 요소를 포함하고 있습니다. 기본적인 화면 요소는 아래와 같습니다.

3.3.1프레임을 이용한 화면배치

넥사크로플랫폼 애플리케이션은 화면 처리를 위한 기본 프레임 구조를 제공합니다. 최상위 MainFrame 아래에 ChildFrame을 가지고 그 아래에 화면을 배치합니다. 프레임은 Form을 보여주기 위한 무대장치라고 할 수 있습니다. 각 화면을 이루는 Form이 따로 떨어져 있지만 같은 무대 위에서 보여주기 때문에 공통으로 사용할 수 있는 요소를 배치해 화면 간 다양한 요소를 공유할 수 있습니다.

기본 제공되는 프레임은 MainFrame, ChildFrame으로 나뉘어 지며 화면 레이아웃에 따라 FrameSet, VFrameSet, HFrameSet, TileFrameSet을 추가할 수 있습니다.

프레임 종류

Frame

설명

Root Frame

MainFrame

- 최상위 프레임입니다. 즉, Root Frame에 해당합니다.

- 하위로 Node Frame 또는 ChildFrame을 가질 수 있습니다.

- 하위에 ChildFrame을 가진 경우에는 프레임을 추가할 수 없습니다.

Terminal

Frame

ChildFrame

- 하위로 어떤 프레임도 가질 수 없습니다.

- 하위로 하나의 폼만 가질 수 있습니다.

Node Frame

FrameSet

- 특별한 형태 없이 하위 프레임을 배치합니다.

- 2개 이상의 하위 프레임이 추가되면 계단식으로 배치하며 위치 속성값을 지정하면 해당 위치에 배치합니다.

- 하위로 Node Frame 또는 ChildFrame을 가질 수 있습니다.

VFrameSet

- 세로 형태로 하위 프레임을 배치합니다.

- separatesize 속성으로 하위 프레임 배치 비율을 지정합니다.

- 하위로 Node Frame 또는 ChildFrame을 가질 수 있습니다.

HFrameSet

- 가로 형태로 하위 프레임을 배치합니다.

- separatesize 속성으로 하위 프레임 배치 비율을 지정합니다.

- 하위로 Node Frame 또는 ChildFrame을 가질 수 있습니다.

TileFrameSet

- 바둑판 형태로 하위 프레임을 배치합니다.

- separatetype, separatecount 속성으로 가로, 세로 방향에 배치될 하위 프레임을 지정합니다.

- 하위로 Node Frame 또는 ChildFrame을 가질 수 있습니다.

SDI (Single Document Interface)

프로젝트 생성 시 Default 템플릿을 선택하고 다른 추가적인 작업을 하지 않았다면 하나의 프레임만으로 프로젝트가 구성됩니다.

MDI (Multi Document Interface)

상단 메뉴, 하위 메뉴, 콘텐츠, 툴바 형식으로 화면을 구성하는 경우에는 전체적인 레이아웃 구조를 원하는 형식에 맞게 구성해야 합니다. 넥사크로플랫폼에서 MDI 구성은 Default 템플릿 선택 후 필요한 프레임을 추가하거나 HFrame, VFrame 템플릿 또는 사용자가 지정한 프로젝트 템플릿을 선택해 만들 수 있습니다.

프레임 추가는 프로젝트 탐색기에서 MainFrame 또는 Node Frame 선택 후 컨텍스트 메뉴에서 [Insert Frame] 항목을 선택하거나 MainFrame 또는 Node Frame 항목을 더블 클릭 후 나타나는 편집화면 컨텍스트 메뉴에서 [Add] 항목을 선택해 추가할 수 있습니다.

3.3.2Form의 구성

Form은 실질적인 화면 UI를 구성하는 요소입니다. 프레임 위에 Form이 올려져서 사용자가 조작할 수 있는 화면으로 보입니다.

Form은 Visible 영역, Invisible 영역과 Logic 영역으로 크게 3개의 영역으로 구성되어 있습니다.

3.4서버와의 Data연동

넥사크로플랫폼 애플리케이션은 기업 내에서 사용하는 데이터를 사용자가 쉽게 조작할 수 있도록 화면 상에 표현해주는 역할을 담당하기도 합니다. 이런 상황에서 데이터를 관리하는 서버와 애플리케이션 간 연동하는 작업을 필요로 합니다.

3.4.1X-APIX-API

X-API는 넥사크로플랫폼 애플리케이션과 연동할 수 있는 데이터 형식을 생성해주는 라이브러리입니다. X-API를 사용하지 않아도 정해진 명세에 따라 Data Service를 개발한다면 넥사크로플랫폼 애플리케이션과 해당 서비스 데이터와 연동할 수 있습니다.

X-API는 Java 개발 환경을 기반으로 제공됩니다. 상세한 문서는 X-API 라이브러리에 포함된 문서를 확인하세요.