엑스플랫폼 9.2 / UX-Studio 가이드 - docs.tobesoft.comdocs.tobesoft.com/ux_studio_guide_xplatform_ko.pdf · 차례 3 저작권및면책조항 차례 1. UX-Studio의기초 1.1

엑스플랫폼 9.2 / UX-Studio 가이드

9.2.2.80.1

발행처 | (주)투비소프트

발행일 | 2017/10/30

주소 | (06083) 서울시 강남구 봉은사로 617 인탑스빌딩 2-5층

전화 | 02-2140-7700

홈페이지 | www.tobesoft.com

고객지원센터 | support.tobesoft.co.kr

제품기술문의 | 1588-7895 (오전 10시부터 오후 5시까지)

이 문서에 잘못된 정보가 있을 수 있습니다. 투비소프트는 이 문서가 제공하는 정보의 정확성을 유지하기

위해 노력하고 특별한 언급 없이 이 문서를 지속적으로 변경하고 보완할 것입니다. 그러나 이 문서에 잘못된

정보가 포함되어 있지 않다는 것을 보증하지 않습니다. 이 문서에 기술된 정보로 인해 발생할 수 있는

직접적인 또는 간접적인 손해, 데이터, 프로그램, 기타 무형의 재산에 관한 손실, 사용 이익의 손실 등에

대해 비록 이와 같은 손해 가능성에 대해 사전에 알고 있었다고 해도 손해 배상 등 기타 책임을 지지

않습니다.

사용자는 본 문서를 구입하거나, 전자 문서로 내려 받거나, 사용을 시작함으로써, 여기에 명시된 내용을

이해하며, 이에 동의하는 것으로 간주합니다.

각 회사의 제품명을 포함한 각 상표는 각 개발사의 등록 상표이며 특허법과 저작권법 등에 의해 보호를 받고

있습니다. 따라서 본 문서에 포함된 기타 모든 제품들과 회사 이름은 각각 해당 소유주의 상표로서 참조용

으로만 사용됩니다.

차례

3

저작권 및 면책조항

차례

1. UX-Studio의 기초

1.1 UX-Studio의 소개

1.2 권장사양

1.3 UX-Studio의 설치 및 삭제

1.3.1 설치

1.3.2 UX-Studio의 설치정보

1.3.3 버전 확인

1.3.4 삭제

1.4 도움말 사용

2. UX-Studio의 구성

2.1 Application Frame

2.2 Project Explorer

2.3 Form Design

2.3.1 Design

2.3.2 Source

2.3.3 Script

2.4 Properties

2.4.1 Component List

2.4.2 Toolbar

2.5 Style Property Editor

2.6 Message Window

2.6.1 Output

2.6.2 Debug

2.6.3 Find Results

2.6.4 Global Bookmark

2.7 Debug Window

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

4 | 엑스플랫폼 9.2 / UX-Studio 가이드

2.7.1 Breakpoints

2.7.2 Call Stack

2.7.3 Variables

2.7.4 Watch

3. UX-Studio의 설정

3.1 Options – Environment

3.1.1 General

3.1.2 Startup

3.1.3 Auto Recover

3.1.4 Font and Color

3.1.5 Theme

3.1.6 Show Information

3.1.7 Project Explorer

3.1.8 Script

3.1.9 Launch

3.1.10 Business Service

3.2 Options – Debugging

3.2.1 General

3.3 Options – Form Design

3.3.1 General

3.3.2 Paste Special

3.3.3 Layout Manager(V9.2추가)

3.3.4 Position(V9.2추가)

3.4 Options – Source Control

3.5 Options – HTML5

3.6 Customize

4. Project

4.1 Project 생성 마법사

4.1.1 New Project Wizard 1단계

4.1.2 New Project Wizard 2단계(V9.2변경)

4.1.3 New Project Wizard 3단계(V9.2추가)

4.2 Application Definition Language(ADL)

4.2.1 MainFrame

4.2.2 Application Menu

4.2.3 Widget

4.2.4 Tray

4.2.5 Theme

4.2.6 ScreenInfo(V9.2추가)

4.3 Type Definition의 편집

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

차례 | 5

4.3.1 Edit TypeDefinition

4.3.2 Service Refactoring

4.4 Global Variables

4.4.1 Datasets

4.4.2 Variables

4.4.3 Object

4.4.4 Image

4.5 FDL (Form Definition Language)

4.5.1 FDL 생성 마법사(V9.2변경)

4.5.2 FDL Drag&Drop

4.5.3 FDL 항목

4.6 Widget Application 생성

4.6.1 New Widget Application

4.6.2 Widget 생성

4.6.3 Widget 편집

4.7 공통 코드의 사용

4.7.1 Make a Project Template

4.7.2 Make Form Template

4.7.3 Layout Template(V9.2추가)

4.8 기타 File 생성

4.8.1 Create a new XML file

4.8.2 Create a new Java script file

5. Theme / CSS

5.1 Theme와 CSS

5.2 CSS 파일의 생성

5.3 CSS 파일 편집기

5.4 Theme 생성

5.5 Theme 편집기


5.6.1 Text

5.6.2 Border

5.6.3 Background

5.6.4 Appearance

5.6.5 Effect

5.6.6 Transformation

6. Form Design

6.1 Component 생성

6.2 선택 변경

6.3 크기 변경

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114


6.4 위치 변경

6.5 Guide Line

6.6 Tab Order

6.7 속성 설정

6.8 Bind

6.8.1 Inner Bind Dataset

6.8.2 Bind Item Editor

6.9 Event 작성

6.10 Transform

6.11 Graphic Path Component 사용법

6.11.1 GraphicPath Edit 시작

6.11.2 PathData 추가

6.11.3 PathData 수정

6.11.4 PathData 삭제

6.11.5 GraphicPath Edit 종료

6.12 Style Attribute

6.13 Layout Manager(V9.2추가)

6.13.1 Layout Tab

6.13.2 Design

6.13.3 Properties Windows

6.13.4 Sub Layout

6.14 Step(V9.2추가)

6.15 Position2(V9.2추가)

6.15.1 Tracker

6.15.2 Ruler / Dot Grid

6.15.3 Component Resize Info

6.15.4 Position Editor

6.15.5 Properties Window

7. 공통 Script(.xjs)

8. User Component

8.1 User Component 생성

8.2 User Component 편집

8.3 Function 추가

8.4 Property 추가

8.5 Type Definition 등록

9. Debug

9.1 Debug Start

9.2 Debug Window

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154

차례 | 7

9.2.1 Watch Window

9.2.2 Variables Window

9.2.3 Debug Window

9.2.4 Call Stack Window

9.3 Debug Menu

10. Animation

10.1 Preview

10.2 Composite Animation Properties

10.3 Interpolation Graph(Composite Animation)

10.4 Composite Animation Items

10.5 Common Properties

10.6 Interpolation Graph

10.7 Transition Animation Properties

10.8 Property Animation Properties

10.9 Animation Bind

11. 기타

11.1 Auto Recover

11.2 Use user-defined metadata

11.2.1 메타데이터 파일 작성

11.2.2 서비스 등록

11.2.3 옵션 설정

11.2.4 사용방법

12. 부록

12.1 Project Explorer Icon

12.2 Toolbar 기능

12.2.1 Standard(V9.2변경)

12.2.2 Align

12.2.3 TextStyle

12.2.4 Objects

12.2.5 Debug

12.2.6 HTML5

12.2.7 Bookmark

12.2.8 CSS Selector

12.3 Menu Bar

12.3.1 File

12.3.2 Edit

12.3.3 View

12.3.4 Design

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192


12.3.5 Tools

12.3.6 HTML5

12.3.7 Hybrid

12.3.8 Window

12.3.9 Help

12.3.10 Grid Contents Editor

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197

UX-Studio의 기초

1.

1.1 UX-Studio의 소개

UX-Studio는 Visual Basic, Delphi, PowerBuilder와 유사한 Interface 및 Functionality를 제공하는 XPLATFORM

개발 도구입니다. 개발자는 화면을 디자인하고 Dataset을 설정할 수 있으며, 컴포넌트 이벤트 설정 및 Script를 작성

할 수 있습니다. 또한 작성한 화면을 다양한 Device에 쉽게 적용할 수 있습니다.


1.2 권장사양

UX-Studio를 사용하는데 필요한 시스템 권장사항입니다.

항목 내역

1 CPU Intel® Core™ i3-330M, 2.13GHz 이상

2 운영체제 Windows7 Home Premium (32bit) SP1 이상 지원

3 메모리 4GB DDR3 이상

4 디스크 여유공간 30GB 이상

1.3 UX-Studio의 설치 및 삭제

1.3.1 설치

UX-Studio는 XPLATFORM 설치 패키지에 포함되어 배포 됩니다.

1. 배포된 Setup파일을 실행하면 설치 준비과정이 진행됩니다.

Window Vista 의 경우, 보안경고창이 나타납니다. 반드시 ‘실행’을 선택해 주시기 바랍니다.

UX-Studio의 기초 | 11

2. ‘Next’ 버튼을 클릭하여 프로그램 설치를 진행합니다.

3. UX-Studio의 실행에 필요한 설치 파일을 사용자 컴퓨터에 복사하고 프로그램 실행에 필요한 정보를 등록합니

다.

4. ‘Finish’버튼을 클릭하여 프로그램 설치를 완료합니다.


1.3.2 UX-Studio의 설치정보

[시작 > 프로그램 > TOBESOFT > XPLATFORM > 9.2] 경로에서 UX-Studio 및 설치 패키지에 포함된 툴의 단축 아

이콘을 확인할 수 있습니다. 설치된 각각의 단축 아이콘과 설치 폴더에 포함된 파일은 다음과 같습니다.

● 시작메뉴

● 단축 아이콘

아이콘 메뉴 설명

1 Help XPLATFORM 도움말 아이콘

2 Uninstall Uninstall 단축 아이콘

3 UX-Studio UX-Studio 단축 아이콘

● 설치된 폴더 및 파일


OS 경로

1 VISTA/7 C:\Program Files\TOBESOFT\XPLATFORM\9.2

2 C:\Users\[사용자명]\AppData\Local\TOBESOTF\XPLATFORM\9.2

3 C:\users\[사용자명]\Documents\TOBESOFT\XPLATFORM

4 XP C:\Program Files\TOBESOFT\XPLATFORM\9.2

5 C:\Document and Settings\[사용자명]\Local Settings\

Application Data\TOBESOFT\XPLATFORM\9.2

6 C:\Document and Settings\[사용자명]\Local Settings\Compatible LocalLow\TOBE

SOFT\XPLATFORM\9.2

1.3.3 버전 확인

[시작 > 프로그램 > TOBESOFT > XPLATFORM > 9.2] 경로에서 ‘UX-Studio’를 실행합니다. UX-Studio의 메뉴[Hel

p About – UX-Studio]를 클릭하면 설치된 UX-Studio의 버전을 확인할 수 있습니다.


1.3.4 삭제

[시작 > 프로그램 > TOBESOFT > XPLATFORM > 9.2] 경로에서 ‘UnInstall’을 실행하면 설치된 XPLATFORM Pack

age 및 UX-Studio가 제거됩니다.

1. ‘UnInstall’의 실행

2. ‘예(Y)’ 버튼을 클릭하면 삭제가 시작됩니다.

3. 사용자의 컴퓨터에 설치된 프로그램 및 설치정보를 삭제 후 완료합니다


Window Vista의 경우, 시스템 접근 허용창이 나타납니다. 반드시 ‘허용’을 선택하여 주시기 바랍니다.

1.4 도움말 사용

단축키 <F1>을 누르거나 메뉴[Help – Help]를 선택합니다


● 도움말의 목차구성

도움말 항목 설명

1 Application, Tray, Widget관련 항목의 도움말입니다.

2 Frame Object 항목의 도움말입니다.

3 Script 항목의 도움말입니다.

4 Object 항목의 도움말입니다.

5 Component 항목의 도움말입니다.

6 Plug-in 항목의 도움말입니다.

7 분류 되지 않은 추가 항목들의 도움말입니다.

UX-Studio의 구성

2.

UX-Studio는 Application Frame, Project Explorer, Form Design, Properties 및 Message 창으로 구분됩니다.

구성요소 설명

1 Application Frame Menu Bar, Toolbar, TextStyle Bar, Alignment Bar, Component Bar, Debug Ba

r, Source Control Bar, HTML5 Bar, Bookmark Bar, Statusbar 등을 표시

2 Project Explorer 작업중인 Project 구성 표시

3 Form Design Design, Source, Script 편집

4 Properties Form 및 각종 Component, Dataset등의 속성 및 이벤트 속성

표시, 편집

5 Message Window 각종 메시지 및 찾기 결과 표시


2.1 Application Frame

Application Frame에는 UX-Studio의 Menu와 Toolbar등이 포함되며, 현재 UX-Studio의 상태를 나타내는 Status

bar가 있습니다.

Statusbar에 표시되는 UX-Studio의 상태 값은 아래와 같습니다.

상태 기능

UX-Studio의 상태를 보여주는 Message Bar

선택된 Component의 Form 좌표 (단위:Pixel)

선택된 Component의 크기 (단위:Pixel)

현재 파일의 상태

스크립트 삽입모드 상태

<CAPS LOCK> 설정/해제 상태

<NUM LOCK> 설정/해제 상태

<SCRL LOCK> 설정/해제 상태

2.2 Project Explorer

Project Explorer에서는 Open된 Project에 포함된 모든 항목들을 트리 형태로 표시해주며, Project Explorer의 구

성은 아래와 같습니다.

UX-Studio의 구성 | 19

설명

1 Project에 포함된 항목들 중 검색어로 빠르게 찾을 수 있는 Edit창

2 Edit창에 입력된 값과 일치하는 항목만 표시하는 Filter 기능

3 목록 창에 적용된 Filter를 Clear

4 Filter 기능을 적용할 Service Group

5 편집 동기화 기능

6 TypeDefinition, GlobalVariables, ADL, FDL등의 목록 창

Project Explorer에서 표시되는 항목은 크게 Component, Service, Update의 Prefix를 등록하는 Type Definition,

Project 어디서든 사용 가능한 변수를 등록하는 GlobalVariables, Style이나 Theme, MainFrame, Tray, Widget등

Project의 전반적인 부분을 관리하는 ADL(Application Definition Language), Form 그룹인 Service로 구분되며,

편집 가능한 항목을 더블 클릭하거나 Popup Menu를 이용하여 항목에 맞는 편집기를 호출하여 작업을 할 수 있습니

다.

2.3 Form Design

Form Design창 에서는 Project에서 사용 가능한 컴포넌트로 응용 프로그램의 각 화면을 작성합니다. Form Design

창은 Design창과 Source Editor, Script Editor로 구성됩니다.

2.3.1 Design

개발자가 원하는 곳에 컴포넌트를 배치할 수 있으며 각각의 컴포넌트를 잘라내기, 복사, 붙여 넣기 및 이동하거나 정

렬하여 화면 구성을 합니다. 컴포넌트를 배치하는 Form Canvas영역은 개발자가 임의로 크기를 변경할 수 있습니다.


2.3.2 Source

Source 편집 창에서는 Form의 내용 중 Script영역을 제외한 모든 내용이 XML형태로 표시되며, 표시된 XML을 직접

편집하여 Form의 내용을 변경할 수 있습니다.

2.3.3 Script

Script 편집 창에서는 Form 및 각종 컴포넌트의 Event 처리 함수와 사용자 함수들을 작성합니다.


2.4 Properties

Properties는 편집 중인 Form이나 Component, Dataset등에 대한 속성 및 Event항목의 값을 표시하고 편집할 수

있습니다.


2.4.1 Component List

편집 중인 Form이 지닌 모든 Component, Dataset, Animation Effect등을 Component ID (Type) 형태로 List에

보여줍니다.

2.4.2 Toolbar


1. Group Sort/Alphabet Sort

선택된 Object의 Attribute나 Event를 그룹별로 정렬하여 편집하는 Group Sort 화면입니다. 그룹별로 편집할 때는

그림과 같이 ‘+’나 ‘-‘를 마우스로 클릭하여 항목을 펼치거나 접을 수 있습니다.

선택된 Object의 Attribute나 Event를 이름순으로 정렬하여 편집하는 Alphabet Sort화면입니다.

2. Attribute/Event List

선택된 Object의 Attribute를 편집하는 Attribute 화면입니다.


선택된 Object의 Event를 편집하는 Event 화면입니다

3. Property Bind

선택된 Object의 Property에 Dataset을 Bind하는 화면입니다.

4. Pseudo List

선택된 Object가 컴포넌트일 경우에만 활성화되며, disabled, focused등 컴포넌트의 상태 별로 Design을 확인할 수

있습니다.



Properties창의 Style속성을 직관적으로 입력, 수정할 수 있는 편집 창으로 Style Property Editor에서 입력, 수정된

값은 Properties창에 자동으로 반영됩니다. Style Property Editor는 아래와 같이 구성되어 있습니다.

속성 설명

1 Component List 편집 중인 Form이 지닌 모든 Component, Dataset, Animation Effect등을 List에

표시

2 Pseudo List 선택된 Component의 각 Pseudo별로 Style Property를 수정할 수 있도록 Pseudo

List를 표시

3 Style Property Component의 Style Property 목록을 직관적으로 수정할 수 있도록 표시

자세한 내용은 5.6 Style Property Editor를 참고하십시오.


2.6 Message Window

2.6.1 Output

UX-Studio로 작업하는 중에 발생할 수 있는 각종 메시지를 표시합니다. 메시지에는 각종 오류, 진행과정 표시 메시지

등이 포함됩니다.

2.6.2 Debug

Debug창은 디버깅 모드에서 발생하는 메시지를 보여줍니다.

2.6.3 Find Results

Find in Files명령의 처리 결과를 표시합니다. 표시된 각 파일을 더블 클릭하면 해당 편집 창이 열리고 해당 라인이 표

시됩니다. Find in Files 검색 창에서 ‘Find results 2 window’의 체크 옵션에 따라 ‘Find Results 1’ 또는 ‘Find Result

s 2’에 결과를 표시합니다.


2.6.4 Global Bookmark

Source 또는 Script 편집 창에서 사용된 Bookmark 목록을 보여줍니다. 목록에 표시된 Bookmark를 더블 클릭하면

편집 창이 열리고 해당 라인이 표시됩니다.

아이콘 이름 설명

1 Toggle Bookmark 커서 위치의 Bookmark를 설정 및 해제

2 Previous Bookmark 이전 Bookmark를 찾아 커서를 위치

3 Next Bookmark 다음 Bookmark를 찾아 커서를 위치

4 Previous Bookmark

in Document

현재 편집 창에서 이전 Bookmark를 찾아 커서를 위치

5 Next Bookmark

in Document

현재 편집 창에서 다음 Bookmark를 찾아 커서를 위치

6 Clear Bookmark 설정된 Bookmark를 모두 해제

7 Clear Bookmark

In Document

현재 편집 창에서 설전된 Bookmark를 모두 해제

Project Filter의 옵션을 조절하여 Bookmark 목록을 Filter할 수 있습니다. 또한 아래의 옵션 외에 Bookmark를 가진

Project 목록이 옵션 창에 추가로 표시됩니다.

옵션 설명

1 Show All Bookmarks UX-Studio에서 설정된 모든 Bookmark를 목록에 표시

2 Show Bookmarks that marked 현재 Project에 해당하는 Bookmark만 목록에 표시.


in Current project only

옵션 설명

Global Bookmark창에서 Bookmark를 설정, 해제할 경우 해당 편집 창에 바로 반영되며, Bookmark 목록은 UX-St

udio에서 별도로 관리하기 때문에 다른 장소에서 작업된 Project를 복사하여 작업할 경우 Bookmark는 표시되지 않

습니다.

2.7 Debug Window

2.7.1 Breakpoints

Script편집 창에서 사용된 Breakpoint목록을 보여줍니다. 목록에 표시된 Breakpoint를 더블 클릭하면 편집 창이 열

리고 해당 라인이 표시됩니다.

메뉴 아이콘 기능

1 Go To Source 선택된 Breakpoint에 해당하는 편집 창이 열리고 해당 라인을 표시

2 Delete Breakpoints 창에서 선택된 Breakpoint를 해제

3 Delete All 모든 Breakpoint를 해제

4 Enable/Disable Breakpoints 창에서 선택된 Breakpoint를 활성화/비활성화

5 Enable/Disable All 설정된 모든 Breakpoint를 활성화/비활성화


Breakpoint 목록은 UX-Studio에서 별도로 관리하기 때문에 다른 장소에서 작업된 Project를 복사하여 작업할 경우

Breakpoint는 표시되지 않습니다.

2.7.2 Call Stack

UX-Studio에서 Debugging시 Script함수가 호출된 순서를 보여주는 메시지 창입니다. Call Stack에서 항목을 더블

클릭하면 편집 창이 열리고 해당 라인이 표시됩니다.

Column 설명

1 Function 현재 커서가 위치한 함수명

2 Filename 함수가 위치한 파일명

3 Line 파일 라인 번호

2.7.3 Variables

UX-Studio에서 Debugging시 커서가 위치한 함수에서 사용되는 변수들을 표시해주는 창입니다.

Column 설명

1 Name 변수명

2 Value 변수에 저장된 Value


2.7.4 Watch

UX-Studio에서 Debugging시 사용자가 Script내에서 사용된 변수를 쉽게 확인하기 위해 사용자가 직접 Watch창에

변수 명을 입력해서 확인할 수 있는 창입니다.

Column 설명

1 Expression 사용자가 입력한 변수명

2 Value 변수에 저장된 Value

UX-Studio의 설정

3.

UX-Studio의 메뉴 Tools[Option]를 선택하여 UX-Studio의 전체적인 개발 환경을 설정할 수 있습니다.

3.1 Options – Environment

UX-Studio의 전체적인 환경을 설정합니다.

3.1.1 General

General은 UX-Studio의 일반적인 Option을 설정합니다.


속성 설명

1 Working Folder 신규 Project 생성시 Project가 저장되는 폴더를 지정

2 items shown in Recently used File 메뉴 [File – Recent Files]에 표시되는 File 목록 개수를 설정.

3 items shown in Recently used Project File 메뉴 [File – Recent Projects]에 표시되는 Project 목록 개수를 설정

3.1.2 Startup

UX-Studio가 시작될 때 사용되는 Option을 설정합니다.

속성 설명

1 Reopen last open

project on Startup

UX-Studio 시작 시 마지막으로 작업했던 Project를 자동으로 Open

할지 설정합니다

2 Show what’s New on Startup UX-Studio 시작 시 What’s New를 자동으로 표시할지 설정합니다

UX-Studio의 설정 | 33

3.1.3 Auto Recover

파일 편집 시 자동 복구 방식에 대한 Option을 설정합니다.

속성 설명

1 Save AutoRecover info every 파일 편집 시 AutoRecover 기능 사용유무를 설정

2 Save AutoRecover info every minutes AutoRecover 동작 시간을 설정

3 Make backup(.bak) file 편집 대상 파일의 백업 파일을 생성

3.1.4 Font and Color

UX-Studio의 각각의 창에서 사용되는 Font와 Color를 설정합니다.


속성 설명

1 Display items 설정 범위를 설정

2 Set General 기본값으로 설정.

3 Font 글꼴을 선택

4 Font Style 글꼴의 Style을 설정

5 Size 글꼴의 크기를 설정

6 Script 지정된 글꼴에서 사용할 수 있는 언어 스크립트를 표시.

7 Foreground 글꼴 색깔을 설정.

8 Background 여백 색깔을 설정

9 Strike Out 문자열에 취소 선을 표시여부 설정.

10 Underline 문자열에 밑줄을 표시여부 설정.

11 Tab Size 탭 크기를 설정.

12 Indent Size 들여쓰기 크기를 설정

13 Insert Spaces 탭의 크기만큼 공백으로 표시

14 Keep Tabs 탭을 유지

15 View Indentation Guide 들여쓰기 안내선 보기를 설정

16 Auto Indent 자동 들여쓰기를 설정

17 Preview 설정된 Option 값을 적용한 화면 미리 보기


3.1.5 Theme

UX-Studio의 Theme를 변경합니다.

속성 설명

1 System Theme Window OS가 사용하는 Theme입니다.

2 Red Theme UX-Studio에서 기본적으로 제공되는 Red Theme입니다．

3 Green Theme UX-Studio에서 기본적으로 제공되는 Green Theme입니다．

4 Gray Theme UX-Studio에서 기본적으로 제공되는 Gray Theme입니다．

5 Black Theme UX-Studio에서 기본적으로 제공되는 Black Theme입니다．

3.1.6 Show Information

사용자에게 추가 정보들을 표시하는 Option을 설정합니다.


속성 설명

1 Show HTML5 Mark Component, Property의 HTML5지원 유무를 알려주는

Mark를 표시합니다.

2 Only HTML5 Properties Display HTML5를 지원하는 Property만 Properties Window와 Script Intel

ligent에서 표시합니다.

3.1.7 Project Explorer

Project Explorer에서 사용되는 Option을 설정합니다.


속성 설명

1 FDL Parsing(project open) Project를 Open할 경우에 FDL의 내용을 분석해서 Project Explorer에 표시하는 Op

tion입니다．

● None(only filename) : FDL의 내용을 표시하지 않습니다.

● All : 모든 FDL들의 내용을 표시합니다.

● Services : 지정된 Services의 FDL들만 내용을 표시합니다.

2 Show Title TitleText의 표시유무를 설정

● At Project Explorer : FDL안의 TitleText정보를 Project Explorer에 표시합니

다.

● At Child Tab : FDL안의 TitleText정보를 편집화면의 Tab에 표시합니다.

3.1.8 Script

Script 편집 화면에서 사용되는 Option을 설정합니다.


속성 설명

1 Remove function body

when set empty

string to event property

Properties에서 이벤트를 제거했을 때 function의 삭제 여부를 설정

2 IntelliSense items Intellisense 목록에서 표시되는 Item의 숫자를 설정합니다.

3.1.9 Launch

UX-Studio에서 작업 중인 Project를 Launch할 때 사용되는 Option입니다.


속성 설명

1 Does not display the popup menu at Lau

nch XPLATFORM

Launch된 XPLATFORM에서 Source와 관련된 Popup메뉴를 표시

할지 설정합니다.

2 Launch Quickview

with the specified ADL

Launch Quickview시 사용될 ADL을 지정

3.1.10 Business Service

Business Service를 연결할 때 사용되는 Option입니다.


속성 설명

1 Load business service layout information

on Startup

UX-Studio 시작 시 Business service를 로딩하여 Project Explorer

에 항목을 표시할지 설정합니다

2 Use user-defined

metadata

사용자 정의 메타데이터 기능을 사용할 수 있도록 설정합니다.

3.2 Options – Debugging

UX-Studio의 Debugging과 관련된 Option을 설정합니다.


3.2.1 General

Debugging과 관련된 Option을 설정합니다.

속성 설명

1 Show message of error Error내용을 Output창에 표시

2 Show message of warning Warning내용을 Output창에 표시

3.3 Options – Form Design

UX-Studio의 Design Window와 관련된 Option을 설정합니다.


3.3.1 General

Form Design관련 Option을 설정합니다.

속성 설명

1 Max Undo Undo로 복구할 수 있는 최대 횟수

2 Default Width 신규 Form생성시 기본 Width를 설정

3 Default Height 신규 Form생성시 기본 Height를 설정

4 Dot Grid Size Design Window의 Canvas에 표시되는 Dot의 간격을 설정

5 Display Dot Grid Design Window의 Canvas에 Dot 표시 유무를 설정

6 Snap to dots when move Control Canvas 위에서 Control을 이동할 때 Canvas Dot에 대해 Magnetic

기능을 적용할지 설정

7 Snap to other

components when

move control

Canvas 위에서 Control을 이동할 때 다른 Component들에 대해 M

agnetic 기능을 적용할지 설정

8 Display Ruler Design Window의 Canvas에 Ruler 표시 유무를 설정

9 Display Guide Lines Design Window의 Canvas에 Guide Line 표시 유무를 설정

10 Display current mouse position 마우스 좌표의 표시 유무를 설정


3.3.2 Paste Special

Form Design에서 지원되는 ‘Paste Special’기능의 Option을 설정합니다.

속성 설명

1 Property(Normal) 대상의 일반 Property를 붙여 넣기 합니다.

2 Property(Style) 대상의 Style Property를 붙여 넣기 합니다.

3 User Property 대상의 User Property를 붙여 넣기 합니다.

4 Event 대상의 Event를 붙여 넣기 합니다.

5 Bind Item 대상의 Bind정보를 붙여 넣기 합니다.

3.3.3 Layout Manager(V9.2추가)

Layout Manager와 관련된 Option을 설정합니다.


속성 설명

1 Layout Tap Style Form Design에서 표시되는 Layout Tab 컨트롤의 위치를 표시하는 Option값입니다.

2 Display Edit Step 현재 편집중인 Step을 표시합니다.

3.3.4 Position(V9.2추가)

Form Design에서 생성되는 Component의 Position과 관련된 Option을 설정합니다.


속성 설명

1 Default Position Type Default로 사용할 PositionType을 설정합니다.

● Position – Position 사용

● Position2 – Position2 사용

3.4 Options – Source Control

Source Control과 관련된 Option을 설정합니다. 해당 Option은 사용자 PC에 사용 가능한 Source Control이 설치

된 경우에만 보여집니다.


속성 설명

1 Source Control

Management Type

사용자 PC에 설치된 Source Control 목록이 보여지며 이 중에서 프로젝트에 적용할

Source Control을 선택합니다.

2 Options 선택된 Source Control에 따라 세부적인 옵션을 지정합니다.

3.5 Options – HTML5

HTML5와 관련된 Option을 설정합니다.


속성 설명

1 Compiled Path HTML5 Compile시 생성되는 결과물을 저장할 경로를 설정합니다.

3.6 Customize

UX-Studio에서 사용되는 Toolbar, Menu등을 사용자가 편집하여 사용할 수 있습니다.


속성 설명

1 Toolbars Toolbar의 버튼을 편집합니다.

2 Commands 선택된 Command를 Toolbar에 추가합니다.

3 Menus Menu의 항목을 편집합니다.

4 External Tools 외부 Tool을 연결합니다.

5 Options Customize의 Option을 설정합니다.

Project

4.

XPLATFORM으로 실행되는 그룹 단위를 Project라고 부르며, xprj 확장자를 가진 파일로 생성되어 관리 됩니다. Pro

ject는 기본적으로 ADL, TypeDefinition, Global Variables, FDL로 관리되며 이 단락에서는 각각의 항목에 대해 설

명합니다.

4.1 Project 생성 마법사

Project 생성 마법사를 이용하여 새로운 Project를 생성할 수 있습니다. 메뉴 File[New – Project]에서 Project 생성

마법사를 시작합니다.

4.1.1 New Project Wizard 1단계

생성될 Project의 Frame Template와 생성될 경로 및 Project명을 입력하는 단계입니다. Project명은 반드시 입력해

야 하는 필수 항목이며, 생성될 경로에 동일한 Project명이 존재할 경우에는 생성할 수 없습니다.


속성 설명

1 Frame Template Default: Default Frame으로 생성

HFrame: Horizontal Frame으로 생성

VFrame: Vertical Frame으로 생성

Tab Frame: Tab Frame으로 생성

Widget: Widget으로 생성

2 Project Template 기존 Project Template를 선택

3 Show List Icon Project Icon 표시 방법을 결정

4 Project Information 현재 선택된 Template를 표시

5 Add to Current Project: 현재 작업중인 Project에 추가

Create a new Project: 새 Project를 생성

6 Name Project 이름

7 Location Project의 Root 폴더

4.1.2 New Project Wizard 2단계(V9.2변경)

Project의 Character Set, Language, TypeDefinition등을 설정합니다.

속성 설명

1 Character Set 문자 Set을 설정

2 Language 언어를 설정

Project | 51

3 TypeDefinition

XML 선택

Create new TypeDefinition from default:

Default TypeDefinition으로 새로운 TypeDefinition 생성

Existing TypeDefinition:

기존 TypeDefinition을 적용

4 TypeDefinition

XML 경로

TypeDefinition XML의 경로

5 Position Type Form Design에서 생성되는 Component positiontype의 기본값을 설정합니다.

Position: Position을 기본값으로 설정

Position2: Position2를 기본값으로 설정

속성 설명

4.1.3 New Project Wizard 3단계(V9.2추가)

Project의 Screen Info를 설정합니다. Screen이란 Application 구동 시 필요한 화면 크기등과 관련된 정보들의 모음

입니다.

속성 설명

1 Name Screen의 이름

2 Theme Screen에 사용할 Theme

3 System Type Win32: 일반 Desktop

Android: Android Mobile Phone

iPhone: iPhone


4 OS 해당 장비에서 사용되는 운영체제

5 Device 장비의 종류

6 Description Screen에 대한 설명(Description은 기능 동작에 영향을 주지 않습니다.)

7 Add Screen Project에서 사용하는 Screen 정보를 추가하는 버튼

8 Delete 선택된 Screen정보를 삭제하는 버튼

속성 설명

4.2 Application Definition Language(ADL)

Project에 전반적으로 적용되는 Style이나 Theme, MainFrame, Tray, Widget등을 관리합니다. Launch Project시

활성화된 ADL로 Project의 Style, Theme등이 적용됩니다.

Project | 53


1 Edit Source 선택된 ADL의 XML을 편집하는 Source편집 창으로

이동

2 Edit Script 선택된 ADL의 Script를 편집하는 Script편집 창으로

이동

3 Insert ADL Item

Style: 스타일 CSS파일을 추가

MainFrame: MainFrame을 추가

Application Menu: MainFrame에 Menu 추가

Widget: 새 Widget 추가

Tray:Tray 정보 추가

Theme: Xtheme 파일 추가

Screen: Screen 정보 추가

4 Set as Active ADL 선택된 ADL을 활성화

활성화된 ADL에서 해당 메뉴는 Enable됨

3 Copy ADL Menu에서는 지원되지 않는 기능

4 Cut ADL Menu에서는 지원되지 않는 기능

5 Paste ADL Menu에서는 지원되지 않는 기능

6 Collapse All ADL 하위 Tree Item을 감춤

7 Expand All ADL 하위 Tree Item을 펼침

8 Layout Template 현재 Layout을 Template으로 등록

9 Close ADL Menu에서는 지원되지 않는 기능

10 Save 선택된 ADL의 정보를 저장

11 Save As… 선택된 ADL의 정보를 다른 이름으로 저장

12 Rename 선택된 ADL의 이름을 변경

13 Refresh ADL XML을 Reload

14 Delete 선택된 ADL을 삭제

4.2.1 MainFrame

XPLATFORM으로 만들어진 응용프로그램의 기본 화면을 구성합니다. MainFrame은 내부적으로 Titlebar와 Status

bar를 기본으로 갖고 있으며, 하위 구성요소로써 FrameSet, VFrameSet, HFrameSet, TitleFrameSet, ChildFrame,

TabFrame, TabFramePage등을 갖고 있습니다. MainFrame항목은 각각의 ADL에 한 개만 입력이 가능합니다.



1 Edit MainFrame Editor 기능을 호출

2 Insert Frame

MainFrame에 하위Frame을 추가. 추가된 하위Frame의 종류에 따라

하위Frame을 반복적으로 추가 가능

(각 Frame의 상세설명은 [표 6-6] Frame Type을 참조)

3 Copy Main Menu에서는 지원되지 않는 기능

4 Cut Main Menu에서는 지원되지 않는 기능

5 Paste Main Menu에서는 지원되지 않는 기능

6 Collapse All MainFrame의 하위 Tree Item을 감춤

Project | 55

7 Expand All MainFrame의 하위 Tree Item을 펼침

8 Close Main Menu에서는 지원되지 않는 기능

9 Save 편집 중인 MainFrame을 저장

10 Save As… Main Menu에서는 지원되지 않는 기능

11 Rename Main Menu에서는 지원되지 않는 기능

12 Refresh Main Menu에서는 지원되지 않는 기능

13 Delete 선택된 Frame Item을 삭제


Frame 설명

1 FrameSet MainFrame의 하위에 오는 Frame으로, 하위Frame들을 자유롭게 배열 가능. 하위Fr

ame으로 FrameSet, HFrameSet, VFrameSet, TitleFrameSet, ChildFrame, TabFr

ame들을 반복적으로 추가 가능

2 VFrameSet MainFrame의 하위에 오는 Frame으로, 수직 방향으로 하위Frame들을 자유롭게 배

열 가능. 하위Frame으로 FrameSet, HFrameSet, VFrameSet, TitleFrameSet, Chil

dFrame, TabFrame들을 반복적으로 추가 가능.

3 HFrameSet MainFrame의 하위에 오는 Frame으로, 수평 방향으로 하위Frame들을 자유롭게 배

열 가능. 하위Frame으로 FrameSet, HFrameSet, VFrameSet, TitleFrameSet, Chil

dFrame, TabFrame들을 반복적으로 추가 가능

4 TileFrameSet MainFrame의 하위에 오는 Frame으로, 수직 또는 수직 방향으로 하위 Frame들을

자유롭게 배열 가능. 하위 Frame으로 FrameSet,

HFrameSet, VFrameSet, TitleFrameSet, ChildFrame, TabFrame들을 반복적으로

추가 가능

5 ChildFrame MainFrame 또는 FrameSet 하위에 올 수 있는 Frame으로 Form 정보를 Url로 가지

고 있어 해당 Form을 화면에 표시. 기본적으로 Form이 로딩될 수 있는 기본 단위 화

면

6 TabFrame MainFrame 또는 FrameSet 하위에 올 수 있는 Frame으로, Tab

Component와 유사한 기능을 제공

7 TabFramePage TabFrame의 하위에 오는 Frame으로, TabPage와 유사한 기능을 제공

MainFrame Editor에서 현재 구성된 Frame을 Tree형태로 확인 가능하며 하위Frame의 추가, 삭제, 수정 등 Frame

편집이 가능합니다.


속성 설명

1 MainFrame Tree View 현재 구성된 Frame을 Tree 형태로 표시

2 Add 선택된 Frame에 하위 Frame을 추가

3 Insert 선택된 Frame위에 Frame을 삽입

4 Change Type 선택된 Frame의 Type을 변경

5 Del 선택된 Frame을 제거

4.2.2 Application Menu

MainFrame의 메뉴를 구성할 수 있습니다. ‘Click here To add’를 마우스로 클릭하여 원하는 형태로 메뉴를 구성하

고 각각의 메뉴를 Properties창에서 편집합니다.

Application Menu항목은 각각의 ADL에 한 개만 입력이 가능합니다.

Properties창에서 선택된 Menu의 속성을 편집합니다.

Project | 57

속성 설명

1 id Application Menu에서 구별되는 고유 ID

2 caption Menu에서 보여지는 Caption

3 checkbox Caption 좌측에 Checkbox를 가진 형태 지정

4 enable Menu Enable 유무

5 hotkey Menu 단축키

6 icon Menu Icon

7 level Menu의 Depth (임의로 수정할 수 없음)

8 name Application Menu의 이름 지정

9 userdata 사용자 지정 Data

4.2.3 Widget

Widget은 OS상에서 응용프로그램을 동작시켜 결과를 표시하는 작은 GUI 도구로 작은 윈도우를 칭합니다.


1 Edit Widget Editor를 호출

2 Insert Widget 새 Widget을 추가


3 Copy Widget Menu에서는 지원되지 않는 기능

4 Cut Widget Menu에서는 지원되지 않는 기능

5 Paste Widget Menu에서는 지원되지 않는 기능

6 Collapse All Widgets 하위 Tree Item을 감춤

7 Expand All Widgets 하위 Tree Item을 펼침

8 Close Widget Menu에서는 지원되지 않는 기능

9 Save Widget Menu에서는 지원되지 않는 기능

10 Save As… 편집 중인 Widget을 저장

11 Rename Widget Menu에서는 지원되지 않는 기능

12 Refresh Widget Menu에서는 지원되지 않는 기능


Widget Editor에서는 Widget의 추가, 삭제 및 기본정보를 수정할 수 있습니다.

속성 설명

1 id Component를 구분하기 위한 고유 Id

2 formUrl Widget의 화면을 구성할 FDL 주소값

3 visible Widget 초기 실행 시 화면에 보일 지 여부 결정

4 backgroundimage Widget에 사용될 이미지

5 layered 화면에 표시 유무

6 position Widget의 위치

7 showontaskbar 작업 표시줄에 표 시 여부 결정

8 titletext Widget의 Title

9 openstatus Widget이 실행될 때 상태값

10 icon Widget이 Window 작업상태줄에 표시되는 아이콘

11 topmost Widget이 Window들 중에서 가장 앞에 위치할지 결정

4.2.4 Tray

OS의 Tray영역에 표시되는 Tray Icon 및 Tooltip등을 수정할 수 있습니다.

Project | 59


1 Edit Tray Editor를 호출

2 Insert Tray 새 Tray를 추가

3 Copy Tray Menu에서는 지원되지 않는 기능

4 Cut Tray Menu에서는 지원되지 않는 기능

5 Paste Tray Menu에서는 지원되지 않는 기능

6 Collapse All Tray 하위 Tree Item을 감춤

7 Expand All Tray 하위 Tree Item을 펼침

8 Close Tray Menu에서는 지원되지 않는 기능

9 Save 편집 중인 Tray를 저장

10 Save As… Tray Menu에서는 지원되지 않는 기능

11 Rename Tray Menu에서는 지원되지 않는 기능

12 Refresh Tray Menu에서는 지원되지 않는 기능

Tray Editor에서는 Tray의 추가, 삭제 및 기본정보를 수정할 수 있습니다


속성 설명

1 id Tray를 구분하기 위한 고유 Id

2 icon Tray의 Icon 이미지

3 tooltip Tray Icon의 Tooltip 텍스트

4 items Tray PopupMenu Item을 추가

5 Add Tray 새 Tray를 추가

6 Delete Tray 선택된 Tray를 삭제

4.2.5 Theme

사용자가 제작한 Theme를 적용하여 Project의 스타일을 쉽게 변경할 수 있습니다.

Project | 61


1 Edit Theme Editor를 호출

2 New Theme 새 Theme를 추가

3 Insert Theme Theme 삽입

4 Copy Themes Menu에서는 지원되지 않는 기능

5 Cut Themes Menu에서는 지원되지 않는 기능

6 Paste Themes Menu에서는 지원되지 않는 기능

7 Collapse All Themes 하위 Tree Item을 감춤

8 Expand All Themes 하위 Tree Item을 펼침

9 Close Themes Menu에서는 지원되지 않는 기능

10 Save Themes Menu에서는 지원되지 않는 기능

11 Save As… Themes Menu에서는 지원되지 않는 기능

12 Rename Themes Menu에서는 지원되지 않는 기능

13 Refresh Themes Menu에서는 지원되지 않는 기능



1 Edit Theme Editor를 호출

2 Set as Active Theme Project가 실행될 때 선택된 Theme가 적용되도록 설정

3 Copy Theme Menu에서는 지원되지 않는 기능

4 Cut Theme Menu에서는 지원되지 않는 기능

5 Paste Theme Menu에서는 지원되지 않는 기능

6 Collapse All Theme Menu에서는 지원되지 않는 기능

7 Expand All Theme Menu에서는 지원되지 않는 기능

8 Close Theme Editor 닫기

9 Save 편집 중인 Theme를 저장

10 Save As… 편집 중인 Theme를 다른 이름으로 저장

11 Rename Theme Menu에서는 지원되지 않는 기능

12 Refresh Theme Menu에서는 지원되지 않는 기능

13 Delete 선택된 Theme를 삭제

Project | 63


1 Edit CSS를 편집할 수 있는 CSS Editor를 호출

(CSS Editor의 상세설명은 Style의 설명을 참조)

2 New Folder Theme안에 새 Folder를 생성

3 New CSS Theme안에 새 CSS 파일을 생성

4 Insert File 그림 파일 또는 CSS 파일 추가

5 Remove File Tree에서 선택된 파일을 목록에서 제거

6 Rename Tree에서 선택된 파일의 이름을 수정

7 Set Extern Deploy Theme기능에서 Extern File로 저장 될 Image를 선택. Check

Box가 Uncheck상태로 설정됨

(단, default.xtheme등의 기본제공 Theme선택 시에는 나타나지 않음)

8 Unset Extern 위 Set Extern으로 설정된 Extern File을 해제. CheckBox가 Check상

태로 설정됨

(단, default.xtheme등의 기본제공 Theme선택 시에는 나타나지 않음)


4.2.6 ScreenInfo(V9.2추가)

‘New Project Wizard’에서 입력한 Screen정보를 수정하거나 새로운 Screen정보를 입력할 수 있는 Editor기능이 추

가되었습니다.

‘Project Explorer’에서 ADL Item에서 제공되는 Popup메뉴를 사용하여 새로운 Screen정보를 추가하거나 ADL Ite

m의 하위 정보로 표시되는 ‘ScreenInfo’등을 선택하여 편집할 수 있습니다.


1 Edit Screen Editor를 호출

2 Insert Screen 새로운 Screen정보 추가

3 Copy ScreenInfo Menu에서는 지원되지 않는 기능

4 Cut ScreenInfo Menu에서는 지원되지 않는 기능

5 Paste ScreenInfo Menu에서는 지원되지 않는 기능

6 Collapse All ScreenInfo 하위 Tree Item을 감춤

Project | 65

7 Expand All ScreenInfo 하위 Tree Item을 펼침

8 Close ScreenInfo Menu에서는 지원되지 않는 기능

9 Save 편집 중인 ScreenInfo 를 저장

10 Save As… ScreenInfo Menu에서는 지원되지 않는 기능

11 Rename ScreenInfo Menu에서는 지원되지 않는 기능

12 Refresh ScreenInfo Menu에서는 지원되지 않는 기능


‘ScreenInfo Editor’는 기존에 제공되던 ‘Widget Editor’, ‘Variable Editor’와 동일한 방식으로 편집기능을 제공합니

다.

속성 설명

1 Add 새 Screen정보를 추가하는 버튼

2 Del ScreenInfo그리드에서 선택된 Screen정보를 삭제하는 버튼

3 Screen정보 그리드 Project가 사용할 Screen정보를 보여주는 그리드

● Name : Screen의 이름

● Theme : Screen가 사용할 Theme

● System Type : 시스템 종류

● OS : 해당 장비에서 사용되는 운영체제

● Device : 장비의 종류

● Description : Screen에 대한 설명

● (Description은 기능 동작에 영향을 주지 않습니다.)

4 Property Window ScreenInfo그리드에서 선택된 Screen정보는 Properties Windows에서 동일하게

표시되며 수정할 수 있습니다.


4.3 Type Definition의 편집

UX-Studio에서는 Component, Service, Update를 Type Definition에 등록해서 Prefix로 사용할 수 있습니다. Typ

e Definition에 등록된 각각의 항목은 Edit TypeDefinition에서 기존 항목의 수정, 삭제 및 신규 항목의 추가가 가능

합니다.

Project | 67


1 Edit TypeDefinition을 편집할 수 있는 편집창 호출

2 Copy TypeDefinition Menu에서는 지원되지 않는 기능

3 Cut TypeDefinition Menu에서는 지원되지 않는 기능

4 Paste TypeDefinition Menu에서는 지원되지 않는 기능

5 Collapse All TypeDefinition의 하위 Tree Item을 감춤

6 Expand All TypeDefinition의 하위 Tree Item을 펼침

7 Close TypeDefinition Menu에서는 지원되지 않는 기능

8 Save TypeDefinition Menu에서는 지원되지 않는 기능

9 Save As… TypeDefinition Menu에서는 지원되지 않는 기능

10 Rename TypeDefinition Menu에서는 지원되지 않는 기능

11 Refresh TypeDefinition XML을 Reload

4.3.1 Edit TypeDefinition

Edit TypeDefinition은 Project Explorer창에서 TypeDefinition의 Tree Item이나 TypeDefinition으로 등록된 Tre

e Item을 마우스로 더블 클릭하여 호출할 수 있습니다.

Component Definition에서는 Button, CheckBox등 Design으로 표현되는 컴포넌트들과 ShowAnimation, Data

set등과 같은 Invisible 컴포넌트를 관리합니다. 또한 개발자가 직접 작성한 User Component, Composite Compo

nent등을 Add 버튼으로 추가하거나, 선택된 컴포넌트를 목록에서 삭제할 수 있습니다.


Column 설명

1 Type Component의 Type

2 ID Component의 ID

3 ClassName Component의 ClassName

4 Module Component의 Module 위치

5 Version Component 버전 정보

6 Image Component 툴바에서 사용될 이미지

7 Default Width Component 기본 넓이

8 Default Height Component 기본 높이

Service Definition에서는 UX-Studio에서 사용되는 Folder Path나 Internet URL등을 관리합니다

Add, Delete버튼을 사용하여 새 Service를 추가하거나, 선택된 Service를 삭제할 수 있습니다.

Column 설명

1 PrefixID Service의 PrefixID

2 Type Service의 Type

3 Url Service의 url

4 CacheLevel Cache 기능사용 여부

5 Codepage Code Page 이름

6 Language 사용 언어

7 Version Service의 버전 정보

8 Communication

version

Communication 버전 정보

9 ServiceList ServiceList, Type이 BS인 경우 사용됨

10 DatasetLayout DatasetLayout, Type이 BS인 경우 사용됨

11 ExecuteUrl ExecuteUrl, Type이 BS인 경우 사용됨

12 File Extension Cache된 정보가 저장되는 파일의 확장자

13 Include

Sub-directory

Type이 File인 경우 url에 해당하는 하위 디렉터리 표시 여부

Update Definition에서는 Web 또는 이미 개발된 Application상에서의 XPLATFORM에 필요한 파일 배포 및 버전

을 관리합니다. Add, Delete 버튼을 사용하여 새 Update를 추가하거나, 선택된 Update를 삭제할 수 있습니다

Column 설명

1 SystemType 운영체제 Type

2 Component UpdateURL Component를 Update할 URL

3 Engine URL Engine 설치 URL

4 Engine SetupKey Engine 설치키

5 Engine Version Engine 버전

Project | 69

4.3.2 Service Refactoring

Type Definition에서 사용중인 Service의 PrefixID를 변경할 경우에 사용중인 부분을 자동으로 변경된 PrefixID로 변

경해주는 Refactoring 기능이 수행됩니다.

현재 Project에서 사용중인 변경 전 PrefixID를 모두 리스트로 보여주며 ‘Rename’을 클릭할 때 체크되어 있는 항목을

자동으로 변경해 줍니다.

4.4 Global Variables

GlobalVariables에서는 ADL과 Form에는 포함되지 않으나 Project 전체에 걸쳐 사용되는 여러 Global 항목이 표시

됩니다. 또한 각각의 편집기를 사용하여 GlobalVariables에 항목을 추가하거나 수정할 수 있습니다.

GlobalVariables Item으로 Dataset, Variable, Animation, Object, Image 항목이 입력 가능합니다.



1 Edit Source GlobalVariables를 XML 편집 창에서 직접수정

2 Insert Global Variables Ite

m

Dataset: Dataset Editor에 새로운 Dataset을 추가

Variable: Variable Editor에 새로운 Variable을 추가

Animation: Animation Object를 추가

Object: Object를 추가

(Insert 가능한 Object 목록은 UX-Studio에 포함된 도움말(레퍼런스 가

이드)을 참조하세요)

Image: Image를 추가

3 Copy GlobalVariables Menu에서는 지원되지 않는 기능

4 Cut GlobalVariables Menu에서는 지원되지 않는 기능

5 Paste GlobalVariables Menu에서는 지원되지 않는 기능

6 Collapse All GlobalVariables 하위 Tree Item을 감춤

7 Expand All GlobalVariables 하위 Tree Item을 펼침

8 Close GlobalVariables Menu에서는 지원되지 않는 기능

Project | 71

9 Save 편집 중인 GlobalVariables를 저장

10 Save As… GlobalVariables Menu에서는 지원되지 않는 기능

11 Rename GlobalVariables Menu에서는 지원되지 않는 기능

12 Refresh GlobalVariables XML을 Reload


4.4.1 Datasets

Dataset은 Data를 처리하는 Table형태의 기억장소입니다. Presentation용 컴포넌트와 Dataset이 Bind된 경우 Dat

a변경사항이 해당 컴포넌트에 자동으로 동기화 되는 기능도 제공합니다.


1 Edit Dataset Editor 호출

2 Insert Dataset Dataset Editor에 새로운 Dataset을 추가


3 Copy Datasets Menu에서는 지원되지 않는 기능

4 Cut Datasets Menu에서는 지원되지 않는 기능

5 Paste Datasets Menu에서는 지원되지 않는 기능

6 Collapse All Datasets 하위 Tree Item을 감춤

7 Expand All Datasets 하위 Tree Item을 펼침

8 Close Datasets Menu에서는 지원되지 않는 기능

9 Save 편집 중인 Dataset을 저장

10 Save As… Datasets Menu에서는 지원되지 않는 기능

11 Rename Datasets Menu에서는 지원되지 않는 기능

12 Refresh Datasets Menu에서는 지원되지 않는 기능


Dataset편집 창에서 Dataset항목을 추가, 삭제하거나 구성을 변경할 수 있습니다.

속성 설명

1 Import Datasets 저장된 파일에서 Dataset을 Load

2 Export Datasets 현재 Dataset을 파일로 Save

3 Add a New Dataset Dataset 추가

4 Delete selected Datasets Dataset 삭제

Project | 73

5 Const Constant Data의 Columns 설정

6 Add a new Const Column Constant Column 추가

7 Insert a new Const Column 커서가 위치한 상단에 Constant Column 삽입

8 Delete selected Const Columns Constant Column 삭제

9 Columns Dataset의 Columns 설정

10 Add a new Column Dataset의 Column 추가

11 Insert a new Column 커서가 위치한 상단에 Column 삽입

12 Delete selected Columns Dataset의 Column 삭제

13 Rows Dataset의 Row 설정

14 Add a new Row Dataset의 Row 추가

15 Insert a new Row 커서가 위치한 상단에 Row 삽입

16 Delete selected Rows Dataset의 Row 삭제

속성 설명

4.4.2 Variables

Variables는 Project 내에서 전역적으로 사용하는 변수입니다.



1 Edit Variable Editor 호출

2 Insert Variable Variable Editor에 새로운 Variable을 추가

3 Copy Variables Menu에서는 지원되지 않는 기능

4 Cut Variables Menu에서는 지원되지 않는 기능

5 Paste Variables Menu에서는 지원되지 않는 기능

6 Collapse All Variables 하위 Tree Item을 감춤

7 Expand All Variables 하위 Tree Item을 펼침

8 Close Variables Menu에서는 지원되지 않는 기능

9 Save 편집 중인 Variable을 저장

10 Save As… Variables Menu에서는 지원되지 않는 기능

11 Rename Variables Menu에서는 지원되지 않는 기능

12 Refresh Variables Menu에서는 지원되지 않는 기능

Variable편집 창에서 Variable항목을 추가, 삭제하거나 구성을 변경할 수 있습니다.

속성 설명

1 ID Variable명

2 Initval 초기값

3 Usecookie Cookie의 사용여부 설정

4 Add Variable Variable 추가

5 Delete Variable 선택된 Variable 삭제

Project | 75

4.4.3 Object


1 Edit Objects Menu에서는 지원되지 않는 기능

2 Insert Animation Animation Object를 Global Variable로 추가

MoveAnimation: Move Animation Object추가

PropertyAnimation: Property Animation Object추가

TransitionAnimation: Transition Animation Object추가

CompositeAnimation: Composite Animation Object추가

3 Insert Object Object를 추가

(Insert 가능한 Object 목록은 UX-Studio에 포함된 도움말(레퍼런스 가

이드)를 참조)

4 Copy Variables Menu에서는 지원되지 않는 기능

5 Cut Variables Menu에서는 지원되지 않는 기능

6 Paste Variables Menu에서는 지원되지 않는 기능


7 Collapse All Objects 하위 Tree Item을 감춤

8 Expand All Objects 하위 Tree Item을 펼침

9 Close Variables Menu에서는 지원되지 않는 기능

10 Save 편집 중인 Object를 저장

11 Save As… Variables Menu에서는 지원되지 않는 기능

12 Rename Variables Menu에서는 지원되지 않는 기능

13 Refresh Variables Menu에서는 지원되지 않는 기능


4.4.4 Image

Project내에서 사용되는 Image를 새롭게 추가하거나 삭제할 수 있습니다.

Project Explorer의 Images항목에서는 Image를 추가할 수 있는 팝업메뉴가 호출되며, Images항목의 하위 Item인 I

mage항목에서는 선택된 Image를 삭제할 수 있는 팝업 메뉴가 호출됩니다.


1 Edit Image Menu에서는 지원되지 않는 기능

2 Insert Image Image File을 추가할 수 있는 File Dialog를 호출

3 Copy Image Menu에서는 지원되지 않는 기능

Project | 77

4 Cut Image Menu에서는 지원되지 않는 기능

5 Paste Image Menu에서는 지원되지 않는 기능

6 Collapse All Images 하위 Tree Item을 감춤

7 Expand All Images 하위 Tree Item을 펼침

8 Close Image Menu에서는 지원되지 않는 기능

9 Save 편집 중인 Image를 저장

10 Save As… Image Menu에서는 지원되지 않는 기능

11 Rename Image Menu에서는 지원되지 않는 기능

12 Refresh Image Menu에서는 지원되지 않는 기능

13 Delete 선택된 Image File을 Image 그룹에서 삭제


Project Explorer에서 Image항목이 선택될 경우, Image Preview가 자동으로 호출됩니다.


4.5 FDL (Form Definition Language)

Form 생성 마법사를 이용하여 새로운 Form을 생성할 수 있습니다. 메뉴 File[New – Item – Form]에서 Form 생성

마법사를 시작합니다.

4.5.1 FDL 생성 마법사(V9.2변경)

1. Create New Form Wizard 1단계

생성될 Form의 경로와 이름을 입력하는 단계입니다. Form명은 반드시 입력해야　하는 필수 항목이며, 생성될

경로에 동일한 Form명이 존재할 경우에는 생성할 수 없습니다.

속성 설명

1 Name 생성될 form의 이름

2 Location 생성될 form의 위치

2. Create new Form Wizard 2단계

Form의 상속관련 정보를 설정합니다. TypeDefinition의 Objects정보에 UserForm이 등록되어 있는 경우에만

선택할 수 있습니다.

Project | 79


Form의 Width, Height를 정합니다. 최초 Width, Height는 메뉴 Tool[Options]의 Design에서 정해진 값을 표

시합니다.


4. Create New Form Wizard 4단계(V9.2추가)

Form에서 사용할 Layout을 설정합니다. Layout이란 각각 다른 크기를 가진 화면을 의미합니다.

속성 설명

1 Name Layout의 이름

● Layout의 Name으로 대소문자 구별 없이 ‘Default’를 사용할 수 없습니다.

● 같은 Form안에서는 중복된 Layout Name을 사용할 수 없습니다.

2 Screenid Layout이 사용할 Screen명

3 Width Layout의 넓이

4 Height Layout의 높이

5 Description Layout에 대한 설명

6 Template Template에서 Layuot 정보를 가져오는 버튼

7 Add Layout Form에서 사용할 Layout 정보를 추가하는 버튼

8 Delete 선택된 Layout정보를 삭제하는 버튼

Template 버튼을 누르면 Template을 선택할 수 있는 Layout Template 창이 뜹니다.

Project | 81

Layout Template 창에서 원하는 Layout, Layout group을 선택한 후 OK버튼을 누르면 선택한 Layout 정보가 Ne

w Form Wizard에 추가됩니다.


Form을 Widget으로 생성할지 결정합니다.


4.5.2 FDL Drag&Drop

Project에서 생성된 Form을 Service그룹단위로 관리되며, 각 그룹에 속한 Form은 Drag&Drop으로 다른 그룹으로

이동하거나 <Ctrl> + Drag&Drop으로 복사할 수 있습니다.

Project | 83

4.5.3 FDL 항목

Form항목은 하위 Tree Item으로 Layout, Objects, Script, Bind를 가집니다.



1 Layout Form에 생성된 Component를 하위 Item으로 표시

2 Objects Design이 없는 Invisible Component를 표시

3 Script Form이 가진 Function 목록을 표시

4 Bind Form에 Bind된 정보를 표시

Form 항목에서는 아래와 같은 기능을 지원합니다.


1 Edit 선택된 Form을 편집하는 Design창을 호출

2 Insert Style CSS 파일을 추가, Load 되지 않은 Form에만 적용

3 Copy 선택된 Form을 Copy

4 Cut 선택된 Form을 Cut

5 Paste Copy또는 Cut된 Form을 현재 Service에 Paste

Project | 85

6 Collapse All Form 하위 Tree Item을 감춤

7 Expand All Form 하위 Tree Item을 펼침

8 Close 현재 편집중인 Project 닫기

9 Save 선택된 Form 저장

10 Save As… 선택된 Form을 다른 이름으로 저장

11 Rename 선택된 Form 이름 바꾸기

12 Refresh 선택된 Form XML을 Reload

13 Delete 선택된 Form 삭제

14 QuickView 선택된 Form을 QuickView기능으로 Launch합니다


4.6 Widget Application 생성

4.6.1 New Widget Application

Project 생성 마법사의 1단계에서 Widget Template를 선택하여 생성하면 MainFrame이 없는 Widget Applicatio

n이 생성됩니다.


4.6.2 Widget 생성

ADL의 PopupMenu에서 Widget을 추가합니다.

Project | 87

4.6.3 Widget 편집

Widget이 정상적으로 동작하기 위해서 Widget의 속성 Formurl과 BackgroundImage을 입력해야 합니다.


속성값을 정상적으로 입력했다면 File[Launch Project] 메뉴를 사용하여 Widget이 동작하는 것을 확인할 수 있습니

다.

4.7 공통 코드의 사용

4.7.1 Make a Project Template

현재 작업 중인 Project를 Template로 등록하는 기능입니다. Project Explorer에서Project선택 > 마우스 우측버튼

클릭 > Project Template을 클릭하면 됩니다.

Project | 89

속성 설명

1 Project Template Name 생성될 Template의 이름

2 Select ADL to include Project Template에 포함될 ADL을 선택

3 Select a Service Group

and Files to include

Project Template에 포함될 파일을 선택

Template으로 등록된 Project는 이후에 신규 Project생성시 New Project wizard에서 선택하여 사용할 수 있습니

다.


4.7.2 Make Form Template

원하는 Form를 템플릿으로 등록하는 기능입니다. Project Explorer에서 하나의 Form을 선택하고 등록하거나 여러

개의 Form을 한 번에 등록할 수 있습니다.

해당 기능은 9.2.0.240 이후 버전부터 지원합니다.

하나의 Form을 등록할 때는 Project Explorer 에서 원하는 Form을 선택하고 [Save as Form Template] 항목을 선

택하거나 메뉴에서 [File > Save as Form Template] 항목을 선택합니다.

속성 설명

1 Project Group 템플릿 프로젝트 그룹 (변경할 수 없음)

2 Service URL 서비스 그룹 (사용하지 않음)

3 Template Name 템플릿 선택 창에 보여질 템플릿 이름

템플릿으로 추가된 Form은 아래 경로에서 확인하실 수 있습니다. Form 템플릿을 배포하는 경우에 해당하는 경로에

파일을 복사해 넣으면 같은 템플릿 환경에서 사용할 수 있습니다.

OS 경로

1 VISTA/7 C:\Users\[사용자명]\AppData\Local\VirtualStore\

Program Files\TOBESOFT\XPLATFORM\9.2\Template\Form

2 XP C:\Program Files\TOBESOFT\XPLATFORM\9.2

공통 작업을 먼저 진행하고 작성된 여러 개의 Form 템플릿을 한 번에 등록하는 경우에는 메뉴에서 [File > Make For

m Template] 항목을 선택합니다. 서비스 그룹 전체를 등록하거나 원하는 Form만 선택해 등록할 수 있습니다.

Project | 91

속성 설명

1 Select a Form

in Service Group

템플릿으로 만들 Form 또는 서비스 그룹 선택

2 Preview 선택한 폼 이미지 미리보기

3 Make Template List 등록한 Form 템플릿

Template으로 등록된 Form은 새로운 Form 생성 시 [New Project wizard]에서 선택하여 사용할 수 있습니다. 메

뉴에서 [File > New > Item > Form]을 선택하면 [Use Template]을 선택할 수 있는 항목이 표시됩니다.

다음 창에서 등록된 Form 템플릿 목록을 확인하고 원하는 Form 템플릿을 선택하면 나머지 옵션(Position, Layouts

등)을 선택하지 않고 바로 Form이 생성됩니다.


4.7.3 Layout Template(V9.2추가)

기본적으로 제공되는 Layout Template를 사용할 수 있습니다. 또한, 자주 사용되는 Layout정보를 사용자가 Templ

ate으로 등록 할 수 있습니다.

Project | 93

Layout Template Dialog는 기본적으로 제공되는 Template인 Device, Graphic Array Template과 사용자가 직접

등록하여 사용하는 User Template 3개의 Tab으로 구성되어 있습니다.


속성 설명

1 User Template 사용자가 직접 등록하여 사용하는 Layout Template List

2 Device 현재 사용되고 있는 주요 모바일 기기

3 Graphic Array 해상도로 사용되고 있는 Graphic Array

4 Add Screen Screen Group을 추가하는 버튼

5 Add Layout Layout 을 추가하는 버튼

6 Delete 선택된 항목을 삭제하는 버튼. Screen Group을 삭제하면 해당 Screen Group의 하

위 Layout 모두 삭제된다

7 Template 정보를 보여주는

그리드

더블클릭, F2 버튼으로 Edit mode로 전환하여 내용을 편집 할 수 있습니다.

● Name : Layout의 이름

Layout의 Name으로 대소문자 구별　없이‘Default’를 사용할 수 없습니다. Te

mplate으로 사용중인 Name은 입력할 수 없습니다.

● Width : Layout의 넓이

● Height : Layout의 높이

● Description : Template에 대한 설명 (Description은 기능 동작에 영향을 주지

않습니다.)

4.8 기타 File 생성

Project | 95

4.8.1 Create a new XML file

속성 설명

1 File name 생성될 XML 파일명

2 Location 생성될 XML 파일의 위치

4.8.2 Create a new Java script file

속성 설명

1 File name 생성될 스크립트 파일명

2 Location 생성될 스크립트 파일의 위치

Theme / CSS

5.

XPLATFORM은 만들어져 있는 Theme나 CSS를 적용하여 동일한 Project라도 전혀 다른 스타일의 UI로 쉽게 변경

가능합니다.

5.1 Theme와 CSS

Theme와 CSS는 XPLATFORM의 스타일을 변경할 수 있다는 점에서는 동일하지만 Theme에는 CSS파일과 CSS에

서 사용되는 Image파일도 같이 포함되어 있다는 차이가 있습니다.

5.2 CSS 파일의 생성

[그림]의 Standard Toolbar 아이콘을 클릭하거나 메뉴[File – New – File – Style Sheet]을 선택하여 CSS 파일을 생

성할 수 있습니다.

Theme / CSS | 97

속성 설명

1 File name 생성될 Style Sheet의 파일명

2 Location 생성될 Style Sheet의 위치

3 Insert to ADL ADL 추가 유무 및 추가될 ADL 선택

4 Insert to Form Form 추가 유무 및 추가될 Form 선택

5.3 CSS 파일 편집기

CSS를 편집할 수 있는 CSS Editor는 Selector, Preview Source Code, Properties로 구성됩니다.


‘Selector’는 현재 CSS문서의 모든 Selector들을 Tree의 구조로 보여주며, 각 Selector의 추가/삭제 등의 기능을 지원

합니다.


1 Go to Source 선택된 Selector의 Source Code 위치로 이동. Selector을 Double Clic

k하여 동일한 기능을 수행 가능

2 New Selector 신규 Selector 입력

Theme / CSS | 99

3 Add Selector 선택된 Selector에 Child Selector를 추가.

추가할 수 있는 Selector의 종류를 Popupmenu에서 표시

4 Delete 선택된 Selector를 삭제

5 Rename 선택된 Selector의 이름 바꾸기

6 Compress All 사용되지 않는 Property를 전부 제거합니다.

7 Uncompress 선택된 Selector가 제공하는 Property를 css에 표시합니다.

8 Expand 선택된 Selector의 하위 Tree Item을 펼침

9 Collapse 선택된 Selector의 하위 Tree Item을 감춤


아래그림은 New Selector의 입력 창입니다.

New Selector 입력 창은 Selector List와 Selector Syntax부분, Pseudo List로 구성되며, Selector Syntax는 입력

값에 따라 아래와 같이 동작합니다.


Syntax 설명

1 Class Selector Div 태그의 Class 속성값이 입력 값과 동일한 경우 Style이 적용

2 ID Selector 입력한 값과 동일 id를 가진 Component에만 Style이 적용

3 Attribute Selector 입력된 속성명과 비교기호, 속성값을 판단하여 해당되는 Component에만 Style이

적용

Ex1) Text

‘Text’ 속성을 가지고 있는 경우에만 Style 적용

Ex2) Text = Warning

‘Text’ 속성값이 Warning인 경우에만 Style 적용

Ex3) Text ~= Warning

‘Text’ 속성값이 공백으로 구분된 분리된 목록으로

그 중 하나가 Warning인 경우에만 Style 적용

Ex4) Text |= Wa

‘Text’ 속성값이 하이픈으로 분리된 목록으로

그 중 하나가 왼쪽에서 Wa로 시작하는 경우에만 Style 적용

‘Preview’은 Style이 적용된 결과를 미리 볼 수 있으며, Mouse조작을 통해 Pushed, Mouse Over, Focused, Disabl

ed등의 상태를 확인할 수 있습니다.

‘SourceCode’ 창에서는 현재 편집하고 있는 CSS문서를 보여주며, 개발자가 Style을 직접 수정하여 적용할 수 있습니

다.

기본적으로 CSS Syntax는 선택자와 선언문으로 구성됩니다. 선택자(Selector)는 선언된 속성을 어디에 적용할지 지

정하며, 선언문(Declaration)에서는 속성을 정의하게 됩니다. 속성은 속성명과 속성값으로 구분되며, 속성명은 어떤

종류의 Style을 적용할지 지정하고, 속성값에서 상세 Style을 정의합니다.

Theme / CSS | 101

Properties창에서는 Style을 입력, 수정할 수 있는 속성 값들이 표기되며, Properties창에서 입력된 내용은 SourceC

ode에 자동 update되어 Preview에서 바로 확인할 수 있습니다.

5.4 Theme 생성

Standard Toolbar 아이콘을 클릭하거나 메뉴[File – New – File – XTheme] 선택하여 CSS 파일을 생성할 수 있습니

다.


파일명과 생성 위치를 입력하여 Theme 파일을 생성할 수 있습니다.

속성 설명

1 File name 생성될 Theme 파일명

2 Location 생성될 Theme 파일 위치

Theme / CSS | 103

5.5 Theme 편집기

새로운 Theme를 만들거나 기존 Theme를 수정할 수 있는 Theme 편집기는 아래와 같이 구성됩니다.

속성 설명

1 Folder Tree Theme에 포함될 Image파일 및 CSS 파일 목록

2 Image Preview Image 파일 Preview

3 New Folder 선택된 위치에 새 Folder를 추가

4 New CSS 새 CSS를 생성

5 Insert 선택된 위치에 새 파일을 목록에 추가

6 Delete 선택된 파일을 목록에서 제거



Style을 직관적으로 입력, 수정할 수 있는 Style Property Editor를 사용하여 Form에 사용된 개별 컴포넌트의 CSS St

yle을 편집할 수 있습니다. Style Property Editor에서 수정된 내용은 Properties Window에도 바로 적용되어 확인

할 수 있습니다.

CSS 파일을 수정하는 경우에는 Style Property Editor가 지원되지 않습니다. 소스 코드를 직접 수정하

거나 Properties 창에서 수정해야 합니다.

5.6.1 Text

컴포넌트의 Text 관련 Property를 수정할 수 있습니다.

속성 설명

1 Font Component의 Text font를 수정. (Properties 창의 font 속성)

2 Color Component의 Text Color Style을 수정. (Properties 창의 color 속성)

3 Alignment Component의 Text Align Style을 수정. (Properties 창의 align 속성)

5.6.2 Border

컴포넌트의 Border관련 Property를 수정할 수 있습니다.

Theme / CSS | 105

속성 설명

1 Border Component의 Border Style을 수정. (Properties 창의 border 속성)

2 Border Type Component의 Border Type을 수정. (Properties 창의 bordertype 속성)

3 Focus Border Component의 Focus Border Style을 수정.

(Properties 창의 focusborder 속성)

5.6.3 Background

컴포넌트의 Background 관련 Property를 수정할 수 있습니다.

속성 설명

1 Color Component의 Background Color를 수정.

(Properties 창의 background 속성)


2 Image Component의 Background Image를 수정.

(Properties 창의 background 속성)

3 Gradation Component의 Background Gradation을 수정.

(Properties 창의 gradation 속성)

속성 설명

Gradation의 Style은 정의된 start, end의 position값을 사용하여 Gradation을 만들어주는 Template으로 컴포넌

트의 background 속성을 ‘@gradation’으로 변경합니다. Style에서 Gradation을 해제 하였을 경우에는 backgroun

d의 이전 값을 복구해 줍니다.

5.6.4 Appearance

컴포넌트의 Appearance관련 Property를 수정할 수 있습니다.

속성 설명

1 Opacity Component의 Opacity Style를 수정. (Properties 창의 opacity 속성)

5.6.5 Effect

컴포넌트의 Effect 관련 Property를 수정할 수 있습니다.

Theme / CSS | 107

속성 설명

1 Blur Component의 Blur Style를 수정. (Properties 창의 blur 속성)

2 Outerglow Component의 Glow Style를 수정. (Properties 창의 glow 속성)

3 Shadow Component의 Shadow Style를 수정. (Properties 창의 shadow 속성)

5.6.6 Transformation

속성 설명

1 Origin Component 기준 좌표 (Properties 창의 Transformation[Origin] 속성)

2 Transformation Rotate: Component를 시계방향으로 회전

(Properties 창의 Transformation[Rotate] 속성)

Flip: Component를 상하, 좌우로 대칭되도록 변경

(Properties 창의 Transformation[Flip] 속성)

Skew:Component를 비스듬하게 기울임

(Properties 창의 Transformation[Skew] 속성)

Scale: Component를 원래 크기에 비례하여 변경

(Properties 창의 Transformation[Scale] 속성)

Translate: Component를 이동

(Properties 창의 Transformation[Translate] 속성)

Form Design

6.

6.1 Component 생성

Form Design에는 Componentbar에서 선택된 Component를 생성할 수 있습니다.

Type Definition에 정의된 컴포넌트를 모아둔 Component Toolbox를 사용해서 동일하게 Drag&Drop으로 컴포넌

트를 생성할 수 있습니다. Component Toolbox는 메뉴에서 View > Toolbox를 선택해 활성화할 수 있습니다.

Form Design | 109

자주 사용되는 컴포넌트는 아래와 같습니다.


1 Select 컴포넌트 Select Icon

2 Button 사용자로부터 마우스 입력을 받을 때 사용하는 컴포넌트

3 Div Form안에 다른 Form을 불러와서 하나의 Form인 것처럼 사용하거나,

관련 있는 컴포넌트들을 하나의 그룹으로 묶어서 처리할 경우 사용되는

컴포넌트

4 Combo Edit와 Drop down List를 통합한 형태의 컴포넌트

5 CheckBox Check 표시에 대한 TRUE/FALSE 값을 가지는 컴포넌트

6 ListBox 항목을 List로 나열한 후 선택할 경우 사용되는 컴포넌트.

7 Edit 문자열의 입출력을 가지는 컴포넌트

8 MaskEdit 날짜의 연월일시(yyyy/mm/dd hh:mi:ss) 형식 또는 숫자의 Comma 표

시와 같이 규정된 형식으로 문자열의 입출력을 가지는 컴포넌트

9 TextArea 여러 Line의 문자열의 입출력을 가지는 컴포넌트

10 Menu Menu Item을 구성할 경우 사용되는 컴포넌트

11 Tab 한 화면에서 여러 개의 Tab page를 분할할 경우 사용되는 컴포넌트

12 ImageViewer 화면에 이미지를 표시할 때 사용되는 컴포넌트


13 Radio 제시된 여러 가지 선택사항 중에서 하나의 항목을 선택해야 할 경우 사

용되는 컴포넌트

14 Shape 라인, 삼각형, 사각형, 원, 라운드 사각형 등 도형을 그리기 위한 컴포넌

트

15 Calendar 날짜를 입력할 때 사용되는 컴포넌트

16 Panel 여러 컴포넌트를 Panel을 기준으로 정렬하여 화면을 구성할 때 사용하

는 컴포넌트

17 Static 다른 Presentation Component들에 대한 제목 등을 기술할 때 사용되

는 컴포넌트

18 Grid 스프레드 시트와 유사하게 Dataset의 내용을 표 형식으로 처리하는 컴

포넌트

19 Spin 정해진 규칙에 따라 손쉽게 숫자를 입력 받을 때 사용하는 컴포넌트

20 PopupMenu PopupMenu를 구성할 경우 사용되는 컴포넌트

21 Splitter 화면 분할을 구현하기 위한 컴포넌트

22 GroupBox 화면을 구성할 때 관련 있는 컴포넌트들을 그룹화하는 컴포넌트

23 ProgressBar 작업의 현재 진행 상태를 그래픽을 이용하여 보여주는 컴포넌트

24 ActiveX ActiveX를 사용할 경우 사용되는 컴포넌트

25 PopupDiv 하나의 화면에 여러 개의 부분화면을 구성할 때 사용

26 PropertyAnimation Property Animation 컴포넌트

27 TransitionAnimation Transition Animation 컴포넌트

28 MoveAnimation Move Animation 컴포넌트

29 CompositeAnimation Composite Animation 컴포넌트

30 Dataset 데이터를 Table 형태로 저장하는 컴포넌트

31 FilteredDataset 원본 데이터셋을 바인딩해 논리적인 Table 형태로 저장하는 컴포넌트

32 GraphicPath Form 위에 GraphicPathData의 정보를 가지고 선 및 곡선을 이용해 도

형을 직접 출력할 수 있는 컴포넌트


Form Design의 빈 공간에서 마우스로 드래그 하게 되면 Rubber Band가 사각형으로 표시되며, 사각형의 시작 포인

터 위치와 끝 포인터 위치 및 넓이와 높이 정보를 표시하여 생성될 컴포넌트의 크기를 조절할 때 사용자가 미리 가늠

할 수 있도록 도와줍니다.

Form Design | 111

최종적으로 마우스로 드래그 한 영역의 크기로 컴포넌트가 생성됩니다. 만약 마우스 드래그를 하지 않은 상태로 클릭

만 하게 된다면, Type Definition에 정의된 컴포넌트의 Default Size로 생성하게 됩니다.

Form Design에서 사용은 되지만 Design이 따로 필요 없는 컴포넌트들은 속성을 입력, 수정, 삭제 등의 작업을 할 수

있도록 컴포넌트를 표시 해주는 Invisible Objects가 제공 됩니다.


Invisible Layout창이 표시 되지 않는다면 Design Window[Popup Menu]에서 ‘Show Invisible Object Area’ 메뉴

를 사용하여 Invisible Layout창을 볼 수 있습니다.

Invisible Layout에서는 Icon 표시 방법 등을 아래그림과 같은 팝업 메뉴로 지원합니다.


1 Edit 선택된 Invisible Object에 맞는 편집기를 제공합니다

2 Cut 선택된 Object를 잘라내기

3 Copy 선택된 Object를 복사

4 Paste Object를 붙여 넣기

5 Delete 선택된 Object를 삭제

6 View Invisible Objects 표시 방식을 Big, List, Small, Report 중 선택하여 변

경

Form Design | 113

6.2 선택 변경

Form Design에서는 조합 키를 사용하여 다양한 방식의 컴포넌트 Selection을 지원합니다.

<Tab>키를 이용하여 현재 선택된 컴포넌트를 다른 컴포넌트로 바꿀 수 있습니다. 이동순서는 컴포넌트의 Z-Order순

서에 따라 이동하며, <Shift + Tab>키를 이용할 경우 Z-Order의 역순서로 이동하게 됩니다.

<Ctrl>키 또는 <Shift>키를 이용하여 Selection의 추가 및 해제를 할 수 있는 Multi Selection을 지원합니다.

<Shift> + RubberBand Selection을 이용하여 영역 안의 컴포넌트 Selection 추가 및 Reverse Selection을 할 수 있

습니다.

컴포넌트가 선택되어 있는 상태에서 <ESC>키를 눌렀을 경우 선택된 컴포넌트의 상위 컴포넌트를 선택할 수 있습니

다.


6.3 크기 변경

컴포넌트의 Tracker의 Point가 활성화된 상태에서 하나의 Point를 마우스로 Drag&Drop하면 컴포넌트의 크기를 변

경할 수 있습니다.

만약 여러 개의 컴포넌트가 Multi Select되어 있는 경우, 같은 비율로 컴포넌트의 크기가 변경됩니다.

<Shift>키를 누른 상태에서 마우스로 크기를 변경하면 가로, 세로 일정한 비율로 크기가 변경됩니다.

<Ctrl>키를 누른 상태에서 마우스로 크기를 변경하면, 컴포넌트의 중심으로 상하, 좌우로 동일한 크기로 변경됩니다.

<Shift + Ctrl>키를 누른 상태에서 마우스로 크기를 변경하면, 두 가지 기능이 동시에 적용되어 컴포넌트의 중심을 기

준으로 가로, 세로의 크기가 일정한 비율로 변경됩니다.

Form Design | 115

컴포넌트의 크기 변경은 <Shift>키를 누른 상태에서 키보드의 방향키를 입력하여 변경할 수도 있습니다.

6.4 위치 변경

선택된 컴포넌트들은 키보드의 방향키로 이동 가능하며, 변경된 좌표는 Property에 바로 적용됩니다. 또한 <Ctrl>키

를 누른 상태로 마우스로 이동시키면 해당 지점에 컴포넌트가 복사됩니다.

Form Design에서는 Option값에 따라 컴포넌트를 이동하거나 크기를 변경할 때, 미세한 조정을 쉽게 하기 위해서 다

른 컴포넌트나 Guide Line에 가까이 가져가면 자동으로 해당 위치로 옮기는 Magnetic 기능을 지원합니다.


Magnetic 기능은 메뉴[Tools - Options… - Design]의 Option값에 따라 Canvas의 Dot 또는 다른 컴포넌트에 대

해 동작할지 유무를 정할 수 있습니다. 또한 <Alt>키를 누른 채로 컴포넌트를 이동할 경우, Magnetic 기능을 사용하

지 않을 수 있습니다.

6.5 Guide Line

Guide Line은 Ruler에서 지원되는 기능으로 개발자가 임의로 수평/수직으로 Line을 만들어 Line에 Component를

정렬시키는 등의 기능을 지원합니다.

Ruler위의 원하는 지점을 마우스 클릭으로 Guide Line을 생성할 수 있으며, 생성된 Guide Line은 마우스 드래그로

위치를 변경할 수 있습니다. Guide Line은 Design Window의 영역 밖으로 Drag&Drop 하거나 Guide Line의 역삼

각형을 더블 클릭하여 제거할 수 있습니다.

Form Design | 117

6.6 Tab Order

만들어진 Design이 Launch되어 실행되고 있을 때 <Tab>키를 눌러 컴포넌트에서 다른 컴포넌트로 이동하는 순서를

설정합니다.

Design Window가 활성화되어 있을 때 <Ctrl + D>키를 누르거나, Design Window[Popup Menu]의 Tab Order

Edit 메뉴를 통해 기능을 실행할 수 있습니다.

6.7 속성 설정

Form Design에서 선택된 Component의 속성들은 Properties Window에 표시되며, Properties Window에서 값

을 변경하였을 경우 Component에 바로 적용됩니다.


Property가 하위 Property를 가지고 있을 경우에는 Expand가 가능한 Icon이 Property앞에 표시됩니다. Property

는 하위 Property와 동기화 되어 있어 Property를 직접 수정 하거나, 하위 Property를 수정하면 다른 한쪽에도 자동

으로 반영됩니다.

Form Design | 119

6.8 Bind

Form Design에서는 생성되어 있는 Dataset을 컴포넌트로 Drag&Drop 하거나 Properties Window의 Bind모드를

선택하여 선택된 컴포넌트를 Bind할 수 있습니다.


Drag&Drop으로 컴포넌트에 Dataset을 Bind할 경우 컴포넌트의 종류에 따라 Inner Bind Dataset 또는 Bind Item

Editor 기능이 호출됩니다.

6.8.1 Inner Bind Dataset

ListBox나 Combo와 같이 List형식으로 Data를 표현할 수 있는 컴포넌트에 Dataset을 Bind할 경우에 dataset의 Co

lumn을 지정할 수 있는 Inner Bind Dataset 기능이 호출됩니다.

속성 설명

1 Codecolumn 내부에서 사용되는 Column을 지정

2 Datacolumn Component에 보여지는 Column을 지정

6.8.2 Bind Item Editor

Edit나 Button등 단일 항목만 표현이 가능한 컴포넌트에 Dataset을 Bind할 경우에 Bind Item Editor 기능이 호출됩

니다.

Form Design | 121

속성 설명

1 Bind ID 사용자 분류 ID

2 Component Dataset이 Bind되는 Component의 ID

3 Property Dataset이 Bind되는 Component의 Property

4 Dataset Component에 Bind하는 Dataset

5 Column ID Component에 Bind하는 Dataset의 Column ID

6 Add Bind Item 새 Bind Item을 추가

7 Delete Bind Item 선택된 Bind Item을 삭제

Dataset이 Form이나 컴포넌트에 Bind되었을 경우에는 그림과 같이 Project Explorer의 Item에 표시가 되어 쉽게

확인할 수 있습니다.


6.9 Event 작성

Event를 편집할 컴포넌트를 선택한 후에 Properties Window의 Event 편집 모드를 선택하여, 컴포넌트의 Event를

작성할 수 있습니다. Event는 사용자가 직접 입력하여 작성할 수 도 있지만 Properties의 해당 Event를 더블 클릭하

여 자동으로 Event를 생성할 수도 있습니다.

또는 Form Design 위의 컴포넌트를 더블 클릭하면, 해당 컴포넌트의 기본 이벤트가 자동으로 생성됩니다.

6.10 Transform

Form Design 위의 컴포넌트를 회전시키거나 기울이는 등, 컴포넌트의 형태를 수정할 수 있는 Trasform 기능을 팝업

메뉴로 지원하고 있습니다.

Form Design | 123

Transform 기능이 활성화 되면 그림과 같이 선택된 컴포넌트 주변에 붉은색 Marker가 생성되며 해당 Marker를 Dr

ag하여 컴포넌트를 회전시키거나 기울일 수 있습니다.

컴포넌트는 흰색 원으로 표시되는 회전축을 중심으로 회전이 되며, 회전축은 마우스 Drag로 옮길 수 있습니다.


6.11 Graphic Path Component 사용법

PathData 정보를 통해 선 및 곡선을 표현할 수 있는 Component로 SVG(Scalable Vector Graphics)의 Path 스펙

을 동일하게 지원합니다.

6.11.1 GraphicPath Edit 시작

GraphicPath Component가 선택된 상태에서 지원되는 ‘GraphicPath Edit’ 팝업 메뉴를 선택하여 GraphicPath를

편집할 수 있습니다.

Form Design | 125

6.11.2 PathData 추가

GraphicPath Component의 좌측상단을 시작점으로 원하는 곳에서 마우스를 클릭 하거나 팝업 메뉴를 통해 PathD

ata를 추가하여 사용자가 원하는 모양으로 구성할 수 있습니다.



1 End Edit 변경된 PathData를 적용하고 종료

2 Cancel Edit 변경된 PathData를 취소하고 종료

3 Move To 현재 좌표에서 PathData를 새로 시작

4 Line To 현재 좌표로 선 그리기

5 Curve To 현재 좌표로 곡선 그리기

(처음 그려졌을 때는 Line으로 표현)

6 Elliptical Arc 타원형 호 그리기

rx: x좌표의 반지름

ry: y좌표의 반지름

x-axis-rotation: x회전축

large-arc-flag: large arc flag

sweep-flag: Sweep flag

7 Close Path 시작점과 마지막점을 직선으로 연결하고 닫기

8 Remove Current 선택된 PathData를 삭제

9 Remove All 모든 PathData를 삭제

10 Reset Current Control Poin

t

선택된 PathData의 Control Point를 초기화

Form Design | 127

11 Reset All Control Points 모든 PathData의 Control Point를 초기화

12 Edit Elliptical Arc Propertie

s…

만들어진 Elliptical Arc의 속성값을 편집


6.11.3 PathData 수정

마우스 클릭이나 팝업 메뉴를 통해 추가된 PathData는 마우스와 키보드의 방향키로 위치 변경 및 직선을 곡선으로

또는 곡선을 직선으로 변경할 수 있습니다.

변경하려는 PathData를 클릭하여 활성화 되면 PathData의 Point가 회색에서 검은색으로 변경됩니다.

동일한 위치에 다수의 PathData가 존재하여 클릭으로 선택하기 어려운 경우, <Tab>키를 사용하여 선택 가능하며, <

Shift + Tab>키를 사용하여 역순으로도 선택할 수 있습니다.

선택된 PathData를 마우스로 원하는 위치에 드래그하거나 키보드의 방향키로 1Point씩 이동하여 위치를 변경할 수

있습니다.

각각의 PathData는 곡선을 표현하기 위해 Control Point를 가지고 있습니다. 최초 Line 생성시 Control Point는 좌

표 Point뒤에 위치하기 때문에 Control Point를 변경하기 위해서는 Point를 <ALT>키를 누른 채로 마우스로 클릭하

여 Control Point를 선택한 후에 마우스 드래그로 위치를 변경하여 곡선을 표현할 수 있습니다.


Control Point는 <Ctrl>키를 누른 상태로 마우스로 드래그하여 이동하게 되면 연결된 다른 Control Point가 마우스

의 이동 방향과 반대 방향으로 대칭 이동됩니다.

Control Point는 <Shift>키를 누른 상태로 마우스로 드래그하여 이동하게 되면 연결된 다른 Control Point가 마우스

의 이동 방향과 같은 방향으로 동시 이동됩니다.

6.11.4 PathData 삭제

선택된 특정 PathData를 삭제하거나 전체 PathData를 삭제할 수 있다. 중간에 있는 PathData를 삭제할 경우 앞, 뒤

PathData가 연결됩니다.

Form Design | 129

6.11.5 GraphicPath Edit 종료

<Enter>키 또는 Popup메뉴의 ‘End Edit’를 선택하여 추가, 수정, 삭제된 PathData를 적용하고 종료하거나 <ESC>

키 또는 Popup메뉴의 ‘Cancel Edit’를 선택하여 추가, 수정, 삭제된 PathData를 취소하고 종료할 수 있습니다.

6.12 Style Attribute

Form Canvas 위에서 시각적인 표현이 되는 컴포넌트는 Style Attribute를 보여주며 각각의 Attribute를 수정하여

컴포넌트의 Style을 변경할 수 있습니다.


6.13 Layout Manager(V9.2추가)

‘New Form Wizard’에서 입력한 Layouts정보를 보여줄 수 있도록 Form Design기능이 변경되었습니다.

6.13.1 Layout Tab

현재 Form에서 사용되는 Layout이 탭으로 표시됩니다. 탭의 위치는 Option에서 사용자가 변경할 수 있습니다.

Tab을 전환하여 ‘New Form Wizard’에서 입력한 Layout으로 화면 전환이 가능하며 Layout에 대한 수정 기능을 PO

PUP메뉴로 제공하고 있습니다.


1 Add Layout ‘Layout Tab’의 마지막에 새 Layout을 생성하는 Dialog를 보여줍니다.

Form Design | 131

* 사용중인 Layout Name은 입력할 수 없습니다.

2 Copy & Add Layout 현재 선택된 Layout을 Copy하여 ‘Layouts’의 마지막에 추가합니다.

3 Delete Layout 선택된 Layout을 삭제

4 Layout List 현재 Form에서 사용중인 Layout정보를 수정할 수 있는 Dialog를 보여

줍니다.


6.13.2 Design

‘Default’ 탭에서는 모든 기능이 제공되지만, 추가된 ‘Layout’ 탭에서는 일부 Design 기능이 제한됩니다.

Design 기능 Default 추가 Layout

Component Create, Delete O X

Component Copy, Cut, Paste, Paste Special O X

TabOrder 변경 O X

Form의 Size수정 O X

Form의 Size를 Guide Line으로 표시 X O

Form의 Tracker표시 O X

Div, Tab, Popup등의 하위 Component 수정 O X

Invisible Object 추가, 삭제, 선택 O X

현재 Form에서 사용중인 Layout의 정보를 수정할 수 있는 기능이 POPUP메뉴로 추가되었습니다.


속성 설명

1 Template Template에서 Layout 정보를 가져와서 추가하는 기능

2 Add Layout Form에서 사용될 Layout 정보를 추가하는 버튼

3 Delete Layouts 그리드에서 선택된 Layout정보를 삭제하는 버튼

4 Layout정보를 보여주는 그리

드

Form이 사용할 Layout정보를 보여주는 그리드

● Name : Layout의 이름

○ Layout의 Name으로 대소문자 구별 없이 ‘Default’를 사용할 수 없습니다

○ 같은 Form안에서는 중복된 Layout Name을 사용할 수 없습니다

● Screen : Layout이 사용할 Screen명

● Width : Layout의 넓이

● Height : Layout의 높이

Form Design | 133

‘Default’ 탭에서 Component의 속성값이 변경되었을 경우에 변경된 내용을 다른 Layout에 적용할지 확인하는 메시

지 창이 뜹니다.

‘Default’탭에서 수정이 되어 다른 Layout에 적용할지 확인하는 메시지 창은 아래의 조건을 모두 만족한 경우에만 뜹

니다.

번호 조건

1 다른 Layout에서 변경될 속성이 Source상에 존재하는 경우

2 ‘Layouts Edit’ Option 값이 ‘Ask whenever a property changed’로 되어 있는 경우

‘Default’탭에서 수정이 되어 다른 Layout에 적용할지 확인하는 메시지 창에서 ‘Don’t ask me again’을 체크한 상태

에서 ‘Yes’나 ‘No’를 선택하는 경우 ‘Layouts Edit’ Option값이 바뀌면서 이후에는 메시지 창이 뜨지 않습니다

버튼 ‘Layouts Edit’ Option

Yes Change property Default Layout with other layouts

No Changed property is only Default Layout applied


6.13.3 Properties Windows

Form Design의 정보를 Properties Windows에서 보여주고 있는 경우, Layout 탭에 따라 표시 방법이 달라지게 됩

니다.

Form Design이 추가된 Layout탭이고 Form Properties를 보여준다면 Layout정보가 Properties Window에 추가

로 표시됩니다.

● Default Layout탭에서는 Form Properties중 ‘position’정보를 수정하면 Multi Layout을 사용할 경우, height’

와 ‘width’가 현재 size에 맞게 설정됩니다. Default Layout탭에서 ‘height’와 ‘width’는 hidden property입니

다. Tracker를 사용하여 size 변경을 할 경우 ‘position’과 height’와 ‘width’정보 모두가 바뀌게 됩니다.

● 추가된 Layout탭에서는 Form Properties중 ‘position’정보를 수정할 수는 없지만 ‘Layout Information’정보인 ‘

height’와 ‘width’를 변경하여 크기를 변경할 수 있습니다. Tracker를 사용하여 size 변경을 할 경우 ‘position’정

보는 저장되지 않고 ‘height’와 ‘width’정보만 저장 됩니다.

● ‘Layout Information’에서 보여주는 Properties는 ‘Layout List Dialog’와 동일합니다.

● Form Design의 ‘Default’탭과 다른 정보를 가지고 있는 추가된 Layout탭에서는 Property를 굵은 파랑색으로

표시하게 되었습니다. 따라서 Properties Window에서 표시해주는 정보는 굵기와 색깔에 따라서 아래와 같은

의미를 가지게 됩니다.

색상 굵게 정보

검은색 X Theme와 css만 적용된 기본값을 가진 경우

Form Design | 135

검은색 O ‘Default’탭에서 수정하여 Theme와 css가 적용된 기본값

과 다른 값을 가진 경우

파란색 O 추가된 Layout탭에서 수정한 값이 ‘Default’탭의 정보와

다른 값을 가진 경우

색상 굵게 정보

● Form Design의 추가된 Layout탭에서 Property를 표시할 경우에 아래와 같은 Property는 수정할 수 없도록 비

활성화됩니다.

속성명 설명

Id 모든 컴포넌트의 ID는 추가된 Layout탭에서는 수정할 수 없습니다.

taborder 모든 컴포넌트의 taborder는 추가된 Layout탭에서는 수정할 수 없습니다.

inheritanceid Form Property중에서 inheritanceid는 수정할 수 없습니다.

position Form Property중에서 position은 수정할 수 없습니다.

6.13.4 Sub Layout

Component내부에 Contents를 가지고 있는 Div, PopupDiv, TabPage 등도 Form과 같이 Multi Layout을 가지게

되며 이를 Sub Layout이라 합니다. Sub Layout은 Form Layout과 1:1 매칭이 아니고 별도의 Multi Layout을 구성

합니다. Tab의 경우, TabPage 별로 다른 Multi Layout을 구성할 수 있습니다.

● Sub Layout을 가지고 있는 Component는 자신의 Sub Layout 중에서 해당 Component의 Size에 맞는 최적화

된 Sub Layout을 자동으로 표시해 줍니다.

● Target Component의 Size가 변경될 시, 자동으로 Sub Layout Change가 일어나고 새로운 Size에 맞는 최적

화된 Sub Layout을 찾아줍니다.

Sub Layout을 가지고 있는 Component의 하위 Contents는 Form의 Default Layout에서만 직접 편집이 가능합니

다. (기존의 편집 방법과 동일)

직접 편집되는 내용은 해당 Component가 보여주고 있는 Sub Layout에 저장됩니다.


단, Default Layout이 아닌 추가 Layout (예: 위 그림에서 iPhoneW Layout)에서는 Contents를 직접 편집 할 수 없

습니다. 따라서, 하위 Contents는 선택 및 수정 할 수 없으며 하위 Contents 선택 시, 최상위 Component가 선택됩

니다. 추가 Layout에서 Contents를 편집 하기 위해서는 Sub Layout Editor를 사용하여 편집하여야 합니다.

추가 Layout에서 Contents를 편집 하기 위해서는 Sub Layout Editor를 사용하여 편집하여야 합니다. Sub Layout

을 가진 Component는 Sub Layout Edit, Set Sub Layout 2개의 Popup Menu를 제공합니다.

● Sub Layout Edit메뉴를 선택하면 Sub Layout을 편집할 수 있습니다.

● Set Sub Layout메뉴를 선택하면 Component의 Size를 선택한 Sub Layout의 크기로 변환해 줍니다. Set Sub

Layout메뉴는 default Sub Layout이외의 Sub Layout이 존재할 경우에만 나타납니다.

Form Design | 137

Sub Layout Edit메뉴를 선택하면 아래 그림과 같은 Sub Layout Editor가 나타납니다.

● Link Url을 가지고 있는 Component는 Sub Layout Editor를 실행 할 수 없습니다.

● Contents Editor와 마찬가지로 더블클릭으로도 실행할 수 있습니다.

● 최초 Sub Layout Editor 실행 시, 현재 Target Component의 Default Size가 default Sub Layout의 Size가

됩니다.

● 해당 Component 및 하위 Component를 제외한 다른 Component는 선택 및 편집할 수 없습니다

● Scroll에 가려져 보이지 않던 Component 들도 편집 가능합니다.

● 해당 Component의 Size에 맞는 Ruler가 제공됩니다.

● Sub Layout Editor 역시 Form Layout 처럼 Default를 제외한 Layout에서는 Component생성 등의 일부 기능

이 제한됩니다.

● Sub Layout Editor만의 Popup Menu가 제공됩니다.


● Component를 선택하면 Popup Menu가 약간 다르게 제공됩니다.


1 Add Sub Layout 새 Sub Layout을 생성하는 Dialog를 보여줍니다.

단,사용중인 Sub Layout Name은 입력할 수 없습니다.

2 Delete Sub Layout 현재 선택된 Layout을 Sub Layout List에서 제거합니다. 단, ‘Default’

는 삭제할 수 없습니다.

3 Sub Layout List 현재 Component에서 사용중인 Sub Layout정보를 수정할 수 있는 대

화상자를 띄워줍니다.

Default Sub Layout을 포함한 모든 Sub Layout의 정보를 편집 및 수

정할 수 있습니다.

Form Design | 139

Add Layout: Sub Layout 추가 버튼

Delete: Sub Layout 삭제 버튼

Name: Sub Layout 의 이름

단, Default Sub Layout의 이름은 임의로 지정 불가

Width: Sub Layout의 넓이

Height: Sub Layout의 높이

4 Apply Size & End Edit 현재 edit 중인 sub Layout의 size로 target component를 설정하고

현재까지 Sub Layout Editor에서 작업한 undo buffer를 하나로 묶어

서 design undo list에 추가합니다.

5 End Edit 현재까지 Sub Layout Editor에서 작업한 undo buffer를 하나로 묶어

서 design undo list에 추가합니다.

6 Cancel Edit 현재까지 Sub Layout Editor에서 작업한 내용을 모두 undo 하고 원상

복귀 합니다.


● Sub Layout의 Size를 변경 할 수는 있지만 Target Component의 Position은 변하지 않습니다.


● 각 Sub Layout 마다 Target Component의 Style 및 일부 속성을 설정 할 수 있습니다.

○ default Layout의 수정 내용은 <Div>등의 Tag내에 저장됩니다.

○ 그 외 하위 Sub Layout의 수정 내용은 해당 <Layout>에 저장됩니다.

● 기타 Sub Layout Editor의 조작관련 사항

○ 각 Sub Layout 안에 있는 하위 Contents를 가진 Component는 Form Design과 마찬가지로 default Lay

out에서만 편집 가능합니다.

○ Sub Layout Editor 내에서 또 다른 Sub Layout Editor를 실행하지 못합니다.

○ Contents Editor는 실행 할 수 있습니다.

○ 그 외 Component의 조작 같은 경우, Form Design과 동일하게 동작합니다.

● Sub Layout Undo

○ Sub Layout Editor에서 Undo는 Form Design과 따로 관리됩니다.

○ Sub Layout Editor 실행 전의 Undo는 Sub Layout Editor 안에서 사용 할 수 없습니다.

○ Sub Layout Editor 안에서 누적된 Undo는 Editor 종료와 동시에 사라지거나 한꺼번에 Form Design Und

o List에 추가됩니다. (Sub Layout Editor 안의 편집 내용을 하나의 Undo로 인식)

Form Design | 141

6.14 Step(V9.2추가)

Step이란 여러 개의 step으로 이루어진 페이지를 하나의 Form에서 개발할 수 있는 기능을 의미합니다.

Form의 stepcount Property 값을 조정하면 아래그림과 같이 step이 표시됩니다.

번호 설명

1 현재 편집중인 Step을 표시.

현재 편집중인 Step은 마우스포인터의 위치로 판단합니다.

2 Step과 Step 사이의 안내선

● 여러 개의 step이 있다고 해서 Form의 실질적인 Size가 변하지 않습니다.

● 실행 시에는 1개의 Step만 보여지게 됩니다.

6.15 Position2(V9.2추가)

비율인 “%”로 Position을 지정할 수 있도록 하는 position2 속성을 추가하였습니다. 또한, UX-Studio에서 Ruler, D

otGrid(화면 바닥에 보이는 점들)등의 Position2 관련 편집기능을 제공합니다.


6.15.1 Tracker

Component의 positiontype을 position2로 설정할 경우 tracker 모양이 다르게 표시됩니다.

Positioin2 Tracker는 고정된 변을 붉은 색으로 표시하여 position2의 값을 별도로 확인하지 않아도 Anchor 상태를

알 수 있습니다.

6.15.2 Ruler / Dot Grid

Position2는 Percent입력을 지원하기 때문에, Form Design상에서 손쉽게 확인할 수 있도록 Percent단위로 정보를

표시해 주는 기능이 추가되었습니다.

Ruler의 Popup Menu에서 Show Pixel Ruler / Show Percent Ruler를 선택할 경우 해당 단위로 Ruler와 Dot Grid

의 표시 방법이 변경됩니다.

Form Design | 143

6.15.3 Component Resize Info

Component를 한 개만 선택한 상태에서 Tracker로 크기를 조정하는 경우 수정되는 크기 정보를 표시해 줍니다.

만약 Ruler단위가 Percent로 표시 중이라면 Resize Info도 Percent 단위로 표시됩니다.

6.15.4 Position Editor

사용자가 쉽게 Position정보를 설정할 수 있도록 UI를 가진 Editor를 제공합니다. Position Editor는 Form Design의

Minitoolbar에서 호출할 수 있습니다.


Minitoolbar는 XPLATFORM 9.2 버전에서 추가된 기능으로 자주 사용되는 Style Property을 메뉴를

사용 손쉽게 수정할 수 있는 기능입니다.

Position Editor에서 수정된 값은 대상 Component가 사용중인 positiontype에 맞는 position, position2값으로 변

경되어 반영됩니다.

6.15.5 Properties Window

Properties Window에서는 추가된 position2의 단위를 쉽게 변경할 수 있도록 기능을 지원합니다.

Form Design | 145

Percent단위는 position2에서만 지원되며, Component의 positiontype이 position을 사용하는 경우

에는 해당 기능으로 값이 변경되지 않습니다.

공통 Script(.xjs)

7.

UX-Studio에서 User Component, Script File등을 저장할 때 만들어지는 xjs파일은 텍스트 방식인 js파일과는 다르

게 XML로 만들어지며 Root Tag <Script>에는 반드시 type=”xscript4.0” 속성이 존재해야 합니다.

<?xml version="1.0" encoding="utf-8"?>

<Script type="xscript4.0">

<![CDATA[class UC_BUTTON extends Button

{

}

}}>

</Script>

만들어진 xjs파일은 include 선언을 사용해서 다른 xjs, xfdl등 Script파일에서 동일하게 사용할 수 있습니다.

include "Base::UC_Button.xjs";

function Button01_onclick(obj:Button, e:ClickEventInfo)

{

}

User Component

8.

XPLATFORM에서 지원되는 컴포넌트나 만들어진 다른 User Component를 상속받아서 새로운 User Component

를 만들 수 있습니다.

8.1 User Component 생성

User Component는 메뉴[File – New – Item – User Object]나 Toolbar를 사용하여 생성할 수 있습니다.

상속받을 Base object class를 선택하고 UserObject Class의 이름을 지정하면, 해당 위치에 User Component가 생

성됩니다.


속성 설명

1 Base object class 상속받을 Base object

2 UserObject Class name 생성될 UserObject 명

3 Location 생성될 UserObject의 파일 위치

4 Insert to TypeDefinition TypeDefinition 추가 유무

5 TypeDefinition’s ID TypeDefinition에 등록될 ID

TypeDefinition에 자동 또는 수동으로 User Component를 추가하여 다른 컴포넌트들과 동일하게 사용할 수 있습니

다.

8.2 User Component 편집

User Component는 Script로 작성되며, 편집 창에서는 다른 Script 편집 창과 동일한 기능을 지원합니다.

User Component | 149

8.3 Function 추가

Project Explorer에 추가된 User Component의 PopupMenu에서 선택된 User Component에 Function을 추가


Function은 [그림] 의 입력 창을 통해 생성됩니다.


속성 설명

1 Access 생성될 Function 외부 접근 허용 방식

2 Function 생성될 Function 명

3 Parameter 매개변수 명

4 Type 매개변수 타입

5 Add 입력된 매개변수를 Parameter List에 추가

6 Remove Parameter List에서 선택된 Parameter를 삭제

7 Parameter List Function의 매개변수 목록

8 Function signature 생성될 Function의 예상 모습

8.4 Property 추가

Project Explorer에 추가된 User Component의 PopupMenu에서 선택된 User Component에 Property를 추가


Property는 입력 창을 통해 생성됩니다.

User Component | 151

속성 설명

1 Access 생성될 Property의 외부 접근 허용 방식

2 Property ID 생성될 Property 명

3 ReadOnly ReadOnly 유무 설정

4 Function signature 생성될 Property의 예상 모습

8.5 Type Definition 등록

기존에 생성한 User Component나 생성시 Type Definition에 등록하지 않은 User Component는 수동으로 Type

Definition에 등록하여 사용할 수 있습니다.

Type Definition 편집 화면의 Add Object에서 생성되어 있는 User Component의 경로를 입력하고 추가하면 Type

Definition에 등록됩니다.

Debug

9.

‘버그가 있는 프로그램’을 Debug하려면 디버깅 대상 프로그램을 Debugger로 실행시킵니다. 실행 중에 특정 명령에

도달하거나 특정 변수를 수정할 필요가 있을 때 Debugger를 통해 일시 정지합니다. 이와 같이 프로그램의 실행이 일

시 정지되어 있는 동안 사용자는 데이터의 현재 값을 점검하고 예상 경로를 따라 프로그램이 진행하고 있는지 확인합

니다.

Debug는 프로젝트 전체를 대상으로 하는 ‘Debug’와 현재 활성화된 Form만 대상으로 하는 ‘Debug Form’ 으로 구

분되며 이 문서에서 설명되는 Debug 기능은 ‘Debug Form’ 기능을 기준으로 설명 됩니다.

9.1 Debug Start

1부터 100까지의 합을 구하는 Form을 예로 들어 설명합니다.

프로그램 실행도중 변화하는 값을 체크하려면 [그림]와 같이 Breakpoint를 설정합니다. Breakpoint 설정은 해당 라

인으로 커서를 옮겨 <F9>를 누릅니다. Breakpoint를 제거하려면 해당 라인에 커서를 옮긴 다음 <F9>를 다시 누르면,

Breakpoint가 제거됩니다.

Debug | 153

Debug 모드로 프로그램을 실행합니다. 소스코드에서 최소한 하나 이상의 Breakpoint를 설정하였다면, Debug Too

lbar 아이콘을 클릭하거나 메뉴[Debug – Start Form Debugging]을 선택합니다. 단축키 <F6>을 눌러도 같은 기능

을 수행합니다.

아래그림은 프로그램이 일시 중지된 화면입니다. 화면에 표시된 화살표는 현재 실행되고 있는 명령 행의 위치를 표시

합니다.


Debug가 시작되면 아래그림과 같이 Debug, Watch, Call Stack 및 Variables 창이 활성화 됩니다.

9.2 Debug Window

9.2.1 Watch Window

디버거가 추적한 변수와 식의 현재 값 또는 프로그램이 일시 정지될 때마다 특정 변수의 현재값을 알고 싶은 경우 해

당 변수를 Watch 창에 등록합니다. 프로그램 일시 정지될 때 또는 프로그램 진행 중에 변화되는 값이 표시됩니다.

Debug | 155

Watch Window의 ‘Expression’에 사용자가 Keyboard로 직접 변수 명을 입력하거나 Script창 또는 Variables창에

서 Drag&Drop으로 변수 명을 추가할 수 있습니다.

Watch창에 추가된 Expression은 <Del>키로 삭제가 가능하며, Watch창 목록은 UX-Studio에서 별도로 관리되기

때문에 Project Open시 마지막 Expression목록을 표시합니다.


9.2.2 Variables Window

일시 정지 위치에서 접근 가능한 변수의 현재 값을 나타내는 화면입니다.

9.2.3 Debug Window

디버거의 실행상태를 나타내는 화면입니다.

9.2.4 Call Stack Window

일시 정지 위치까지 거쳐온 함수를 역순으로 표시하는 화면입니다.

Debug | 157

9.3 Debug Menu

Debug Menu에서 지원되는 기능은 아래와 같습니다.


1 Start Debugging Project의 디버깅 모드 시작 <F5>

2 Start Form

Debugging

현재 선택된 Form의 디버깅 모드 시작 <F6>

3 Stop Debugging 디버깅 모드 종료

4 Restart 디버깅 모드를 재시작

5 Step Into 한 스텝씩 디버그, 스텝에 다른 함수 호출 시 해당 함수로 이동 <F11>

7 Step Over 현재 함수의 나머지 부분을 실행하고, 함수 호출이

이루어진 다음 문장에서 멈춤

8 Step Out 한 스텝씩 디버그, 한 스텝을 모두 실행하고 다음 스텝으로 이동 <F10>

9 Run to Cursor 현재 커서가 위치한 줄까지 실행한 후에 멈춤

10 Toggle Breakpoint Breakpoint를 설정/해제 <F9>

11 Delete Selected

Breakpoint

Breakpoints창에서 선택된 Breakpoint를 해제

12 Delete All

Breakpoints

모든 Breakpoint를 해제

13 Go To Source 선택된 Breakpoint의 Source Code 위치로 이동

14 Enable/Disable Breakpoints창에서 선택된 Breakpoint를 활성화/비활성화


Selected Breakpoint

15 Enable/Disable All

Breakpoints

설정된 모든 Breakpoint를 활성화/비활성화 하는 기능


Animation

10.

선택된 Component에 다양한 Animation Effect를 지정할 수 있습니다.


10.1 Preview

Design Window에서 선택된 Animation을 미리 확인할 수 있습니다.

Form Design 위의 컴포넌트들은 Form Design 영역 안에서 Animation을 보여주지만 ADL의 Frame에 Animation

을 적용하여 Preview를 동작할 경우에는 Form Launch와 동일한 동작으로 Project가 실행되어 Frame에 적용된 An

imation을 재생하고 자동으로 사라지게 되어 있습니다.

10.2 Composite Animation Properties

Composite Animation의 속성을 설정합니다.

Animation | 161

속성 설명

1 ID Animation ID

2 Duration Animaiton 지속시간

3 Start Time Trigger 발생 이후 Animation 시작시간

4 Target Comp Animation이 지정된 Component

5 Interpolation 중간값 계산을 위한 Interpolation function 지정

10.3 Interpolation Graph(Composite Animation)

Animation의 예상 동작을 Graph로 표현합니다.

10.4 Composite Animation Items

Composite Animation에 새로운 Animation을 추가하거나 기존 Animation을 목록에서 제거할 수 있습니다.


속성 설명

1 List Composite Animation List를 표시

2 Add List에 Animation 추가

3 Delete List에서 선택된 Animation을 List에서 삭제

10.5 Common Properties

Animation의 기본 속성을 설정합니다.

속성 설명

1 ID Animation ID

2 Duration Animaiton 지속시간

3 Start Time Trigger 발생 이후 Animation 시작시간

4 Target Comp Animation이 지정된 Component

5 Interpolation 중간값 계산을 위한 Interpolation function 지정

Animation | 163

10.6 Interpolation Graph

Animation의 예상 동작을 Graph로 표현합니다.

10.7 Transition Animation Properties

속성 설명

1 Type Transition Animation 종류

2 Direction Transition Effect 시작 방향

3 Change Prop List Transition Animation 과정 이후에 변경되어야 할 style prop list


10.8 Property Animation Properties

속성 설명

1 Target prop 중간 값이 반영될 property

2 From value 시작값

3 To value 종료값

4 By value Current value 에서부터의 offset 값

5 Ending mode Animation 종료 시 유지되어야 하는 값에 대한 정의

10.9 Animation Bind

생성된 Animation은 Drag&Drop으로 컴포넌트에 적용하거나 Properties Window에서 직접 선택하여 적용할 수

있습니다.

Animation | 165

Drop&Drop으로 Animation을 컴포넌트에 적용하면 Animation의 대상이 될 컴포넌트의 속성을 선택할 수 있는 팝

업 창이 나타나며 적용되길 원하는 속성을 선택하면 Animation이 적용됩니다.

기타

11.

11.1 Auto Recover

Tools > Options메뉴에서 AutoRecover 기능의 사용 유무와 시간을 설정하면 UX-Studio에서 편집하는 파일들을

설정한 시간단위로 임시파일에 저장하는 기능을 수행합니다.

기타 | 167

파일을 편집하는 중에 UX-Studio가 비정상 종료되어 편집 중 이였던 프로젝트를 Open하면 임시파일을 확인하여 파

일 복구 유무를 묻는 메시지 창이 뜹니다.

AutoRecover는 복구 대상 목록을 리스트로 표시 해주고 해당 파일을 편집 당시에 저장된 임시파일을 사용하여 복구

하게 됩니다.


11.2 Use user-defined metadata

개발자들은 사용자 정의 메타데이터 기능을 이용하여 미리 정의해 놓은 용어 데이터를 UX-Studio에서 서버로부터

호출하여 사용할 수 있습니다. 규모가 큰 프로젝트일수록 사용하는 용어의 양이 방대한데 이 기능을 활용하면 개발시

발생할 수 있는 용어 사용에 대한 혼선을 줄일 수 있습니다.

Tools > Options > Environment > Business Service 메뉴에서 사용자 정의 메타데이터 기능의 사용 유무를 설정할

수 있으며 서버에서 제공하는 용어 데이터를 각 컴포넌트의 text 속성에서 손쉽게 선택하여 설정할 수 있습니다.

UX-Studio에서 사용자 정의 메타데이터 기능을 사용하기 위해서는 다음의 세 단계를 따릅니다.

1. 메타데이터 파일 작성

2. 서비스 등록

3. 옵션 설정

11.2.1 메타데이터 파일 작성

사용자 정의 메타데이터 기능을 제공하려면 애플리케이션 서버에 반드시 서비스 데이터셋 파일과 모델 데이터셋 파

일을 위치시켜야 합니다. 서비스 데이터셋 파일은 어떤 서비스를 제공하는지에 대한 메타 정보 파일이며, 모델 데이터

셋 파일은 실제 용어 데이터를 담고 있는 파일입니다.

아래 [표]는 서비스 데이터셋 파일에서 담고 있어야 할 칼럼 정보입니다.

Column ID 설명

1 domain 호출할 모델이 포함된 도메인 이름(metadata로 고정)

2 model 호출할 모델 이름(metadata로 고정)

3 description 모델에 대한 설명

4 datasource 모델이 사용하는 데이터소스 이름

위 [표]의 칼럼 정보를 참조하여 아래 예제 코드와 같이 서비스 파일을 작성합니다. 파일명은 제공하려는 정보에 맞게

적절히 작성하면 되는데 본 예제에서는 termServiceList.jsp로 합니다. 여기서 domain, model 칼럼의 값은 metada

ta로 명시해야 정상적으로 동작하므로 주의하시기 바랍니다.

<?xml version="1.0" encoding="utf-8"?>

<Root xmlns="http://www.tobesoft.com/platform/dataset" ver="5000">

<Parameters>

<Parameter id="ErrorCode" type="int">0</Parameter>

<Parameter id="ErrorMsg" type="string">success</Parameter>

</Parameters>

<Dataset id="termService">

기타 | 169

<ColumnInfo>

<Column id="DOMAIN" type="string" size="255"/>

<Column id="MODEL" type="string" size="255"/>

<Column id="DESCRIPTION" type="string" size="255"/>

<Column id="DATASOURCE" type="string" size="255"/>

</ColumnInfo>

<Rows>

<Row>

<Col id="DOMAIN">metadata</Col>

<Col id="MODEL">metadata</Col>

<Col id="DESCRIPTION">description</Col>

<Col id="DATASOURCE">DB</Col>

</Row>

</Rows>

</Dataset>

</Root>

서비스 데이터셋 파일을 작성했으면 이제 모델 데이터셋 파일을 작성해야 합니다. 모델 데이터셋 파일에는 output 데

이터셋과 metadata 데이터셋 정보를 반드시 기술해줘야 합니다. output 데이터셋은 UX-Studio로 제공할 데이터셋

정보를 담고 있으며 metadata 데이터셋은 실제 용어 정보를 담고 있습니다.

아래 [표]는 모델 데이터셋 파일에서 담고 있어야 할 칼럼 정보입니다.

Column ID 설명

1 name 데이터의 이름

2 type 데이터의 타입

3 description 데이터에 대한 설명

아래 XML 코드는 모델 데이터셋 파일의 내용이며 본 예제에서는 termServiceModelData.jsp로 사용합니다.

<?xml version='1.0' encoding='utf-8'?>

<Root xmlns='http://www.tobesoft.com/platform/Dataset' ver='5000'>

<Parameters>

<Parameter id='svcid' type='string'></Parameter>

<Parameter id='ErrorCode' type='int'>0</Parameter>

</Parameters>

<Dataset id='output'>

<ColumnInfo>

<Column id='name' type='STRING' size='50'/>

<Column id='type' type='STRING' size='50'/>

<Column id='description' type='STRING' size='256'/>


</ColumnInfo>

<Rows>

<Row>

<Col id='name'>metadata</Col>

<Col id='type'>dataset</Col>

<Col id='description'>metadata</Col>

</Row>

</Rows>

</Dataset>

<Dataset id='metadata'>

<ColumnInfo>

<Column id='Eng_NM' type='STRING' size='50'/>

<Column id='NM' type='STRING' size='50'/>

<Column id='DESC' type='STRING' size='256'/>

</ColumnInfo>

<Rows>

<Row>

<Col id='ENG_NM'>VCSG_AFST_DSB_TAM</Col>

<Col id='NM'>VISA-CASH</Col>

<Col id='DESC'>가맹점지급총액</Col>

</Row>

<Row>

<Col id='ENG_NM'>VCSH_PCHCM_FE</Col>

<Col id='nm'>VISA-CASH</Col>

<Col id='DESC'>매입사수수료</Col>

</Row>

<Row>

<Col id='ENG_NM'>VCSH_IS_CO_FE</Col>


<Col id='desc'>발급수수료</Col>

</Row>

<Row>

<Col id='ENG_NM'>VCSH_USE_TAM</Col>


<Col id='DESC'>수수료총액</Col>

</Row>

</Rows>

</Dataset>

</Root>

위의 과정을 통해 서비스 데이터셋 파일(termServiceList.jsp)과 모델 데이터셋 파일(termServiceModelData.jsp)

기타 | 171

을 작성했으면 UX-Studio에서 URL로 접근할 수 있게 애플리케이션 서버에 두 파일을 위치시킵니다.

사용자 정의 메타데이터의 데이터셋 파일을 작성할 경우에 UX-Studio에서 임시로 데이터셋 컴포넌트

를 하나 생성하여 Dataset Contents Editor로 내용을 작성한 후 생성된 결과 Source를 복사/붙여넣기

하면 손쉽게 작성이 가능합니다.

11.2.2 서비스 등록

사용자 정의 메타데이터 정보를 애플리케이션 서버로부터 받아오기 위해서는 UX-Studio에 서비스로 등록이 되어 있

어야 합니다.

서비스를 새로 등록하기 위해서는 TypeDefinition에서 Edit로 들어갑니다.

Edit TypeDefinition 팝업이 뜨면 Services 탭으로 이동한 후 Add 버튼을 누릅니다.

Add Service Group 팝업이 뜨면 아래 [표]를 참조하여 새로 서비스를 등록합니다.


Service ID 서비스 이름

Service Type 서비스 타입(metadata를 선택)

Service URL 서비스 경로(http를 포함한 URL을 입력하고, 끝에 ‘/’입력)

Search Column Text 속성의 선택창에서 검색 속도 향상을 위해 text 검색 범위로 사용할 칼럼의 이름. 여러 개의

칼럼을 입력시에는 칼럼의 구분을 ‘;’(세미콜론)으로 하며, 아무 것도 입력하지 않을 경우에는 모

든 칼럼을 대상으로 검색.

모든 항목을 입력한 후 OK 버튼을 누르면 새로운 서비스가 등록된 것을 확인할 수 있습니다. 그런 다음 아래 [그림]과

같이 ServiceList와 DatasetLayout을 입력한 후 OK를 누릅니다.

기타 | 173

ServiceList 서비스에 관한 정보를 담고 있는 서비스 데이터셋 파일 이름

DatasetLayout 모델에 관한 정보를 담고 있는 모델 데이터셋 파일 이름

그러면 아래 [그림]의 왼쪽과 같이 등록한 서비스 명이 보이게 되는데 이를 선택한 후 refresh 해줍니다. 서비스를 ref

resh 해주면 아래 [그림]의 오른쪽과 같이 서비스에 속해 있는 모델이 보이게 되는데 그 모델을 선택하여 다시 refres

h 해줍니다.


서버에 ServiceList 파일과 DatasetLayout 파일이 서비스 URL에 위치해 있고 서비스가 정상적으로 등록되었다면 아

래 [그림]과 같이 Project Explorer 창에 서비스와 모델이 로딩된 모습을 확인할 수 있습니다.

기타 | 175

11.2.3 옵션 설정

Tools > Options > Environment > Business Service의 Use user-defined metadata 옵션을 적용하면 각 컴포넌

트의 text 속성에 생긴 확장 버튼을 이용하여 용어 데이터를 선택하여 사용할 수 있습니다.

11.2.4 사용방법

위의 과정을 모두 마쳤으면 사용자 정의 메타데이터 기능을 사용할 준비가 완료되었습니다. UX-Studio에서 이를 사

용하려면 우선 폼에 컴포넌트를 생성하여 위치시킵니다. 그리고 아래 [그림]과 같이 컴포넌트를 선택한 후 Propertie

s 창에서 text 속성을 선택합니다.


text 속성 옆에 새로 생긴 확장 버튼을 누르면 아래 [그림]과 같이 Metadata 팝업이 뜹니다.

기타 | 177

적절한 용어를 선택한 후 OK 버튼을 누릅니다. 아래 [그림]과 같이 컴포넌트의 text 속성에 용어가 적용되었는지 확

인합니다.

부록

12.

12.1 Project Explorer Icon

Project Explorer에서 표시되는 아이콘은 다음과 같은 의미를 가집니다

메뉴 기능

1 Project Project

2 TypeDefinition Form이 실행되기 위한 Configure 정보들

3 Updates Update 그룹

4 Update Update

5 Components Component 그룹

6 Component TypeDefinition에 정의된 컴포넌트

7 User Component 기존 Component를 상속받아 사용자가 작성한 컴포넌트

8 Composite

Component

다수의 Component를 그룹화하여 사용자가 작성한 컴포넌트

9 GlobalVariables 전역변수들

10 Objects Object 그룹

11 Object Object

12 Variables Variable 그룹

13 Variable 변수

14 Datasets Dataset 그룹

15 Dataset Dataset

16 Column Dataset에 사용된 Column 정보

17 Images Image 그룹

18 Image Project에 사용된 Image

부록 | 179

19 ADL ADL

20 MainFrame Project의 MainFrame

21 ChildFrame MainFrame내의 Frame구성 정보

22 ApplicationMenu Application Menu 정보

23 Widgets Widget 그룹

24 Widget Widget 정보

25 Trays Tray 그룹

26 Tray Tray 정보

27 Styles Style 그룹

28 Style Style 정보

29 Themes Theme 그룹

30 Theme Theme 정보

31 ScreenInfo Screen 그룹

32 Screen Screen 정보

33 Forms(FDLs) 서비스 그룹

34 Form(FDL) Form 정보

35 Layout Form Design에 표시되는 컴포넌트 그룹

36 Script Form의 Script에 선언된 Func 그룹

37 Func Script에서 선언된 Func Item

38 Bind BindItem 그룹

39 BindItem 각 Bind 항목 정보

12.2 Toolbar 기능

UX-Studio는 다양한 기능을 Toolbar형태로 지원하고 있습니다.

12.2.1 Standard(V9.2변경)

Standard Bar는 UX-Studio가 제공하는 기본 기능을 모아놓은 곳입니다.

연관성 있는 기능을 통합하여 이전에 제공되었던 ADL/Theme Toolbar가 제거되고 Standard Toolbar에 ADL, The

me, Screen정보를 선택할 수 있는 콤보컨트롤이 추가되었습니다.


메뉴 기능

1 Open Project Project 열기

2 Open UX-Studio에서 편집 가능한 형식의 파일 열기

3 New 새로운 Project나 Form, User Component, css, xml, xjs등을 생성

4 Save 현재 열린 Form문서 저장

5 Save All 현재 열린 모든 Form문서 저장

6 Cut 선택 영역을 잘라내어 클립보드에 저장

7 Copy 선택 영역을 복사해서 클립보드에 저장

8 Paste 클립보드에 저장된 내용 붙여 넣기

9 Print 현재 문서 인쇄

10 ADL 현재 Active된 ADL

11 Theme 현재 Active된 ADL에서 사용중인 Theme

12 Screen Launch시 사용될 Screen 정보

(Launch Project기능을 사용할 때 사용됨)

13 Launch Project Project 실행

14 Quick View 현재 활성화된 Form 실행

15 Options UX-Studio의 Options창 표시

12.2.2 Align

Align Bar는 Form화면 개발 시 컴포넌트 정렬 기능을 모아놓은 곳입니다.

메뉴 기능

1 Align Lefts 마지막에 선택된 Component의 Left 값을 기준으로 정렬

2 Align Centers 마지막에 선택된 Component의 수평 Center 값을 기준으로 정렬

3 Align Rights 마지막에 선택된 Component의 Right 값을 기준으로 정렬

4 Align Tops 마지막에 선택된 Component의 Top 값을 기준으로 정렬

5 Align Middles 마지막에 선택된 Component의 수직 Center 값을 기준으로

정렬

부록 | 181

6 Align Bottoms 마지막에 선택된 Component의 Bottom 값을 기준으로 정렬

7 Same Width 마지막에 선택된 Component의 Width 값을 기준으로 너비를 맞춤

8 Same Height 마지막에 선택된 Component의 Height 값을 기준으로 높이를 맞춤

9 Same Size 마지막에 선택된 Component의 Size를 기준으로 크기 맞춤

10 Space distribute Horizontal

ly

Component 사이를 같은 수평 간격으로 분배 배치(V9.2변경). 처음과

끝 Component 사이의 공간을 수평으로 분배하여 균등한 간격으로 Co

mponent를 재배치합니다.

11 Space distribute Vertically Component 사이를 같은 수직 간격으로 분배 배치(V9.2변경). 처음과

끝 Component 사이의 공간을 수직으로 분배하여 균등한 간격으로 Co

mponent를 재배치합니다.

12 Same space Horizontally Component 사이를 같은 수평 간격으로 정렬 배치(V9.2추가). 사용자

가 직접 Dialog를 통해 Component의 간격을 조절할 수 있습니다

13 Same space Vertically Component 사이를 같은 수직 간격으로 정렬 배치(V9.2추가). 사용자

가 직접 Dialog를 통해 Component의 간격을 조절할 수 있습니다

14 Posit Center 선택된 Component들을 Form Canvas의 수평 Center로 이동

15 Posit Middle 선택된 Component들을 Form Canvas의 수직 Center로 이동

16 Posit Left 선택된 Component들을 Form Canvas의 Left로 이동

17 Posit Right 선택된 Component들을 Form Canvas의 Right로 이동

18 Posit Top 선택된 Component들을 Form Canvas의 Top으로 이동

19 Posit Bottom 선택된 Component들을 Form Canvas의 Bottom으로 이동

20 Bring to Front 선택된 Component를 맨 앞으로 가져오기

21 Send to Back 선택된 Component를 맨 뒤로 보내기

22 Bring Forward 선택된 Component를 앞으로 가져오기

23 Send Backward 선택된 Component를 뒤로 보내기

24 Lock Control Component의 위치를 마우스로 이동하지 못하도록 고정시키거나 해제


12.2.3 TextStyle

TextStyle Bar는 Form화면 개발 시 선택된 컴포넌트의 TextStyle 설정 기능을 모아놓은 곳입니다.

메뉴 기능

1 Font Name 글꼴 이름 변경

2 Font Size 글꼴 크기 변경

3 Bold 텍스트를 굵게 표시

4 Italic 텍스트를 기울임 꼴로 표시

5 Strikeout 취소줄 표시

6 UnderLine 텍스트에 밑줄 표시

7 Anti-Alias 텍스트를 매끄럽게 표현

8 Front Size Up 글꼴 크기 늘림

9 Front Size Down 글꼴 크기 줄임

10 Text Align Left 텍스트를 왼쪽에 맞춤

11 Text Align Center 텍스트를 가운데 맞춤

12 Text Align Right 텍스트를 오른쪽에 맞춤

13 Text Align Top 텍스트를 위쪽에 맞춤

14 Text Align Middle 텍스트를 중간에 맞춤

15 Text Align Bottom 텍스트를 아래쪽에 맞춤

12.2.4 Objects

Objects Bar는 TypeDefinition에 등록된 컴포넌트 모임입니다. 화면 편집에 해당 컴포넌트를 직접 끌어다 놓음으로

써 화면을 구성할 수 있습니다.

메뉴 기능

부록 | 183

1 Select 컴포넌트 선택 Icon

2 Div Form안에 다른 Form을 불러와서 하나의 Form인 것처럼 사용하거나,

관련 있는 컴포넌트를 하나의 그룹으로 묶어서 처리할 경우 사용되는 컴

포넌트

3 Button 사용자로부터 마우스 입력을 받을 때 사용하는

컴포넌트

4 PopupDiv 하나의 화면에 여러 부분화면을 구성할 때 사용하는 컴포넌트

5 Combo Edit와 Drop down List를 통합한 형태의 컴포넌트

6 CheckBox Check 표시에 대한 TRUE/FALSE 값을 가지는 컴포넌트

7 ListBox 항목을 List로 나열한 후 선택할 경우 사용되는 컴포넌트

8 Edit 문자열의 입출력을 가지는 컴포넌트

9 MaskEdit 날짜의 연월일시(yyyy/mm/dd hh:mi:ss)형식 또는 숫자의

Comma 표시와 같이 규정된 형식으로 문자열의 입출력을 가지는 컴포

넌트

10 TextArea 사용자에게 여러 Line의 문자열을 입력 받거나 표시할 경우 사용되는 컴

포넌트

11 Menu Menu Item을 구성할 경우 사용되는 컴포넌트

12 Tab 한 화면에서 여러 개의 Tab page를 분할할 경우 사용되는 컴포넌트

13 ImageViewer 화면에 이미지를 보여주는 컴포넌트

14 Radio 제시된 여러 가지 선택사항 중에서 하나의 항목을 선택해야 할 경우 사

용되는 컴포넌트

15 Shape 선, 삼각형, 사각형, 원 등 도형을 그리기 위한 컴포넌트

16 Calendar 날짜를 입력할 때 사용되는 컴포넌트

17 Static 다른 Presentation Component들에 대한 제목 등을 기술할 때 사용되

는 컴포넌트

18 Grid 스프레드 시트와 유사하게 Dataset의 내용을 표 형식으로 처리하는 컴

포넌트

19 Spin 정해진 규칙에 따라 손쉽게 숫자를 입력 받을 때 사용하는 컴포넌트

20 PopupMenu PopupMenu를 구성할 경우 사용되는 컴포넌트

21 Splitter 화면 분할을 구현하기 위한 컴포넌트

22 GroupBox 화면을 구성할 때 관련 있는 컴포넌트를 그룹화 하는 컴포넌트

23 ProgressBar 작업의 현재 진행 상태를 그래픽을 이용하여 보여 주는 컴포넌트


24 ActiveX ActiveX를 사용할 경우 사용되는 컴포넌트

25 PropertyAnimation PropertyAnimaiton 컴포넌트

26 TransitionAnimation TransitionAnimation 컴포넌트

27 MoveAnimation MoveAnimation 컴포넌트

28 CompositeAnimation CompositeAnimation 컴포넌트

29 Dataset 데이터를 Table 형태로 저장하는 컴포넌트

30 FilteredDataset Bind된 Dataset을 지정된 조건에 따라 Filter된 데이터를 보여주는 컴포

넌트

31 FileDialog 파일을 선택할 수 있는 Dialog 컴포넌트

32 GraphicPath Form위에 PathData의 정보를 가지고 선 및 곡선을 이용해 도형을 직접

출력할 수 있는 컴포넌트

33 VirtualFile File을 사용할 경우에 쓰이는 컴포넌트

12.2.5 Debug

Debug Bar는 디버깅 시 필요한 기능을 모아놓은 곳입니다.

메뉴 기능

1 Debug Project Project의 디버깅 모드 시작

2 Debug Form 현재 선택된 Form의 디버깅 모드 시작

3 Restart Debugging 디버깅 모드를 재시작

4 Stop Debugging 디버깅 모드 종료

5 Step Into 한 스텝씩 디버그, 스텝에 다른 함수 호출 시 해당 함수로 이동

6 Step Over 현재 함수의 나머지 부분을 실행하고, 함수 호출이 이루어진 다음 문장

에서 멈춤

7 Step Out 한 스텝씩 디버그, 한 스텝을 모두 실행하고, 다음 스텝으로 이동

8 Run to Cursor 현재 커서가 위치한 줄까지 실행 후 멈춤

9 Toggle Breakpoint Breakpoint를 설정/해제하는 기능

10 Delete Selected

Breakpoint

Breakpoints Window의 Breakpoint 목록에서 선택된 Breakpoint를

제거

부록 | 185

11 Delete All

Breakpoints

설정된 모든 Breakpoint를 해제

12 Go To Source 선택된 Breakpoint의 Source Code 위치로 이동.

13 Enable/Disable All Breakpo

ints

설정된 모든 Breakpoint를 활성화/비활성화하는 기능

12.2.6 HTML5

HTML5 Compile관련 기능을 모아놓은 툴바입니다. Local HTML5 Compiler인 XHTML5Compiler.exe와 연동됩니

다(2012년 2월 패치부터 적용).

메뉴 기능

1 Application Compile 프로젝트 전체를 컴파일 합니다. Compile된 결과물

은 옵션에서 지정된 Output경로에 저장됩니다. 만약,

옵션에 Output경로가 지정되지 않았을 경우에는 아

래와 같은 팝업창에서 Output경로를 저장할 수 있습

니다.

2 Service Compile Project Explorer에서 선택한 Service를 컴파일 합니

다

3 File Compile 현재 편집 중인 Form Design파일만 컴파일 합니다

4 Stop Compile 컴파일을 중지합니다

5 Web Browser Launch와 Quick View시에 사용되는 Web Browse

r를 선택합니다.

6 Launch Project(HTML5) 프로젝트를 선택된 Web Browser로 실행합니다. 아

래 그림과 같은 팝업 창에 Compile된 프로젝트의‘La

unchProject.jsp' URL을 입력하여 실행할 수 있습니

다.

7 QuickView(HTML5) 현재 편집 중인 Form을 선택된 Web Browser로 실

행합니다


아래 그림과 같은 팝업 창에 Compile된 프로젝트의 ‘

QuickView.jsp' URL을 입력하여 편집 중인 Form을

실행할 수 있습니다.

8 QuickView Debug(HTML5) 현재 편집 중인 Form을 선택된 Web Browser로 De

bugging모드로 실행합니다

12.2.7 Bookmark

Bookmark Bar는 Script 또는 Source 편집 중에 특정 줄로 쉽게 이동할 수 있는 Bookmark 기능을 모아놓은 곳입니

다.

메뉴 기능

1 Toggle Bookmark 현재 커서 위치에 Bookmark를 설정 및 해제

2 Previous Bookmark 이전 Bookmark를 찾아 커서를 위치

3 Next Bookmark 다음 Bookmark를 찾아 커서를 위치

4 Previous Bookmark

in Document

현재 편집 창에서 이전 Bookmark를 찾아 커서를 위치

5 Next Bookmark

in Document

현재 편집 창에서 다음 Bookmark를 찾아 커서를 위치

6 Clear Bookmarks 설정된 Bookmark를 모두 해제

7 Clear Bookmarks

in Document

현재 편집 창에서 설정된 Bookmark를 모두 해제

12.2.8 CSS Selector

각 Selector의 추가/삭제 등의 기능을 모아놓은 곳입니다.

부록 | 187

메뉴 기능

1 Go to Source 선택된 Selector의 Source Code 위치로 이동. Selector을 Double Clic

k하여 동일한 기능을 수행 가능

2 New Selector 신규 Selector 입력

3 Add Decendant Selector 선택된 Selector에

Decendant Selector를 추가

4 Add Child Selector 선택된 Selector에 Child Selector를 추가

5 Delete 선택된 Selector를 삭제

6 Rename 선택된 Selector의 이름 바꾸기

7 Compress All 사용되지 않는 모든 Property를 제거

8 Uncompress 선택된 Selector의 Property를 모두 표시

12.3 Menu Bar

Menu Bar는 UX-Studio에서 제공하는 기능을 모아놓은 곳입니다.

12.3.1 File



1 New

Project: 새로운 Project 생성

Item:새로운 Item 생성

File: 새로운 File 생성

Form: 새로운 Form 생성

User Object: 새로운 User Object 생성

Style Sheet(.css): 현재 Project에 새로운 Style Sheet 파일생성

XML(.xml): 현재 Project에 새로운 XML 파일생성

Script (.xjs): 현재 Project에 새로운 xjs파일 생성

XTheme(.xtheme): 현재 Project에 새로운 Theme파일 생성

2 Open

Project: Project 새로 열기

File: UX-Studio에서 편집 가능한 형식

(xjs, css, xfdl, xtheme 등)파일 열기

3 Close 현재 열린 Form 닫기

4 Close Project 현재 열린 Project 닫기

5 Save 현재 활성화된 편집 화면을 저장하기

6 Save As… 현재 활성화된 편집 화면을 다른 이름으로 저장하기

7 Save All 현재 열린 모든 편집 화면 및 Project Explorer에서 변경된 모든 내용을

저장하기

8 Recent Files 최근에 Open한 File 목록을 표시

9 Recent Projects 최근에 Open한 Project 목록을 표시

10 Launch Project Project 실행

11 Import…

부록 | 189

다른 Project에서 사용중인 xfdl을 현재 Project로 Import 하거나 [Exp

ort Project] 기능으로 생성된 Export Project파일을 Import하여 신규

프로젝트를 생성하는 기능

12 Export Project 현재 열린 Project를 File로 Export

13 Project Template 현재 열린 Project를 Project Template로 등록, 신규 Project 생성시에

재사용 가능

14 Layout Template Layout Template 등록, Layout Template을 등록하여 새로운 Form을

생성할 때 등록된 Template을 적용가능

15 Print Source 또는 Script의 텍스트를 출력

16 Print Setup 출력 페이지 설정

17 Save the

Project as

Compiled

XML

Project를 Complied된 XML 파일로 저장

18 Exit UX-Studio 종료

12.3.2 Edit



1 Undo 최종 단계의 이전 상태로 되돌림

2 Redo Undo하기 이전 상태로 되돌림

3 Cut 선택된 영역을 잘라서 클립보드에 삽입

4 Copy 선택된 영역을 클립보드에 삽입

5 Paste 클립보드에 있는 내용을 붙여 넣기

6 Paste Special 클립보드에 있는 컴포넌트의 Property 및 Bind정보를 사용자가 선택하

여 붙여 넣기

7 Delete 선택된 컴포넌트나 선택된 영역의 텍스트삭제

8 Select All Source나 Script 창에서 모든 텍스트 선택

9 Find…

Source나 Script 창에서 문자열 찾기

10 Find in File…

지정경로의 파일들 중 지정단어를 포함한 파일 찾기

11 Replace

Source나 Script창에서 특정 문자열을 다른 문자열로 교체

12 Goto Line…

Source나 Script창에서 특정 라인으로 커서 이동

13 Bookmark

부록 | 191

Bookmark메뉴에서 제공하는 기능은 Toolbar[Bookmark Bar]의 기능

과 동일.

14 Comment

Selection

Source나 Script창에서 선택된 영역의 문자열을 주석처리

15 UnComment

Selection

Source나 Script창에서 선택된 영역의 문자열의 주석해제

16 Refresh File

Status

파일을 Reload


12.3.3 View


1 Toolbars

Standard: Standard Bar를 표시/숨김

Align: Align Bar를 표시/숨김

TextStyle: TextStyle Bar를 표시/숨김

Objects: Objects Bar를 표시/숨김

Debug: Debug Bar를 표시/숨김

HTML5: HTML5 Bar를 표시/숨김

Bookmark: Bookmark Bar를 표시/숨김

CSS Selector: CSS Selector Bar를 표시/숨김

2 Toolbox Component Toolbox를 표시/숨김


3 Statusbar Statusbar를 표시/숨김

4 Project

Explorer

Project Explorer창을 표시. Project Explorer창이 열려있을 때는

focus만 이동

5 Properties Properties창을 표시. Properties창이 열려있을 때는 focus만 이동

6 Style Property

Editor

Style Property Editor창을 표시. Style Property Editor창이 열려있을

때는 focus만 이동

7 Output

Message: Output창을 표시

Debug: Debug창을 표시

Find Result1: Find Result1창을 표시

Find Result2: Find Result2창을 표시

Global Bookmark: Global Bookmark창을 표시

8 Debug

Breakpoints: Breakpoints창을 표시

Call Stack: Call Stack창을 표시

Variables: Variables창을 표시

Watch: Watch창을 표시


12.3.4 Design

부록 | 193


1 Align

Align메뉴에서 제공하는 기능은 Toolbar[Align Bar]의 기능과 동일.

2 Space

Space메뉴에서 제공하는 기능은 Toolbar[Align Bar]의 기능과 동일.

3 Size

Size메뉴에서 제공하는 기능은 Toolbar[Align Bar]의 기능과 동일.

4 Position

Position메뉴에서 제공하는 기능은 Toolbar[Align Bar]의 기능과 동일.

5 Arrange

Arrange메뉴에서 제공하는 기능은 Toolbar[Align Bar]의 기능과 동일.

6 Zoom


현재 열려있는 화면의 확대/축소 비율 설정

7 Layout Resize

Default Layout을 기준으로 자동 또는 입력값만큼 컴포넌트의 크기가

Resize됩니다.

8 Tab Order

Editor

Tab Order Editor 기능 호출

9 Tab Order View Form Design화면에 컴포넌트의 Tab Order를 지속적으로 표시합니다

10 Show Bind

State

컴포넌트의 Bind 상태를 표시

11 Quick View 현재까지 만들어진 Form을 XPLATFORM으로 실행

12 Quick View

(Variable)

변수를 입력 받아 현재까지 만들어진 Form을 XPLATFORM으로 실행


12.3.5 Tools


1 Options… UX-Studio의 Options 설정창 열기

2 Customize... UX-Studio의 Menu, Toolbar등을 설정하는 Customize 설정창 열기

12.3.6 HTML5

HTML5 Compile관련 기능을 모아놓은 툴바입니다. Local HTML5 Compiler인 XHTML5Compiler.exe와 연동됩니

다(2012년 2월 패치부터 적용).

부록 | 195


1 Compile Application 프로젝트 전체를 컴파일 합니다. Compile된 결과물은 옵션에서 지정된

Output경로에 저장됩니다.만약, 옵션에 Output경로가 지정되지 않았

을 경우에는 아래와 같은 팝업창에서 Output경로를 저장할 수 있습니

다.

2 Compile Service Project Explorer에서 선택한 Service를 컴파일 합니다

3 Compile File 현재 편집 중인 Form Design파일만 컴파일 합니다

4 Stop Compile 컴파일을 중지합니다

5 Execute Application 프로젝트를 선택된 Web Browser로 실행합니다. 아래 그림과 같은 팝

업 창에 Compile된 프로젝트의‘LaunchProject.jsp' URL을 입력하여

실행할 수 있습니다.

6 QuickView 현재 편집 중인 Form을 선택된 Web Browser로 실행합니다

아래 그림과 같은 팝업 창에 Compile된 프로젝트의‘QuickView.jsp' U

RL을 입력하여 편집 중인 Form을 실행할 수 있습니다.


7 QuickView Debug 현재 편집 중인 Form을 선택된 Web Browser로 Debugging모드로 실

행합니다


12.3.7 Hybrid


1 Make Project Archive 프로젝트 파일을 xzip파일로 만들고, TypeDefinition에 등록합니다.

2 Make Theme Archive Theme 파일을 xzip파일로 만듭니다.

3 Make Run Template Hybrid App을 구동시키는 Run.html을 포함한 Run.xzip 및 hybrid_ty

pedef.xml파일을 만듭니다.

12.3.8 Window

부록 | 197


1 Cascade 편집중인 창을 계단식으로 배치

2 Tile 편집중인 창을 바둑판식으로 배치

3 Arrange Icons 최소화된 아이콘 정렬

4 Close 선택된 편집 창을 닫기

5 Close All But This 현재 열려있는 화면을 제외한 모든 화면 닫기

6 Close All 모든 편집 창을 닫기

7 Next 다음 편집 창으로 이동

8 Previous 이전 편집 창으로 이동

9 Maximize Active Window 미 구현된 기능

12.3.9 Help


1 Help 도움말 창 표시

2 About UX-Studio… UX-Studio 정보 창 표시

3 What’s New ? XP9.2에서 추가/변경된 정보를 보기

12.3.10 Grid Contents Editor

Grid Component는 Properties창에서 볼 수 있는 속성 외에 Grid를 구성하는 각 Cell 단위 별로 많은 속성을 가지고

있습니다. Grid Contents Editor는 Grid의 Contents Property를 편집할 수 있는 Editor입니다.

Design Window에서 Grid Component를 더블 클릭하여 Grid Contents Editor을 호출할 수 있습니다.

Grid Contents Editor는 기본 편집 창, 속성 창 및 Design Source로 구성되어 있습니다. 기본 편집 창에서는 Popup

Menu와 단축키를 사용하여 Cell을 추가/삭제하거나 속성을 편집할 수 있습니다. 기본 편집 창의 최상단에는 Colum

n Index가 표시되고 아래로는 Head, Body, Summary로 구분되어 표시됩니다. 속성 창에는 Cell 구분, 해당 Cell의

속성 목록, 각각의 속성 값이 표시됩니다.


기본 편집 창의 Popup Menu에서 Column이나 Row를 추가할 수 있습니다.


1 Add Column Column 추가

2 Add Head Row Head Row 추가

3 Add Body Row Body Row 추가

4 Add Summ Row Summ Row 추가

Cell이 선택된 상태에서는 Popup Menu가 지원됩니다.

부록 | 199


1 Cut Column 또는 Row 잘라내기

2 Copy Column 또는 Row를 선택 후 복사하기

3 Paste 클립보드에 복사된 내용을 붙여 넣기

Append

맨 뒤에 붙여 넣기

Insert

삽입하여 붙여 넣기

4 Add Column 또는 Row 추가

5 Insert Column 또는 Row 삽입

6 Delete Column 또는 Row 삭제

7 Merge Cells 선택된 Cell 영역을 병합

8 Split Cell Merge된 Cell을 다시 나눔

9 Same Width 전체 영역이 선택된 경우 모든 Column의 Width

값을 첫 번째 Column의 Width 값으로 변경

10 Undo Undo 기능

11 Redo Redo 기능

Design Source에서는 Grid Contents를 XML형태로 표시하고 직접 편집할 수 있습니다.