XPLATFORM Engine의 설치가 완료된 후, XPLATFORM Engine은 응용프로그램 수행을 위하여 개발자가 개발한 파일을 차례로 로딩합니다.
작동원리에 배포과정도 포함되지만, 여기서는 배포에 대한 부분은 언급하지 않습니다.
XPLATFORM 응용프로그램 파일들
개발자가 단 하나의 화면만 개발했다 하더라도, 그 화면을 응용프로그램으로 실행하기 위하여 추가적인 파일들을 필요로 합니다. 응용프로그램 실행을 위해 XPLATFORM Runtime이 필요로 하는 파일들은 UX-Studio가 자동으로 관리합니다.
다음은 XPLATFORM Runtime이 응용프로그램 수행을 위하여 필요한 파일들입니다.
XPLATFORM Runtime은 최초에 접근하는 ADL 파일로부터 나머지 파일들의 정보를 얻습니다.
ADL File
ADL파일은 Application Definition Language의 약자로, Application구성에 필요한 모든 요소들을 정의합니다.
ADL파일이 정의하는 주요 요소들은 아래와 같습니다.
요소 | 설명 |
|---|---|
Application Model | - 응용프로그램의 UI기본 틀을 정합니다. - Multi-Frame, Single Frame, Widget의 3가지 모델이 있습니다. - 이 모델들의 구성을 정의합니다. |
기본 화면 배치 | - 응용프로그램 화면의 가장 큰 틀인 MainFrame내에 Form들을 어떻게 배치할 것인지를 정의합니다. |
메뉴 | - 응용프로그램의 메뉴구성을 정의합니다. |
Object 배포 (link) | - 응용프로그램 실행에 필요한 Object들(Dataset, Grid등)을 나열하고 버전 정보를 등록합니다. - 이 정보는 Type Definition 파일에 저장되고, ADL에서는 url 링크 정보만 관리합니다. |
Theme 구성 (link) | - 응용프로그램의 화면에 보여지는 디자인 형식을 정의합니다. - Theme는 Image와 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들을 정의합니다. - 응용프로그램 자체의 Even Function을 구현합니다. |
ADL파일은 UX-Studio에서 자동으로 관리합니다.
UX-Studio상의 Project Explorer창에서 다루는 내용들이 대부분 ADL파일에 저장되는 내용입니다. 다음은 UX-Stuio에서 Project Explorer창의 화면입니다.
아이템 | 설명 |
|---|---|
Project 'developer' | 프로젝트명입니다. 하나의 프로젝트에는 여러 개의 ADL이 등록될 수 있습니다. |
TypeDefinition | Type Definition 정보를 저장합니다. |
GlobalVariables | Global Variable 정보를 저장합니다. |
ADL 'developer' | ADL명 입니다. |
childframe | 화면 배치입니다. ChildFrame 하나만 등록되었으므로 Single Frame 모델입니다. |
ApplicationMenu | 메뉴 구성을 저장합니다. |
Widgets | Widget 구성을 저장합니다. |
Trays | TrayIcon 구성을 저장합니다. |
ScreenInfo | Screen 구성을 저장합니다. (V9.2 추가) |
Themes | Theme 구성을 저장합니다. |
Styles | CSS 구성을 저장합니다. |
Base | Form들을 정의하고 등록합니다. |
Project Explorer에서 정의한 내용들은 하나의 파일에만 저장되는 것이 아니라, 여러 개의 파일로 분리하여 저장됩니다. 그 중에 Root에 해당하는 파일이 ADL파일 입니다.
ADL 파일은 Project Explorer창 외에 Edit창에서 직접 편집이 가능합니다.
메뉴 | 설명 | |
|---|---|---|
1 | Edit Source | ADL에서 마우스 오른쪽 버튼을 클릭한 후, [Edit Source] 메뉴를 클릭하면 ADL 내용을 편집할 수 있습니다. |
2 | Edit Script | ADL에서 마우스 오른쪽 버튼을 클릭한 후, [Edit Script] 메뉴를 클릭하면 ADL의 Global Script를 편집할 수 있습니다. |
다음은 ADL의 내용을 편집하는 화면입니다.
Type Definition File
Type Definition 파일은 XPLATFORM 응용프로그램이 필요로 모듈들의 배포 정보를 갖고 있습니다. 필요 모듈로는 Object들과 응용프로그램들이 있습니다.
Type Definition 파일이 정의하는 주요 요소들은 아래와 같습니다.
요소 | 설명 |
|---|---|
Object배포정보 | - 응용프로그램 수행에 필요한 Object들의 정보를 담고 있습니다. - 여기에 등록된 Object들은 배포의 대상이 됩니다. - XPLATFORM이 제공하는 Object들 외에도 사용자가 개발한 Object들과 Protocol Adaptor도 그 대상이 됩니다. |
Object배포URL | - 배포 대상이 되는 Object들의 URL을 OS별로 지정합니다. |
응용프로그램 배포 URL | - 개발자가 개발한 응용프로그램들의 URL위치 및 Cash의 종류 지정합니다. |
다음은 Type Definition 편집창의 화면입니다.
메뉴 | 설명 | |
|---|---|---|
1 | Objects | Object 배포 정보 |
2 | Services | 애플리케이션 배포 URL |
3 | Update | Object 배포 URL |
Global Variable File
Global Variable 파일은 XPLATFORM 응용프로그램의 여러 화면들이 사용하는 공통 변수들을 등록합니다. 공통 변수로 등록할 수 있는 변수의 종류로는 Variant 변수, Dataset등을 포함한 Object들과 Image가 있습니다.
Global Variable 파일이 정의하는 변수 들은 아래와 같습니다.
요소 | 설명 |
|---|---|
Dataset 변수 | Dataset을 등록하고 element들을 설정합니다. |
Variable 변수 | Variant Type의 변수를 등록합니다. |
Animation 변수 | Animation Object를 등록하고 element들을 설정합니다. |
Object 변수 | Dataset, Animation이외의 invisible Object들을 등록하고, 해당 Object의 element들을 설정합니다. |
Image 변수 | Image들을 등록합니다. |
다음은 Global Variable중 Dataset을 등록하는 화면입니다. Project Explorer 창에서 [Project > GlobalVariable > Insert GlobalVariables Item > Dataset] 메뉴를 선택해 Dataset을 등록합니다.
위의 화면에서 [Project > GlobalVariable > Edit Source]를 선택하여 GlobalVariable을 직접 편집을 할 수도 있습니다.
Theme File / Style File
XPLATFORM에서 Style과 Theme란 화면상에 보이는 UI요소들의 디자인을 정의하는 것을 의미합니다. 버튼을 예로 들면, 투명도, 폰트, 칼라, 그림자, 번짐과 기울임 등의 효과를 버튼 컴포넌트에게 주는 것을 의미합니다.
Theme와 Style의 차이점은 Image의 포함 여부입니다. Theme는 Style에 Image를 추가한 형태입니다. 그러므로 Image를 사용하는 Theme는 Style에 비해 좀 더 다양한 UI 디자인을 할 수 있습니다.
FDL File
FDL 파일은 사용자 화면 Form을 정의합니다. 사용자에게 보여지는 화면 배치뿐만 아니라 UI Logic수행을 위한 Script를 포함한 다양한 정보를 담고 있습니다. FDL파일은 ADL파일과 더불어 XPLATFORM 응용프로그램에서 가장 중요한 파일입니다.
FDL파일이 정의하는 주요 요소는 다음과 같습니다.
요소 | 설명 |
|---|---|
컴포넌트 배치 | - Visible Object인 컴포넌트를 배치하는 정보를 갖고 있습니다. - 컴포넌트의 Property 및 Event를 설정합니다. |
Object의 설정 | - Dataset, Animation등 Invisible Object의 Property 및 Event를 설정합니다. |
Script | - Form을 포함한 모든 Object들의 Event Function을 스크립트로 작성합니다. - Event Function외에도 필요한 Function들을 스크립트로 작성합니다. |
Style | - Form에서 사용하는 Style을 등록합니다. 여기서 사용하는 Style은 ADL에서 등록한 Style보다 우선권을 갖습니다. |
BindItem | - Form, 컴포넌트, Invisible Object들과 Dataset을 연결하는 BindItem Object를 설정합니다. |
파일 로딩 순서
XPLATFORM이 응용프로그램을 실행할 때, 개발자가 개발한 파일들을 차례로 로딩합니다. 개발자는 단 하나의 화면만 개발했다 하더라도, 그 화면을 응용프로그램으로 실행시키기 위하여 UX-Studio는 많은 파일들을 생성합니다. 여기서는 그 파일들을 로딩하는 순서를 설명합니다.
응용 프로그램 로딩 순서
응용 프로그램을 실행하는 주체는 XPLATFORM Runtime입니다. XPLATFORM Runtime은 아래의 순서대로 파일들을 로딩하여 응용프로그램을 실행합니다.
순서 | 로딩 파일 | 설명 |
|---|---|---|
1 | Error File | Error 파일을 로딩하여 이후에 작업에 발생하는 예외상황에 대한 Error 메시지를 준비합니다. 개발자가 별도로 지정하지 않으면, XPLATFORM Engine의 기본 파일을 사용합니다. |
2 | ADL File (xadl file) | 응용프로그램의 기본 구조를 정의한 파일입니다. 이 파일을 먼저 로드 해야만 나머지 로딩파일들의 위치를 알 수 있습니다. |
3 | Type Definition File | 응용프로그램의 환경정보를 갖고 있는 파일입니다. 응용프로그램이 사용하는 Object들의 정보, upgrade정보와 서비스 url정보를 담고 있습니다. |
4 | Global Variable File | 응용프로그램이 사용하는 범용 변수들의 갖고 있습니다. |
5 | Theme File | 응용프로그램이 사용하는 Theme 파일입니다. |
6 | CCS File | Theme외에 개발자가 추가로 등록한 CSS 파일입니다. CSS 파일은 Theme 파일보다 적용 우선순위가 높습니다. |
7 | Script include File | ADL에 등록된 Script에서 다른 Script 파일을 include했을 때, 해당 Script 파일을 의미합니다. |
8 | Form File | ADL의 MainFrame에서 사용하는 Form 파일입니다. 즉, 첫 화면을 보여주기 위한 Form파일입니다. |
Form 로딩 순서
응용 프로그램 로딩의 마지막 단계인 Form 로딩을 다시 세분화하면 다음과 같습니다.
순서 | 로딩 파일 | 설명 |
|---|---|---|
1 | Form File (xfdl file) | 응용프로그램의 실질적인 화면UI인 폼을 정의하는 파일입니다. |
2 | Type Definition File | ADL로딩(응용프로그램의 로딩)시에 사용한 Type Definition파일을 재사용하거나, 별도의 Type Definition 파일을 연결할 수 있습니다. 즉, 특정 Form만의 Type Definition 파일을 연결할 수 있습니다. 일반적으로는 ADL의 Type Definition 파일을 그대로 사용합니다. |
3 | CSS File | Form만의 CSS를 별도로 사용할 때 사용합니다. |
4 | Object연관 File들 | 컴포넌트 또는 Invisible Object에서 필요로 하는 파일 (예 image, subform url, buffer, dataset file정보 등) 들 입니다. |
5 | Script include File | Form에 등록된 스크립트에서 다른 스크립트 파일을 include했을 때, 해당 스크립트 파일을 의미합니다. |
주요 화면 요소
XPLATFORM Runtime은 고객의 화면에 응용프로그램 UI를 출력하기 위하여 개발자가 개발한 파일들을 차례로 로딩합니다.
응용프로그램 모델
XPLATFORM Runtime은 응용프로그램 화면 출력을 위하여 맨 처음으로 응용프로그램의 모델을 결정합니다. 응용프로그램 모델이란 UI화면의 큰 틀을 의미합니다. 과거에는 MDI, SDI와 같은 용어로 큰 틀의 개념을 정의했었습니다. XPLATFORM은 고객의 다양한 요구사항을 수용할 수 있도록 보다 다양한 형태의 모델을 제시합니다.
XPLATFORM은 UI의 큰 틀의 정의를 보다 다양하게 할 수 있도록 Frame, Widget과 Tray의 3가지 기능을 제공합니다.
[Frame 기능]
Frame은 일반 응용프로그램의 메인 화면 역할을 하고, Single Frame과 Multi Frame으로 분류합니다.
Frame은 하위 Frame을 가질 수 있으며, 최하위 Frame을 ChildFrame이라고 하고 최상위 Frame을 MainFrame이라고 합니다.
ChildFrame은 더 이상 하위 Frame을 가질 수 없으며 Form만을 가질 수 있습니다.
[Widget 기능]
Widget은 Frame처럼 여러 개의 Form들을 하나의 큰 틀에 배치하는 것이 아니고, 각각의 화면 Form들을 독립적으로 실행시켜서 그 배치를 사용자가 원하는 위치에 마음대로 배치할 수 있습니다.
Widget은 ChildFrame역할을 하므로 Form을 바로 가질 수 있습니다. 즉, 한 개의 Widget은 한 개의 Form을 갖습니다.
[Tray 기능]
Tray는 Frame, Widget등의 화면들을 제어할 수 있는 TrayIcon을 제공합니다.
이 3가지 모델들을 적절히 조합하여, 화면 UI의 큰 틀을 조합할 수 있습니다. 즉, Frame기능을 사용할 때는 Widget기능을 못 쓰는 것이 아니라 함께 사용할 수 있습니다.
Frame을 이용한 화면배치
XPLATFORM 응용프로그램은 아무리 단순한 화면이라 할지라도 화면출력을 위해 Frame이 있어야만 합니다. 즉, Frame은 Form을 배치하는 판의 역할을 합니다. 그러나, Widget은 자체가 하나의 Frame역할을 하므로 Frame없이 Form을 화면에 출력합니다.
Frame은 크게 MainFrame, Frameset, ChildFrame의 3가지 종류로 나뉘어 집니다.
Frame 종류 | Frame | 설명 |
|---|---|---|
Root Frame | MainFrame | - 최상위 Frame입니다. 즉, Root Frame에 해당합니다. - 하위로 Frameset과 ChildFrame을 가질 수 있습니다. |
Node Frame | Frameset | - 특별한 형태 없이 하위 Frame을 배치합니다. 하위 Frame들이 층계형태로 겹쳐서 배치됩니다. - 하위로 NodeFrame을 가질 수 있습니다. - 하위로 ChildFrame을 가질 수 있습니다. |
VFrameset | - 세로(vertical)형태로 하위 Frame을 배치합니다. - 하위로 NodeFrame을 가질 수 있습니다. - 하위로 ChildFrame을 가질 수 있습니다. | |
HFrameset | - 가로(Horizontal)형태로 하위 Frame을 배치합니다. - 하위로 NodeFrame을 가질 수 있습니다. - 하위로 ChildFrame을 가질 수 있습니다. | |
TileFrameset | - 바둑판 형태로 하위 Frame을 배치합니다. - 하위로 NodeFrame을 가질 수 있습니다. - 하위로 ChildFrame을 가질 수 있습니다. | |
Tab Frame | - Multi Tab의 형태로 Frame을 배치합니다. - 하위로 Tab Frame Page만을 가질 수 있습니다. | |
Terminal Frame | ChildFrame | - 하위로 어떤 Frame도 가질 수 없습니다. - 하위로 하나의 Form만 가질 수 있습니다. |
Tab Frame Page | - 하위로 어떤 Frame도 가질 수 없습니다. - 하위로 하나의 Form만 가질 수 있습니다. |
간략하게 Frame의 관계를 그림으로 표현하면 아래와 같습니다.
UX-Studio상에서는 Project Explorer를 통해 Frame을 편집합니다. [Project > ADL > MainFrame > Edit]메뉴를 선택하고 Frame 편집창을 실행합니다.
생성한 ChildFrame에 Form을 등록합니다. ChildFrame 선택 후 Properties 창에서 formurl 값을 등록합니다.
Form의 구성
Form은 실질적인 화면 UI를 구성하는 대상입니다. 이 Form들이 Frame 위에 올려져서 고객의 화면에 보여집니다.
Form은 Visible영역, Invisible 영역과 Logic영역으로 크게 3개의 영역으로 구성되어 있습니다.
Visible영역은 화면에 보여지는 부분으로 visible Object(이하 컴포넌트)들의 배치로 만들어 집니다.
Invisible영역은 Invisible Object들의 조합으로 만들어집니다.
Logic영역은 Script로 직접 코딩 하는 부분으로 컴포넌트와 Invisible Object들을 제어하는 부분입니다.
서버와의 Data연동
UX-Studio로 개발한 응용프로그램은 Data Server와 연동하면서 Data를 UI화면에 보여줍니다.
XPLATFORM은 Data Server와의 연동을 위하여 X-API를 제공합니다. 이 X-API는 JSP, ASP, Java Servlet등의 다양한 Server 환경에서 사용할 수 있습니다.
X-API와 XPLATFORM Runtime
X-API는 XPLATFORM Runtime이 사용하는 Data Format을 생성해주는 Library입니다. 그러므로 X-API를 사용하지 않아도 Data Format을 준수하는 생성하는 Data Service를 개발한다면, XPLATFORM Runtime이 해당 Service의 Data를 사용할 수 있습니다.