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

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

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

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

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

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

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

ADL File

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

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

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

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

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

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

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

Type Definition File

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

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

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

Global Variable File

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

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

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

다음은 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.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

테마 / 스타일

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

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

FDL 파일

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

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

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

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

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

bootstrap

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

애플리케이션 로딩

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

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

폼 로딩

앞에서 설명한 애플리케이션 로딩 항목에서 '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

주요 화면 요소

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

프레임을 이용한 화면배치

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

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

SDI (Single Document Interface)

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

MDI (Multi Document Interface)

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

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

Form의 구성

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

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

• Visible 영역은 화면에 보이는 부분으로 visible Object(이하 컴포넌트)들의 배치로 만들어집니다.

• Invisible 영역은 Invisible Object들의 조합으로 만들어집니다.

• Logic 영역은 Script로 직접 코딩하는 부분으로 컴포넌트와 Invisible Object들을 제어하는 부분입니다.

서버와의 Data연동

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

X-API

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