xframe getting started guide 20130131 xframe 운영 환경 아키텍처 ... xframe 개발 환경...

SOFTBASE XFRAME DEVELOPMENT GUIDE SERIES

xFrame Getting Started 가이드

2013.01.31

서울특별시 구로구 구로 3 동 한신 IT 타워 1110 호

Phone 02-2108-8030 • Fax 02-2108-8031 www.softbase.co.kr

Copyright © 2010 SOFTBase Inc. All rights reserved

XFrame Getting Started 가이드

- 2 -

0 장. 개요 ............................................................................................................................................................................ 7

본 문서의 목적 ............................................................................................................................................................................................. 7

주요 내용 ........................................................................................................................................................................................................ 7

관련 자료 ........................................................................................................................................................................................................ 7

1 장. xFrame 개요 ............................................................................................................................................................. 8

X-Internet 개요 ............................................................................................................................................................................................. 8

X-인터넷의 정의 .................................................................................................................................................................................... 10

X-인터넷과 RIA(Rich Internet Application)와의 관계 ........................................................................................................... 10

X-인터넷의 도입 배경 ......................................................................................................................................................................... 11

X-인터넷의 도입 목적 및 도입 효과 ............................................................................................................................................. 12

xFrame 솔루션 개요 ................................................................................................................................................................................. 13

솔루션 구성 및 특장점........................................................................................................................................................................ 13

xFrame 개발 환경 아키텍처 ............................................................................................................................................................. 14

xFrame 실행 환경 아키텍처 ............................................................................................................................................................. 15

xFrame 실행 환경 리소스(파일) 접근 아키텍처 ....................................................................................................................... 16

xFrame 운영 환경 아키텍처 ............................................................................................................................................................. 17

2 장. xFrame 설치 환경 ................................................................................................................................................. 18

데이터베이스 설치.................................................................................................................................................................................... 18

서버 개발 환경 설치 ................................................................................................................................................................................ 19

3 장. 화면 개발 기초 ....................................................................................................................................................... 20

xFrame-DevStudio 시작 ......................................................................................................................................................................... 20

데이터베이스 접속 ............................................................................................................................................................................... 21

프로젝트 생성 ......................................................................................................................................................................................... 22

개발툴 초기 화면 .................................................................................................................................................................................. 23

화면 생성 및 UI 콘트롤 배치 ............................................................................................................................................................... 25

화면 속성 지정 ....................................................................................................................................................................................... 26

텍스트 컨트롤 생성 .............................................................................................................................................................................. 27

텍스트 컨트롤 속성 변경 ................................................................................................................................................................... 28

한글 필드 컨트롤 생성........................................................................................................................................................................ 29

한글 필드 컨트롤 속성 변경 ............................................................................................................................................................. 30

버튼 컨트롤 생성 및 속성 변경 ...................................................................................................................................................... 31

디렉토리 생성 ......................................................................................................................................................................................... 32

화면 저장 .................................................................................................................................................................................................. 34

미리보기.................................................................................................................................................................................................... 35

목목차차��


- 3 -

UI 컨트롤의 이벤트 처리 ....................................................................................................................................................................... 36

화면 이벤트 처리 .................................................................................................................................................................................. 36

화면 이벤트 처리 스크립트 개발 ................................................................................................................................................... 37

버튼 이벤트 처리 .................................................................................................................................................................................. 38

버튼 이벤트 처리 스크립트 개발 ................................................................................................................................................... 39

콘솔 트레이스 설정 .............................................................................................................................................................................. 41

screen 및 factory 오브젝트 .................................................................................................................................................................. 42

공통 모듈 생성 ........................................................................................................................................................................................... 43

공통 모듈 생성 ....................................................................................................................................................................................... 43

공통 모듈 개발 ....................................................................................................................................................................................... 45

공통 모듈 사용 ....................................................................................................................................................................................... 45

도움말 사용 ................................................................................................................................................................................................. 47

VBScript 도움말 ..................................................................................................................................................................................... 47

JAVAScript 도움말 ................................................................................................................................................................................ 48

XFrame@DevStudio 도움말 ............................................................................................................................................................. 49

4 장. 콤보 박스 컨트롤 ................................................................................................................................................... 51

코드 데이터 개요 ....................................................................................................................................................................................... 51

코드 데이터를 처리하는 방법 .............................................................................................................................................................. 52

코드 데이터 등록 ....................................................................................................................................................................................... 53

디렉토리 생성 ......................................................................................................................................................................................... 53

코드 등록 .................................................................................................................................................................................................. 54

콤보 박스 화면 개발 ................................................................................................................................................................................ 56

화면 저장 디렉토리 생성 ................................................................................................................................................................... 56

화면 생성 .................................................................................................................................................................................................. 56

화면 UI 구성 ............................................................................................................................................................................................ 57

코드 데이터 연동 .................................................................................................................................................................................. 58

데이터 셋 연동 ....................................................................................................................................................................................... 59

콤보 박스 데이터 속성 연동 ............................................................................................................................................................. 62

스크립트를 이용하여 코드 데이터 설정 ..................................................................................................................................... 63

화면 테스트 ................................................................................................................................................................................................. 64

5 장. 그리드 컨트롤 ........................................................................................................................................................ 65

그리드 컨트롤 개요 .................................................................................................................................................................................. 65

그리드 컨트롤 아키텍처 ......................................................................................................................................................................... 66

그리드 컴포넌트 구성 요소 이름 ................................................................................................................................................... 66

그리드 컴포넌트 속성 및 이벤트 구조 ........................................................................................................................................ 67

그리드 데이터 타입 .............................................................................................................................................................................. 68

그리드 입력 타입 .................................................................................................................................................................................. 69

그리드 화면 개발 ....................................................................................................................................................................................... 71


- 4 -

화면 저장 디렉토리 생성 ................................................................................................................................................................... 71

화면 생성 .................................................................................................................................................................................................. 71

화면 UI 구성 ............................................................................................................................................................................................ 72

그리드 속성 ............................................................................................................................................................................................. 73

그리드 칼럼 속성 지정 방법 ............................................................................................................................................................. 74

그리드 칼럼 수평 헤더부 속성 ........................................................................................................................................................ 75

그리드 칼럼 데이터부 속성 .............................................................................................................................................................. 75

그리드 이벤트 처리 .................................................................................................................................................................................. 78

그리드 로우 추가, 삭제 처리 ............................................................................................................................................................ 78

통계 속성 지정 ........................................................................................................................................................................................... 79

화면 테스트 ................................................................................................................................................................................................. 80

6 장. 팝업 화면 개발 ....................................................................................................................................................... 81

팝업 화면 개요 ........................................................................................................................................................................................... 81

팝업 호출 화면 생성 ................................................................................................................................................................................ 82

화면 저장 디렉토리 생성 ................................................................................................................................................................... 82

화면 생성 .................................................................................................................................................................................................. 83

화면 UI 구성 ............................................................................................................................................................................................ 83

화면 저장 .................................................................................................................................................................................................. 84

팝업 화면 생성 ........................................................................................................................................................................................... 85

화면 생성 .................................................................................................................................................................................................. 85

화면 UI 구성 ............................................................................................................................................................................................ 86

화면 저장 .................................................................................................................................................................................................. 86

팝업 화면 로드 ........................................................................................................................................................................................... 87

팝업 화면과의 데이터 전달 .................................................................................................................................................................. 88

팝업 화면에서 팝업 호출 화면으로 데이터 전달 .................................................................................................................... 89

팝업 화면 취소 기능 개발 ................................................................................................................................................................. 89

화면 테스트 ................................................................................................................................................................................................. 90

7 장. 이벤트 설명 ............................................................................................................................................................ 91

이벤트 개요 ................................................................................................................................................................................................. 91

단순 이벤트 ............................................................................................................................................................................................. 92

리턴 이벤트 ............................................................................................................................................................................................. 93

화면 생성 ...................................................................................................................................................................................................... 94

화면 저장 .................................................................................................................................................................................................. 94

화면 UI 구성 ............................................................................................................................................................................................ 95

탭 컨트롤 .................................................................................................................................................................................................. 95

탭 속성 설정 ............................................................................................................................................................................................ 97

단순 이벤트 처리 ....................................................................................................................................................................................... 98

리턴 이벤트 처리 ....................................................................................................................................................................................... 99


- 5 -

키 이벤트 처리 ......................................................................................................................................................................................... 100

결과 학인 ................................................................................................................................................................................................ 101

8 장. 프레임 화면 개발 ................................................................................................................................................. 102

UI 프레임 개요 ......................................................................................................................................................................................... 102

프레임 화면 개요 ................................................................................................................................................................................ 103

프레임 화면 개발 ..................................................................................................................................................................................... 104

프레임 화면 생성 ................................................................................................................................................................................ 104

프레임 화면 저장 ................................................................................................................................................................................ 104

프레임 화면 UI 구성 .............................................................................................................................................................................. 105

콤보 박스 컨트롤 ................................................................................................................................................................................ 105

프레임 화면 UI 구성 .......................................................................................................................................................................... 105

프레임 화면 이벤트 개발 ..................................................................................................................................................................... 107

화면 타이틀 정보 표시 함수 개발 ................................................................................................................................................ 107

열기 버튼 이벤트 처리...................................................................................................................................................................... 108

화면 URL 필드 키 다운 이벤트 처리 .......................................................................................................................................... 109

탭 컨트롤 탭 아이템 변경 이벤트 처리 ..................................................................................................................................... 109

탭 콘트롤 탭 아이템 삭제 이벤트 처리 ..................................................................................................................................... 109

Reload 버튼 이벤트 처리 ................................................................................................................................................................ 110

닫기 버튼 이벤트 처리...................................................................................................................................................................... 110

정렬 버튼 이벤트 처리...................................................................................................................................................................... 111

화면 로드 이벤트 처리...................................................................................................................................................................... 111

화면 테스트 ............................................................................................................................................................................................... 112

9 장. 메뉴 화면 개발 ..................................................................................................................................................... 113

메뉴 화면 개요 ......................................................................................................................................................................................... 113

메뉴 로드 화면 UI 구성 ........................................................................................................................................................................ 114

메뉴 로드 화면 생성 .......................................................................................................................................................................... 114

메뉴 로드 화면 저장 .......................................................................................................................................................................... 114

메뉴 로드 화면 UI 구성 .................................................................................................................................................................... 115

메뉴 화면 UI 구성 ................................................................................................................................................................................... 116

메뉴 화면 생성 ..................................................................................................................................................................................... 116

칼라 속성 지정 방법 .......................................................................................................................................................................... 117

메뉴 화면 저장 ..................................................................................................................................................................................... 117

메뉴 화면 UI 구성 ............................................................................................................................................................................... 118

메뉴 로드 화면 이벤트 개발 ............................................................................................................................................................... 119

메뉴 버튼 마우스 인(on_mousein) 이벤트 처리 .................................................................................................................... 119

탭에 화면 로드 함수 구현 ............................................................................................................................................................... 120

메뉴 화면 이벤트 개발 .......................................................................................................................................................................... 121

각 메뉴 버튼 이벤트 처리 ............................................................................................................................................................... 121


- 6 -

화면 테스트 ............................................................................................................................................................................................... 123

10 장. 트리 프레임 개발 ............................................................................................................................................... 124

트리 프레임 개요 ..................................................................................................................................................................................... 124

트리 프레임 화면 UI 구성.................................................................................................................................................................... 124

트리 프레임 화면 생성...................................................................................................................................................................... 124

트리 프레임 저장 ................................................................................................................................................................................ 124

트리 프레임 화면 UI 구성 ............................................................................................................................................................... 125

메뉴 화면 이벤트 개발 .......................................................................................................................................................................... 127

트리 컨트롤에 메뉴 정보 구성 ...................................................................................................................................................... 127

함수 개발 ................................................................................................................................................................................................ 128

트리 컨트롤의 이벤트 처리 ............................................................................................................................................................ 130

숨기기, 보이기 버튼 이벤트 처리 ................................................................................................................................................ 131

11 장. 멤버 오브젝트 .................................................................................................................................................... 132

멤버 오브젝트 개요 ................................................................................................................................................................................ 132

화면 생성 .................................................................................................................................................................................................... 132

화면 스크립트 변경 ................................................................................................................................................................................ 133


- 7 -

이 장에서는 X-Internet 솔루션인 xFrame 솔루션에 대한 개요을 기술합니다. 이 장에서 기술하는 내용은

아래와 같다.

본 문서의 목적

주요 내용

관련 자료

본 문서는 xFrame 솔루션을 개발하는 사용자가 기본적인 개발 작업을 진행할 수 있도록, 기초적인 솔루션

기술에 대한 정보를 포함하고 있다.

좀더 세부적이고, 고급 기술에 대해서는 각 부분에 대한 가이드 문서를 참조한다.

본 문서에서는 아래와 같은 내용을 포함하고 있다.

xFrame 개요 및 솔루션 아키텍처

xFrame 화면 개발

XDataSet을 이용한 서버 통신

본 문서와 관련된 자료는 다음과 같다.

솔루션 홈페이지 : http://www.softbase.co.kr

00 장장.. 개개요요

본 문서의 목적

주요 내용

관련 자료


- 8 -

이 장에서는 X-Internet 솔루션인 xFrame 솔루션에 대한 개요를 기술합니다. 이 장에서 기술하는 내용은

아래와 같다.

X-Internet 개요

xFrame 솔루션 개요

“X-인터넷”이란 용어의 기원은 2000 년 10 월에 포레스터 리서치(Forester Research)의 CEO 인 George F.

Colony 가 자사의 웹 페이지에 기고한 ‘MY VIEW: X INTERNET’이라는 글이다.

X-인터넷은 아래의 그림과 같이 특정 기술을 의미하지 않는다. 시대가 변화함에 따라 달라지는 사용자의

인식과 패러다임에 맞춰 적절히 순응해야 필요가 생겼는데, X-인터넷은 바로 이런 과정에서 흘러나온 하나의

개념일 뿐이다.

X-인터넷은 더 많은 사람과 컴퓨터를 연결하는 기술이다. (출처: 포레스터 리서치)

11 장장.. xxFFrraammee 개개요요

X-Internet 개요


- 9 -

컴퓨팅 환경이 아래의 그림과 같이 변경되면서 사용자의 UI 에 대한 부분은 보다 보편적이고, 다양한 UI 를

표현하여 사용자에게 보다 편리한 환경을 제공하기 위해서 변경되고 있다.

컴퓨팅 시스템의 변천 과정 (출처: 어도비)


- 10 -

X-인터넷의 정의

X-인터넷이란 용어의 아래와 같이 정의된다.

X-Internet은 “수행가능한 인터넷(eXecutable Internet)”과 “확장된 인터넷(eXtended Internet)” 개념을 통

해서 설명할 수 있다.

즉, X-Internet이란 실행성(eXecutable)과 확장성(eXtended)이 뛰어난 웹 다음의 인터넷을 지칭하는 말

로, 웹 아키텍처와 클라이언트/서버 아키텍처의 한계성을 극복하고 장점만을 수용한 새로운 인터넷 아키

텍처를 의미한다.

X-인터넷과 RIA(Rich Internet Application)와의 관계

X-인터넷과 RIA 라는 용어와의 관계는 다음과 같다.

RIA(Rich Internet Application)는 매크로미디어의 플래시(Flash) 기술을 발전시키면서 생겨난 용어이다.

ActiveX 기술을 이용해 화면에 좀 더 미려하고 섬세한 UI를 표현하고, 액션스크립트(ActionScript)라는 언

어를 제공해 개발자가 원하는 형태로 다이내믹한 화면 개발을 가능하게 했다.

여기에 DB 액세스까지 지원하면서, 자신들의 제품을 RIA라고 칭한 것이다.

X-인터넷은 인터넷 애플리케이션을 다룬 큰 패러다임이고, RIA는 보다 클라이언트 측면에 초점이 맞춰

진 것으로, 매크로미디어라는 특정 벤더에 의해 만들어진 개념이다.


- 11 -

X-인터넷의 도입 배경

X-인터넷의 도입 배경은 “[그림 2] 컴퓨팅 시스템의 변천 과정 (출처: 어도비)”와 같이 기존 UI 개발환경의

문제점에서 시작됩니다. C/S 환경과 WEB 환경의 문제점은 아래와 같다.

환경 문제점

C/S 환경

별도의 어플리케이션 배포 및 설치 작업 진행

어플리케이션 개발을 위한 4GL 기술 전문가 필요

모든 업무 기능 및 구성에 필요한 기능들을 자체 개발

Web 환경에 비해 비교적 낮은 UI 구성

비표준 기술 사용으로 인한 기술의 범용성이 낮음

WEB 환경

여러 페이지에 걸친 업무 처리, 정적인 화면 구성

단순한 사용자 인터페이스, 상대적으로 느린 화면 로딩 속도

과도한 네트워크 트래픽, 텍스트 기반의 문서

일장적인 정보 전달, 낮은 사용자 상호 작용


- 12 -

X-인터넷의 도입 목적 및 도입 효과

X-인터넷의 도입 목적은 아래의 그림과 데이터의 시각화 및 업무 처리에 대한 연관성을 극대화하여 사용자에

게 보다 편리하게 데이터를 표현하고, 업무의 생산성을 향상시키는데 있다.

RIA 도입 목적 (출처 : 포레스터 리서치 2007.3.12 The Business Case For Rich Internet Applications)

X-인터넷 관련 솔루션을 도입한 결과 아래의 그림과 같이 대부분의 경우에 만족도를 보이고 있다.

RIA 만족도(출처 : 포레스터 리서치 2007.3.12 The Business Case for Rich Internet Application)


- 13 -

X-Internet 기반의 UI 통합 솔루션 xFrame 은 사용자 업무 패턴에 맞는 사용자 인터페이스를 지원하고 다양한

업무에 대한 요건을 효율적으로 처리할 수 있고, 업무 효율성을 향상시키기 위한 다양한 부가 기능을 제공하는

“통합 UI 솔루션”이다.

통합 UI 솔루션이란 용어를 사용하는 이유는 xFrame 솔루션이 “개발 실행 운영”에 필요한 모든 기능이

하나의 솔루션으로 가능하기 때문이다.

솔루션 구성 및 특장점

xFrame 솔루션은 3 가지 제품으로 구성되며, 각각의 제품에 대한 주요 특장점은 아래와 같다.

단계 제품 주요 특장점

개발 환경 xFrame-DevStudio

통합 UI 개발 환경 제공

개발자 권한 관리 및 개발자간 협업 기능

4GL 수준의 화면 개발 기능

범용 Script 언어를 이용한 로직/이벤트 처리 개발 환경 제공

다양한 UI Control 제공

개발 변경 관리 및 변경 내역 상세 비교 기능

실행 환경 xFrame-Viewer

시스템 자원 관리 기능 및 화면 정보 캐슁 기능

업무 화면 통합 기능 및 다양한 업무 처리 지원

주변기기 통합 관리

유연한 데이터 연동 및 처리/연산 기능

대량 데이터에 대한 처리 성능 보장

사용자에게 친숙하고 편리한 업무환경 제공

운영 환경 xFrame-Admin

장애 관리, 장애 통계, 원격 로그 수집

변경 관리, 배포 관리

운영 속보 메시지 처리

xFrame 솔루션 개요


- 14 -

xFrame 개발 환경 아키텍처

xFrame 솔루션의 개발 환경 아키텍처는 아래의 그림과 같다.

번호 구분 설명

1 내장

컴포넌트

xFrame-Viewer에 내장된 컴포넌트를 말한다.

내장 컴포넌트들은 xFrame-DevStudio의 기본 컴포넌트로 표시된다.

2 외부

컴포넌트

xFrame-Viewer에 내장되지 않고, 별도의 파일로 존재하는 컴포넌트를 말한다.

외부 컴포넌트는 UI 콘트롤과 같이 UI를 가지는 컴포넌트들과 기능을 수행하는 컴포

넌트들로 구성된다.

외부 컴포넌트들은 xFrame-DevStudio에서 ActiveX Control Import 기능을 이용하여

사용한다.

3 API

화면 개발시 참조하여 사용할 수 있는 함수이다.

Script Language API는 JavaScript 또는 VBScript 언어에서 기본적으로 제공해주는

함수 이다.

4 Resource

화면 개발시 참조하는 리소스들이다.

리소스중에 Template, Meta과 제외한 자원들은 실행환경 별도의 파일로 추출되어

Personal Template는 개발자 시스템에 별도의 파일로 관리되며, RDBMS에는 저장되

지 않는다.

4 RDBMS

xFrame-DevStudio는 개발시 리소스 정보와 화면 정보를 RDBMS에 저장하여 보관한

다.

개발 완료 후, Resource와 화면 정보는 각각의 ID로 파일로 추출되어 Web 서버에

Deploy하여, 실제 사용자들이 사용하게 된다.

xFrame-DevStudio

그리드그리드

내장 콤포넌트

트리그리드트리그리드

콤보 박스콤보 박스

필드필드

외부 컴포넌트

달력 콘트롤달력 콘트롤

메모 달력 콘트롤메모 달력 콘트롤

통신 콘트롤통신 콘트롤

엑셀 연동 콘트롤엑셀 연동 콘트롤

유틸리티 콘트롤유틸리티 콘트롤

… …


체코 박스체코 박스 통신 콘트롤통신 콘트롤

내장 콘트롤 API내장 콘트롤 API

Script Language APIScript Language API

Screen APIScreen API

Factory APIFactory API

xDataSet APIxDataSet API

I/O Map APII/O Map API

API

Global ModuleGlobal Module

Template DataTemplate Data

Menu DataMenu Data

Meta DataMeta Data

Code DataCode Data

Image DataImage Data

Global xDataSetGlobal xDataSet

Resource

화면 연동 정보 API화면 연동 정보 API

Attribute Map APIAttribute Map API

화면 XMLData

화면 XMLData

화면 ScriptData

화면 ScriptData

RDBMS

ResourceData

ResourceData

xFrame-DevStudio

그리드그리드

내장 콤포넌트


콤보 박스콤보 박스

필드필드

외부 컴포넌트

달력 콘트롤달력 콘트롤

메모 달력 콘트롤메모 달력 콘트롤

통신 콘트롤통신 콘트롤

엑셀 연동 콘트롤엑셀 연동 콘트롤

유틸리티 콘트롤유틸리티 콘트롤

… …


체코 박스체코 박스 통신 콘트롤통신 콘트롤

내장 콘트롤 API내장 콘트롤 API

Script Language APIScript Language API

Screen APIScreen API

Factory APIFactory API

xDataSet APIxDataSet API

I/O Map APII/O Map API

API

Global ModuleGlobal Module

Template DataTemplate Data

Menu DataMenu Data

Meta DataMeta Data

Code DataCode Data

Image DataImage Data

Global xDataSetGlobal xDataSet

Resource

화면 연동 정보 API화면 연동 정보 API

Attribute Map APIAttribute Map API

화면 XMLData

화면 XMLData

화면 ScriptData

화면 ScriptData

RDBMS

ResourceData

ResourceData


- 15 -

xFrame 실행 환경 아키텍처

xFrame 솔루션의 실행 환경 아키텍처는 아래의 그림과 같다.


1 외부 컴포넌트

파일들

xFrame 솔루션에 추가적인 기능을 기능을 제공하는 외부 컴포넌트 파일들이다.

이 파일들은 사용자 시스템에 버전 관리 절차를 통해서 설치된다.

2 리소스

파일들

화면에서 참조하여 사용하는 파일들이다. 이 파일들은 웹 서버에 Deploy되면, 화

면에서 참조시에 Web 서버에서 실시간으로 다운로드 된다.

화면 로딩 속도를 향상 시키기 위해서 사용자 시스템에 캐슁되어 관리된다.

3

논리적인

하나의

화면

화면 정보는 물리적으로 2개의 파일에 기록된다.

화면 XML 파일을 화면에 대한 전반적인 정보를 포함하며, 화면 스크립트 파일은

화면에서 사용하는 스크립트를 포함하고 있다.

4 시스템

파일들

xFrame Viewer에서 사용하는 시스템 파일들이다.

이 파일들은 사용자 시스템에 버전 관리 절차를 통해서 설치된다.

5 실행 파일 xFrame-Viewer를 기동시키는 실행 파일들이다.

xFrame-Viewer는 Internet Browser와 Softbase Browser에서 실행된다.

화면 스크립트 File화면 스크립트 File화면 XML File화면 XML File

논리적인 하나의 xFrame 화면

UI 콘트롤 속성UI 콘트롤 속성

I/O Map 정보I/O Map 정보

Attribute Map 정보Attribute Map 정보

UI 콘트롤 이벤트 정의UI 콘트롤 이벤트 정의 UI 콘트롤 이벤트 구현UI 콘트롤 이벤트 구현

일반 스크립트 합수일반 스크립트 합수

화면 연동 정보화면 연동 정보

Resource 참조 정보Resource 참조 정보

xDataSet 정보xDataSet 정보

리소스 파일들

GlobalxDataSet

파일

GlobalxDataSet

파일

GlobalModule

파일

GlobalModule

파일

Image파일

Image파일

Code파일Code파일

Menu파일

Menu파일

GlobalxDataSet목록 파일


GlobalModule

목록 파일

GlobalModule

목록 파일

외부 파일들

외부컴포넌트

파일

외부컴포넌트

파일

xFrame-ViewerxFrame-Viewer

화면 Scope 변수화면 Scope 변수

ScriptEngineScriptEngine

Java Script EngineJava Script Engine

VB Script EngineVB Script Engine

Internet Browser(Internet Explorer,

FireFox, Crome, Opera, …)



SoftbaseBrowserSoftbaseBrowser

XMLParserXML

Parser IMEIME

화면 스크립트 File화면 스크립트 File화면 XML File화면 XML File

논리적인 하나의 xFrame 화면

UI 콘트롤 속성UI 콘트롤 속성

I/O Map 정보I/O Map 정보

Attribute Map 정보Attribute Map 정보

UI 콘트롤 이벤트 정의UI 콘트롤 이벤트 정의 UI 콘트롤 이벤트 구현UI 콘트롤 이벤트 구현

일반 스크립트 합수일반 스크립트 합수

화면 연동 정보화면 연동 정보

Resource 참조 정보Resource 참조 정보

xDataSet 정보xDataSet 정보

리소스 파일들

GlobalxDataSet

파일

GlobalxDataSet

파일

GlobalxDataSet

파일

GlobalxDataSet

파일

GlobalModule

파일

GlobalModule

파일

GlobalModule

파일

GlobalModule

파일

Image파일

Image파일

Image파일

Image파일

Code파일Code파일Code파일Code파일

Menu파일

Menu파일

Menu파일

Menu파일



GlobalModule

목록 파일

GlobalModule

목록 파일

외부 파일들

외부컴포넌트

파일

외부컴포넌트

파일

외부컴포넌트

파일

외부컴포넌트

파일


화면 Scope 변수화면 Scope 변수

ScriptEngineScriptEngine

Java Script EngineJava Script Engine

VB Script EngineVB Script Engine





SoftbaseBrowserSoftbaseBrowser

XMLParserXML

Parser IMEIME


- 16 -

xFrame 실행 환경 리소스(파일) 접근 아키텍처

xFrame-Viewer 는 화면 정보(파일)와 관련 리소스 정보(파일)을 접근하는 방법이 아래와 같이 3 가지의 방식을

지원한다.


1 RDBMS

xFrame-DevStudio에서 정보를 저장하기 위해서 사용하는 RDBMS에 접속하여 리소

스에 접근한다.

RDBMS에 접속하기 위한 정보는 xFrame-DevStudio에서 데이터베이스 접속시 사용

하는 정보를 이용하여 데이터베이스 접속하여 정보를 로드한다.

이 방식은 xFrame-DevStudio에서 화면을 수정할 경우, 바로 반영되어 테스트를 할

수 있으며, 개발시에만 적용가능하다.

2 Web

Server

리소스 정보를 Web Server에 존재하는 파일에 접근한다.

네트워크 다운로드 속도를 보장하기 위해서 Web Server에 존재하는 파일을 xFrame

에서 제공하는 압축과 암호화되어 Deploy될 수 있다.

화면 로딩 속도 향상을 위해서 xFrame-Viewer에서 자체적으로 로컬 시스템에

Cache를 저장하여, 변경된 파일들만 다운로드한다.

3 로컬 파일

리소스 정보를 로컬 시스템의 파일 시스템에 저장된 파일에 접근한다.

이 경우, xFrame-Viewer가 시작하기 전에 버전 관리 절차를 통해서 리소스 파일들

이 로컬 시스템에 다운로드 되야 한다.

화면 로딩 속도가 다른 방법에 비해 가장 빠르다.

RDMBS

화면스크립트데이터


화면 XML데이터

화면 XML데이터

Resource데이터

Resource데이터


WEB Server

화면스크립트

파일

화면스크립트

파일

화면 XML파일

화면 XML파일

Resource파일

Resource파일

로컬 파일

화면스크립트

파일

화면스크립트

파일

화면 XML파일

화면 XML파일

Resource파일

Resource파일

RDMBS





화면 XML데이터

화면 XML데이터

화면 XML데이터

화면 XML데이터

Resource데이터

Resource데이터

Resource데이터

Resource데이터


WEB Server

화면스크립트

파일

화면스크립트

파일

화면 XML파일

화면 XML파일

Resource파일

Resource파일

WEB Server

화면스크립트

파일

화면스크립트

파일

화면스크립트

파일

화면스크립트

파일

화면 XML파일

화면 XML파일

화면 XML파일

화면 XML파일

Resource파일

Resource파일

Resource파일

Resource파일

로컬 파일

화면스크립트

파일

화면스크립트

파일

화면 XML파일

화면 XML파일

Resource파일

Resource파일

로컬 파일

화면스크립트

파일

화면스크립트

파일

화면스크립트

파일

화면스크립트

파일

화면 XML파일

화면 XML파일

화면 XML파일

화면 XML파일

Resource파일

Resource파일

Resource파일

Resource파일


- 17 -

xFrame 운영 환경 아키텍처

xFrame 운영 환경은 사용자가 xFrame 을 사용하기 위해 접속하는 서버 시스템의 환경을 말하며, 아키텍처는

아래의 그림과 같다.


1 설치

파일들

사용자 시스템에 xFrame을 사용하기 위해서 설치되는 파일들이다.

설치 되는 파일들은 버전 관리 콘트롤 CAB 파일이 자동으로 설치되며, 이 콘트롤에

의해서 다른 나머지 파일들이 사용자 시스템에 자동으로 설치된다.

설치 파일들은 xFrame-Admin을 이용해서 파일 단위로 서버로 배포된다.

2 리소스

파일들

xFrame 화면과 관련되어 있는 파일들이며, xFrame-DevStudio를 이용해서 파일로

추출(암호화 및 압축)되어 xFrame-Admin을 이용해서 서버로 배포된다.

화면 정보 파일, 화면 스크립트 파일 이외에도 화면에서 참조하는 다른 리소스 파일

들이 포함된다.

이 파일들은 “리소스(파일) 접근 아키텍처”의 리소스 접근 방법에 따라 사용자 시스

템으로 다운로드되어 사용하거나, Web 서버에 있는 파일을 사용자 시스템에서 접

근하여 사용된다.

3 xFrame

Admin

설치 파일들과 리소스 파일들에 대한 버전 관리 및 배포 관리 기능을 수행한다.

xFrame 서버가 2대 이상인 경우에도, 각각의 서버에 자동 동기화되어 배포한다.

예약 배포, 백업본 관리, 배포 이력 정보 조회 기능도 제공한다.

4 RDBMS xFrame-Admin이 배포 관리 및 기타 정보를 저장하기 위한 저장 공간이다.

WAS 서버

Web 서버

리소스 파일들

GlobalxDataSet

파일

GlobalxDataSet

파일

GlobalModule

파일

GlobalModule

파일

Image파일

Image파일


Menu파일

Menu파일



GlobalModule목록 파일


화면파일화면파일

설치 파일들

다운로드대상 파일목록 파일


외부컴포넌트

파일

외부컴포넌트

파일

xFrame파일

xFrame파일

시스템파일

시스템파일

3rd 파티파일

3rd 파티파일

버전 관리콘트롤

CAB 파일


CAB 파일

xFrame-AdminxFrame-Admin

버전 관리모듈

버전 관리모듈

배포 관리모듈

배포 관리모듈

외부 코드 정보연동 모듈


주기 작업모듈

주기 작업모듈

xFrame 서버 시스템

RDBMS

버전/배포 관리버전/배포 관리

WAS 서버

Web 서버

리소스 파일들

GlobalxDataSet

파일

GlobalxDataSet

파일

GlobalModule

파일

GlobalModule

파일

Image파일

Image파일


Menu파일

Menu파일





화면파일화면파일

리소스 파일들

GlobalxDataSet

파일

GlobalxDataSet

파일

GlobalxDataSet

파일

GlobalxDataSet

파일

GlobalModule

파일

GlobalModule

파일

GlobalModule

파일

GlobalModule

파일

Image파일

Image파일

Image파일

Image파일

Code파일Code파일Code파일Code파일

Menu파일

Menu파일

Menu파일

Menu파일





화면파일화면파일화면파일화면파일

설치 파일들



외부컴포넌트

파일

외부컴포넌트

파일

외부컴포넌트

파일

외부컴포넌트

파일

xFrame파일

xFrame파일

xFrame파일

xFrame파일

시스템파일

시스템파일

시스템파일

시스템파일

3rd 파티파일

3rd 파티파일

3rd 파티파일

3rd 파티파일


CAB 파일


CAB 파일

xFrame-AdminxFrame-Admin

버전 관리모듈

버전 관리모듈

배포 관리모듈

배포 관리모듈



주기 작업모듈

주기 작업모듈

xFrame 서버 시스템

RDBMS

버전/배포 관리버전/배포 관리


- 18 -

xFrame 솔루션에 설치 환경에 대하여 기술합니다. 이 장에서 기술하는 내용은 아래와 같다.

데이터베이스 환경 설치

서버 개발 환경 설치(JDK, Tomcat, Eclipse)

XFrame 솔루션 설치

xFrame 솔루션의 개발 도구인 xFrame-DevStudio 는 개발툴을 이용해 작업된 모든 내용을 DBMS 에 저장하는

구조로 되어있다.

데이터베이스 설치는 아래와 같은 단계로 진행되며, 세부적인 진행에 내용은 xFrame 설치 가이드(MySQL 용)을

참조한다.

순서 구분 세부 단계

1 데이터베이스

서버 설치

xFrame-DevStudio에서 사용할 데이터베이스 서버를 설치한다.

(“MySQL 서버 설치 가이드” 참조)

데이터베이스 서버 관리 프로그램을 설치한다.

(“MySQL Administrator 설치 가이드” 참조, “SQLyog 설치 가이드 “ 참조)

데이터베이스 서버의 환경 및 사용자 계정을 구성한다.

(“MySQL Server Setup 가이드” 참조)

xFrame-DevStudio가 사용할 데이터베이스를 생성하고, 테이블을 생성한다.

(“XFrame 데이터베이스 구성 가이드” 참조)

2

데이터베이스

클라이언트

설치

xFrame-DevStudio가 데이터베이스 접속시 사용할 데이터베이스 클라이언트 프

로그램을 설치한다.

MySQL을 사용하는 경우에는, MySQL ODBC 드라이버를 설치한다.

(“MySQL ODBC Driver 설치 가이드” 참조)

3 XFrame

솔루션 설치

XStudioSync 프로그램을 이용하여 솔루션 설치를 진행한다.

(xFrame-DevStudio 설치 페이지 참조)

22 장장.. xxFFrraammee 설설치치 환환경경

데이터베이스 설치


- 19 -

서버 비즈니스 로직을 개발하기 위한 환경을 설치한다.

본 문서에서는 개발자 시스템에 JDBC, Tomcat, Eclipse 가 설치되어 있다고 가정한다.


1 JDK 설치 Eclipse 및 Tomcat 사용을 위한 JDK를 설치합니다. (JDK 1.5 버전 이상)

2 Tomcat 설치 xFrame 자원 배포 및 서버 비즈니스 로직을 개발하기 위한 Tomcat 프로그램을

을 설치하고 구성합니다. (Tomcat 5.5 이상)

3 Eclipse 설치 서버 비즈니스 로직 개발 및 테스트를 위한 개발 도구인 Eclipse 프로그램을 설

치합니다. (Eclipse IDE for Java EE Developers 버전 사용)

각 소프트웨어에 대한 설치는 각 소프트웨어의 홈페이지를 참조한다.

서버 개발 환경 설치


- 20 -

이 장에서는 X-Internet 솔루션인 XFrame 솔루션의 화면 개발 도구인 xFrame-DevStudio 를 이용하여 화면을

개발하기 위한 기초 내용을 기술한다. 이 장에서 기술하는 내용은 아래와 같다.

xFrame-DevStudio 시작

화면 생성 및 UI 컨트롤 배치

UI 컨트롤의 이벤트 처리

사용자 정의 함수 개발

공통 모듈 사용

도움말 사용

2 장에서 xFrame 솔루션 설치 과정을 통해서 생성된 바탕화면의 “xFrame DevStudio” 아이콘을 더블클릭하여

실행한다.

33 장장.. 화화면면 개개발발 기기초초

xFrame-DevStudio 시작


- 21 -

데이터베이스 접속

xFrame-DevStudio 가 실행되면 아래의 그림과 같이 데이터베이스 서버 접속 화면이 표시되며, 그림과 같이

설정하고 하단의 “연결” 버튼을 클릭하여 데이터베이스에 접속한다.



탭 선택 데이터베이스에 접속하기 위해서 “Database” 탭을 선택한다.


서버 정보 입력 데이터베이스의 종류, IP 주소 및 포트 번호, 데이터베이스 명을 설정한다.


연결 “연결” 버튼을 클릭하여 데이터베이스에 접속한다.


- 22 -

프로젝트 생성

xFrame 을 처음으로 설치하고 접속한 경우에는 데이터베이스에 프로젝트 정보가 없기 때문에, 프로젝트를

생성하는 창이 표시되고, 설정하고, 아래의 그림과 같이 설정한 이후에 “생성” 버튼을 클릭한다.


1

프로젝트

정보

설정

데이터베이스

명

“데이터베이스 접속” 화면에서 설정한 데이터베이스 명이 자동으

로 표시됩니다.

프로젝트

아이디

프로젝트에 대한 ID를 영문으로 지정합니다.

데이터베이스에 각각의 프로젝트를 구별하기 위한 ID로 사용됩니

다.

프로젝트 이름 프로젝트에 대한 이름을 지정합니다.

Admin

비밀번호

개발툴의 기본 관리자 계정인 “admin” 사용자의 비밀번호를 지정

합니다.

“admin” 계정은 개발툴의 모든 권한을 가진 계정입니다.

“도구””사용자 관리” 메뉴를 통해서 추가로 사용자를 등록할 수

있습니다.

2 프로젝트 생성 “생성” 버튼을 클릭하여 데이터베이스에 프로젝트를 생성합니다.


- 23 -

개발툴 초기 화면

xFrame-DevStudio 가 프로젝트를 선택하고, 로그인을 정상적으로 수행하면, 아래의 그림과 같이 화면이

표시된다. 아래의 그림과 동일하게 배치가 되어 있지 않더라도, 각 창의 타이틀 부를 마우스로 드래그하여

위치를 조절할 수 있다.

번호 구분 세부 단계

1 오브젝트 창

화면 개발에 사용되는 UI 컨트롤이 표시된다.

하단부에 “Template-Server” 탭과 “Template-Local” 탭이 표시되며,

각 탭은 개발자가 공유해서 사용하는 템플릿과, 로그인한 개발자의

템플릿이 표시된다.

2 프로젝트 창 접속한 데이터베이스와 로그인한 프로젝트가 표시되며, 화면 개발이

진행되면 이곳에 각각의 화면이 트리 형태로 표시된다.

3 속성 창 속성 창은 화면 및 UI 컨트롤의 속성 및 이벤트를 설정하는 창이다.

4 업무 화면

개발 탭

Design 화면의 UI를 디자인하는 탭이다.

JavaScript 화면의 비즈니스 로직을 JavaScript 언어로 개발하는 탭이다.

Transaction 화면에서 사용하는 데이터셋과 업무 서버와의 데이터 통신 정보를 설

정하는 탭이다.


- 24 -

만약 업무 화면 개발 탭 부분이 위의 그림과 같이 표시되지 않으면, “도구””옵션” 메뉴를 선택하여, 아래의

그림과 같이 “기타” 탭에서 “JAVA Script 탭 보이기”와 “Transaction 탭 사용”을 체크하여 정보를 설정하고,

하단의 “확인” 버튼을 클릭한다.


- 25 -

새로운 화면을 생성하기 위해서 아래의 그림과 같이 “화면””새 화면” 메뉴를 선택한다.

화면 생성 및 UI 콘트롤 배치


- 26 -

화면 속성 지정

화면의 “Design” 탭을 선택하면 “속성”창에 화면 자체에 대한 속성이 표시되며, 아래의 그림과 같이 “title”

속성을 “첫번재 화면”으로 변경한다. “title” 속성은 화면을 구별하는 설명에 해당하는 간단한 문구를 지정하는

속성이다.


1 속성 창 속성창의 타이틀이 “속성 – 화면”으로 표시된다. 속성 창의 타이틀은 현재 보

여주고 있는 속성의 대상 UI 컨트롤의 종류를 표시한다.

2 “title” 속성 화면 제목을 설정한다.

3 속성 요약 설명 속성을 선택하면 하단부에 속성에 대한 간단한 설명이 표시된다.


- 27 -

텍스트 컨트롤 생성

아래의 화면과 같이 “오브젝트” 창에서 텍스트 컨트롤을 마우스로 클릭하여 선택한 이후에, “Desing”탭에

컨트롤을 표시할 위치를 클릭하면 텍스트 컨트롤이 생성된다.


- 28 -

텍스트 컨트롤 속성 변경

새롭게 생성한 텍스트 컨트롤을 마우스로 선택하면, 아래의 그림과 같이 “속성” 창에 속성이 표시되고, “text”

속성을 “이름”으로 변경한다. 텍스트 속성은 텍스트 컨트롤을 더블클릭하여 “text” 속성을 변경할 수 있다.

번호 구분 세부 단계

1 “text” 속성 변경 “text” 속성을 변경하여 화면에 표시되는 내용을 설정한다.

2 속성 요약 설명 속성을 선택하면 하단부에 속성에 대한 간단한 설명이 표시된다.


- 29 -

한글 필드 컨트롤 생성

아래의 화면과 같이 “오브젝트” 창에서 한글 필드 컨트롤을 마우스로 클릭하여 선택한 이후에, “Desing”탭에

클릭하면 한글 컨트롤이 생성된다.

입력 필드 유형의 컨트롤은 각각의 데이터 입력 방식에 맞추어 숫자 필드, 일반 필드, 한글 필드, 비밀번호

필드로 구분되어 구성되어 있다.

숫자 필드 : 숫자만 입력 가능

일반 필드 : 숫자와 영문자만 입력 가능

한글 필드 : 숫자, 영문자, 한글이 모두 입력 가능

비밀번호 필드 : 숫자, 영문자, 한글이 모두 입력 가능하지만 텍스트를 마스킹하여 표시


- 30 -

한글 필드 컨트롤 속성 변경

새로 생성한 한글 필드의 “name” 속성을 아래의 그림과 같이 “fldName”으로 설정한다. “name” 속성은

화면내에서 UI 컨트롤을 구별하기 위한 식별자로 사용되기 때문에, 화면내의 다른 UI 컨트롤과 중복되게

설정할 수 없다. 스크립트 로직에서 UI 컨트롤을 처리하기 위해서는 반드시 “name” 속성이 설정되어 있어야

한다. 스크립트 로직에서 사용되지 않는 컨트롤에 대해서는 “name” 속성을 지정할 필요는 없다.


- 31 -

버튼 컨트롤 생성 및 속성 변경

아래의 화면과 같이 “오브젝트” 창에서 버튼 컨트롤을 마우스로 클릭하여 선택한 이후에, “Desing”탭에

클릭하면 버튼 컨트롤이 생성된다.

버튼 콘트롤의 속성중에 “name” 및 “text” 속성을 아래의 표와 같이 설정한다.

속성 속성 설명 속성 값

name 컨트를의 이름 btnSayHello

text 컨트롤에 표시된 문자열 Say Hello

height 버튼의 높이 20


- 32 -

디렉토리 생성

화면은 계층적으로 관리할 수 있는 기능을 제공한다. 아래의 그림과 같이 “프로젝트” 창에서 프로젝트를 마우스

오른쪽 버튼을 클릭하면, 메뉴가 표시되고, “디렉토리 생성”을 선택한다.

번호 설명

1 “프로젝트” 창의 “Screen” 탭을 선택

2 프로젝트 명 항목을 마우스 오른쪽 버튼을 클릭하여 메뉴 표시 및 “디렉토리 생성” 메뉴 선택


- 33 -

디렉토리 추가 창이 아래의 그림과 같이 표시되면, 디렉토리명, COMMENT 를 아래와 같이 입력하고, 하단의

“추가” 버튼을 클릭한다.

번호 설명

1 “디렉토리명”은 영문으로 공백없이 “START”라고 입력한다.

“COMMENT”는 디렉토리에에 대한 부가적인 설명 내용을 의미하며, “시작”을 입력한다.

2 “추가” 버튼을 클릭하여 디렉토리를 추가한다.

디렉토리가 추가되면 아래의 그림과 같이 프로젝트 창에 디렉토리가 표시된다.


- 34 -

화면 저장

현재까지 작성된 화면을 저장하기 위해서 “화면””저장” 메뉴를 선택하면, 아래의 화면이 표시되고, “저장할

화면 아이디” 부분에 “SayHello”라고 입력하고, 새롭게 생성한 “START” 디렉토리를 지정한 이후에, 하단의

“저장” 버튼을 클릭하여 화면을 저장한다. “저장할 화면 아이디” 영문으로 입력하고, 공백이 없어야 한다.

저장을 완료화면 아래의 그림과 같이 “프로젝트” 창에 “START” 디렉토리에 화면 ID 및 화면 타이틀 정보가

표시된다.


- 35 -

미리보기

현재까지 작성된 화면의 동작화면을 보기 위해서 아래의 그림처러 “보기””미리보기” 메뉴를 선택한다.

“미리보기” 메뉴는 현재 작성된 화면을 실제 동작 상태를 확인하기 위해서 실행시키는 기능을 수행한다.

미리 보기 화면이 아래와 같이 표시되고, 콘솔 트레이스 창이 같이 표시된다. 미리보기 화면의 우측 상단에

콘솔 트레이스 보기 관련 버튼과 닫기 버튼이 표시된다.


- 36 -

현재까지 작성된 화면은 화면의 UI 구성만 수행하였기 때문에 아무런 동작이 수행되지 않는다. 사용자의

조작에 의해서 동작하기 위해서는 사용자가 조작하는 화면의 UI 컨트롤에 대해서 이벤트 처리를 수행해야 한다.

화면 이벤트 처리

화면도 UI 컨트롤의 일종이기 때문에 각종 이벤트가 존재한다. 화면 로드시, “fldName” 필드에 값을 설정하는

기능을 개발해보자.

화면의 바탕을 클릭하면 아래의 그림과 같이 “속성” 창에 화면에 대한 속성이 표시되고, “속성” 창의 하단에

“on_load” 이벤트 속성의 값 부분을 더블클릭하여 이벤트 핸들러를 생성한다.

번호 설명

1 현재 보여주는 속성이 화면에 대한 속성임을 확인한다.

2 on_load 이벤트 속성의 값 부분을 선택하면, 우측의 버튼을 클릭하여 이벤트 처리 함수를 생성한다.

이벤트 처리함수가 생성되면 JavaScript 탭으로 전환된다.

UI 컨트롤의 이벤트 처리


- 37 -

화면 이벤트 처리 스크립트 개발

화면 스크립트 파일의 내용은 아래와 같고, 소스 내용에 대한 설명은 소스내의 주석을 참조한다.

1 2 3 4 5 6 7 8 9

// 화면내 스크립트에서 전역적으로 사용할 변수 선언 var m_strDefaultName = "홍길동"; // 화면 로드 이벤트 처리 function screen_on_load() {

// 이름 필드에 값을 설정한다. fldName.settext(strDefaultName);

}

라인 설명

1 ~ 2

화면내 스크립트에서 전역적으로 사용할 변수는 함수 선언 외부에 선언한다.

JavaScript에서 변수는 데이터 형에 상관없이 “var”라는 예약어를 통해서 선언한다.

JavaScript에서 한 라인의 마지막에는 “;’를 입력한다.

스크립트의 주석은 “//”을 사용해서 작성할 수 있다

5 화면 이벤트 정의에 의해서 자동으로 생성되는 함수이다.

JavaScript에서 함수는 “function”이란 예약어를 이용해서 정의된다.

8 UI 컴포넌트에서 제공하는 함수는 위의 소스와 같이 “컴포넌트 이름”.”함수 이름” 식으로

사용한다.

현재까지 작성된 화면의 미리보기 메뉴를 선택해서 확인하면, 아래의 그림과 같이 “fldName” 필드에

“홍길동”이란 문자열이 표시되어 있음을 확인할 수 있다.


- 38 -

버튼 이벤트 처리

화면의 “btnSayHello” 버튼의 마우스 업 이벤트를 처리하여, 사용자에게 현재 시각 및 환영 메시지를 보여주는

함수를 작성해보자.

화면 이벤트 처리와 같이, “Design” 탭에서 “btnSayHello” 버튼을 선택하고, “속성” 창의 on_mouseup 이벤트를

더블클릭하면 아래의 그림과 같이 이벤트 생성 창이 표시되고, 하단의 “생성” 버튼을 클릭한다.

번호 설명

1 기본적으로 이벤트가 발생한 UI 컨트롤의 이름 + “이벤트 명”으로 함수가 정의된다.

2 “생성” 버튼을 클릭하면 “JavaScript” 탭으로 이동하면서, 해당 함수로 포커스가 이동한다.


- 39 -

버튼 이벤트 처리 스크립트 개발

화면 스크립트 파일의 내용은 아래와 같고, 소스 내용에 대한 설명은 소스내의 주석을 참조한다

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

// 아래의 함수는 직접 작성한 함수이다. // 현재 사간을 구하여 리턴한다. function getCurrentTime() {

// factory 오브젝트를 이용해서 현재 시간을 구한다. // JavaScript 에서 변수는 "var" 예약어를 이용해서 선언한다. var strCurrentTime = factory.getsystemtime("%Y-%M-%D %h:%m:%s");

// factory 오브젝트를 이용해서 콘솔 창에 변수의 내용을 출력한다. factory.consoleprint("strCurrentTime : " + strCurrentTime);

// 현재 시간을 리턴한다. return strCurrentTime;

} /* 버튼의 마우스 업 이벤트를 처리한다. objInst 파라미터는 이벤트가 발생한 UI 컨트롤의 오브젝트이다. */ function btnSayHello_on_mouseup(objInst) {

// factory 오브젝트를 이용해서 콘솔 창에 objInst 파라미터의 이름을 출력한다. factory.consoleprint("Object Name : " + objInst.getname());

// 현재 시간을 구하는 함수를 호출하여 값을 구한다. var strTime = getCurrentTime();

// screen 오브젝트를 이용해서 화면에 Alert 창을 표시한다. screen.alert("Hi! " + fldName.gettext() + ", 현재 시각 : " + strTime);

}

라인 설명

1 ~ 14

화면내에서 사용할 목적으로 개발자가 직접 개발한 함수이다.

factory 라는 오브젝트의 getsystemtime API를 이용해서 현재 시각을 구한다.

함수의 리턴값은 “return” 이란 예약어를 이용해서 값을 리턴한다.

20 이벤트 처리 함수를 지정하면 자동으로 생성되는 함수이다.

26 ~ 29

화면 스크립트 내에서 직접 작성한 함수는 함수 이름을 이용하여 바로 호출한다.

“screen” 오브젝트의 “alert” API 호출을 통해서 메시지 박스를 표시한다.

JavaScript에서 문자열은 “+” 연산자를 통해서 연결한다.


- 40 -

“미리보기” 메뉴를 선택하면 화면이 표시되고, “Say Hello” 버튼을 클릭하면 아래의 그림과 같이 창이 표시된다.

화면의 스크립트 소스에서 factory.consoleprint API 를 통해서 작성된 내용은 아래의 그림과 같이 콘솔

트레이스 창에 표시된다.

콘솔 트레이스 창이 보이지 않을 경우에는 미리보기 화면의 우측 상단의 “콘솔 트레이스 보이기” 버튼을

클릭한다.


- 41 -

콘솔 트레이스 설정

미리보기 창이 표시될 때, 콘솔 트레이스 창을 향상 보이게 설정하기 위해서는 “도구””옵션” 메뉴를 선택하고,

“미리보기” 탭에서 아래와 같이 설정할 수 있다.

화면 스크립트에서 factory.showconsoletrace API 를 호출하여 콘솔 트레이스 창을 보이거나 숨길 수 있다.


- 42 -

스크립트에서 사용되는 “screen” 및 “factory” 오브젝트는 화면 스크립트에서 선언 없이 바로 사용할 수 있는

내장 오브젝트이며, 이름이 고정되어 있다.

“screen” 오브젝트는 화면 스크립트가 동작하는 현재 화면을 가리키는 오브젝트이다.

“factory” 오브젝트는 유틸리티 성격으로 사용되는 기능을 제공하는 함수를 제공하는 특별한 내장

오브젝트이다.

screen 및 factory 오브젝트


- 43 -

공통 모듈은 화면에서 스크립트에서 공통으로 사용되는 스크립트 함수나 작성하거나, 화면에서 참조하여

사용할 수 있는 변수를 선언하는 곳이다. 글로벌 모듈에 구현된 함수나 변수들은 각각의 업무 화면에서 특별한

정의 없이 공통 모듈 이름을 이용하여 함수를 호출하거나, 변수를 참조할 수 있다.

공통 모듈 생성

화면에서 개발한 getCurrentTime 함수를 공통 모듈로 작성해보자.

아래의 그림과 같이 “프로젝트” 창의 두번째 탭인 “Global Module”을 선택하고, “xframe_start” 항목을 마우스

오른쪽 버튼을 클리하면 표시되는 컨텍스트 메뉴중에 “공통모듈 추가” 메뉴를 선택한다.

번호 설명

1 “프로젝트” 창에서 “Global Module” 탭으로 이동한다.

2 프로젝트를 마우스 오른쪽 버튼으로 클릭하면 메뉴가 표시된다.

공통 모듈 생성


- 44 -

공통 모듈 추가 메뉴를 선택하면, 아래의 그림과 같은 창이 표시되고, 모듈명에 “TimeUtil”이라 입력하고,

하단의 “생성” 버튼을 클릭한다.

번호 설명

1

모듈명에 “TimeUtil”이라 입력한다.

영문으로 작성해야 하며, 공백이 들어가서는 안된다.

모듈명은 공통 모듈을 구별하는 식별자로 역할 및 화면 스크립트에서 참조하는 이름으로 사용

된다.

2 “생성” 버튼을 클릭하면 공통 모듈이 생성된다.


- 45 -

공통 모듈 개발

공통 모듈 창이 표시되면 아래의 내용과 같이 기존에 화면에 작성했던 getCurrentTime 함수를 Copy & Paste

방식으로 생성한다.

1 2 3 4 5 6 7 8 9 10 11

var strGreeting = "Hello!"; // 현재 사간을 구하여 리턴한다. function getCurrentTime() {

// factory 오브젝트를 이용해서 현재 시간을 구한다. var strCurrentTime = factory.getsystemtime("%Y-%M-%D %h:%m:%s");

// 현재 시간을 리턴한다. return strCurrentTime;

}

공통 모듈 사용

“SayHello” 화면의 스크립트에서 공통 모듈을 사용하는 방식으로 로직을 아래와 같이 수정한다. 기존에 화면의

스크립트에서 개발했던 getCurrentTime 함수를 삭제하고, 새로 개발한 공통 모듈 함수를 호출하는 방식으로

변경한다.

공통 모듈에서 제공하는 함수를 호출하는 방법은 “공통 모듈명”.”공통 모듈에서 제공하는 함수명”으로 호출한다.

공통 모듈에서 제공하는 변수는 “공통 모듈명”.”변수 이름”으로 참조한다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

/* 버튼의 마우스 업 이벤트를 처리한다. objInst 파라미터는 이벤트가 발생한 UI 컨트롤의 오브젝트이다. */ function btnSayHello_on_mouseup(objInst) {


// 공통 모듈의 함수를 호출하여 현재 시간을 구한다. var strTime = TimeUtil.getCurrentTime();

// screen 오브젝트를 이용해서 화면에 Alert 창을 표시한다. // 공통 모듈의 변수를 참조한다. // 표시되는 문자열을 개행하기 위해서는 "₩n"을 사용한다. screen.alert(TimeUtil.strGreeting + " " +

fldName.gettext() + "₩n 현재 시각 : " + strTime); }


- 46 -

“보기””미리보기” 메뉴를 이용하여 화면을 표시하고, “Say Hello” 버튼을 클릭하면, 아래와 같이 창이

표시된다.


- 47 -

도움말은 아래의 그림과 같이 “도움말” 메뉴를 선택하여 사용한다.

VBScript 도움말

“VBScript 도움말”은 VBScript 언어에 대한 도움말을 아래의 그림과 같이 표시한다.

도움말 사용


- 48 -

JAVAScript 도움말

“JAVAScript 도움말” 메뉴는 JAVAScript 언어에 대한 도움말을 아래와 같이 표시한다.


- 49 -

XFrame@DevStudio 도움말

XFrame@DevStudio 도움말 메뉴는 XFrame 에서 제공하는 각각의 컴포넌트에 대한 속성, 이벤트, API 에 대한

도움말이 아래의 그림과 같이 표시된다.


- 50 -

XFrame@DevStudio 도움말은 스크립트 창에서 오브젝트 이름에 마우스 커서를 놓고, “F1” 키를 누르면

오브젝트에 대한 도움말이 표시되고, 함수명에 마우스 커서를 놓고, “F1” 키를 누르면 해당 함수의 도움말이

바로 표시된다.

번호 설명

1 화면 스크립트의 “fldName”에 마우스 커서를 두고, “F1” 키를 눌렀을 경우, “한글 필드”에 대한

도움말이 표시된다.

2 화면 스크립트의 “settext”에 마우스 커서를 두고, “F1” 키를 눌렀을 경우, 한글 필드의 settext

API 에 대한 설명이 표시된다.


- 51 -

이 장에서는 코드성 데이터를 처리하는 콤보 박스 컨트롤에 대해서 기술합니다. 이 장에서 기술하는 내용은

아래와 같습니다.

코드 데이터 및 콤보 박스 콘트롤 개요

코드 데이터 처리 방법

코드 데이터 등록

코드 박스 화면 개발

코드 데이터란 정보를 다른 형태로 변환하는 규칙을 의미한다. 일반적으로 사용되는 코드 데이터의 예로는

부서 코드, 직급 코드, 국가 코드 등등이 있다.

이러한 코드성 데이터를 표현하기 위한 컨트롤이 콤보 박스 컨트롤이다. 콤보 박스 컨트롤은 아래와 같은 기본

기능을 제공한다.

코드 데이터 표시

코드에 대응되는 데이터 표시

선택한 데이터에 대한 코드 추출

콤보 박스 컨트롤은 아래의 그림과 같이 “오브젝트” 창에 표시되어 있다.

44 장장.. 콤콤보보 박박스스 컨컨트트롤롤

코드 데이터 개요


- 52 -

코드 데이터를 화면에서 사용하는 방법은 아래와 같이 크게 4 가지 방법이 존재한다.

방법 설명

코드 데이터 링크

xFrame에서 제공하는 코드 등록 기능을 이용하여, 코드 데이터를 등록하고, 콤보

박스 컨트롤에 해당 코드를 링크를 걸어 사용한다.

코드 데이터 변경시 해당 코드가 링크되어 있는 콤보 박스 컨트롤은 자동으로 변

경된 코드 데이터가 표시된다.

실제 프로젝트 구축시에는 메타 시스템 또는 업무 시스템의 코드 테이블과 연동

하여 코드 데이터를 자동 등록하도록 구성하는 경우도 있다.

데이터 셋 연결 XDataSet에 저정되어 있는 데이터를 기준으로 코드 정보가 표시된다.

XDataSet은 데이터를 저장하기 위해 사용되는 특별한 오브젝트이다.

속성 데이터 사용

콤보 박스 컨트롤의 “combobox_data” 속성에 코드성 데이터를 지정하여 사용하

는 방법이다.

코드 데이터를 변경하기 위해서는 콤보 박스 컨트롤의 속성을 변경해야 한다.

스트립트로 지정 스트립트로 콤보 박스에 표시되는 코드 데이터를 지정하는 방식이다.

코드 데이터를 처리하는 방법


- 53 -

XFrame 에서 제공하는 코드 등록 기능은 “도구””코드 등록” 메뉴를 통해서 제공된다.

코드 데이터들은 코드 ID 기준으로 관리되며, 다른 자원과 구분되어 관리하기 위해 별도의 디렉토리를

구성하여 저장한다.

디렉토리 생성

코드 데이터를 관리하기 위한 디렉토리를 “프로젝트” 창에서 프로젝트 하위에 “RES” 디렉토리를 생성하고, 다시

“RES” 디렉토리 하위에 “CODE” 디렉토리를 아래의 그림과 같이 생성한다.

코드 데이터 등록


- 54 -

코드 등록

xFrame 에서 제공하는 “코드 등록” 기능을 통해 제공하는 코드 데이터는 아래와 같은 그림과 같은 구조로

구성된다.


1 CODE ID 각 코드는 고유의 ID를 가지며, 이 ID를 이용하여 화면에서 참조한다.

각 코드는 코드 ID를 이용하여 파일로 저장되며, 확장자는 “.pic”로 만들어 진다.

2 코드 CODE ID에 포함되는 코드 정보에서 코드에 해당하는 데이터이다.

업무 서버로 데이터 송신시 실제로 전송되는 데이터이다.

3 Comment 코드에 대한 설명에 해당하는 항목이다.

업무 서버로 데이터 송수신시 사용되지 않고, 화면에 표시하기 위한 용도로 사용된다.

CODE_ID.picCODE_ID.pic

CODE_IDCODE_ID

Comment_1Comment_1Code_1Code_1

CODE_NAMECODE_NAME

CODE_DELIMETERCODE_DELIMETER

CODE_STYLECODE_STYLE

CODE_DATACODE_DATA


Comment_nComment_nCode_nCode_n

… …

CODE_ID.picCODE_ID.pic

CODE_IDCODE_ID


CODE_NAMECODE_NAME

CODE_DELIMETERCODE_DELIMETER

CODE_STYLECODE_STYLE

CODE_DATACODE_DATA


Comment_nComment_nCode_nCode_n

… …


- 55 -

“도구””코드 등록” 메뉴를 선택하여 아래의 그림과 같이 코드 데이터를 등록한다.

번호 설명

1

코드 아이디는 코드를 구별하기 위한 ID이다.

코드 이름은 코드 아이디에 대한 이름이다.

코드 구분자는 코드와 코드에 대한 설명(Comment)를 구분하기 위한 구분자이다.

코드 스타일은 코드 데이터 표시 형태가 리스트 또는 트리 스타일을 지정한다.

2

코드 내용은 실제 코드 아이디에 해당하는 코드 데이터를 지정한다.

각각의 항목은 “코드” + “코드 구분자” + “코드 설명(Comment)”를 공백없이 입력한다.

항목을 추가 입력하기 위해서는 코드 데이터 편집 이후에 엔터키를 2번 또는 3번 입력한다.

맨 마지막에 빈 공백 항목이 존재해야 한다.

3 코드를 저장할 디렉토리 경로를 “/RES/CODE/”로 지정한다.

4 “코드 저장” 버튼을 클릭하여 입력한 코드 내용을 저장한다.


- 56 -

콤바 박스 컨트롤을 테스트하기 위한 화면을 아래와 같이 개발한다.

화면 저장 디렉토리 생성

프로젝트 창에서 프로젝트를 마우스 오른쪽 버튼을 클릭하고, “디렉토리 생성” 메뉴를 선택한 이후에,

“COMBO”라는 이름으로 디렉토리를 생성한다.

화면 생성

“화면””새 화면” 메뉴를 선택하여 새로운 화면을 생성하고, 화면의 “title” 속성을 “콤보 박스”라고 지정하고,

“화면””저장” 메뉴를 선택하여, 위의 단계에서 생성한 “COMBO” 디렉토리에 “Combo” 라는 아이디로

저장한다.

저장이 완료된 이후, “프로젝트” 창은 아래의 그림과 같다.

콤보 박스 화면 개발


- 57 -

화면 UI 구성

화면의 UI 구성은 아래의 그림과 같이 화면을 구성한다.

번호 컨트롤 구분 속성 값

1 콤보 박스

name cboPicklList

picklist_selstyle 1:code+comment

picklist_viewstyle 1:code+comment

2 콤보 박스

name cboXDataSet



3 콤보 박스

name cboProeprty



4 콤보 박스

name cboScript



5 버튼 name btnSetCode

text 코드 데이터 설정


- 58 -

코드 데이터 연동

“cboPicklList” 콤보 박스를 선택하고 “속성” 창에서 “picklist” 속성을 더블클릭하면 아래의 그림과 같은 코드

선택 창이 표시되고, “/RES/CODE/” 경로의 “NATION_CODE”를 선택하고, 하단의 “확인” 버튼을 클릭한다.

코드를 선택한 이후에는, 아래의 그림과 같이 콤보 박스의 “picklist” 속성이 설정된다.


- 59 -

데이터 셋 연동

XDataSet 탭으로 이동

코드 데이터를 저장하기 위해서 화면에 XDataSet 오브젝트를 정의하기 위해서 아래의 그림과 같이

“Transaction” 탭으로 이동하고, “xDataSet” 탭이 선택한다. “Transaction” 탭이 보이지 않을 경우에는,

“도구””옵션” 메뉴를 선택하고, 맨 우측에 있는 “기타” 탭을 선택하고, “Transaction 탭 사용” 부분을 체크한다.


- 60 -

XDataSet 생성 및 초기 데이터 설정

코드 데이터를 저장하기 위해서 아래의 그림과 같이, 순서대로 XDataSet 을 생성하고, 초기 데이터를 생성한다.

번호 설명

1 “+” 버튼을 클릭하여 데이터 셋을 생성한다.

2

“xDataSet ID”와 “Description” 항목에 각각 “DS_NATION_CODE”와 “국가코드”를 입력한다.

“xDataSet ID”는 화면내에서 데이터 셋을 구별하기 위한 식별자로 사용된다.

“Description”은 데이터셋에 대한 부가적인 설명을 입력하기 위해 사용된다.

3 “+” 버튼을 2번 클릭하여 두개의 칼럼을 생성하다.

4

“Column”은 데이터 셋의 칼럼 이름으로 사용된다.

“Description”은 칼럼에 대한 부가적인 설명을 입력하기 위해 사용된다.

“Length” 는 칼럼에 저장될 수 있는 최대 데이터 길이를 의미한다.

5, 6 “xDataSet Column Data”은 데이터 셋에 저장될 초기 데이터를 지정하는 곳이며, “+” 버튼을 세

번 클릭하여 데이터를 입력한다.


- 61 -

데이터 셋 데이터 링크

콤보 박스 컨트롤의 코드 데이터로 데이터 셋을 링크하기 위해, “picklist_linkdata” 속성을 더블클릭하면 아래의

그림과 같이 “콤보 데이터 셋 등록” 창이 표시된다.

번호 설명

1 콤보 박스에 표시된 코드 데이터을 지정하기 위한 데이터 셋을 지정한다.

데이터 셋 목록에는 화면에서 정의한 데이터 셋 목록과 글로벌 데이터 셋이 표시된다.

2 코드 데이터로 사용될 데이터 셋의 칼럼을 지정한다.

설명(코멘트) 칼럼으로 사용된 칼럼을 지정한다.

3 “확인” 버튼을 클릭하면, 링크가 완료된다.

링크가 완료되면 아래의 그림과 같이 “picklist_linkdata” 속성에 표시된다.


- 62 -

콤보 박스 데이터 속성 연동

콤보 박스 컨트롤의 코드 데이터로 콤보 박스 컨트롤의 데이터 속성을 연동하기 위해, “combobox_data”

속성을 더블클릭하면 아래의 그림과 같이 “콤보 데이터 등록” 창이 표시된다.

번호 설명

1 콤보 박스에 표시된 코드 데이터을 “코드 구분자”를 포함하여 입력한다.

여러 항목을 입력하기 위해서 엔터키를 사용한다.

3 “확인” 버튼을 클릭하면, 완료된다.

연동이 완료되면 아래의 그림과 같이 “combobox_data” 속성이 표시된다.


- 63 -

스크립트를 이용하여 코드 데이터 설정

스크립트를 이용하여 코드 데이터를 설정하기 위해서 “코드 데이터 설정” 버튼의 “mouse_up” 이벤트에 다음과

같이 작성한다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

// 코드 데이터 설정 버튼 이벤트 처리 function btnSetCode_on_mouseup(objInst) {

// 기본 콤보 박스에 있는 내용을 모두 삭제 cboScript.removeall();

// 코드 및 코드 설명(Comment)에 대한 어레이 변수 선언 var arrCode = ["01", "02", "03"]; var arrComment = ["대한민국", "중국", "미국"];

// 코드 데이터에 대한 Delimeter 변수 설언 var strDelimeter = ":";

var i;

// JavaScript 언어에서 어레이 변수에 대한 길이는 length 속성을 읽어서 구할 수 있다. // 어레이 갯수 만큼 Loop 를 돌면서 콤보 박스에 코드 데이터 추가 for(i = 0; i < arrCode.length; i++) {

// 코드 데이터 형식 : "코드" + "코드 Delimeter" + "코드 설명(Comment") cboScript.addstring(arrCode[i] + strDelimeter + arrComment[i]);

} }


- 64 -

“ComboBox” 화면을 “미리보기” 메뉴를 통해서 창을 표시하고, 각각의 콤보 박스를 선택하여 내용을 확인한다.

“코드 데이터 설정” 버튼을 누루기 전과 누룬 후에 스크립트 이용 콤보 박스의 내용을 확인한다.

이외에도 콤보 박스 컨트롤의 “picklist_selstyle”, “picklist_viewstyle”, “editable” 속성을 변경하면서 화면을

테스트해보고, 차이점을 확인한다.

화면 테스트


- 65 -

이 장에서는 목록성 데이터를 처리하는 그리드 컨트롤에 대해서 기술합니다. 이 장에서 기술하는 내용은


그리드 컨트롤 개요

그리드 컨트롤 속성 지정

그리드 컨트롤 칼람별 속성 지정

그리드 컨트롤 제어

그리드 컨트롤 컨트롤은 목록성 데이터를 처리하기 위한 컨트롤이다. 그리드 컨트롤은 아래와 같은 기본

기능을 제공한다.

다건의 데이터를 표시하고 스크롤 처러

칼럼별 데이터 형식 및 입력 방식 지정

데이터에 대한 통계 처리

그리드 컨트롤은 아래의 그림과 같이 “오브젝트” 창에 표시되어 있다.

55 장장.. 그그리리드드 컨컨트트롤롤

그리드 컨트롤 개요


- 66 -

그리드 컴포넌트 구성 요소 이름

그리그 컴포넌트 구성 요소 이름은 아래의 그림과 같다. 그리드의 각각의 셀은 “Item”이란 이름으로 명명되어

있으며, 속성 및 API 명에 특정 아이템에 대한 속성 및 API 명에는 “Item”이란 이름이 들어간다.

Grid Header

Grid Row

Grid Column

Grid Item

Grid Header

Grid Row

Grid Column

Grid Item

그리드 컨트롤 아키텍처


- 67 -

그리드 컴포넌트 속성 및 이벤트 구조

그리드 컴포넌트는 아래의 그림과 같이 속성 및 이벤트가 정의되어 있다.

구분 설명

1 그리드 컴포넌트 자체에 대한 속성 및 이벤트를 정의한다.

2 그리드 컴포넌트의 컬럼별 헤더부에 대한 속성을 정의한다.

3 그리드 컴포넌트의 컬럼별 데이터부에 대한 속성 및 이벤트를 정의한다.

GRID ComponentGRID Component

Grid PropertiesGrid Properties

Column_1Column_1

Column_Header_1Column_Header_1

Column_Data_1Column_Data_1

Header PropertiesHeader Properties

Data PropertiesData Properties

Column_nColumn_n

…

Grid EventsGrid Events

Data EventsData Events

Column_Header_nColumn_Header_n


…

GRID ComponentGRID Component

Grid PropertiesGrid Properties

Column_1Column_1

Column_Header_1Column_Header_1

Column_Data_1Column_Data_1


Data PropertiesData Properties

Column_nColumn_n

…

Grid EventsGrid Events

Data EventsData Events

Column_Header_nColumn_Header_n


…


- 68 -

그리드 데이터 타입

그리드 칼럼은 각각 데이터 타입을 아래의 표와 같이 가지고 있다.

구분 설명

0:숫자 숫자 입력이 가능하다.

1:영문 영문 및 숫자 입력이 가능하다.

2:한글 숫자, 영문, 한글 입력이 가능하다.

그리드 데이터 타입 속성과 관련된 속성 정보 관계

그리드 데이터 타입은 아래와 같이 컬럼의 속성과 연관 관계를 가진다.

컬럼의 특정 속성이 데이터 타입의 속성과 연결되어 있는 것들은 해당 컬럼의 데이터 속성이 매칭이 되야

정상적으로 반영된다.

최대 길이 : max_length최대 길이 : max_length

최소 길이 : min_length최소 길이 : min_length

IME 모드 : imemodeIME 모드 : imemode

마이너스 입력 허용 : allow_minus마이너스 입력 허용 : allow_minus

대소문자 : make_case대소문자 : make_case

패턴 : pattern패턴 : pattern

소수점 위치 : places소수점 위치 : places data_type : 숫자data_type : 숫자

data_type : 영문data_type : 영문

data_type : 한글data_type : 한글

수평 정렬 : text_horzalign수평 정렬 : text_horzalign

그리드 컬럼 데이터 타입과관련된 속성 정보


그리드 컬럼별 데이터 타입속성 값


최대 길이 : max_length최대 길이 : max_length

최소 길이 : min_length최소 길이 : min_length

IME 모드 : imemodeIME 모드 : imemode

마이너스 입력 허용 : allow_minus마이너스 입력 허용 : allow_minus

대소문자 : make_case대소문자 : make_case

패턴 : pattern패턴 : pattern

소수점 위치 : places소수점 위치 : places data_type : 숫자data_type : 숫자

data_type : 영문data_type : 영문

data_type : 한글data_type : 한글

수평 정렬 : text_horzalign수평 정렬 : text_horzalign






- 69 -

그리드 입력 타입

그리드 입력 타입은 그리드의 컬럼에 데이터를 입력할 때 어떤 방식으로 입력할지를 결정하면 지원되는 입력

타입은 아래의 표와 같다.

구분 설명

0:editbox 필드가 표시된다.

데이터 타입 속성에 따라서 입력할 수 있는 데이터 종류가 제한된다.

1:checkbox 체크 박스가 표시된다.

2:combobox 콤보 박스가 표시된다.

주로 코드용 데이터를 표시하기 위한 용도로 사용된다.

3:calendar 달력이 표시된다.

날짜랄 입력하기 위한 용도로 사용된다.


- 70 -

그리드 입력 타입 속성과 관련된 속성 정보 관계

그리드 입력 타입은 아래와 같이 컬럼의 속성과 연관 관계를 가진다.

컬럼의 특정 속성이 입력 타입의 속성과 연결되어 있는 것들은 해당 컬럼의 입력 타입 속성이 매칭이 되야

정상적으로 반영된다.

콤보 박스 편집 가능 여부 : combobox_editable콤보 박스 편집 가능 여부 : combobox_editable

콤보 박스 코드 데이터 : combobox_data콤보 박스 코드 데이터 : combobox_data

콤보 박스 기본 값 : combobox_defaultvalue콤보 박스 기본 값 : combobox_defaultvalue

콤보 박스 엑셀 연동 방식 : combobox_excelstyle콤보 박스 엑셀 연동 방식 : combobox_excelstyle

코드 정보 숨김 처리 여부 : picklist_hiddenitem코드 정보 숨김 처리 여부 : picklist_hiddenitem

코드 정보 경로 : picklist코드 정보 경로 : picklist

콤보 박스 코드 자동 검증 : combobox_autocodevalid콤보 박스 코드 자동 검증 : combobox_autocodevalid

input_type : 체크박스input_type : 체크박스

input_type : 달력input_type : 달력

input_type : 콤보박스input_type : 콤보박스

콤보 박스 스타일 : combobox_style콤보 박스 스타일 : combobox_style

그리드 컬럼 입력 타입과관련된 속성 정보


그리드 컬럼별 입력 타입속성 값


코드 정보 선택 스타일 : picklist_selstyle코드 정보 선택 스타일 : picklist_selstyle

코드 정보 표시 스타일 : picklist_viewstyle코드 정보 표시 스타일 : picklist_viewstyle

체크된 경우 값 : checkbox_truevalue체크된 경우 값 : checkbox_truevalue

체크되지 않은 경우 값 : checkbox_falsevalue체크되지 않은 경우 값 : checkbox_falsevalue

체크박스 엑셀 연동 방식 : checkbox_excelstyle체크박스 엑셀 연동 방식 : checkbox_excelstyle

체크된 경우 이미지 경로 : check_image체크된 경우 이미지 경로 : check_image

체크되지 않은 경우 이미지 경로 : uncheck_image체크되지 않은 경우 이미지 경로 : uncheck_image

비활성 체크된 경우 이미지 경로 : dis_check_image비활성 체크된 경우 이미지 경로 : dis_check_image

비활성 체크되지 않은 경우 이미지 경로 : dis_check_image비활성 체크되지 않은 경우 이미지 경로 : dis_check_image

달력 표시 버튼 이미지 이미지 경로 : calendar_image달력 표시 버튼 이미지 이미지 경로 : calendar_image

콤보 박스 편집 가능 여부 : combobox_editable콤보 박스 편집 가능 여부 : combobox_editable

콤보 박스 코드 데이터 : combobox_data콤보 박스 코드 데이터 : combobox_data

콤보 박스 기본 값 : combobox_defaultvalue콤보 박스 기본 값 : combobox_defaultvalue

콤보 박스 엑셀 연동 방식 : combobox_excelstyle콤보 박스 엑셀 연동 방식 : combobox_excelstyle

코드 정보 숨김 처리 여부 : picklist_hiddenitem코드 정보 숨김 처리 여부 : picklist_hiddenitem

코드 정보 경로 : picklist코드 정보 경로 : picklist

콤보 박스 코드 자동 검증 : combobox_autocodevalid콤보 박스 코드 자동 검증 : combobox_autocodevalid

input_type : 체크박스input_type : 체크박스

input_type : 달력input_type : 달력

input_type : 콤보박스input_type : 콤보박스

콤보 박스 스타일 : combobox_style콤보 박스 스타일 : combobox_style





코드 정보 선택 스타일 : picklist_selstyle코드 정보 선택 스타일 : picklist_selstyle

코드 정보 표시 스타일 : picklist_viewstyle코드 정보 표시 스타일 : picklist_viewstyle

체크된 경우 값 : checkbox_truevalue체크된 경우 값 : checkbox_truevalue

체크되지 않은 경우 값 : checkbox_falsevalue체크되지 않은 경우 값 : checkbox_falsevalue

체크박스 엑셀 연동 방식 : checkbox_excelstyle체크박스 엑셀 연동 방식 : checkbox_excelstyle

체크된 경우 이미지 경로 : check_image체크된 경우 이미지 경로 : check_image

체크되지 않은 경우 이미지 경로 : uncheck_image체크되지 않은 경우 이미지 경로 : uncheck_image

비활성 체크된 경우 이미지 경로 : dis_check_image비활성 체크된 경우 이미지 경로 : dis_check_image

비활성 체크되지 않은 경우 이미지 경로 : dis_check_image비활성 체크되지 않은 경우 이미지 경로 : dis_check_image

달력 표시 버튼 이미지 이미지 경로 : calendar_image달력 표시 버튼 이미지 이미지 경로 : calendar_image


- 71 -

그리드 컴포넌트를 테스트하기 위한 화면을 아래와 같이 개발한다.


프로젝트 창에서 프로젝트를 마우스 오른쪽 버튼을 클릭하고, “디렉토리 생성” 메뉴를 선택한 이후에,

“GRID””라는 이름으로 디렉토리를 생성한다.

화면 생성

“화면””새 화면” 메뉴를 선택하여 새로운 화면을 생성하고, 화면의 “title” 속성을 “그리드”라고 지정하고,

“화면””저장” 메뉴를 선택하여, 위의 단계에서 생성한 “GRID” 디렉토리에 “Grid” 라는 아이디로 저장한다.

그리드 화면 개발


- 72 -

화면 UI 구성



1 버튼 name btnAdd

text 추가

2 버튼 name btnDeleteChecked

text 체크 삭제

3 버튼 name btnDeleteAll

text 전체 삭제

4 그리드 아래의 “그리드 속성” 참조


- 73 -

그리드 속성

그리드의 속성은 아래와 같이 설정한다.

속성 값 설명

x 6

y 36

width 798

height 450

cell_deviderowcount 1 1 줄씩 배경 색상 변경

header_horzcount 1 수평 헤더부 라인 수

linenumber_show True “순번” 칼럼 보임 여부

fixedcols 2 수평 스크롤 고정 컬럼 위치

gradient_effect 1:vertical 헤더부 그라데이션 효과

multi_checkrow True 여러 행이 체크될 수 있게 설정

use_checkrow True 체크 컬럼 사용 여부


- 74 -

그리드 칼럼 속성 지정 방법

그리드 칼럼 속성은 그리드의 “column” 속성을 더블클릭하거나, 그리드 자체를 더블클릭하면 아래와 같이

표시된다.

번호 설명

1 “+” 아이콘이 표시된 버튼을 클릭하여 그리드의 컬럼을 추가한다.

부가적으로 칼럼을 삭제, 순서 변경, 펼침 처리, 모두 선택 처리에 대한 버튼이 있다.

2 한 칼럼은 수평 헤더부와 데이터부로 구성된다.

그리드 수평 헤더부는 그리드의 “header_horzcount” 속성에 따라 표시된다.

3 그리드 구조에서 선택한 항목의 속성이 표시된다.

4 칼럼에 표시할 데이터를 미리 입력할 수 있는 곳이다.

칼럼의 “데이터부”를 선택하고, 입력할 수 있으며, 엔터키를 이용해서 여러 행을 입력한다.


- 75 -

그리드 칼럼 수평 헤더부 속성

각 칼럼의 그리드 칼럼 수평 헤더부의 속성은 아래와 같다.

열 속성 값

1 title 고객번호

2 title 고객명

3 title 날짜

4 title 고객등급

5 title 이율우대

6 title 자산

7 title 연체율

8 title 비고

그리드 칼럼 데이터부 속성

1 열의 칼럼에 대한 데이터부 속성은 아래와 같다.

속성 값 설명

width 90

칼럼의 넓이, 단위 픽셀

“Design” 탭에서 직접 칼럼 구분 위치를 마우스로 드래그하여

지정할 수 있다.

text_horzalign 1:Center 텍스트 수평 정렬 기준

editiable True 데이터 편집 가능 여부

data_type 0:숫자 데이터 타입, 숫자만 입력 가능

input_type 0:editbox 필드 형식으로 데이터 입력 받음

pattern 999-9XXXX999 데이터를 표현할 때, 사용할 패턴.

“X” 패턴은 데이터를 치환함

max_length 11 최대 데이터 길이 (패턴 글자 제외)

min_length 11 최소 데이터 길이 (패턴 글자 제외)

사전 입력 데이터부

01211124311

12412102134

50922346434

54672631220


- 76 -

2 열 ~ 4 열 데이터부 속성은 아래와 같다.

속성 2열 – 고객명 3열 – 날짜 4열 – 고객등급 5열 – 이율우대

width 80 86 130 70

text_horzalign 1:Center 1:Center 0:Left 1:Center

editiable True True True True

data_type 2:한글 0:숫자 1:영문 1:영문

input_type 0:editbox 3:calendar 2:combobox 1:checkbox

checkbox_truevalue Y

checkbox_falsevalue N

combobox_data

A:일반고객

B:우수고객

C:골드고객

combobox_editable False

pattern 9999-99-99

max_length 30 8 1

min_length 0 8 1

statistics_show False


김기민

장민정

이철주

박만기

20101212

20101213

20101214

20120513

A

B

C

A


- 77 -

2 열 ~ 4 열 데이터부 속성은 아래와 같다.

속성 6열 – 자산 7열 – 연체율 8열 – 비고

width 84 94 300

text_horzalign 2:Right 2:Right 0:Left

editiable True True True

data_type 0:숫자 0:숫자 2:한글

input_type 0:editbox 0:editbox 0:editbox

pattern ZZ,ZZZ,ZZZ,ZZZ,ZZZ,ZZ9 ZZ9.99

max_length 17 5

min_length 0 0

statistics_show False


1210000

2320000

7345000

4804587

621

812

732

12.41

주요 고객

관리 대상 고객

주요 고객

주요 고객


- 78 -

그리드 로우 추가, 삭제 처리

그리드 로우의 추가, 삭제 처리를 하기 위해서 우측 상단의 각각의 버튼에 대해서 “on_mouseup” 이벤트를

지정하고, 아래와 같이 개발한다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

// 추가 버튼 이벤트 처리 function btnAdd_on_mouseup(objInst) {

// 그리드의 새로운 아이템을 추가 var nRowIndex = grdList.additem();

// 선택된 아이템의 위치를 새로 추가된 아이템으로 이동 grdList.setselectitem(nRowIndex, 0);

} // 체크 삭제 버튼 이벤트 처리 function btnDeleteChecked_on_mouseup(objInst) {

var nCheckedRowCount = grdList.getcheckedrowcount(); if(nCheckedRowCount < 1) {

screen.alert("체크된 로우가 없습니다."); return;

}

// 모든 체크된 로우 삭제 grdList.deletecheckedrow();

} // 전체 삭제 버튼 이벤트 처리 function btnDeleteAll_on_mouseup(objInst) {

// 모든 로우 삭제 grdList.deleteall();

}

그리드 이벤트 처리


- 79 -

통계 정보는 그리드 속성중에 “statistics_row” 속성을 통해서 지정한다. “statistics_row” 속성을 더블클릭하면

아래와 같이 “그리드 통계행 속성 등록창”이 표시된다.

그리드의 통계 정보는 기본적으로 칼럼 데이터부의 “data_type” 속성이 숫자인 칼럼들만 영향을 받는다. 날짜

칼럼과 연체율 칼럼도 data_type 을 숫자로 지정했지만, 칼럼 데이터부의 “statistics_show”속성을 “False”로

지정함으로써 의미 없는 통계 정보를 삭제할 수 있다.

번호 설명

1 “통계행 추가” 버튼을 클릭하여 통계행을 추가한다.

2

“operation” 속성은 통계 데이터를 계산하는 방식을 지정하는 속성이다.

“operation” 속성을 선택하여 “0:합계”로 지정한다.

“title” 속성을 “합계”로 지정한다.

“title” 속성을 지정한 경우, “column_showtitle” 속성에 지정된 칼럼에 표시된다.

3 “title” 속성에 지정한 내용이 표시될 칼럼을 지정한다.

통계 속성 지정


- 80 -

“Grid” 화면을 “미리보기” 메뉴를 통해서 창을 표시하고, 작업한 내용을 확인한다.

각각의 칼럼을 편집하여 칼럼의 “data_type”, “input_type” 속성이 어떻게 반영되는지 확인한다.

하단의 수평 스크롤 바를 움직여 고객명까지의 칼럼이 고정되어 있는지 확인한다.

합계행의 데이터가 정상적으로 표시되는지 확인한다.

“추가”, “체크 삭제”, “전체 삭제” 버튼을 클릭하여 동작을 확인한다.

화면 테스트


- 81 -

이 장에서는 팝업 화면 개발과 관련된 내용을 기술합니다. 이 장에서 기술하는 내용은 아래와 같습니다.

팝업 화면 개요

팝업 호출 화면 생성

팝업 화면 생성

팝업 화면 로드

팝업 화면과의 값 전달

팝업 화면이란 새로운 창을 띄워서 업무 화면의 부가적인 선택 사항이나, 처리를 진행하는 화면이다. 팝업을

띄운 화면과 팝업 화면간에는 부모-자식 관계를 가진다.

팝업 화면과 팝업 화면을 호출한 화면간에는 양방향으로 데이터를 전달하여 처리한다.

66 장장.. 팝팝업업 화화면면 개개발발

팝업 화면 개요


- 82 -


프로젝트 창에서 프로젝트를 마우스 오른쪽 버튼을 클릭하고, “디렉토리 생성” 메뉴를 선택한다.

아래의 그림과 같이 디렉토리 생성창이 표시되면 값을 입력하고 하단의 “추가” 버튼을 클릭한다.

디렉토리가 생성된 이후에, “프로젝트” 창은 아래와 같이 표시된다.

팝업 호출 화면 생성


- 83 -

화면 생성

“화면””새 화면” 메뉴를 선택하여 새로운 화면을 생성하고, 아래의 그림과 같이 화면의 “title” 속성을 “팝업

화면 호출”이라고 지정한다.

화면 UI 구성



1 텍스트 text 팝업 화면으로 전달할

2 텍스트 text 값팝업 화면으로부터 전달된 값

3 한글 필드 name fldDataToPopup

4 한글 필드 name fldDataFromPopup

5 버튼 name btnLoadPopup

text 팝업


- 84 -

화면 저장

“화면””저장” 메뉴를 선택하여 아래의 그림과 같이 “POPUP” 디렉토리를 선택하고, “저장할 화면 아이디”

항목에 “LoadPopup” 이란 이름으로 지정하여 저장한다.


- 85 -

화면 생성

“화면””새 화면” 메뉴를 선택하여 새로운 화면을 생성하고, 아래의 그림과 같이 화면의 “title” 속성을 “팝업”

이라고 지정하고, “width”, “height” 속성을 변경한다.

팝업 화면 생성


- 86 -

화면 UI 구성



1 텍스트 text 팝업 화면으로 전달된 값

2 텍스트 text 팝업 화면에서 전달할 값

3 한글 필드 name fldDataFromScreen

4 한글 필드 name fldDataToScreen

5 버튼 name btnOk

text 확인

6 버튼 name btnCancel

text 취소

화면 저장

“화면””저장” 메뉴를 선택하여 “POPUP” 디렉토리에 Popup” 이름으로 저장한다. 저장이 완료되면 “프로젝트”

창에 아래의 그림과 같이 “POPUP” 디렉토리 하위에 2 개의 화면이 표시된다.


- 87 -

“LoadPopup” 화면에서 “btnLoadPopup” 버튼의 mouse_up 이벤트를 처리하여 팝업 화면을 띄우는 부분을

아래와 같이 개발한다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

// 팝업 버튼 이벤트 처리 function btnLoadPopup_on_mouseup(objInst) {

// 팝업 이름 변수 선업 및 값 지정 var strPopupName = "POPUP_NAME";

// factory 오브젝트를 이용하여 팝업 화면 생성 // 두번재 파라미터는 팝업 화면의 경로를 의미한다. // 화면 경로는 프로젝트 ID 가 "/"로 표시되고, 그 하위의 경로는 // 디렉토리명과 화면 ID 로 구성된다. factory.loadpopup(strPopupName, "/POPUP/Popup", "팝업 타이틀",

false, 2, 0, 0, true, true, screen);

// 생성한 팝업 화면 오브젝트를 팝업 이름을 이용하여 찾음 var objPopup = factory.findpopup(strPopupName);

// 팝업 화면을 모달 형식으로 화면에 표시 var nReturn = objPopup.domodal(); // 팝업 화면 스크립트에서 호출한 unloadpopup 함수의 파라미터로 전달된 값이 // domodal() 함수의 리턴 값으로 전달됨 factory.consoleprint("nReturn = " + nReturn);

}

라인 설명

5 팝업 화면을 생성하기 전에 팝업 화면을 구별할 이름으로 사용될 변수를 선언한다.

11

팝업 화면을 생성하기 위해, “factory” 오브젝트의 “loadpopup” API를 호출한다.

“loadpopup” API에 대한 자세한 설명은 “loadpopup” 부분에 마우스를 클릭하고, F1키를 눌러

도움말을 참조한다.

“loadpopup” 함수의 두번째 파라미터는 로드할 팝업 화면의 경로를 의미한다.

“loadpopup” 함수의 파라미터의 맨 마지막 파리미터인 screen은 현재 화면을 가리키는 오브젝

트이다.

15 팝업 화면 이름을 기준으로 생성한 팝업 화면 오브젝트를 구한다.

18 팝업 화면 오브젝트의 “domodal” API 를 호출하여 팝업 화면을 모달 형식으로 표시한다.

모달(Modal) 형식으로 팝업 화면을 표시한다는 것은, 팝업 화면이 닫히기 전에, 팝업 화면을 호출한 화면이

동작할 수 없다는 것을 의미한다.

팝업 화면 로드


- 88 -

팝업 화면을 호출한 화면과 팝업 화면간의 데이터 전달을 처리하기 위해서 “Popup” 화면을 수정한다.

우선, 화면 로드시 팝업 화면을 호출한 화면에서 값을 가져와서 팝업 화면에 표시하기 위해서 아래와 같이

화면의 “on_load” 이벤트를 지장하고 개발한다.

1 2 3 4 5 6 7 8 9 10 11 12

// 화면 로드 이벤트 처리 function screen_on_load() {

// 부무 화면의 화면 오브젝트를 구함 var objParentScreen = screen.getparent();

// 부무 화면의 "fldDataToPopup" 필드 오브젝트을 구함 var objFldDataToPopup = objParentScreen.getinstancebyname("fldDataToPopup");

// 팝업 화면의 필드에 부모 화면의 필드의 값을 설정 fldDataFromScreen.settext(objFldDataToPopup.gettext());

}

라인 설명

5 팝업 화면에서 팝업 화면을 호출한 화면의 화면 오브젝트를 구한다.

8

부모 화면의 “screen” 오브젝트를 이용해서 부모 화면의 “fldDataToPopup” 필드 오브젝트를 구

한다.

화면에 포함된 UI 컨트롤들은 해당 화면 오브젝트의 “getinstancebyname” 함수를 통해서 UI 컨

트롤 오브젝트를 구할 수 있다.

팝업 화면과의 데이터 전달


- 89 -

팝업 화면에서 팝업 호출 화면으로 데이터 전달

팝업 화면에서 입력한 값을 팝업 호출 화면으로 전달하기 위해서 “확인” 버튼 클릭 이벤트를 아래와 같이

개발한다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

// 확인 버튼 이벤트 처리 function btnOk_on_mouseup(objInst) {

// 부무 화면의 화면 오브젝트를 구함 var objParentScreen = screen.getparent();

// 부모 화면의 "fldDataFromPopup" 필드 컨트롤을 구함 var objFldDataFromPopup= objParentScreen.getinstancebyname("fldDataFromPopup");

// 부모 화면의 필드에 팝업 화면의 필드의 값을 설정 objFldDataFromPopup.settext(fldDataToScreen.gettext());

// 팝업 화면 닫는 합수 호출 screen.unloadpopup(1);

}

라인 설명

8

부모 화면의 “screen” 오브젝트를 이용해서 부모 화면의 “fldDataFromPopup” 필드 오브젝트를

구한다.

화면에 포함된 UI 컨트롤들은 해당 화면 오브젝트의 “getinstancebyname” 함수를 통해서 UI 컨

트롤 오브젝트를 구할 수 있다.

14 팝업 화면을 닫는 함수를 호출한다.

팝업 화면 취소 기능 개발

팝업 화면에서 입력한 값을 팝업 호출 화면으로 전달하지 않고, 그대로 종료하기 위해서 “취소” 버튼 클릭

이벤트를 아래와 같이 개발한다.

1 2 3 4 5 6 7 8 9

// 취소 버튼 이벤트 처리 function btnCancel_on_mouseup(objInst) {

// 팝업 화면 닫기 확인 if(screen.confirm("팝업 화면을 닫으시겠습니까?") == true) {

// 팝업 화면 닫는 합수 호출 screen.unloadpopup(0);

} }


- 90 -

“LoadPopup” 화면을 “미리보기” 메뉴를 통해서 창을 표시하고, “팝업 화면으로 전달할 값” 필드에 “111”을

입력한 이후에 “팝업” 버튼을 클릭한다.

팝업 화면이 표시되면 아래의 그림과 같이 “팝업 화면으로 전달된 값” 필드에 “111”이라 값이 표시되는 것을

확인한다.

팝업 화면에서 “팝업 화면에서 전달할 값”을 입력하고 “확인” 버튼을 클릭하여, 입력한 값이 팝업 화면을

호출한 필드로 값이 전달되는 것도 확인해 보자.

화면 테스트


- 91 -

이 장에서는 UI 컨트롤 및 화면에서 발생하는 이벤트 처리에 대해서 기술합니다. 이 장에서 기술하는 내용은


이벤트 개요 및 구분

이벤트 처리 샘플

이벤트란 xFrameViewer 가 화면에게 어떠한 동작이 발생했다는 정보를 알려주는 것을 말하며, UI 컨트롤에

대해서만이 아니라, 화면에 대해서도 이벤트가 발생한다.

화면을 포함한 각 UI 컨트롤에서 발생할 수 있는 이벤트는 개발툴에서 확인할 수 있으며, 각 이벤트에 대한

처리를 하기 위해서는 이벤트 처리 함수를 지정해야한다.

이벤트 처리 함수가 지정된 이벤트에 대해서 이벤트가 발생하면, 이벤트 처리 함수에 각 이벤트와 관련된

정보가 파라미터로 전달되며, 이벤트는 이벤트 속성에 따라 단순 이벤트와 리턴 이벤트로 구분된다.

77 장장.. 이이벤벤트트 설설명명

이벤트 개요


- 92 -

단순 이벤트

단순 이벤트는 이벤트 발생시 호출되는 함수의 Return 값이 없는 이벤트를 의미한다. 이벤트 처리 함수에서는

아무런 리턴을 하지 않는다. 예를 들어, 아래의 그림처럼 버튼 컨트롤의 “mouse_up” 이벤트는 이벤터 처리

함수의 리턴 값이 없는 이벤트 이며, 값을 리턴한다 하더라도, 리턴 값이 아무런 영향을 가지지 않는다.

UI Control

button_on_mouseupbutton_on_mouseup

StartStart

사용자가 버튼 클릭사용자가 버튼 클릭

xFrame Viewer

Fire Button Mouse Up EventFire Button Mouse Up Event

EndEnd

이벤트 후처리이벤트 후처리

EventParameter

EventParameter

이벤트 전처리이벤트 전처리

UI Control

button_on_mouseupbutton_on_mouseup

StartStart

사용자가 버튼 클릭사용자가 버튼 클릭

xFrame Viewer

Fire Button Mouse Up EventFire Button Mouse Up Event

EndEnd

이벤트 후처리이벤트 후처리

EventParameter

EventParameter

이벤트 전처리이벤트 전처리


- 93 -

리턴 이벤트

리턴 이벤트는 이벤트 발생시 호출되는 이벤트 처리 함수의 Return 값이 이벤트 처리 절차에 영향을 미치는

이벤트를 의미한다. 예를들어, 아래의 그림과 같이 탭 콘트롤의 “item_destroy” 이벤트 처리 함수의 경우,

이벤트 처리 함수의 리턴 값에 따라, 이벤트 처리 후처리(탭 아이템을 닫을지 여부)의 진행 절차가 변경됩니다.

UI Control

tab_on_itemdeletetab_on_itemdelete

StartStart

Call deleteTab( )Call deleteTab( )

xFrame Viewer

Fire Tab Item Delete EventFire Tab Item Delete Event

Return Value== 1?

NoYes

EndEnd

“Yes” Case 처리“Yes” Case 처리 “No” Case 처리“No” Case 처리

Event ParameterEvent Parameter

UI Control

tab_on_itemdeletetab_on_itemdelete

StartStart

Call deleteTab( )Call deleteTab( )

xFrame Viewer

Fire Tab Item Delete EventFire Tab Item Delete Event

Return Value== 1?

NoYes

EndEnd

“Yes” Case 처리“Yes” Case 처리 “No” Case 처리“No” Case 처리

Event ParameterEvent Parameter


- 94 -

“화면””새 화면” 메뉴를 선택하여 새로운 업무 화면을 생성한다.

새롭게 생성한 화면의 속성을 아래와 같이 지정한다.

속성 값

title 이벤트 처리

width 812

height 500

화면 저장

“프로젝트” 창에서 “EVENT”이란 디렉토리를 생성하고, 현재 새롭게 생성한 화면을 “Event” 이란 ID 로 저장한다.

이후의 화면 개발 작업 진행시, “화면””저장” 메뉴를 선택하여, 작업한 내역을 저장한다.

화면 생성


- 95 -

화면 UI 구성

탭 컨트롤

탭 컨트롤은 탭 아이템에 UI 컨트롤을 포함할 수 있는 기능을 제공하는 컨트롤이며, 아래의 그림과 같이

“오브젝트” 창에서 선택하여 화면을 구성할 수 있다.

탭 콘트롤은 아래의 그림과 같은 명명 규칙을 가지고 있다.

Tab Item

Tab ItemContent Panel

Tab Item

Tab ItemContent Panel


- 96 -

화면의 UI 구성은 아래의 그림과 같이 개발한다. 좌측 상단의 “이름” 및 “주소”는 각각 텍스트 컨트롤을 올려서

구성한다.


1 한글필드 name fldName

2 한글필드 name fldAddr

3 버튼 name btnEvent

text 단순 이벤트

4 탭

name tabEvent

tabitem_xbutton True

tab

#1

title 첫번째 탭

width 100

tab

#2

title 두번째 탭

width 100

tab

#3

title 세번째 탭

width 100


- 97 -

탭 속성 설정

탭 속성 설정은 아래의 그림과 같이 탭 컨트롤의 “tab” 속성을 더블클릭하면 아래의 그림과 같이 표시된다.

번호 값

1 “탭 추가” 버튼을 클릭하여 탭 아이템을 추가한다.

“탭 추가” 버튼을 클릭하면 계속적으로 탭 아이템을 추가할 수 있다.

2 “탭 아이템” 콤보 박스를 선택하여 각각의 탭 아이템을 지정할 수 있다.


- 98 -

“단순 이벤트” 버튼의 “mouse_up” 이벤트를 다음과 같이 작성하자.

1 2 3 4 5

// 버튼 이벤트 처리 function btnEvent_on_mouseup(objInst) {

screen.alert("버튼 이벤트는 단순 이벤트 입니다.₩n 리턴 값이 없습니다."); }

단순 이벤트는 버튼의 “mouse_up” 이벤트 처리 함수처럼, 이벤트 처리 함수에서 리턴값을 반환하지 않는다.

단순 이벤트 처리


- 99 -

리턴 이벤트 처리를 확인하기 위해서 “tabEvent” 탭 컨트롤의 “on_itemdestory” 이벤트를 다음과 같이 개발한다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14

// 탭 아이템 삭제 이벤트 처리 function tabEvent_on_itemdestroy(objInst, itemindex) {

// 삭제 이벤트가 발생한 탭 아이템의 텍스트를 구함 var strItemText = tabEvent.gettabitemtext(itemindex);

// 탭 아이템 삭제 확인 메시지 박스 표시

if(screen.confirm(strItemText + "을 닫으시겠습니까?") == false) { // 탭 아이템이 삭제되지 않토록, 0 을 리턴

return 0; }

// 그외의 경우에는 1 을 리턴하여 탭이 삭제되도록 처리 return 1;

}

탭 컨트롤의 “on_itemdestory” 이벤트는 리턴 이벤트이며, 이벤트 처리 함수의 리턴 값에 따라서, 이후 탭

아이템 삭제 처리가 결정된다.

리턴 이벤트 처리


- 100 -

키 이벤트는 다른 이벤트와 달리 이벤트가 컨트롤이 속해있는 화면 또는 화면의 부모 화면에게 전달되는

특성이 있다. 키보드의 키는 각각 키 코드라는 숫자로 컴퓨터에서 인식되며, 키 이벤트 발생시, 눌려진 키에

대한 코드와 CTRL, SHIFT, ALT 키가 눌려졌는지의 정보, 키가 숫자 키 패드에서 눌려졌는지에 대한 정보도

전달된다.

아래의 내용과 같이, “fldName” 컨트롤과 화면에 “on_keydown” 이벤트를 작성하자.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

// 화면의 키 다운 이벤트 처리 function screen_on_keydown(keycode, bctrldown, bshiftdown, baltdown, bnumpadkey) {

factory.consoleprint("screen_on_keydown> keycode = " + keycode);

// F1 키를 눌렀을 경우 if(keycode == 1112) {

screen.alert("화면에 대한 도움말입니다.₩n 이 화면은 이벤트에 대한 샘플입니다."); return 1;

}

return 0; } // 이름 필드에 대한 키 다운 이벤트 처리 function fldName_on_keydown(objInst, keycode, bctrldown, bshiftdown, baltdown, bnumpadkey){

factory.consoleprint("fldEvent_on_keydown> keycode = " + keycode);

// F1 키를 눌렀을 경우 if(keycode == 1112) {

screen.alert("필드에 대한 도움말입니다.₩n 이름을 입력해 주세요!"); // 키 이벤트를 화면으로 전달하지 않기 위해, 1 을 리턴 return 1;

}

// 키 이벤트를 화면으로 전달시키기 위해, 0 을 리턴 return 0;

}

키 이벤트 처리


- 101 -

결과 학인

“화면””미리보기” 메뉴를 통해서 개발한 화면을 테스트 해보면, 아래와 같이 동작해야 한다.

“fldName” 필드에 포커스를 두고, 키보드의 키를 입력하면, 콘솔 창을 통해서 필드 및 화면의 모든

“on_keydown” 이벤트가 발생하는 것을 확인할 수 있다.

“fldName” 필드에 포커스를 두고, “F1” 키를 눌렀을 경우에는, 화면의 “on_keydown” 이벤트가 발생하지

않는다.

“fldAddr” 필드에 포커스를 두고, “F1” 키를 눌렀을 경우에는, 화면의 “on_keydown” 이벤트가 발생한다.


- 102 -

이 장에서는 화면의 공통 기능을 처리하기 위한 화면 프레임 개발 방법에 대해서 기술합니다. 이 장에서

기술하는 내용은 아래와 같습니다.

UI 프레임 개요

탭 컨트롤을 이용한 프레임 구성

탭 컨트롤을 이용한 화면 로딩

UI 프레임이란 아래의 그림과 같이 업무 화면 영역이외에 영역을 말한다. 아래의 그림에서 박스로 구분되어

있는 부분이 업무 화면 영역이고, 그 이외의 영역을 UI 프레임이라 부른다.

실제 프로젝트 진행시 각 업무 화면 개발자는 업무 화면 영역 부분만을 개발을 진행한다.

88 장장.. 프프레레임임 화화면면 개개발발

UI 프레임 개요


- 103 -

프레임 화면 개요

프레임 화면이란, 업무 화면 개발시 공통으로 수행되야할 기능을 처리하기 위한 특별한 화면을 말한다. 프레임

화면을 사용하는 이유는, 각각의 업무 화면에 공통으로 사용되는 부분을 공통화함으로써, 각 개별 화면에서

작업해야할 내용을 줄이기 위함이다.

각 업무 화면에 공통으로 수행되야할 기능에는 다음과 같은 것들이 있다.

화면 닫기 버튼

화면 도움말 표시 버튼

화면 타이틀 표시

업무 화면의 거래 처리 진행 상태 표시

업무 화면의 거래 오류 처리 메시지 표시


- 104 -

프레임 화면 개발을 위해서 탭 컨트롤을 사용한다. 탭 컨트롤은 일반적으로 탭 아이템(개별 탭 항목)에 UI

컨트롤을 배치하여 사용하는 기능도 제공하지만, 탭 아이템에 다른 화면을 링크하여 로드할 수 있는 기능도

제공한다.

프레임 화면 생성



속성 값

title 기본 프레임

width 860

height 600

프레임 화면 저장

“프로젝트” 창에서 “FRAME” 이란 디렉토리를 생성하고, 현재 새롭게 생성한 화면을 “SimpleFrame” 이란 ID 로

저장한다.


프레임 화면 개발


- 105 -

콤보 박스 컨트롤

콤보 박스 컨트롤은 코드성 데이터를 표시하기 위한 기능을 수행하는 컨트롤로, 아래의 그림과 같인 “오브젝트”

창에서 선택하여 화면을 구성할 수 있다.

프레임 화면 UI 구성

프레임 화면의 UI 구성은 아래의 그림과 같이 개발한다.

프레임 화면 UI 구성


- 106 -


1 텍스트 text TEXT OBJECT

name txtScreenTitle

2 텍스트 text 화면 URL

3 일반 필드 name fldScreenUrl

4 버튼 name btnOpenScreen

text 열기

5 콤보박스

name cboAlignType

editable false

default_value 0


picklist_viewstyle 1:code_comment

comobbox_data

0:기본

1:수직

2:수평

3:계단식

6 버튼 name btnAlign

text 정렬

7 버튼 name btnReload

text Reload

8 버튼 name btnClose

text 닫기

9 탭

name tabScreen

x 6

y 36

width 846

height 558

tabitem_position 1:bottom


- 107 -

화면 타이틀 정보 표시 함수 개발

탭에 링크된 화면의 타이틀을 “txtScreenTitle” 택스트 컨트롤에 표시하기 위한 함수를 아래와 같이 개발한다. 이

함수는 “열기” 버튼 이벤트 처리 함수와 “Reload” 버튼 이벤트 처리 함수, 탭 아이템 변경 이벤트 처리 함수에서

호출되어 사용된다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

// 개발자가 직접 개발한 함수 // 화면 타이틀 텍스트와 탭 아이템의 텍스트를 변경 function setTitleTextAndTabItemText(nTabIndex) {

// 새로운 탭에 링크된 화면의 타이틀을 구하여 화면 타이틀 설정 txtScreenTitle.settext(tabScreen.getinnerscreentitle(nTabIndex));

// 타이틀 텍스트 길이 길만큼 텍스트 컨트롤의 길이 조절 txtScreenTitle.fittext();

// 텝에 링크된 화면 오브젝트를 구함 var objScreen = tabScreen.getchildscreeninstance(nTabIndex);

// 탭에 링크된 화면의 ID 를 구함 var strScreenId = objScreen.getscreenid();

// 탭 아이템 텍스트를 링크돤 화면의 ID 로 변경 tabScreen.settabitemtext(nTabIndex, strScreenId);

return;

}

프레임 화면 이벤트 개발


- 108 -

열기 버튼 이벤트 처리

“열기” 버튼을 클릭하면 “tabScreen” 컨트롤에 “fldScreenUrl” 필드에 입력한 화면 URL 에 해당하는 화면을

로드하는 처리를 수행한다.

“열기” 버튼에 대한 이벤트 처리 함수는 아래와 같다. 자세한 설명은 소스내의 주석을 참조한다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

// 열기 버튼 이벤트 처리 function btnOpenScreen_on_mouseup(objInst) {

// 화면 경로 필드 값을 구함 var strScreenUrl = fldScreenUrl.gettext(); if(strScreenUrl.length == 0) {

screen.alert("화면 경로를 입력하세요"); return;

}

// 탭에 화면 경로에 해당하는 화면을 로드하고, 새로 추가된 탭 아이템의 인덱스를 구함 var nTabIndex = tabScreen.addtab("SCREEN_ID", 1, 100, strScreenUrl); if(nTabIndex == -2) {

screen.alert("화면 경로에 해당하는 화면이 존재하지 않습니다."); return;

}

// 화면 타이틀 텍스트와 탭 아이템의 텍스트를 변경 setTitleTextAndTabItemText(nTabIndex);

}


- 109 -

화면 URL 필드 키 다운 이벤트 처리

화면 URL 필드에 “key_down” 이벤트 처리를 수행하여 “Enter”키 입력시 “열기” 버튼을 클릭한것과 같은 동작을

수행하도록 개발한다. 자세한 설명은 소스내의 주석을 참조한다.

1 2 3 4 5 6 7 8 9 10 11 12 13

// 화면 URL 필드에 대한 키 이벤트 처리 function fldScreenUrl_on_keydown(objInst, keycode, bctrldown, bshiftdown, baltdown, bnumpadkey) {

// 키코드가 엔터키인 경우 if(keycode == 13) {

// "열기" 버튼 마우스 업 이벤트 처리 함수를 직접 호출 btnOpenScreen_on_mouseup(); return 1;

} return 0;

}

탭 컨트롤 탭 아이템 변경 이벤트 처리

탭 컨트롤의 탭 아이템이 변경되면 화면 타이틀 텍스트의 내용을 현재 이동된 탭에 링크된 화면의 타이틀로

변경하기 위해서 아래와 같이 “on_itemchange” 이벤트를 처리한다.

1 2 3 4 5 6

// 탭 컨트롤 아이템 변경 이벤트 처리 function tabScreen_on_itemchange(objInst, itemindex) {

// 화면 타이틀 텍스트와 탭 아이템의 텍스트를 변경 setTitleTextAndTabItemText(itemindex);

}

탭 콘트롤 탭 아이템 삭제 이벤트 처리

탭 콘트롤이 모두 삭제되어을 때, 화면 타이틀 텍스트의 내용을 초기화하기 위해 탭 컨트롤의 “on_itemdestroy”

이벤트를 처리한다.

1 2 3 4 5 6 7

// 탭 컨트롤 아이템 삭제 이벤트 처리 function tabScreen_on_itemdestroy(objInst, itemindex) {

// 화면 타이틀의 내용을 초기화한다. txtScreenTitle.settext(""); return 1;

}


- 110 -

Reload 버튼 이벤트 처리

“Reload” 버튼 클릭시 현재 선택된 탭 아이템에 현재 링크된 화면을 다시 로드하는 처리를 수행하기 위해서

아래와 같이 개발한다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

// Reload 버튼 이벤트 처리 function btnReloadScreen_on_mouseup(objInst) {

// 현재 포커스를 가진 탭 아이템의 인덱스를 구함 var nTabIndex = tabScreen.gettabitemfocus(); if(nTabIndex < 0) { screen.alert("현재 탭이 없습니다.");

return; }

// 현재 탭에 링크된 화면의 URL 을 구함 var strScreenUrl = tabScreen.getinnerscreenurl(nTabIndex);

// 현재 포커스를 가진 탭에 기존 화면 URL 에 해당하는 화면을 새롭게 로드 var nResult = tabScreen.setinnerscreenurl(nTabIndex, strScreenUrl); if(nResult == -2) {

screen.alert("화면 경로에 해당하는 화면이 존재하지 않습니다."); return;

}

// 화면 타이틀 텍스트와 탭 아이템의 텍스트를 변경 setTitleTextAndTabItemText(nTabIndex); return;

}

닫기 버튼 이벤트 처리

“닫기” 버튼 클릭시 현재 선택된 탭 아이템을 삭제하는 작업을 수행하기 위해서, 아래와 같이 개발한다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

// 닫기 버튼 이벤트 처리 function btnCloseScreen_on_mouseup(objInst) {

// 현재 포커스를 가진 탭 아이템의 인덱스를 구함 var nTabIndex = tabScreen.gettabitemfocus(); if(nTabIndex < 0) {

screen.alert("현재 탭이 없습니다."); return;

}

// 현재 포커스를 가진 탭을 삭제 // 탭 컨트롤의 "on_itemdestroy" 이벤트가 발생한다. tabScreen.deletetab(nTabIndex);

return;

}


- 111 -

정렬 버튼 이벤트 처리

“정렬” 버튼 클릭시 현재 정렬 콤보 박스에 선택한 방식으로 탭에 링크된 화면을 정렬하기 위해서 아래와 같이

개발한다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

// 정렬 버튼 이벤트 처리 function btnAlign_on_mouseup(objInst) {

// 정렬 타입 콤보에서 현재 선택한 코드 값을 구함 var strAlignType = cboAlignType.getselectedcode();

// 정렬 코드 값에 따라 분기 처리 switch(strAlignType) {

case "0" : // 최대화 모드 tabScreen.changeshowmode(1);

break; case "1" : // 수직 정렬

tabScreen.showtilevert(); break;

case "2" : // 수평 정렬 tabScreen.showtilehorz(); break;

case "3" : // Cascade 정렬 tabScreen.showcascade(); break;

default : screen.alert("정의되지 않은 정렬 타입입니다."); break;

}

return; }

화면 로드 이벤트 처리

화면 로드시 “fldScreenUrl” 필드에 기본값을 설정하기 위해서 아래와 같이 개발한다.

1 2 3 4 5 6


// 화면 URL 필드에 기본값 설정 fldScreenUrl.settext("/START/SayHello");

}


- 112 -

“SimpleFrame” 화면을 “미리보기” 메뉴를 통해서 창을 표시하고, “열기” 버튼을 클릭하면, 화면 URL 에

해당하는 화면이 하단 탭에 표시되는 것을 확인할 수 있다.

“Reload” 버튼을 눌러 화면이 다시 로드되는지와, 과 “닫기” 버튼을 눌러 화면이 닫히는지 확인하자.

2 개 이상의 화면을 로드한 이후에, “정렬 방식”을 변경하고, “정렬” 버튼을 클릭하여 탭에 링크된 화면이

정렬되는지 동작하는지도 확인하자.

화면 테스트


- 113 -

이 장에서는 팝업 메뉴 화면을 개발하기 위한 기능에 대하여 기술합니다. 이 장에서 기술하는 내용은 아래와

같습니다.

메뉴 화면 개요

메뉴 로드 화면 개발

메뉴 화면 개발 및 멤버 오브젝트 사용

메뉴 화면은 팝업 화면과 유사하게 동작하나, 메뉴 화면은 포커스를 잃어버리면 자동으로 닫히는 특성을

가지고 있다. 이러한 특성을 이용해서 주로 메뉴 화면 개발에 활용된다.

99 장장.. 메메뉴뉴 화화면면 개개발발

메뉴 화면 개요


- 114 -

메뉴 로드 화면 생성



속성 값

title 메뉴 화면 호출

width 860

height 600

메뉴 로드 화면 저장

“프로젝트” 창에서 “MENU”이란 디렉토리를 생성하고, 현재 새롭게 생성한 화면을 “LoadMenu” 이란 ID 로

저장한다.


메뉴 로드 화면 UI 구성


- 115 -

메뉴 로드 화면 UI 구성

메뉴 로드 화면의 UI 구성은 아래의 그림과 같이 개발한다.


1 버튼 name btnLoadMenu

Text 메뉴

9 탭

name tabScreen

X 6

y 36

width 846

height 558



- 116 -

메뉴 화면 생성



속성 값

title 메뉴

width 110

height 56

back_color R: 239, G:231, B:210

칼럼 속성 지정 방법은 아래의 “칼러 속성 지정 방법”을 참조한다.

메뉴 화면 UI 구성


- 117 -

칼라 속성 지정 방법

Color 속성을 지정하기 위해서는 아래의 그림과 같이 back_color 속성을 더블클릭하면 아래의 그림과 같이

색상을 지정할 수 있는 속성이 표시된다.

번호 값

1 “standard” 탭은 기본 색상을 지정할 수 있는 기능을 제공한다.

2 “custom” 탭은 색상값을 보다 정밀하게 지정할 수 있는 기능을 제공한다.

3 ColorPicker 의 좌측 스포이드 아이콘을 마우스로 드래그 하여 색상을 지정할 수 있는 기능을

제공한다.

4 “custom” 탭은 색상값을 Red, Green, Blue 색상의 값을 직접 입력할 수 있는 기능을 제공한다.

메뉴 화면 저장

현재 새롭게 생성한 화면을 “Menu” 이란 ID 로 저장한다.



- 118 -

메뉴 화면 UI 구성

메뉴 로드 화면의 UI 구성은 아래의 그림과 같이 개발한다.


1 버튼

name btnMenu1

text Say Hello

border 0:single-flat

back_color R:207, G:160, B:255

2 버튼

name btnMenu2

text Load Popup

border 0:single-flat

back_color R:207, G:160, B:255


- 119 -

메뉴 버튼 마우스 인(on_mousein) 이벤트 처리

“메뉴” 버튼에 마우스가 들어오면 자동으로 메뉴 화면을 로드하도록 다음과 같이 개발한다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

// 화면 오픈시 사용자 확인 여부 플래그 // 메뉴 화면에서 참조하기 위해서 사용된다. var bConfirmOpen = true; // 메뉴 로드 버튼 이벤트 처리 function btnLoadMenu_on_mousein(objInst) {

// 메뉴 화면의 넓이 및 높이 변수 설정 var nMenuWidth = 110; var nMenuHeight = 80;

// 메뉴 화면의 이름 설정 var strMenuName = "MENU";

// 버튼의 Left 와 Bottom 위치로 메뉴 표시 좌표 설정 var nMenuXPos = btnLoadMenu.getwindowleft(); var nMenuYPos = btnLoadMenu.getwindowbottom();

// 메뉴 화면 로드 factory.loadmenu(strMenuName, "/MENU/Menu",

nMenuXPos, nMenuYPos, nMenuWidth, nMenuHeight, screen); }

메뉴 로드 화면 이벤트 개발


- 120 -

탭에 화면 로드 함수 구현

“Menu” 화면에서 버튼을 눌렀을 때, 호출된 함수를 아래와 같이 개발한다. 주요 기능은 화면 URL 에 대한

정보를 파라미터로 받아서, 화면을 탭에 로드하는 기능을 수행한다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

/** * 메뉴 화면에서 호출되는 함수이며, * 화면 URL 에 대한 정보에 해당하는 화면을 탭 아이템을 추가하면서 로드한다. * @param strScreenUrl 로딩할 화면의 URL * @return * >0 : 추가된 탭 인덱츠 * -1 : 내부 오류 * -2 : 화면이 존재하지 않음 */ function loadScreenInTab(strScreenUrl) {

// 탭에 화면 경로에 해당하는 화면을 로드하고, 새로 추가된 탭 아이템의 인덱스를 구함 var nTabIndex = tabScreen.addtab("SCREEN_ID", 1, 100, strScreenUrl); if(nTabIndex < 0) {

return nTabIndex; }




return nTabIndex;

}


- 121 -

각 메뉴 버튼 이벤트 처리

각 메뉴 버튼(“Say Hello” 버튼, “Load Popup” 버튼) 클릭시 화면이 부모화면의 탭에 화면이 로드되도록 아래와

같이 이벤트 처리 함수를 개발한다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

// "Say Hello" 버튼 이벤트 처리 function btnMenu1_on_mouseup(objInst) {

// 화면 로드 함수 호출 loadScreenByCallParentScreenFunc("/START/SayHello");

} // "Load Popup" 버튼 이벤트 처리 function btnMenu2_on_mouseup(objInst) {

// 화면 로드 함수 호출 loadScreenByCallParentScreenFunc("/POPUP/LoadPopup");

} /** * 화면 URL 에 대한 정보에 해당하는 화면을 로드하기 위해서 * 부모 화면의 loadScreen 함수를 호출한다. * @param strScreenUrl 로딩할 화면의 URL */ function loadScreenByCallParentScreenFunc(strScreenUrl) {

// 메뉴를 로드한 부모 화면 오브젝트를 구하고, 검사 var objParentScreen = screen.getparent(); if(factory.isobject(objParentScreen) == false) {

screen.alert("부모 화면을 구할 수 없습니다."); return;

}

// 부모 화면의 JavaScript 멤버 오브젝트를 구하고, 검사 var objParentScreenMember = objParentScreen.getmembers(XFD_JAVASCRIPT); if(factory.isobject(objParentScreenMember) == false) {

screen.alert("부모 화면 멤버을 구할 수 없습니다."); return;

}

// 부모 화면의 JavaScript 멤버 오브젝트를 통해서 // 부모 화면의 JavaScript 에 선언된 전역 변수를 참조하여 조건 처리 if(objParentScreenMember.bConfirmOpen == true) {

if(screen.confirm(strScreenUrl + " 화면을 로드하시겠습니까?") == false) { return; }

}

메뉴 화면 이벤트 개발


- 122 -

44 45 46 47 48 49 50

// 부모 화면의 JavaScript 멤버 오브젝트를 통해서, // 부모 화면에 있는 loadScreen 함수 호출 var nRet = objParentScreenMember.loadScreen(strScreenUrl); if(nRet < 0) {

screen.alert("화면 로드 오류가 발생하였습니다."); }

}

라인 설명

5, 12 화면내에서 구현한 loadScreenByCallParentScreenFunc 함수를 호출하면서, 로드할 화면의 경로

를 파라미터로 전달한다.

22 ~ 27 메뉴 화면을 로드한 화면의 화면 오브젝트를 구한다.

29 ~ 34

메뉴 화면을 로드한 화면(“LoadMenu” 화면)의 JavaScript 멤버 오브젝트를 구한다.

화면의 JavaScript 멤버 오브젝트는 해당 화면에 구현된 JavaScript를 호출하기 위한 특별한 오브

젝트이다.

36 ~ 42 메뉴 화면을 로드한 화면의 멤버 오브젝트를 통해서 메뉴 화면을 로드한 화면의 JavaScript에 선

언된 화면 전역 변수를 참조하여 조건 처리를 수행한다.

38 메뉴 화면을 로드한 화면의 멤버 오브젝트를 통해서, 메뉴 화면을 로드한 화면에 구현되어 있는

loadScreenInTab 함수를 호출한다.

.


- 123 -

“LoadMenu” 화면을 “미리보기” 메뉴를 통해서 창을 표시하고, “메뉴” 버튼으로 마우스를 이동하면, “Menu”

화면이 로드되고, “Menu” 화면에서 “Say Hello” 화면을 클릭하면 아래의 그림과 같이 표시된다.

화면 테스트


- 124 -

이 장에서는 트리 컨트롤와 탭 컨트롤을 이용하여 간단한 트리 프레임을 개발하는 방법에 대해서 기술합니다.

이 장에서 기술하는 내용은 아래와 같습니다.

트리 프레임 개요

프레임 크기 변경 처리

트리 프레임은 트리 콘트롤을 이용하여 업무 메뉴에 대한 내용을 보여주고, 트리 항목을 더블 클릭시, 트리

항목에 해당하는 업무 화면을 탭에 로드하는 프레임이다.

트리 프레임 화면 생성



속성 값

title 트리 프레임

width 1020

height 600

트리 프레임 저장

“프로젝트” 창에서 “FRAME”이란 디렉토리를 생성하고, 현재 새롭게 생성한 화면을 “TreeFrame” 이란 ID 로

저장한다.


1100 장장.. 트트리리 프프레레임임 개개발발

트리 프레임 개요

트리 프레임 화면 UI 구성


- 125 -

트리 프레임 화면 UI 구성

트리 컨트롤은 아래의 그림과 같아 “오브젝트” 창에서 트리 모양의 아이콘을 이용하여 생성한다.

트리 프레임 화면의 UI 구성은 아래의 그림과 같이 개발한다.


1 버튼

name btnShow

text 보이기

hidden True

2 버튼 name btnHide

text 숨기기

3 트리 name treMenu

x 6


- 126 -

y 30

width 186

height 564

4 체크박스 name chkOption

탭

name tabScreen

x 198

y 6

width 814

height 588



- 127 -

트리 컨트롤에 메뉴 정보 구성

화면의 “on_load” 이벤트에 아래와 같이 트리 컨트롤이 구성되도록 개발한다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28


// 트리의 Root 아이템 추가 var nRootItem = treMenu.insertitem("메뉴 트리", 0, 0, 0);

// Root 아이템에 하위에 디렉토리 아이템 추가 var nDirItem = treMenu.insertitem("샘플 화면", 1, 2, nRootItem);

var nScreenItem;

// 디렉토리 아이템에 화면을 링크할 아이템 추가 nScreenItem = treMenu.insertitem("Say Hello", 3, 3, nDirItem);

// 추가된 아이템에 화면 경로 정보 설정 treMenu.setitemdata(nScreenItem, "/START/SayHello");

// 디렉토리 아이템에 화면을 링크할 아이템 추가 nScreenItem = treMenu.insertitem("Load Popup", 3, 3, nDirItem);

// 추가된 아이템에 화면 경로 정보 설정 treMenu.setitemdata(nScreenItem, "/POPUP/LoadPopup");

// Root 트리 아이템을 펼침 treMenu.expand(nRootItem, XFD_TREEITEM_EXPAND); return;

}

메뉴 화면 이벤트 개발


- 128 -

함수 개발

트리 콘트롤에서 이벤트 발생시 부가적인 작업을 진행하기 위한 함수를 아래와 같이 개발한다.

getScreenTabIndex 함수는 화면 URL 정보를 파라미터로 받아서, “tabScreen” 컨트롤에 이미 그 화면이 열려져

있는지를 검사하는 기능을 수행한다.

loadScreen 함수는 화면 URL 정보를 팔미터로 받아서, “tabScreen” 컨트롤에 화면을 로드하는 기능을 수행한다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

/** * 화면 URL 에 탭의 아이템 인덱스를 리턴 * @param strScreenUrl 찾을 화면의 URL * @return * >= 0 탭 아이템 인덱스 * -1 탭에 없는 경우 */ function getScreenTabIndex(strScreenUrl) {

var nTabIndex = -1;

// 탭 아이템의 갯수를 구함 var nTabCount = tabScreen.gettabitemcount(); var i;

// 탭 아이템 갯수만큼 Loop for(i = 0; i < nTabCount; i++) {

// 탭 아이템에 링크된 화면의 URL 을 구함 var strTempScreenUrl = tabScreen.getinnerscreenurl(i); // 화면 URL 비교하여 같으면, Loop 종료 if(strTempScreenUrl == strScreenUrl) { nTabIndex = i; break; }

}

return nTabIndex; } /** * 화면 URL 에 대한 정보에 해당하는 화면을 탭 아이템을 추가하면서 로드한다. * 트리 콘트롤의 더블 클릭 이벤트 처리 함수에서 호출하는 함수이다. * @param strScreenUrl 로딩할 화면의 URL * @return * >0 : 추가된 탭 인덱츠 * -1 : 내부 오류 * -2 : 화면이 존재하지 않음 */ function loadScreenInTab(strScreenUrl) {

// 탭에 화면 경로에 해당하는 화면을 로드하고, 새로 추가된 탭 아이템의 인덱스를 구함 var nTabIndex = tabScreen.addtab("SCREEN_ID", 1, 100, strScreenUrl);


- 129 -

44 45 46 47 48 49 50 51 52 53 54 55 56 57 58

if(nTabIndex < 0) { return nTabIndex;

}




return nTabIndex;

}


- 130 -

트리 컨트롤의 이벤트 처리

트리 컨트롤의 특정 아이템을 더블 클릭한 경우, 해당 화면을 탭에 로드하기 위해서 아래와 같이 개발한다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

// 트리 더블클릭 이벤트 처리 function treMenu_on_itemdblclick(objInst, item) {

// 더블클릭 이벤트가 발생한 트리 아이템의 데이터 정보를 구함 // 데이터 정보는 화면 로드 이벤트에서 트리 아이템 추가시 // setitemdata 함수를 통해서 설정한 데이터임 var strItemData = treMenu.getitemdata(item);

// 트리 아이템에 설정된 데이터가 없는 경우에는 그냥 리턴 if(strItemData == 0) {

return; }

// 화면 중복 열기 허용 옵션이 체크되어 있지 않은 경우 if(chkOption.getcheck() == false) {

// 탭에 이미 화면이 열려져 있는지 확인 var nTabIndex = getScreenTabIndex(strItemData); if(nTabIndex >= 0) { // 탭에 이미 화면이 열려져 있는 경우, // 해당 탭 아이템에 포커스를 주고, 리턴 tabScreen.settabitemfocus(nTabIndex, true); return;

} }

// 트리 아이템 데이터는 화면 경로가 설정되어 있으므로, 화면 로드 함수 호출 var nRet = loadScreenInTab(strItemData); if(nRet < 0) {

screen.alert("화면 로드 오류가 발생하였습니다."); }

return;

}


- 131 -

숨기기, 보이기 버튼 이벤트 처리

“숨기기”, “보이기” 버튼 이벤트 발생시, 좌측 트리 컨트롤 및 화면이 표시되는 탭 컨트롤을 제어하기 위해서

다음과 같이 개발한다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

// 숨기기 버튼 이벤트 처리 function btnHide_on_mouseup(objInst) {

// 숨기기 버튼을 숨김 btnHide.setvisible(false);

// 체크 박스 숨김 chkOption.setvisible(false);

// 보이기 버튼을 표시 btnShow.setvisible(true);

// 트리 컨트롤을 숨김 treMenu.setvisible(false);

// 탭의 좌표를 구하고, 탭의 좌표중 좌측 X 값을 조절하고, 탭의 크기 변경 var arrRect = tabScreen.getrect(); arrRect[0] = arrRect[0] - 140; tabScreen.setrect(arrRect[0], arrRect[1], arrRect[2], arrRect[3]); return;

} // 보이기 버튼 이벤트 처리 function btnShow_on_mouseup(objInst) {

// 숨기기 버튼을 표시 btnHide.setvisible(true);

// 체크 박스 표시 chkOption.setvisible(true);

// 보이기 버튼을 숨김 btnShow.setvisible(false);

// 트리 컨트롤을 표시 treMenu.setvisible(true);

// 탭의 좌표를 구하고, 탭의 좌표중 좌측 X 값을 조절하고, 탭의 크기 변경 var arrRect = tabScreen.getrect(); arrRect[0] = arrRect[0] + 140; tabScreen.setrect(arrRect[0], arrRect[1], arrRect[2], arrRect[3]); return;

}


- 132 -

이 장에서는 X-Internet 솔루션인 내장 오브젝트인 멤버 오브젝트에 대하여 기술합니다. 이 장에서 기술하는

내용은 아래와 같습니다.

멤버 오브젝트 개요

멤버 오브젝트 활용

멤버 오브젝트는 특정 화면의 스트립트 로직을 접근할 수 있는 특별한 오브젝트이다.

특정 화면의 멤버 오브젝트는 그 화면의 화면 오브젝트를 구하여, 화면 오브젝트의 getmembers API를

통해서 구한다.

특정 화면의 멤버 오브젝트를 구하면, 그 화면의 스트립트 함수를 호출하거나, 그 화면에 스크립트에 전

역 변수룰 설정된 변수를 참조할 수 있다.

“프로젝트” 창에서 “MEMBER”란 디렉토리를 생성한다.

기존에 작성된 화면중에 “/START/SayHello” 화면을 열어서, “화면””다른 이름으로 저장” 메뉴를 선택하여

“MEMBER” 디렉토리에 “Member”란 ID 로 저장한다.

1111 장장.. 멤멤버버 오오브브젝젝트트

멤버 오브젝트 개요

화면 생성


- 133 -

멤버 오브젝트를 이용한 예제를 작성하기 위해, 아래와 같이 소스를 수정한다. 변경된 부분은 소스에서 “BOLD”

체로 구성되어 표시되어 있다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

var m_strDefaultName = "홍길동"; // 화면 로드 이벤트 처리 function screen_on_load() {

// 이름 필드에 값을 설정한다. fldName.settext("홍길동");

} /* 버튼의 마우스 업 이벤트를 처리한다. objInst 파라미터는 이벤트가 발생한 UI 컨트롤의 오브젝트이다. */ function btnSayHello_on_mouseup(objInst) {


// 현재 화면의 JavaScript 멤버 오브젝트를 구함 var objMember = screen.getmembers(XFD_JAVASCRIPT); if(factory.isobject(objMember) == false) {

screen.alert("화면의 멤버 오브젝트를 구할 수 없습니다."); return;

}

screen.alert("스크립트의 전역 변수 참조 : " + objMember.m_strDefaultName);

// 현재 시간을 구하는 함수를 멤버 오브젝트를 통해 호출하여 값을 구한다. var strTime = objMember.getCurrentTime();

// screen 오브젝트를 이용해서 화면에 Alert 창을 표시한다. screen.alert("Hello! " + fldName.gettext() + ", 현재 시각 : " + strTime);

} // 아래의 함수는 직접 작성한 함수이다. // 현재 사간을 구하여 리턴한다. function getCurrentTime() {

// factory 오브젝트를 이용해서 현재 시간을 구한다. // JavaScript 에서 변수는 "var" 예약어를 이용해서 선언한다. var strCurrentTime = factory.getsystemtime("%Y-%M-%D %h:%m:%s");

// factory 오브젝트를 이용해서 콘솔 창에 objInst 파라미터의 이름을 출력한다. factory.consoleprint("strCurrentTime : " + strCurrentTime);

// 현재 시간을 리턴한다.

화면 스크립트 변경


- 134 -

47 48

return strCurrentTime; }

xframe getting started guide 20130131 xframe 운영 환경 아키텍처 ... xframe 개발 환경...

Documents