xframe@devstudio 관리자 매뉴얼xframe.co.kr/board/download.php?file=boardfile... · 8/240...

xFrame@DevStudio 사용자 매뉴얼

(주)소프트베이스

2/240


1. xFrame 소개 .............................................................................................................................. 5

1.1. xFrame 이란 ? ........................................................................................................... 5

1.2. xFrame 이란 ? ........................................................................................................... 6

1.3. xFrame 기능 ............................................................................................................... 7

1.4. 업무 흐름도 ................................................................................................................. 8

2. 툴 환경 정보 .............................................................................................................................. 9

2.1. 개발 환경 .................................................................................................................... 9

2.2. 시스템 사양 ................................................................................................................. 9

3. 툴 기능 설명 ............................................................................................................................ 10

3.1. 메뉴 (menu) .............................................................................................................. 10

3.1.1. 프로젝트 메뉴 .................................................................................................... 10

3.1.2. 화면 메뉴 ........................................................................................................... 10

3.1.3. 편집 메뉴 ........................................................................................................... 13

3.1.4. 보기 메뉴 ........................................................................................................... 15

3.1.5. 도구 메뉴 ........................................................................................................... 20

3.1.6. 창 메뉴 .............................................................................................................. 29

3.1.7. 도움말 메뉴 ........................................................................................................ 30

3.2. 툴바 ........................................................................................................................... 32

3.3. 윈도우(Window) ......................................................................................................... 39

3.3.1. 오브젝트 윈도우 (object window) ...................................................................... 39

3.3.2. 프로젝트 윈도우 (project window) .................................................................... 41

3.3.3. 속성 윈도우 (property window) ........................................................................ 43

3.4. UI Component 설명 .................................................................................................. 44

3.5. 디렉토리 생성(매니저 권한 일시에만) ....................................................................... 46

3.5.1. 디렉토리 생성하기 ............................................................................................. 46

3.5.2. 디렉토리 삭제하기 ............................................................................................. 46

4. xFrame을 이용한 개발 절차 .................................................................................................... 47

4.1. xFrame@DevStudio 로그인 ..................................................................................... 47

4.2. 화면 디자인 ............................................................................................................... 47

4.3. 스크립트 작성 ............................................................................................................ 47

4.4. 화면 저장 .................................................................................................................. 47

4.5. 실행하기 .................................................................................................................... 47

4.6. 화면 작성 기초 .......................................................................................................... 54

4.6.1. xFrame@DevStudio 로그인 ............................................................................... 54

4.6.2. 화면 디자인 ........................................................................................................ 56

4.6.3. 스크립트 작성 .................................................................................................... 59

목 차

3/240


4.6.4. 화면저장 ............................................................................................................. 61

4.6.5. 실행하기 ............................................................................................................. 62

5. xFrame을 이용한 화면 개발(심화 기능) .................................................................................. 63

5.1. StartPage 작성 (UI Frame) ....................................................................................... 63

5.2. 업무 화면 작성 .......................................................................................................... 63

5.2.1. 화면 작성 ........................................................................................................... 63

5.2.2. Component 연계 ............................................................................................... 65

5.2.3. Templete을 이용한 화면 작성 ........................................................................... 67

5.2.4. 공통코드 작성 .................................................................................................... 68

5.2.5. 공통 이미지 작성 ............................................................................................... 69

5.3. 로직 작성 .................................................................................................................. 70

5.3.1. 공통 모듈 작성 ................................................................................................... 70

5.3.2. 업무화면 로직 구현 ............................................................................................ 72

5.3.3. 테스트 및 검증 ................................................................................................... 76

5.3.4. TranMap(I/O) 설정하기 ...................................................................................... 77

5.3.5. 실행 .................................................................................................................... 79

6. 오브젝트 사용 방법 및 예제 .................................................................................................... 81

6.1. 일반필드(Normal field) .............................................................................................. 81

6.2. 숫자필드(numeric field) ............................................................................................ 87

6.3. 한글필드(hangul field) .............................................................................................. 92

6.4. 암호필드(password field) .......................................................................................... 96

6.5. 텍스트(text) ............................................................................................................. 100

6.6. 멀티라인(multiline) .................................................................................................. 104

6.7. 그리드(grid) ............................................................................................................. 107

6.8. 버튼(button) ............................................................................................................ 131

6.9. 테이블(table) ........................................................................................................... 136

6.10. 체크박스(checkbox) ................................................................................................ 139

6.11. 콤보박스(combobox) .............................................................................................. 143

6.12. 라디오버튼(radio button) ........................................................................................ 150

6.13. 탭(tab) ..................................................................................................................... 154

6.14. 트리(tree) ................................................................................................................ 162

6.15. 상태바(status bar) ................................................................................................... 166

6.16. 웹브라우저(web browser) ....................................................................................... 169

6.17. 웹파일매니저(web filemanager) .............................................................................. 171

6.18. ActiveX ................................................................................................................... 172

6.19. 타이머(timer) ........................................................................................................... 174

6.20. 이미지(image) ......................................................................................................... 175

6.21. 사각형 (rectangle) .................................................................................................. 179

4/240


6.22. 둥근사각형 (roundrectangle) .................................................................................. 181

6.23. 타원 (ellipse) .......................................................................................................... 183

6.24. 직선 (line) ............................................................................................................... 184

6.25. 마름모 (lozenge) ..................................................................................................... 186

6.26. 삼각형(triangle) ....................................................................................................... 187

6.27. 그래프(Graph) – 막대, 선, 점 ................................................................................. 188

6.28. 그래프(Graph) – 원, 도넛 ....................................................................................... 192

6.29. 화면(Screen) ........................................................................................................... 195

6.30. 트리그리드(tree grid) ............................................................................................... 197

6.31. 멀티라인그리드(multiline grid) ................................................................................ 214

6.32. 캡션(Caption) .......................................................................................................... 232

6.33. 패널(Panel) ............................................................................................................. 234

7. 웹 서버용 파일 추출 .............................................................................................................. 237

7.1. 웹 서버용 화면 추출 ............................................................................................... 237

7.2. XML EXPORT ......................................................................................................... 238

7.3. XML IMPORT .......................................................................................................... 238

8. 웹 서버 환경 파일 구축 ......................................................................................................... 239

8.1. 환경 파일 구성 ........................................................................................................ 239

5/240


1. xFrame 소개

1.1. xFrame 이란 ?

xFrame@DevStudio란 Web의 개발 용이성과 배포의 용이성, C/S의 다양한 기능의 장점

을 모두 수용한 x-internet 기반의 개발 플랫폼이다.

xFrame@DevStudio는 업무에 필요한 화면과 로직을 구현하는 UI Tool 이다.

화면은 4GL 작성이 가능하고 로직은 범용 스크립트(VBScript, JavaScript)를 지원한다.

각 업무 화면은 별도의 추가 개발 없이 xFrame@DevStudio 에서 화면을 그리는 것만으

로 구현이 가능하다.

개발 툴은 Application 의 메인 프레임부터 단위 업무 화면까지 모두 작성 가능하다. 또한

단위 업무 및 통합 업무 개발환경의 UI 개발에 최적합화 된 툴이다.

xFrame@DevStudio 는 다수의 개발자들이 동시에 DB 에 접속하여 공동으로 업무 화면

및 로직을 구현할 수 있는 사상으로 개발된 툴이다.

따라서 코드, 이미지, 모듈 등 리소스를 공유하여 사용할 수 있다.

초보 개발자나, 개발업무 경험이 없는 업무 담당자도 복잡한 업무를 용이하게 개발 가능

하도록 개발 과정이 정형화 및 단순화 되어 있다.

사용자에게 사용의 편리함을 제공하고, 운영자에게 관리의 용이성을 제공해줌으로, 생산

성을 극대화시키고 기업 인프라 구축 시 TCO 절감 효과를 제공한다.

6/240


1.2. xFrame 이란 ?

효율적인 화면 편집 작업을 위해 업무별 그룹을 지원한다.

다양업무를 구분하기 위하여 그룹의 상위 단계인 프로젝트를 지원한다.

동시에 여러 화면이 편집 가능해야 하므로 윈도우 표준 MDI(Multiple Document Interface)

를 지원한다.

동시에 여러 그룹에 대한 작업은 가능하지만 한번에 하나의 프로젝트에 대해서만 작업이

가능하다.

동시에 여러 명이 화면 편집 작업을 수행할 수 있으므로 다중 사용자를 지원한다.

불법적인 사용자의 접근을 막기 위해 프로젝트 단위의 사용자 로그인 기능을 지원한다.

주어진 업무범위를 벗어나는 사용자의 접근을 통제하기 위해 그룹별 사용자 권한을 지원

한다.

화면을 describe하는 script로서 업계 표준인 XML을 지원한다.

xFrame@DevStudio 자체는 Visual Studio 를 개발 툴로 이용하여 Visual C++로 개발되었

다.

7/240


1.3. xFrame 기능

UI 개발 관리 기능

프로젝트관리/ 형상관리/ 배포관리

다수 개발자 동시 화면 개발

공통 리소스 관리

UI 화면 개발 기능

화면 저작 기능

업무 로직 구현 기능

테스트 기능

Viewer 기능

메모리 관리 / 화면 캐쉬 기능 (최소 운영사항 Cel 633Hz, 128 Mega)

효율적인 Transaction 처리

8/240


1.4. 업무 흐름도

업무 화면의 설계 및 편집 작업은 전산부에서 센터 관리하며, 화면 DB 역시 센터 관리된

다.

생성/수정된 업무 화면은 XML 파일의 형태로 web server 들에게 upload된다.

upload 된 업무 화면은 단말 프로그램에 의해 필요한 경우에 download 되어 해당 업무를

수행하게 된다.

그림. 업무 흐름도

xFrame@De

vStudio

단말

화면 DB

배포 서버 Web Server

Host

가. 업무화면 편집

나. 업무화면 업로드

다. 업무화면 다운로드

라. 해당 업무 수행

9/240


2. 툴 환경 정보

2.1. 개발 환경

다수의 개발자가 동시에 작업할 수 있는 환경으로 개발된 툴로써, 개발 DB Server 에 다

수의 사용자가 작업 Database를 선택한 후 로그인 하여 사용 가능하다.

Database는 MYSQL, ORACLE을 지원한다.

2.2. 시스템 사양

OS MainMemory CPU 설명

Wnidows NT,

Windows 2000,

Windows 2003,

Windows XP

Windows Vista

Windows 7

256MB 이상

-512MB 이상

(권장)

Cel-1G 이상

Cel-1G 이상(권장)

20G이상

40G이상(권장)

Unix or win2k

WAS

DBMS

1. 화면정보(XML files)

2. 화면 logic

Web Server

개발자1 개발자2 개발자3 개발자4 개발자5 개발자6 개발자7

xFrame@DevStudio 사용자

개발 DB Server

10/240


3. 툴 기능 설명

3.1. 메뉴 (menu)

다음은 xFrame@DevStudio 의 메뉴이다.

그림. xFrame@DevStudio 의 메뉴

3.1.1. 프로젝트 메뉴

프로젝트 메뉴는 새로운 프로젝트를 생성 및 열기, 삭제하고 xFrame@DevStudio 를

종료한다.

그림. 프로젝트 메뉴

프로젝트 삭제 : 기존의 프로젝트를 삭제한다.

프로젝트 생성/열기 : 새로운 프로젝트를 생성하거나 기존의 프로젝트를 연다.

종료 : xFrame@DevStudio 를 종료한다.

3.1.2. 화면 메뉴

새로운 화면을 생성 및 열기, 닫기, 저장, 인쇄 등의 기능을 하기 위한 메뉴이다. 다음은

xFrame@DevStudio 의 화면 메뉴이다.

그림. 화면 메뉴

11/240


새 화면 : 화면을 새로 생성한다.

닫기 : 현재 화면을 닫는다.

저장 : 작성한 화면을 저장한다. 다음은 저장 윈도우이다.

그림. 저장 윈도우

다른 이름으로 저장 : 작성한 화면을 다른 이름으로 저장한다. 메뉴 선택 시에 나타나는

윈도우는 저장 윈도우와 동일하다.

인쇄 : 화면을 인쇄한다.

인쇄 미리보기 : 작성한 화면을 인쇄하기 전에 인쇄 형태를 미리 보여주는 기능이다.

다음은 미리 보기 윈도우이다.

12/240


그림. 인쇄 미리 보기 윈도우

인쇄 설정 : 인쇄를 위한 설정을 수행하는 메뉴이다. 메뉴 선택 시에 나타나는 윈도우

형태는 인쇄 윈도우와 동일하다.

최근 화면 목록 : 최근까지 열었던 화면에 대한 리스트이며 최대 10 개까지 확인할 수

있다.

그림. 최근 화면 목록

13/240


3.1.3. 편집 메뉴

편집 메뉴는 화면을 편집할 때 사용하는 메뉴이다. 다음은 xFrame@DevStudio 의 편집

메뉴이다.

그림. 편집 메뉴

취소 : 편집 중에 전 단계 명령을 취소한다.

잘라내기 : 선택한 오브젝트들을 클립보드로 복사하고 화면에서 삭제한다.

복사 : 선택한 오브젝트들을 클립보드로 복사한다.

붙여넣기 : 클립보드에 복사된 오브젝트를 화면에 붙여 넣는다.

Bookmark : 스크립트 편집 창에서 원하는 소스 위치에 북마크를 설정 및 해지한다.

Bookmark List : 설정된 Bookmark 리스트를 관리한다. 삭제 및 소스 위치를 찾는다.

주석 블록 설정 : 스크립트 편집 창에서 활성화 되는 기능으로 블록으로 설정한 소스를

주석 처리한다.

주석 블록 해제 : 지정한 블록에 주석으로 처리된 소스가 있으면 다시 해제한다.

스크립트 내 검색 : 스크립트 작성 시 활성화되며 입력한 텍스트를 찾는다. 다음은 찾기

윈도우이다.

그림. 찾기 윈도우

14/240


입력인덱스 자동매김 : 화면 오브젝트를 다중 선택했을 시 활성화되며 오브젝트들의

인덱스를 자동 설정한다.

탭 오더 설정 : 탭 키를 눌렀을 시 포커스 이동 순서를 설정한다. 다음은 탭 오더

윈도우이다.

그림. 탭 오더 설정 윈도우

텍스트 대량입력 : 텍스트 오브젝트를 대량으로 화면에 입력할 수 있도록 한다. 다음은

텍스트 대량입력 윈도우이다.

그림. 텍스트 대량입력 윈도우

15/240


3.1.4. 보기 메뉴

화면을 편집하기 위한 보기의 여러 가지 기능을 제공한다. 다음은 xFrame@DevStudio

의 보기 메뉴이다.

그림. 보기 메뉴

미리보기 : 현재 작성한 화면을 미리보기 한다. 다음은 미리보기 윈도우이다.

그림. 미리보기 윈도우

뷰어로 보기 : 작성한 프로젝트를 뷰어로 실행한다.

16/240


오브젝트 윈도우 : 오브젝트 윈도우를 화면에 나타나게 한다.

그림. 오브젝트 윈도우

프로젝트 윈도우 : 프로젝트 윈도우를 화면에 나타나게 한다.

그림. 프로젝트 윈도우

속성 윈도우 : 속성 윈도우를 화면에 나타나게 한다. 속성은 특성 별로 분리되는 트리

형태와 A~Z까지 순차적으로 정렬된 두 가지 형태로 표현된다.

17/240


그림. 속성 윈도우 (트리 정렬)

그림. 속성 윈도우 (알파벳 정렬)

정보 윈도우 : 정보 윈도우를 화면에 나타나게 한다.

그림. 정보 윈도우

18/240


오브젝트 속성 보기 : 오브젝트의 속성(인덱스, 픽리스트 여부)을 나타나게 한다. 다음은

오브젝트 속성 보기를 선택했을 때 나타나는 화면이다.

그림. 오브젝트 속성 보기 적용 전 그림. 오브젝트 속성 보기 적용 후

격자 보이기 : 화면에 격자(grid)를 보여준다. 격자 보이기가 설정되면 오브젝트를 그릴

때 오브젝트들은 격자에 맞추어 정렬된다.

그림. 격자 보이기 윈도우

19/240


격자 설정 : 격자(grid) 간격을 설정한다. 다음은 격자 설정 윈도우이다.

그림. 격자 설정 윈도우

20/240


3.1.5. 도구 메뉴

도구 메뉴는 각종 도구들이 등록되어 있는 메뉴이다. 다음은 xFrame@DevStudio 의

도구 메뉴이다.

그림. 도구 메뉴

코드 등록 : 코드를 등록하고 편집할 수 있다. 다음은 코드 등록 윈도우이다. 코드를

등록할 경우 [코드 저장 경로]를 지정한 후 코드아이디, 코드 이름, 코드 스타일, 코드

내용을 입력 한 후 [코드저장]을 실행한다. 만약, 코드 저장경로를 지정하지 않으면,

기본으로 Root 디렉토리에 저장된다.

그림. 코드 등록 윈도우

21/240


이미지 등록 : 이미지를 데이터베이스에 등록 및 삭제하여 관리한다. 다음은 이미지

등록 윈도우이다. 이미지도 코드등록과 동일한 방법으로 [이미지 저장 경로]를 지정한

후 [이미지 불러오기]를 통해 등록하고자 하는 이미지를 선택한 후 [이미지 등록]한다.

이미지 저장경로를 지정하지 않으면 기본으로 Root에 저장된다..

그림. 이미지 편집 윈도우

Export – XML : 화면 DB 에 저장되어 있는 파일들 중에서 필요한 화면들을 파일 형태로

Export 한다..

22/240


그림. Export – XML Export 윈도우

Import – XML : 파일 형태로 되어 있는 파일들을 화면 DB에 Import 한다.

그림. Import – XML 열기 윈도우

사용자 비밀번호 변경 : xFrame@DevStudio 의 사용자 비밀번호를 변경한다. 다음은

사용자 비밀번호 변경 윈도우이다.

그림. 사용자 비밀번호 변경 윈도우

23/240


옵션 : xFrame@DevStudio 의 색상, TranMap, FTP, 메뉴, 미리보기 등을 설정한다.

다음은 옵션 윈도우이다.

xFrame@DevStudio 의 선택, 필수, 잠금 필드의 색상을 설정한다.

TranMap에 관한 설정을 하는 탭이다. [TranMap ID 입력 후 선택]을 설정하면 TranMap

ID를 추가, 삭제, 설정할 수 있다.

24/240


웹서버용 파일 추출 시 자동으로 파일 배포를 원하는 경우 FTP 설정을 하면 된다.

원하는 컴포넌트에 팝업메뉴를 설정한다. 설정하는 방법에는 두가지 방법이 있는데,

직접 만든 화면의 경로를 지정해서 설정하거나, [메뉴]–>[도구]–>[팝업메뉴 등록]

에서 등록한 팝업메뉴의 아이디를 지정해서 설정하는 방법이 있다.

25/240


미리보기 시 콘솔 트레이스 설정, 미리보기 시 창 크기를 사용자가 지정한 크기로

조절할 수 있다.

그림. 옵션 윈도우

뷰어경로, 코드 초기경로, 이미지 초기경로는 Default로 설정된다.

26/240


초기값 설정 : 화면 및 컨트롤들에 대한 속성을 설정하는 기능이다(스타일 설정).

사용자가 설정해놓은 속성은 모든 화면과 컨트롤에 동일하게 적용된다. 다시 설정해놓은

초기값을 변경하면 그 속성으로 유지된다. 전역적으로 쓰이는 설정 값이다.

그림. 화면 초기값 설정

그림. 컨트롤 초기값 설정

27/240


화면 레포트 : 화면 레이아웃 및 각 오브젝트의 정보를 레포트로 출력한다. 다음은 화면

레포트 윈도우이다.

그림. 화면 레포트

화면 History 검색 및 복원 : 화면을 편집과정 중 이전 과정을 복원할 수 있게 한다.

다음은 화면 History 검색 및 복원 윈도우이다. 검색하고자 하는 경로를 선택하면 해당

디렉토리에 저장된 모든 화면의 내역을 보여준다. 경로를 선택하지 않으면 기본으로

Root에 저장된 화면을 검색한다.

그림. 화면 History 검색 및 복원 윈도우

28/240


웹 서버용 파일 추출 : xFrame@DevStudio 작업 완료 후 웹 서버용 파일을 추출한다.

다음은 웹 서버용 파일 추출 윈도우이다. 만약, 위 [옵션윈도우]-[기타] 항목에서 FTP

정보가 설정되어 있으면 해당 서버로 추출한 파일이 자동으로 전송된다.

그림. 웹 서버용 파일 추출 윈도우

CheckOut 관리 : xFrame@DevStudio 에 로그온-오프한 사용자 기록을 관리한다.

그림. CheckOut 관리 윈도우

29/240


3.1.6. 창 메뉴

창 메뉴는 현재 열려있는 편집 윈도우들을 편의에 의해 정렬하는 메뉴이다. 다음은

xFrame@DevStudio 의 창 메뉴이다.

그림. 창 메뉴

모든 창 닫기 : 현재 열려 있는 편집 윈도우를 모두 닫는다.

계단식 : 편집 윈도우들을 계단식으로 배열한다.

수평배열 : 편집 윈도우들을 수평으로 배열한다.

수직배열 : 편집 윈도우들을 수직으로 배열한다.

윈도우 리스트 : 현재 열려 있는 편집 윈도우들의 리스트이다.

30/240


3.1.7. 도움말 메뉴

도움말 메뉴는 화면 편집에 필요한 도움말들을 보여주는 메뉴이다. 다음은

xFrame@DevStudio 의 도움말 메뉴이다.

그림. 도움말 메뉴

VBScript 도움말 : VBScript 의 도움말을 보여준다.

JAVAScript 도움말 : JAVAScript 의 도움말을 보여준다. 다음은 JAVAScript 도움말

윈도우이다.

그림. JAVAScript 도움말 윈도우

xFrame@DevStudio 도움말 : xFrame@DevStudio 의 사용법에 대한 도움말을 보여준다.

다음은 xFrame@DevStudio 도움말 윈도우이다.

31/240


그림. XFrame@DevStudio 도움말 윈도우

xFrame@DevStudio 정보 : xFrame@DevStudio 의 정보를 보여준다. 다음은

xFrame@DevStudio 정보 윈도우이다.

그림. xFrame@DevStudio 정보 윈도우

32/240


3.2. 툴바

툴바는 자주 사용하는 기능들을 버튼 형태로 도출시켜 즉시 수행할 수 있도록 해주는

기능이다. 다음은 xFrame@DevStudio의 툴바이다.

그림. xFrame@DevStudio의 툴바

(새 파일) : 메뉴의 “화면” – “새 화면” 메뉴와 동일하다. 새 화면을 생성한다.

(저장) : 메뉴의 “화면” – “저장” 메뉴와 동일하다. 작업중인 편집 화면을 저장한다.

(잘라내기) : 메뉴의 “편집” – “잘라내기” 메뉴와 동일하다. 선택된 오브젝트들을

클립보드로 복사하고 편집화면에서 삭제한다.

(복사) : 메뉴의 “편집” – “복사” 메뉴와 동일하다. 선택된 오브젝트들을 클립보드로

복사한다.

(붙여넣기) : 메뉴의 “편집” – “붙여넣기” 메뉴와 동일하다. 클립보드에 저장되어 있는

오브젝트들을 편집 화면으로 복사한다.

(인쇄) : 메뉴의 “화면” – “인쇄” 메뉴와 동일하다. 편집 화면을 프린터로 인쇄한다.

(북마크설정/해제) : 메뉴의 “편집” – “BookMark” 메뉴와 동일하다.

(북마크리스트) : 메뉴의 “편집” – “BookMark List” 메뉴와 동일하다.

(주석블럭설정) : 메뉴의 “편집” – “주석 블록 설정” 메뉴와 동일하다.

(주석 블록 해제) : 메뉴의 “편집” – “주석 블록 해제” 메뉴와 동일하다.

(인덱스 자동매김) : 메뉴의 “편집” – “입력인덱스 자동매김” 메뉴와 동일하다. 화면의

오브젝트에 인덱스 순서를 자동으로 설정한다.

33/240


(텍스트 대량입력) : 메뉴의 “편집” – “텍스트 대량입력” 메뉴와 동일하다. 화면에

텍스트를 대량 입력한다.

(좌측 정렬) : 선택된 오브젝트들을 좌측 정렬한다. 다음은 좌측 정렬의 예제이다.

그림. 좌측 정렬 예제

(우측 정렬) : 선택된 오브젝트들을 우측 정렬한다. 다음은 우측 정렬의 예제이다.

그림. 우측 정렬 예제

(상단 정렬) : 선택된 오브젝트들을 상단 정렬한다. 다음은 상단 정렬의 예제이다.

그림. 상단 정렬 예제

(하단 정렬) : 선택된 오브젝트들을 하단 정렬한다. 다음은 하단 정렬의 예제이다.

그림. 하단 정렬 예제

34/240


(수평 정렬) : 선택된 오브젝트들을 수평 중앙으로 정렬한다.

(수직 정렬) : 선택된 오브젝트들을 수직 중앙으로 정렬한다.

(좌우 균등 배치) : 선택된 오브젝트들의 좌우 간격을 동일하게 재배치한다. 다음은

좌우 균등 배치의 예제이다.

그림. 좌우 균등 배치 예제

(상하 균등 배치) : 선택된 오브젝트들의 상하 간격을 동일하게 재배치한다. 다음은

상하 균등 배치의 예제이다.

그림. 상하 균등 배치 예제

(좌우 최대 균등 크기) : 선택된 오브젝트들의 좌우 크기를 오브젝트 중 최대 크기로

동일하게 재조정한다. 다음은 좌우 균등 크기의 예제이다.

그림. 좌우 균등 크기 예제

(상하 최대 균등 크기) : 선택된 오브젝트들의 상하 크기를 오브젝트 중 최대 크기로

동일하게 재조정한다. 다음은 상하 균등 크기의 예제이다.

35/240


그림. 상하 균등 크기 예제

(좌우 최소 균등 크기) : 선택된 오브젝트들의 좌우 크기를 오브젝트 중 최소 크기로

동일하게 재조정한다.

(상하 최소 균등 크기) : 선택된 오브젝트들의 상하 크기를 오브젝트 중 최소 크기로

동일하게 재조정한다.

(계단식 정렬) : 메뉴의 “창” – “계단식” 메뉴와 동일하다. 편집중인 화면을 계단식으로

정렬한다. 다음은 계단식 정렬의 예이다.

그림. 계단식 정렬 예제

(수평 배열) : 메뉴의 “창” – “수평배열” 메뉴와 동일하다. 편집중인 화면을 수평으로

배열한다. 다음은 수평 배열의 예이다.

36/240


그림. 수평 배열 예제

(수직 배열) : 메뉴의 “창” – “수직배열” 메뉴와 동일하다. 편집중인 화면을 수직으로

배열한다. 다음은 수직 배열의 예이다.

그림. 수직 배열 예제

37/240


(xFrame@DevStudio 정보) : 메뉴의 “도움말” – “xFrame@DevStudio 정보” 메뉴와

동일하다. xFrame@DevStudio 정보를 보여준다.

(폰트 설정) : 선택된 오브젝트의 폰트를 설정한다.

(폰트 크기 설정) : 선택된 오브젝트의 폰트 크기를 설정한다.

(굵게) : 선택된 오브젝트의 폰트를 굵게 설정한다.

(기울임꼴) : 선택된 오브젝트의 폰트를 기울임꼴로 설정한다.

(밑줄) : 선택된 오브젝트의 폰트에 밑줄을 추가한다.

(좌측 정렬) : 선택된 오브젝트의 폰트를 좌측 정렬한다.

(중앙 정렬) : 선택된 오브젝트의 폰트를 중앙 정렬한다.

(우측 정렬) : 선택된 오브젝트의 폰트를 우측 정렬한다.

(글자 위치 올림) : 선택된 오브젝트의 글자 위치를 상단에 맞춘다.

(글자 위치 가운데) : 선택된 오브젝트의 글자 위치를 중앙에 맞춘다.

(글자 위치 내림) : 선택된 오브젝트의 글자 위치를 하단에 맞춘다.

(미리보기) : 메뉴의 “보기” – “미리보기” 메뉴와 동일하다. 작업 중인 화면을 미리

본다.

(격자 보이기) : 메뉴의 “보기” – “격자 보이기” 메뉴와 동일하다. 화면에 격자를 볼 수

있게 한다.

(격자 설정) : 메뉴의 “보기” – “격자 설정” 메뉴와 동일하다. 격자(grid)를 설정한다.

38/240


(오브젝트 속성 보기) : 메뉴의 “보기” – “오브젝트 속성 보기” 메뉴와 동일하다.

오브젝트의 속성을 본다.

(오브젝트 윈도우) : 메뉴의 “보기” – “오브젝트 윈도우” 메뉴와 동일하다. 오브젝트

윈도우를 나타나게 한다.

(프로젝트 윈도우) : 메뉴의 “보기” – “프로젝트 윈도우” 메뉴와 동일하다. 프로젝트

윈도우를 나타나게 한다.

(속성 윈도우) : 메뉴의 “보기” – “속성 윈도우” 메뉴와 동일하다. 속성 윈도우를

나타나게 한다.

(정보보기 창) : 메뉴의 “보기” – “정보 윈도우” 메뉴와 동일하다. 정보 윈도우를

하단에 나타나게 한다.

(xDataSet 목록 보이기) : xDataSet의 목록을 보여준다.

(Export – XML) : 메뉴의 “도구” – “Export - XML” 메뉴와 동일하다. 화면을 XML 로

Export 한다.

(Import – XML) : 메뉴의 “도구” – “Import - XML” 메뉴와 동일하다. XML을 화면으로

Import 한다.

39/240


3.3. 윈도우(Window)

3.3.1. 오브젝트 윈도우 (object window)

오브젝트 윈도우는 화면 편집에 사용될 오브젝트들을 모아둔 윈도우이다. 사용자는 이

윈도우의 오브젝트를 선택한 다음에 화면에서 왼쪽 버튼을 누르면 화면에 선택된

오브젝트가 생성된다. 다음은 오브젝트 윈도우의 모습이다.

그림. 오브젝트 윈도우

템플릿은 자주 사용되는 특정 UI 를 사용자가 직접 등록하는 기능이다. 등록된 템플릿은

Drag & Drop 하여 사용할 수 있고, 보다 빠르게 업무 화면을 작성할 수 있다. 템플릿은

[Template-Server]와 [Template-Local] 기능으로 분리된다. [Template-Server]은 모든

개발자들이 공통으로 사용할 수 있는 템플릿으로 관리자가 등록할 수 있으며, [Template-

Local]은 개발자 개인별로 관리되는 템플릿이다.

그림. Template-Server

40/240


그림. Template-Local

※ 템플릿 등록에 관한 자세한 내용은 p.67 의 "그림. 템플릿 등록" 을 참조.

41/240


3.3.2. 프로젝트 윈도우 (project window)

프로젝트 윈도우는 해당 프로젝트의 화면, 공통모듈, 라이브러리 등을 일목요연하게

보여주고 해당 객체에 쉽게 접근할 수 있도록 한다. 다음은 프로젝트 윈도우의 모습이다.

그림. 프로젝트 윈도우

3.3.2.1. 프로젝트 윈도우 (project window)

화면 객체 하위에는 그룹이 있으며, 그룹 하위에 해당 그룹의 화면들이 있다. 화면을

더블 클릭하면 해당되는 화면이 열린다. 다음은 화면 객체의 모습이다.

그림. 화면 객체

42/240


3.3.2.2. 공통모듈 객체

공통모듈 객체는 화면의 전역에서 사용될 모듈을 정의하고 관리하는 객체이다. 다음은

공통모듈 객체의 모습이다.

그림. 공통모듈 객체

43/240


3.3.3. 속성 윈도우 (property window)

특정 오브젝트를 선택하면 선택된 오브젝트의 속성이 속성 윈도우에 나타난다.

오브젝트들은 다양한 속성들을 가지고 있으며, 속성들은 텍스트, 숫자, 색상, 글꼴 등의

유형을 가지고 있다. 속성은 특성 별로 분리되는 트리 형태와 A~Z 까지 순차적으로

정렬된 두 가지 형태로 표현된다. 속성은 다음은 화면 속성 윈도우의 예제이다.

그림. 속성 윈도우 (트리 정렬)

그림. 속성 윈도우 (알파벳 정렬)

44/240


3.4. UI Component 설명

툴에서 제공하는 컨트롤으로, 그리고자 하는 Object를 선택하여 Drag & Drop 하여 사용하면 된다.

: 마우스 커서

: 일반 필드 (normal_field)

: 숫자 필드 (numeric_field)

: 한글 필드 (hangul_field)

: 암호 필드 (password_field)

: 텍스트 (text)

: 멀티라인 (multiline)

: 그리드 (grid)

: 버튼 (pushbutton)

: 테이블 (table)

: 체크박스 (checkbox)

: 콤보박스 (combobox)

: 선택버튼 (radiobutton)

: 탭 (tab)

: 트리 (tree)

: 상태바 (status bar)

45/240


: 웹브라우저 (web browser)

: 웹파일매니저 (web filemanager)

: ActiveX

: 타이머 (timer)

: 이미지 (image)

: 사각형 (rectangle)

: 둥근직사각형 (roundrect)

: 타원 (ellipse)

: 직선 (line)

: 마름모 (lozenge)

: 삼각형 (triangle)

: 그래프 – 막대, 선, 점 (graph)

: 그래프 – 원, 도형 (graph)

: 트리 그리드 (tree grid)

: 멀티라인 그리드 (multiline grid)

: 캡션 (Caption)

: 패널 (Panel)

46/240


3.5. 디렉토리 생성(매니저 권한 일시에만)

3.5.1. 디렉토리 생성하기

디렉토리는 화면 개발 시에 생성한 화면, 이미지 등을 디렉토리 별로 관리할 수 있도록

하기 위해 생성한다.

예) 00:관리자, 01:고객1, 02:고객2 등.

3.5.2. 디렉토리 삭제하기

디렉토리 삭제는 관리자 또는 업무관리자만 삭제 가능하다. 관리자가 삭제하고자 하는 디렉토리에

업무관리자가 설정되어 있으면 해당 디렉토리는 업무관리자가 삭제할 수 있다. 업무관리자의

경우에는 서브 디렉토리가 존재하는 경우 해당 디렉토리의 업무 화면을 삭제하고 서브

디렉토리를 삭제한 후 해당 디렉토리를 삭제한다.

디렉토리는 프로젝트 윈도우에서 추가

하고자 하는 위치에 생성을 한다.

① 디렉토리명을 입력하고 추가 버튼을

클릭하면 디렉토리가 추가된다.

② 프로젝트 정보 창에서 생성된 디렉

토리를 확인할 수 있다.

47/240


4. xFrame을 이용한 개발 절차

xFrame을 이용하여 개발을 하려면 일반적으로 다음과 같은 절차를 따른다.

개발자는 xFrame@DevStudio를 이용하여 화면 디자인과 스크립트로 개발을 진행하며, 사용자는

xFrame@Viewer 를 통해 개발된 프로그램을 실행한다.

개발의 전체 진행 순서는 다음과 같다.

4.1. xFrame@DevStudio 로그인

xFrame 으로 개발을 진행하기 위해 xFrame@DevStudio를 실행하여 개발 화면 DB에 로그인한다.

로그인 절차로는 먼저 화면DB에 연결한 후 프로젝트에 로그인 하게 된다.

4.2. 화면 디자인

xFrame@DevStudio 에서 제공하는 오브젝트 들을 이용하여 업무 화면을 디자인 한다.

4.3. 스크립트 작성

오브젝트에 원하는 이벤트를 연결하고 이벤트 내에 동작할 기능을 VBScript나 JavaScript를 이용

하여 작성한다.

4.4. 화면 저장

작성한 화면을 저장한다.

4.5. 실행하기

개발된 기능을 미리보기나 뷰어로 보기 기능을 이용하여 실행시켜 볼 수 있다.

로그인

1. Database 연결 (로컬 또는 DB 서버로 연결할 수 있다.)

48/240


2. 프로젝트 선택 후 툴 로그인

3. 툴 실행 확인

1. 데이터베이스 선택

(MYSQL, ORACLE)

2. 서버 IP Address

(localhost, Server IP)

3. [연결] 버튼 실행

1. 작업 프로젝트를 선택

2. 로그인 아이디와 비밀번호를 입력

3. [로그인] 버튼 실행

1. 로그인한 데이터베이스와 프로젝트

의 디렉토리를 확인

2. 툴에서 제공하는 기능들을 확인

49/240


화면 디자인

그림. Design 영역

툴은 화면 작성 영역과 로직 구현 영역으로 분리된다. UI를 작성하기 위한 영역은 [Design]

탭이다. Design 영역에는 [오브젝트 윈도우]에 있는 UI Control을 이용하여 업무화면을 구현한

다. UI Control은 오브젝트 윈도우에 27개 Control이 구성되어 있다.

그림. 초기값 설정

50/240


초기값 설정은 화면, 각각의 UI Control에 대한 속성을 설정할 수 있다. 초기값에 설정해놓은

값은 모든 Control에 동일하게 적용된다. 따라서 스타일이 정의된 화면이나, 컨트롤에 초기값

을 설정하면 보다 편리하고 빠르게 업무 화면을 구현할 수 있다. 다시 초기값 설정을 통해

속성값을 변경하면 변경된 속성으로 유지된다.

그림. UI 업무 작성

그림. UI 속성창

UI 속성 중 그리드, 그래프, 콤보박스를 더블클릭 했을 경우 각 [속성등록창]이 나타난다.

UI Control은 오브젝트에서 그리고자

하는 Control을 선택 한 후 Drag &

Drop 하여 원하는 위치에 그리는 방

법과, UI Control을 더블클릭하여 위치

시키는 방법이 있다.

UI에 대한 속성은 [속성윈도우]에 표시된 각 항목별로

지정을 한다. Design 영역에서 원하는 컨트롤을 선택

하면 해당 속성창에 항목들이 표시된다.

51/240


그림. 콤보박스를 더블클릭 한 경우

그림. 그리드 컨트롤을 더블클릭 한 경우

그림. 그래프 컨트롤을 더블클릭 한 경우

※ UI Control 속성에 대한 자세한 기능은 [오브젝트 사용방법 및 예제] 항목을 참조하시오.

[속성윈도우]의 “picklist”와 동일

[속성윈도우]의 “Column”와 동일

[속성윈도우]의 “x_Item_data”와 동일

52/240


스크립트 작성

사용자는 VBScript, JavaScript 중 하나를 선택하여 이벤트를 발생시킬 수 있다.

UI Control에 Event를 발생시키기 위해서는 먼저 해당 Control에 name을 부여해야 한다.

name은 사용자가 직접 입력한다.

직접 입력

이벤트는 각 UI Control마다 [속성윈도우]에 “Event”에 Listup되어 있다.

그림. 화면에 대한 Event List

Event 중 구현해야 할 Event를 선택한 후 더블클릭을 하면 아래와 같이 [이벤트 처리 다이얼

로그]가 나타난다. 구현하고자 하는 Script를 선택한 후 [선택] 버튼을 실행한다.

사용자는 xFrame API를 사용하여 다양한 업무 로직을 구현할 수 있다.

※ xFrame API : xFrame@DevStudio에서 제공하는 API

그림. 로직 작성 순서

xFrame API는 Script Edit 창에서 해당 컨트롤의 이름을 입력 한 후 “.”을 입력하면 해당 컨

트롤에 API List가 표시됩니다. API에 대한 종류 및 사용방법은 [xFrame API 매뉴얼]을 참고

한다.

53/240


그림. xFrame API List 예

xFrame API는 각 [Factory : 공통으로 사용되는 API], [Screen : 화면에 대한 API], [Object:

각 Control에 사용되는 API]로 분류된다.

그림. Factroy API 그림. Screen API

☞ 화면저장 및 실행하기는 다음 Charter 개발 예제를 참고하시오.

54/240


xFrame을 이용한 개발 예제

xFrame@DevStudio 를 이용하여 개발하고 실행하는 과정을 간단한 예제를 통해 직접 진행하여

본다. 예제를 통해 만들어 볼 화면은 다음과 같다.

4.6. 화면 작성 기초

4.6.1. xFrame@DevStudio 로그인

4.6.1.1. xFrame@DevStudio 를 실행한다.

4.6.1.2. 먼저 데이터베이스에 연결 한다. 로컬이나 서버에 있는 화면DB에 로그인 한다.

4.6.1.3. 데이터베이스에 연결되었으면 프로젝트를 선택 후 로그인 한다.

[입력값 보기] 버튼을 클릭

하면 입력란에 입력한 텍스

트가 출력란에 나타난다.

① 접속할 데이터베이스 종류를

선택

② 서버 IP ADDRESS와 데이터베

이스를 선택 혹은 입력

③ 해당 데이터베이스의 로그인

아이디와 로그인 비밀번호를 입력

후 로그인 버튼을 클릭

55/240


4.6.1.4. xFrame@DevStudio 로그인하면 다음과 같은 작업화면이 실행된다. 각 화면 구성 명칭은

다음 그림과 같다.

화면

오브젝트 윈도우

프로젝트 윈도우

① 작업 프로젝트를 선택 혹은

입력

② 해당 프로젝트의 로그인 아

이디와 로그인 비밀번호를 입력

후 로그인 버튼을 클릭

메뉴 도구모음

속성윈도우

56/240


4.6.2. 화면 디자인

4.6.2.1. 디자인 하고자 하는 화면크기를 설정한다. 속성 윈도우의 [width], [height] 속성에 각각

원하는 수치를 입력한다.

4.6.2.2. 마우스로 오브젝트 윈도우에서 한글필드 를 선택하고 화면의 그리고 싶은 위치에

마우스 포인터를 위치 시킨 후 마우스 왼쪽 버튼을 클릭하면 다음과 같이 화면에 필드가

그려진다. 최초에는 기본 크기로 그려지고 속성값을 변경하여 크기나 색등을 조정할 수

있다.

4.6.2.3. 화면에 그린 필드를 선택하고 속성 윈도우의 [name] 속성에 “fld1”이라고 이름을

입력한다. [name] 속성은 스크립트를 작성할 때 구분할 수 있는 개체의 이름이 된다.

57/240


4.6.2.4. 위와 같은 방법으로 버튼 을 그리고 [name] 속성에 “btn1”, [text] 속성에 “입력값

보기” 를 입력한다.

4.6.2.5. 같은 방법으로 [name] “btn2”, [text] “지우기” 버튼을 만든다.

`

58/240


4.6.2.6. 오브젝트 윈도우에서 텍스트 를 선택하여 화면에 그리고 속성값을 다음과 같이

설정한다.

※[autosize] 는 속성값 입력 부분을 마우스로 더블 클릭하면 값이 변경된다.

59/240


4.6.3. 스크립트 작성

4.6.3.1. [입력값 보기] 버튼을 선택 후 속성 윈도우의 [on_mouseup] 속성값 부분을 더블

클릭하면 그림과 같이 [이벤트 처리 다이얼로그]가 나타난다. JavaScript 를 선택 후

[선택] 버튼을 클릭하면 스크립트 작성 화면이 나타난다. 이곳에 다음 코드를 작성한다.

※ xFrame API – xFrame@DevStudio 에서 스크립트를 작성할 때 VBScript나 JavaScript 외에

사용할 수 있는 여러 가지 API를 제공한다. 위 예제에서는 해당 오브젝트의 텍스트를

가져오거나 다시 입력하고 있다.

SetText(strText as string) : 해당 콘트롤에 텍스트를 입력

GetText(strText as string) : 해당 콘트롤에 텍스트를 가져옴

스크립트 함수는 자동으로 부여되며, 함수 이름은 사용자 임의로 수정할 수 없다. 만약 함수

이름을 변경하고자 하는 경우에는 해당 이벤트를 선택한 후 [Delete Property]를 이용하여 삭제 후

사용한다.

[on_mouseup] 속성값을 마우

스로 더블 클릭하면 이벤트 처

리 다이얼로그가 나타남.

function btn1_on_mouseup()

{

txt1.SetText(fld1.GetText());

}

60/240


4.6.3.2. [지우기] 버튼을 선택 후 1번과 같은 방법으로 아래 스크립트를 작성한다.

※ 지우기 : 해당 콘트롤에 빈칸(“”)을 입력

function btn2_on_mouseup()

{

fld1.SetText("");

txt1.SetText("");

}

61/240


4.6.4. 화면저장

작성한 화면을 저장한다. [메뉴]–>[화면]–>[저장] 메뉴항목을 선택하거나 도구모음의

저장하기 를 선택하면 아래와 같은 화면이 나타난다. 저장할 화면 이름 입력 후 (그룹이 여러

개일 경우 저장할 그룹도 선택함) 저장 버튼을 클릭하면 저장된다.

※저장하지 않고 2-5 [미리보기]를 진행할 수도 있다.

62/240


4.6.5. 실행하기

개발한 화면을 이용하여 실행해본다. [메뉴]–>[보기]–>[미리보기] 메뉴항목을 선택하거나

도구모음의 미리보기 를 선택하면 아래와 같이 실행된다.

※ 입력란에 테스트를 입력하고 [입력값 보기] 버튼을 클릭하여 출력란에 나타나는 지와 지우기

버튼을 클릭하여 값이 초기화되는지 확인한다.

63/240


5. xFrame을 이용한 화면 개발(심화 기능)

5.1. StartPage 작성 (UI Frame)

StartPage 는 업무 프로그램을 실행했을 때 처음 뜨는 Page 이다. 즉, MainFrame 으로 업무

형태나 특징에 맞게 사용자가 구성할 수 있다. Frame 구성은 SVA, UVA, MVA 방식으로 구성될 수

있다.

SVA(Single View Architecture) : 여러 업무들이 하나의 화면서 보여지는 구조로 계정계,

CRM, 카드 등 정보계성 업무에 적합

UVA (Unit View Architecture) : SVA 구조에서 특정 업무만 별도의 Window로 팝업 되는

구조로 BPR, 대출 시행과 같은 업무에 적합

MVA(Multi View Architecture) : 각각의 업무들이 별도의 Window로 팝업 되는 구조

5.2. 업무 화면 작성

업무 화면은 StartPage 중간에 위치하는 화면을 말한다. 업무화면을 작성하는 방법은 다양하게

제공된다. 제공되는 UI Control을 Drag & Drop방식으로 그리거나, 단말에 등록된 Active-x를 Import

또는 이미 작성된 템플릿으로 간단하고 빠르게 작성 가능하다.

5.2.1. 화면 작성

Form 에 control 을 생성하고자 할 때 Drag & Drop 방식으로 원하는 위치에 원하는 control 을

생성한다. Control 중 Grid 와 Tab 작성법에 대해서만 간단히 설명하고 각 Object 에 대한 설명은

다음 Chapter를 살펴보기 바란다.

오브젝트 윈도우에서 컨트롤을 선택하여 Drag & Drop으로 Form에 위치

64/240


Control 들의 좌우/위아래위치, 넓이, 높이, 간격 등을 자동으로 조정해줌으로써 디자인의

편리성 제공 .

그림. 그리드 작성

대량의 데이터 또는 데이터 처리 후 통계처리 그리고 엑셀과 연동을 목적으로 사용하는

control이다.

그리드의 컬럼 헤드 뿐만 아니라 그리드 바디의 각 셀들은 셀간 병합, 분할 등이

가능하며 그리드의 각각의 셀들마다 다양한 속성들을 지정할 수 있으며 또한 각 셀들의

데이터 처리 형태도 일반적인 윈도우즈 오브젝트(리스트콤보, 트리콤보, 체크박스 등)를

지정하여 사용할 수 있다.

그 외 자동 줄 번호 매김, 원하는 Row, Column 이 스크롤되지 않도록 Fixed Row, Fixed

Column속성 등 다양한 기능을 포함하고 있다.

65/240


그림 tab 작성

탭 control 은 탭 내부 화면 구성을 직접 디자인 하는 방식과 화면을 Link 하는 방식 두

가지를 지원한다.

탭 내부를 직접 디자인 하는 방식은 디자인의 편리성은 있지만 공동 작업 시 해당 탭이

있는 화면을 사용자가 Check Out 한 경우 그 탭을 공동으로 작업하는 다른 사용자는 그

화면이 Check In될 때까지 기다렸다가 작업해야 하는 단점이 있다.

Link 하는 방식은 탭 내부에 보여줄 화면을 개별적으로 작업해야 하는 단점이 있지만

공동 작업 시에는 사용자가 탭 내부의 화면을 따로 작업할 수 있어 효율적인 개발을

진행할 수 있는 장점이 있다.

5.2.2. Component 연계

xFrame 은 윈도우에 등록된 모든 Active-x 를 Import 하여 사용할 수 있다. 기존에 사용 중이거나

보유하고 있는 Component를 재사용 가능하다.

그림. Object의 Active-x를 선택 후 화면에 위치 & Import할 ClassId 선택

66/240


그림. Chart Active-x를 Import

그림. 업무화면에 통신 Active-x를 Import 한 결과

그림. 디바이스 모듈을 Import한 결과

FireEvent가 제공되는 모듈은 다음과 같이 확인

할 수 있다. 모듈과의 데이터 I/F를 할 수 있다.

67/240


5.2.3. Templete을 이용한 화면 작성

해당 프로젝트에 등록되어 있는 Form Template 이나 Control Template 을 이용하여 신속하게

화면을 작성하는 기능을 제공한다.

그림. 템플릿 등록

템플릿은 사용자가 원하는 형태로 구성가능하고 필요한 컨트롤들을 선택하여 등록한다.

템플릿 아이디와 설명을 입력한 후 [추가] 버튼을 실행하면 오브젝트 윈도우 [Templete] 탭에

추가된다.

업무에 일정한 패턴이 있는 화면이나 자주 사용되는 화면을 템플릿으로 등록하면 화면개발 시

보다 편리하고 신속하게 개발 가능하다.

그림. 등록된 템플릿 사용

등록된 템플릿은 다수의 개발자가 사용가능하며, 템플릿 항목을 선택하여 화면에 Drag & Drop

방식으로 사용한다.

68/240


5.2.4. 공통코드 작성

xFrame@DevServer 에 등록된 공통 코드나 이미지를 사용하여 신속하게 화면을 작성함으로써

공동개발의 편의성을 부여하는 기능이다.

기존 등록된 공통코드나 공통 이미지를 사용함으로써 자원 재활용 효과도 얻을 수 있다.

공통코드는 업무 개발 시 Picklist나 필드의 도움말 용도로 사용될 수 있다.

69/240


5.2.5. 공통 이미지 작성

공통 이미지는 화면 디자인 시 원하는 이미지를 선택하여 사용할 수 있다.

70/240


5.3. 로직 작성

5.3.1. 공통 모듈 작성

모든 거래 화면에서 공통으로 사용하는 모듈을 별도 공통 모듈에 작성하게 하고 거래 화면 들은

이를 호출하여 사용하도록 함으로써 코드의 재활용성과 코드 작성의 편리성을 높일 수 있는

기능이다. 변수 또한 전역 변수를 지원하여 해당 프로젝트 전역에 걸쳐 사용할 변수들을 정의

하고 모든 거래 화면에서는 이 값을 사용하거나 값을 저장하여 사용할 수 있도록 지원한다.

그림. 공통모듈 추가 및 작성

① 프로젝트 윈도우에서 [Global Module] 탭을 선택한다.

② 프로젝트 ID를 선택 한 후 오른쪽 버튼을 눌러 [공통모듈 추가]를 선택한다.

③ 추가하고자 하는 모듈 이름 입력 후 [생성] 실행한다.

④ 프로젝트 내에 추가된 모듈 이름을 확인 후 [Java Script]를 선택한다.

⑤ 전역변수 또는 업무에 맞는 공통 함수를 작성한다.

71/240


그림. 공통모듈 네비게이션 기능

공통모듈 내역을 확장시키면, 공통모듈에 등록되어 있는 모듈 리스트와 각 모듈에서 지원하는

Function 리스트가 보이며 전역 변수의 리스트도 보여준다.

트리에 보여지는 아이템 선택 시 해당 Function, 전역변수가 작성되어 있는 위치로 화면

스크롤된다.

작성된 전역변수와 함수는 프로젝트 내 모든 화면에서 사용 가능 하다.

그림. 공통모듈 사용법

module_procedure.ShowJumpScreen

screen, "계좌조회" + CStr(nPopupCount), "01000130", strData, strCopyData, 333

72/240


공통모듈 사용법 = 모듈이름+”.”+ 함수이름 +”(“+ Parameters +”)”

5.3.2. 업무화면 로직 구현

로직을 구현하는 언어로 VBScript 와 JavaScript 를 지원한다. 어떤 언어로 로직을 구현할지는

사용자의 선택사항이며, VBScript 나 JavaScript 가 가지고 있는 기능은 모두 동일하게 지원하며

제약 사항은 없다.

그림 스크립트 선택

각 control 의 Event 를 처리하는 방식으로, 한 화면 내에서 서로 다른 control 들은 각각

VBScript 와 JavaScript 를 사용할 수 있다. 따라서 한 화면 내에서도 특정 콘트롤은 VBScript 로

작성하고 또 다른 컨트롤은 JavaScript로 작성하는 방식도 가능하다.

그림. 자바 Script로 구현 한 예

73/240


5.3.2.1. Scripting Intelligence 기능

Script Editing 편리 기능으로 script function 의 prototype 을 tooltip 형태로 보여주는 Intelligence

Tooltip기능, Script Keyword Coloring, Script API member function list를 보여주는 기능을 제공하고

있다.

그림. 스크립트 Intelligence

DataBase 와의 통신을 담당하는 HttpLinker 모듈을 연동하고 업무 로직 처리 Script 를 살펴보도록

한다. 데이터 조회하는 예를 작성한다.

① 업무화면에 연동하고자 하는 Component를 선택한 후 이름 부여

업무화면에 HttpLinker Component를 Import

모듈 이름

74/240


② HttpLinker에서 제공하는 API [OpenURLPost]를 사용하여 DB와 연결

③ OpenURLPost (서버 IP, PortNum, URL, Query)를 입력한다.

④ HttpLinker를 통해 DB조회 시 오류 발생 체크

⑤ DB로부터 조회된 데이터를 그리드에 셋팅(데이터처리)

75/240


그림. 통신모듈을 연동하여 데이터 조회

76/240


5.3.3. 테스트 및 검증

개발 툴에서는 현재 작업 중인 업무 화면을 바로 볼 수 있고, 구현한 로직에 대한 검증을 할 수

있다.(미리보기 기능)

앞서 설명한 [미리보기] 기능으로 화면을 확인할 수 있고 업무 로직 구현 시 디버깅을 위한 Trace

Logging을 했다면 [콘솔보기]에서도 검증할 수 있다.

TraceLog : factory.consolprint(“Control ID : “ + field.getcontrolid())

그림. 미리보기 & 콘솔트레이스

77/240


5.3.4. TranMap(I/O) 설정하기

트랜잭션 맵(TranMap)은 채널과의 거래를 위하여 표준화된 I/O Map을 정의하는 기능이다.

맵의 정의는 체크 또는 인덱스로 가능하다.

그림. TranInfo 체크( I/O Mapping)

그림. TranInfo 체크설정

78/240


그림. TranInfo 인덱스( I/O Mapping)

[TranInfo] 탭을 선택하면 [Design]영역에서 사용자가 구현한 UI Control에 대한 모든

정보가 나타난다. [추가] 버튼을 클릭하여 트란맵 화면을 추가하고 [삭제] 버튼을 클릭하여 화

면을 삭제한다.

기본맵여부 : 처음 거래되는 업무 화면 설정

MAPID : 사용자가 직접입력 (지정한 Rule에 따라 ID 입력)

속성 : 각 UI Control에 대한 속성을 지정 (선택, 필수, 잠금)

입력 : 거래에 대한 Input 값을 체크

출력 : 거래에 대한 output 값을 체크

79/240


5.3.5. 실행

미리 보기 미리보기는 [보기]–[미리보기]를 실행한다. 미리보기는 현재 열려있는 한 화면에 대해서만 볼 수

있다. 미리보기를 통해 현 화면에 UI와 해당 로직을 검증할 수 있다.

그림. 미리보기

뷰어로 보기 InternetExplorer와 xFrame@Viewer가 Active-x Plug–in된 사용자 Application실행한다.

뷰어로 보기는 [메뉴]–>[도구]–>[옵션]–>[기타]에 뷰어로 보기에 지정된 경로의 html을 실행한다.

5.3.5.1. 뷰어로 보기 사전 이행 작업

xFrameViewer.html(가칭) 작성

xFrameViewer.js(가칭) 작성

작업 디렉토리 Root에 위치시킨다.

80/240


5.3.5.2. xFrameViewer.js 파일 작성

기본 파라메터이며 설정은 다음과 같이 한다.

① document.createElement('<PARAM NAME="APPPATH" VALUE="C:\\Program

Files\\softbase\\xFrame">'); –>작업디렉토리

② document.createElement('<PARAM NAME="APPNAME" VALUE="XFrameViewer">'); –

>Application에 표시되는 이름

③ document.createElement('<PARAM NAME="SCREENSOURCE" VALUE="DB">'); –

>화면정보 위치

④ document.createElement('<PARAM NAME="SCREENURL" VALUE="local">'); –>DB

위치

⑤ document.createElement('<PARAM NAME="SCREENPROJECT"

VALUE="PROJECTEX">'); –>프로젝트 ID

⑥ document.createElement('<PARAM NAME="MAINFRAMESCREEN"

VALUE="/main/mainframe">'); –>StartPage이름(화면 디렉토리 위치)

5.3.5.3. 다양한 파라메터들이 제공되며, 실습 시 Default Value로 설정하면 된다. 추후 업무 구축

시에는 환경에 맞게 설정을 변경하도록 한다.

5.3.5.4. 개발한 화면을 이용하여 실행해본다. [메뉴]–>[보기]–>[뷰어로보기] 메뉴항목을 선택한다.

81/240


6. 오브젝트 사용 방법 및 예제

각 오브젝트의 속성과 사용 방법을 소개한다.

6.1. 일반필드(Normal field)

: 오브젝트 윈도우의 일반 필드 오브젝트 아이콘

일반 필드는 사용자의 문자 및 숫자를 입력받는 가장 보편적으로 사용되는 오브젝트이다.

입력 및 출력 패턴이 가능하며, 코드성 데이터를 입력하기 위한 PickList 기능도 가지고

있다. 다음은 일반 필드 속성의 예제이다.

그림. 일반 필드 속성 예제

82/240


표 1. 일반 필드의 속성

속성 ID 속성이름 유형 설명

control_id control id 숫자 화면 내 콘트롤의 순번

name 이름 텍스트 일반 필드의 이름

description 설명 텍스트 일반 필드 이름에 대한 설명

in_index 입력인덱

스 숫자

입력 인덱스. 데이터를 호스트로 송신할 때에 각

항목의 인덱스로 사용됨

out_index 출력인덱

스 숫자

출력 인덱스. 데이터를 호스트에서 수신할 때에

각 항목의 인덱스로 사용됨. 경우에 따라 입력

인덱스만 사용하기도 함.

arrayindex 배열인덱

스 숫자

해당 콤포넌트를 control array 로 구성할 경우

array Index

autosize 자동크기 TRUE/

FALSE

필드의 길이에 의해 width, height 를 자동으로

조정

X X좌표 숫자 pixel 단위

Y Y좌표 숫자 pixel 단위

width 넓이 숫자 pixel 단위

height 높이 숫자 pixel 단위

fore_color 글자색 색상 글자의 색상

back_color 바탕색 색상 바탕 색상

font 글꼴 글꼴 글자의 글꼴 이름 및 크기, 속성

border 테두리 선택

0:none (테두리 없음)

1:single–flat (평평한 테두리)

2:double–raised (볼록 테두리)

3:double–sunken (오목 테두리)

border_color 테두리색

상 색상 테두리의 색상

border_color_focus 테두리색

상 색상 포커스 받은 필드의 테두리의 색상

83/240



apply_inputtypecol

or

input 타입

색상적용

TRUE/

FALSE

Input type 색상을 적용시에 일괄적용을

영향받지않도록 설정

mouse_cursor 마우스

커서 유형 선택

0: CURSOR_ARROW

1:CURSOR_IBEAM

2:CURSOR_WAIT

3:CURSOR_CROSS

4:CURSOR_UPARROW

5:CURSOR_SIZENWSE

6:CURSOR_SIZENESW

7:CURSOR_SIZEWE

8:CURSOR_SIZENS

9:CURSOR_SIZEALL

10:CURSOR_NO

11:CURSOR_HAND

12:CURSOR_HELP

link_data Dataset

연결 선택

Data set list에서 해당 오브젝트와 연결할 data를

선택

max_length 최대길이 숫자 입력 가능한 최대 길이

min_length 최소길이 숫자 반드시 입력해야 하는 최소 길이

pattern 패턴 텍스트

입력/출력 편집 패턴.

A:아스키 코드 입력 가능

Z:숫자만 가능

9:숫자 (미입력 시 ‘0’으로 표현)

이외의 문자는 비패턴 문자로서 문자 그대로

디스플레이)

(예: 주민번호:ZZZZZZ–ZZZZZZZ,

10자리금액:Z,ZZZ,ZZZ,ZZZ)

pattern_preview 패턴

미리보기

TRUE/

FALSE

비패턴 문자를 미리 보여주는지 여부. 이 속성이

TRUE 일 경우에 패턴이 ZZZZZ–ZZZZZZZ 라면

‘–‘ 기호가 입력 시에 미리 보임

84/240



horz_align 좌우정렬 선택 0:left, 1:center, 2:right

vert_align 상하정렬 선택 0:top, 1:center, 2:bottom

dup_name DUP이름 텍스트 DUP 버퍼에 저장될 이름

allow_dup DUP가능 TRUE/

FALSE DUP 기능 사용 유무

auto_dup 자동

DUP

TRUE/

FALSE

화면 호출 시에 DUP 버퍼에서 자동으로

읽어와서 채우는 기능. default_value 속성을

무력화 함.

auto_skip 자동

SKIP

TRUE/

FALSE

max_length 만큼 입력하면 자동으로 다음

오브젝트로 입력포커스를 넘기는 속성

auto_clear 자동

CLEAR

TRUE/

FALSE 거래 후 자동으로 지워지는 속성

make_case 대소문자

강제 선택

0:일반(대소문자강제 없음)

1:대문자(대문자로 강제)

2:소문자(소문자로 강제)

input_type 입력유형 선택

0:선택(입력가능)

1:필수(필수입력)

2:잠금(입력불가)

enable 활성화 TRUE/

FALSE 활성화 여부

hidden 숨김 TRUE/

FALSE 거래 화면에 보이지 않음. 거래 데이터에는 존재

host_send 데이터전

송

TRUE/

FALSE

호스트로 데이터 전송 유무 결정. 이 플래그가

FALSE면 호스트로 전송하지 않음.

default_value 초기값 텍스트 화면 오픈 시 초기 설정 값

tabstop 탭멈춤 TRUE/

FALSE 탭 키 이동 시 포커스를 받을지 여부

tooltip 툴팁 텍스트 풍선 도움말로 나타날 텍스트

on_create ON_CRE 이벤트 필드 생성시 호출됨

85/240



ATE

on_keydown ON_KEY

DOWN 이벤트 키가 눌릴 때 호출됨

on_change ON_CHA

NGE 이벤트 값이 변경될 때 호출됨

on_focusout ON_FOC

USOUT 이벤트 입력 포커스를 잃을 때 호출됨

on_focusin ON_FOC

USIN 이벤트 입력 포커스를 얻을 때 호출됨

on_dblclick ON_DBL

CLICK 이벤트 마우스 더블 클릭 시 호출됨

on_validation ON_VALI

DATION 이벤트 업무 전체 거래를 올리기 전 호출 됨

데이터 입력 예제(영문, 숫자 모두 입력 가능)

back_color 예제(영문, 숫자 모두 입력 가능)

패턴 지정 예제

일반필드의 속성 중 [pattern]에 표현하고자 하는 패턴을 입력하면 실행 후 입력 값이 패턴에

맞게 표현됩니다.

function btnNomal_on_mouseup()

{

fldNomal.SetText("1234");

}

86/240


auto_size 예제

일반필드의 속성 중 [auto_size]를 True로 설정하면 [max_length] 입력 가능한 최대길이에

맞게 자동으로 사이즈가 조절됩니다. 이와 반대로 [auto_size]를 false로 설정하면 필드크기를

마우스 드래그로 자유롭게 조절할 수 있습니다.

이름 지정 예제

일반필드의 속성 중 [name]에 입력하고자 하는 값은 메타데이터 검색(권장)을 통해

입력되어야 합니다. 검색을 통해 선택한 이름은 속성 필드의 [name]과 [description] 항목에

자동 셋팅 됩니다. (모든 컨트롤에 해당되는 기능)

또는, 사용자가 직접 입력을 통해서 이름을 지정할 수 있습니다.

87/240


6.2. 숫자필드(numeric field)

: 오브젝트 윈도우의 숫자 필드 오브젝트 아이콘

그림. 숫자 필드 속성 예제

88/240


표 2. 숫자 필드의 속성



name 이름 텍스트 숫자 필드의 이름

description 설명 텍스트 숫자 필드에 대한 설명

in_index 입력인덱스 숫자 입력 인덱스. 데이터를 호스트로 송신할 때에

각 항목의 인덱스로 사용됨

out_index 출력인덱스 숫자

출력 인덱스. 데이터를 호스트에서 수신할 때

에 각 항목의 인덱스로 사용됨. 경우에 따라

입력 인덱스만 사용하기도 함.

arrayindex 배열인덱스 숫자 해당 콤포넌트를 control array 로 구성할 경우

array Index


FALSE


조정













border_color 테두리색상 색상 테두리의 색상

border_color_foc

us 테두리색상 색상 포커스 받은 필드의 테두리의 색상

apply_inputtypec

olor

input 타입

색상적용

TRUE/

FALSE





0: CURSOR_ARROW

1:CURSOR_IBEAM

2:CURSOR_WAIT

3:CURSOR_CROSS

89/240


속성 ID 속성이름 유형 설명 4:CURSOR_UPARROW

5:CURSOR_SIZENWSE

6:CURSOR_SIZENESW

7:CURSOR_SIZEWE

8:CURSOR_SIZENS

9:CURSOR_SIZEALL

10:CURSOR_NO

11:CURSOR_HAND

12:CURSOR_HELP



max_value 최대값 숫자 최대 입력 가능한 값

min_value 최소값 숫자 최소 입력 가능한 값




Z:숫자만 가능


이외의 문자는 비패턴 문자로서 문자 그대로

디스플레이)



pattern_preview 패턴 미리

보기

TRUE/

FALSE 지정한 패턴이 값 입력 전 보일 것인지 여부

places 소수점이하 숫자 소수점 이하 자리 수 (0 이면 소수점 이하 없

음)

hostdata_include

dot

전문에 소

수점 포함

TRUE/

FALSE

호스트로 전송 시에 소수점을 포함해서 전송

할 것인지 유무

allow_minus 마이너스

허용

TRUE/

FALSE 마이너스 값 설정 가능 여부



apply_rightpatter 패턴정렬 TRUE/ 좌측패턴정렬 적용 여부

90/240


속성 ID 속성이름 유형 설명 n FALSE




auto_dup 자동 DUP TRUE/

FALSE

화면 호출 시에 DUP 버퍼에서 자동으로 읽어

와서 채우는 기능. default_value 속성을 무력

화 함.

auto_skip 자동 SKIP TRUE/

FALSE

max_length만큼 입력하면 자동으로 다음 오브

젝트로 입력포커스를 넘기는 속성

auto_clear 자동

CLEAR

TRUE/








hidden 숨김 TRUE/

FALSE

거래 화면에 보이지 않음. 거래 데이터에는 존

재

host_send 데이터전송 TRUE/

FALSE






print_prefix 특정값 텍스트 화면출력 시 특정값을 미리 설정 (앞에 예:\)

print_postfix 특정값 텍스트 화면출력 시 특정값을 미리 설정 (뒤에 예:\)

print_align 정렬값 선택 0:left, 1:right 인쇄 시 정렬 위치


link_data Dataset

연결 선택

Data set list 에서 해당 오브젝트와 연결할

data를 선택

on_create ON_CREA

TE 이벤트 필드 생성시 호출됨

on_keydown ON_KEYD

OWN 이벤트 키가 눌릴 때 호출됨

on_change ON_CHAN

GE 이벤트 값이 변경될 때 호출됨

91/240



on_focusout ON_FOCU

SOUT 이벤트 입력 포커스를 잃을 때 호출됨

on_focusin ON_FOCU

SIN 이벤트 입력 포커스를 얻을 때 호출됨

on_dblclick ON_DBLC

LICK 이벤트 마우스 더블 클릭 시 호출됨

on_validation ON_VALID

ATION 이벤트 업무 전체 거래를 올리기 전 호출됨

border_color_focus 예제

포커스 받기 전 포커스 받은 후

places 예제

92/240


6.3. 한글필드(hangul field)

: 오브젝트 윈도우의 한글 필드 오브젝트 아이콘

그림. 한글 필드 속성 예제

93/240


표 3. 한글 필드의 속성



name 이름 텍스트 한글 필드의 이름

description 설명 텍스트 한글 필드에 대한 설명

in_index 입력인덱스 숫자 입력 인덱스. 데이터를 호스트로 송신할 때에 각







array Index


FALSE


조정

x X좌표 숫자 pixel 단위

y Y좌표 숫자 pixel 단위












border_color_fo

cus 테두리색상 색상 포커스 받은 필드의 테두리의 색상

apply_inputtype

color

input 타입

색상적용

TRUE/

FALSE





0: CURSOR_ARROW

1:CURSOR_IBEAM

2:CURSOR_WAIT

3:CURSOR_CROSS

94/240


속성 ID 속성이름 유형 설명 4:CURSOR_UPARROW

5:CURSOR_SIZENWSE

6:CURSOR_SIZENESW

7:CURSOR_SIZEWE

8:CURSOR_SIZENS

9:CURSOR_SIZEALL

10:CURSOR_NO

11:CURSOR_HAND

12:CURSOR_HELP



horz_align 좌우정렬 선택 0:left, 1:right, 2:center






FALSE

화면 호출 시에 DUP 버퍼에서 자동으로 읽어와

서 채우는 기능. default_value 속성을 무력화 함.

auto_clear 자동

CLEAR

TRUE/



강제 선택










hidden 숨김 TRUE/



FALSE



full_shape 전각문자 TRUE/ 전각문자만 입력 가능

95/240



FALSE

imemode 한/영 입력

모드 선택 0:english, 1:korean

accept_dropfile

s 파일 드롭

TRUE/

FALSE 파일 드롭 가능 여부





link_data Dataset

연결 선택


data를 선택

on_create ON_CREA


on_keydown ON_KEYD


on_change ON_CHAN


on_focusout ON_FOCU


on_focusin ON_FOCU


on_dblclick ON_DBLC



ATION 이벤트 업무 전체 거래를 올리기 전 호출됨

on_dropfiles ON_DROP

FILES 이벤트 파일이 드롭될 때 호출됨

한글 입력 가능 설정

–>

필드가 포커스를 받았을 때 default로 한글/영문을 설정할 수 있다.

96/240


6.4. 암호필드(password field)

: 오브젝트 윈도우의 암호 필드 오브젝트 아이콘

그림. 암호 필드 속성 예제

97/240


표 4. 암호 필드의 속성



name 이름 텍스트 암호 필드의 이름

description 설명 텍스트 암호 필드에 대한 설명





각 항목의 인덱스로 사용됨. 경우에 따라 입력 인

덱스만 사용하기도 함.


array Index


FALSE

필드의 길이에 의해 width, height 를 자동으로 조

정














border_color

_focus 테두리색상 색상 포커스 받은 필드의 테두리의 색상

apply_inputty

pecolor

input 타입

색상적용

TRUE/

FALSE



display_char 표시문자 텍스트 입력 값 대신 보여줄 문자 (보통 ‘*’ 사용)

mouse_curso

r

마우스


0: CURSOR_ARROW

1:CURSOR_IBEAM

2:CURSOR_WAIT

98/240


속성 ID 속성이름 유형 설명 3:CURSOR_CROSS

4:CURSOR_UPARROW

5:CURSOR_SIZENWSE

6:CURSOR_SIZENESW

7:CURSOR_SIZEWE

8:CURSOR_SIZENS

9:CURSOR_SIZEALL

10:CURSOR_NO

11:CURSOR_HAND

12:CURSOR_HELP







FALSE

화면 호출 시에 DUP 버퍼에서 자동으로 읽어와서

채우는 기능. default_value 속성을 무력화 함.


FALSE

max_length 만큼 입력하면 자동으로 다음 오브젝

트로 입력포커스를 넘기는 속성

auto_clear 자동

CLEAR

TRUE/


Input_count 입력횟수 TRUE/

FALSE

비밀번호의 경우 입력된 값 만큼 확인하는 기능

(스크립트로 처리되는 기능)


0:normal (입력가능)

1:required (필수입력)

2:protected (입력불가)





hidden 숨김 TRUE/



FALSE



99/240






link_data Dataset

연결 선택

Data set list 에서 해당 오브젝트와 연결할 data를

선택

on_create ON_CREA


on_keydown ON_KEYD


on_change ON_CHAN


on_focusout ON_FOCU


on_focusin ON_FOCU


on_dblclick ON_DBLC



ATION 이벤트 업무 전체 거래 전에 호출됨 (화면 Validation)

display_char 예제

tooptip 속성에 지정 예제

100/240


6.5. 텍스트(text)

: 오브젝트 윈도우의 텍스트 오브젝트 아이콘

그림. 텍스트 속성 예제

101/240


표 5. 텍스트의 속성



name 이름 텍스트 텍스트의 이름

description 설명 텍스트 텍스트에 대한 설명


FALSE


정








text 텍스트 텍스트 화면에 표시할 텍스트







gradient_effe

ct

그라데이션

효과 선택

0:none

1:vertical

2:horizontal

3:forwarddiagonal

4:backwarddiagonal

gradient_start

color 시작색 색상 그라데이션 효과 시작 색 지정

gradient_end

color 종료색 색상 그라데이션 효과 종료 색 지정



image 이미지속성 커스텀 이미지 설정

image_hidde

n 숨김

TRUE/

FALSE 이미지 숨김 여부 설정

image_positi

on 이미지위치 선택

0: 텍스트의 왼쪽

1: 텍스트의 오른쪽

102/240



2: 텍스트의 윗쪽

3: 텍스트의 아래쪽

mousehover 마우스오버

설정

TRUE/

FALSE 마우스 오버 시 글자색 변경 여부 설정

mousehover_

forecolor

마우스오버

전경색 색상 마우스 오버시 전경색 설정

mousehover_

backcolor

마우스오버

배경색 색상 마우스 오버시 배경색 설정

mousehover_

gradienteffect

마우스오버

그라데이션

효과

선택 마우스 오버시 그라데이션 효과 선택

mousehover_

gradientstartc

olor

마우스오버

그라데이션

시작색

색상 마우스 오버시 그라데이션 시작 색상 설정

mousehover_

gradientendc

olor

마우스오버

그라데이션

종료색

색상 마우스 오버시 그라데이션 종료 색상 설정

link_data Dataset

연결 선택

Data set list 에서 해당 오브젝트와 연결할 data를

선택


hidden 숨김 TRUE/

FALSE 거래 화면에 보이지 않음. 디자인 시에만 보임

on_click ON_CLICK 이벤트 클릭했을 때 호출됨

text 예제

gradient_effect 예제

103/240


image_position 속성에 입력한 값 표시 예제

mousehover 속성에 입력한 값 표시 예제

마우스오버 전 마우스오버 후

104/240


6.6. 멀티라인(multiline)

: 오브젝트 윈도우의 멀티라인 오브젝트 아이콘

그림. 멀티라인 속성 예제

105/240


표 6. 멀티라인의 속성



name 이름 텍스트 멀티라인의 이름

description 설명 텍스트 멀티라인에 대한 설명





각 항목의 인덱스로 사용됨. 경우에 따라 입력 인

덱스만 사용하기도 함.














apply_inputty

pecolor

input 타입

색상적용

TRUE/

FALSE



show_horzsc

roll 좌우스크롤

TRUE/

FALSE 좌우 스크롤바를 보일 것인지 유무

show_vertscr

oll 상하스크롤

TRUE/

FALSE 상하 스크롤바를 보일 것인지 유무



max_linecou

nt 최대라인수 숫자 최대 라인 수 설정

horz_align 수평정렬 선택 0:left

1:right


allow_dup DUP가능 TRUE/ DUP 기능 사용 유무

106/240



FALSE


FALSE



auto_clear 자동

CLEAR

TRUE/



강제 선택










hidden 숨김 TRUE/





FALSE



full_shape 전각문자 TRUE/

FALSE 전각문자만 입력 가능

hangul 한글 TRUE/

FALSE 한글 입력 가능

on_keydown ON_KEYD


on_focusout ON_FOCU


on_focusin ON_FOCU



ATION 이벤트 업무 전체 거래 전 호출됨(화면 Validation)

show_horzscroll 예제

107/240


6.7. 그리드(grid)

: 오브젝트 윈도우의 그리드 오브젝트 아이콘

그림. 그리드 속성 예제

108/240


표 7. 그리드의 속성



name 이름 텍스트 리스트 뷰의 이름

description 설명 텍스트 리스트 뷰의 이름에 대한 설명


스 숫자




스 숫자








back_color 바탕색 색상 리스트 뷰의 바탕 색상


cell_height 셀높이 숫자 셀 높이 지정

cell_dividerowco

unt 셀구분 숫자 셀 구분 개수 지정

cell_dividecolor 셀구분색

상 색상 셀 구분 바탕 색상

cell_linecolor 셀라인색

상 색상 셀 구분 선 색상


0:none(테두리 없음)

1:single–flat(평평한 테두리)

2:double–raised(볼록 테두리)

3:double–sunken(오목 테두리)



selectrow_style 선택시 로

우 스타일 선택 0:none, 1:normal, 2:border only

selectrow_backc

olor

선택시 로

우 배경색 색상 선택한 행 배경 색상

selectrow_border

color

선택시 로

우 테두리

색

색상 선택한 행 테두리 색상

109/240



selectcell_backc

olor

선택시 셀

배경색 색상 선택한 셀 배경 색상

selectcell_forecol

or

선택시 셀

전경색 색상 선택한 셀 전경 색상

header_horzcou

nt 행 헤더수 숫자 행 헤더 수 지정

header_vertcoun

t 열 헤더수 숫자 열 헤더 수 지정

header_style 헤더유형 선택 0:flat style(평평한 유형)

1:raised style(볼록 유형)

header_ishostdat

a

헤더데이

터 호스트

전송

TRUE/

FALSE 헤더 데이터 호스트 전송 여부

header_height 헤더높이 숫자 헤더 높이 지정

header_clicksort 헤더클릭

시 정렬

TRUE/

FALSE 헤더클릭시 자동 정렬 여부

gradient_effect 그라데이

션 효과 선택

0:none

1:vertical

2:horizontal

3:forwarddiagonal

4:backwarddiagonal

gradient_startcol

or 시작색 색상 그라데이션 효과 시작 색 지정

gradient_endcolo

r 종료색 색상 그라데이션 효과 종료 색 지정

linenumber_sho

w 순번 컬럼

TRUE/

FALSE 순번 컬럼 보일지 여부

linenumber_title 순번컬럼

제목 텍스트 순번 컬럼 제목 설정

linenumber_fore

color

순번컬럼

글꼴색 색상 순번 컬럼 글꼴 색상 지정

linenumber_back

color

순번컬럼

배경색 색상 순번 컬럼 바탕 색상 지정

vertscrollbar_styl

e

가로스크

롤 스타일 선택

0:none(없음)

1:auto(자동)

2:always(항상)

110/240



horzscrollbar_sty

le

세로스크


0:none(없음)

1:auto(자동)

2:always(항상)

column 컬럼 커스텀 컬럼에 대한 속성

samplerows 샘플행 숫자 디자이너에서 샘플로 보일 row 개수

fixedrows 고정행 숫자 고정 row 개수

dynamic_fixcedr

ow

동적고정

행

TRUE/

FALSE 동적으로 그리드의 고정 행 지정 가능 여부

fixedcols 고정열 숫자 고정 column 개수

dynamic_fixcedc

ols

동적고정

열

TRUE/

FALSE 동적으로 그리드의 고정 열 지정 가능 여부

statistics_row 통계행 커스텀 통계행에 대한 속성

statistics_column 통계열 커스텀 통계열에 대한 속성

mid_statistics 소계행 선택

0:none

1:합계

2:평균

3:건수

4:최소값

5:최대값

column_sort 컬럼 정렬 TRUE/

FALSE 컬럼 정렬 가능 여부

column_moveabl

e 컬럼 이동

TRUE/

FALSE 컬럼간 이동 가능 여부

row_addable ROW 추

가가능

TRUE/

FALSE ROW 추가 가능 유무

dragable 드래그 TRUE/

FALSE 마우스 드래그 가능 여부

accept_dropfiles 파일 드롭 TRUE/

FALSE 파일 드롭 가능 여부

max_addablerow

s

최대 추가

가능 row 숫자

사용자가 최대 추가할 수 있는 Row Count, 설정

되어 있지 않으면 무한대

multi_selectrow 다중선택 TRUE/

FALSE 다중 행 선택 가능 유무

multi_checkrow 다중체크 TRUE/

FALSE 다중 행 체크 가능 유무

use_checkrow 선택가능 TRUE/ 그리드 체크 박스 로우 사용 여부

111/240



FALSE

autocheckrow_e

diting 자동 체크

TRUE/

FALSE 그리드 셀 입력 시 자동 체크 여부

checkrowwithsel

ect

체크와 로

우선택

TRUE/

FALSE

Use_checkrow 체크시에 Row 를 함께 선택하게

할지 여부

autozoom 확대축소 TRUE/

FALSE

Art+마우스휠 동작시에 그리드를 최소 50%에서

최대 200%까지 확대,축소하는 기능

hidden 숨김 TRUE/




popupmenu 팝업메뉴 커스텀 팝업 메뉴에 대한 속성

popupmenu_sho

w

팝업메뉴

show 여

부

TRUE/

FALSE

그리드에서 지원되는 팝업 메뉴를 보여줄 것인

지 여부

link_data Dataset

연결 선택


data를 선택

on_keydown ON_KEY


on_itemselchang

e

ON_ITEM

SELCHA

NGE

이벤트 셀이 변경될 때 호출됨

on_itemeditcomp

lete

ON_ITEM

EDITCO

MPLETE

이벤트 셀 편집을 완료했을 때 호출됨

on_itemclick ON_ITEM

CLICK 이벤트 셀 클릭 시 호출됨

on_itemdblclick

ON_ITEM

DBLCLIC

K

이벤트 셀 더블 클릭 시 호출됨

on_headerclick

ON_HEA

DERCLIC

K

이벤트 헤더 클릭 시 호출됨

on_headerdblclic

k

ON_HEA

DERDBL

CLICK

이벤트 헤더 더블 클릭 시 호출됨

112/240



on_checkrowclic

k

ON_CHE

CKROW

CLICK

이벤트 체크 행 클릭 시 호출 됨

on_rclick ON_RCLI

CK 이벤트 그리드에서 오른쪽 마우스 클릭 시 호출됨

on_vscroll ON_VSC

ROLL 이벤트 수직스크롤 이동시 호출됨

on_hscroll ON_HSC

ROLL 이벤트 수평스크롤 이동시 호출됨

on_begindrag ON_BEGI

NDRAG 이벤트 마우스 드래그 시작 시 호출됨

on_enddrag ON_END

DRAG 이벤트

드래그 시작한 곳의 개체 안에 마우스 드롭 완

료 시 호출됨

on_dropcomplet

e

ON_DRO

PCOMPL

ETE

이벤트 드래그 시작한 곳의 개체가 아닌 다른 개체에

마우스 드롭 완료 시 호출됨

on_dropfiles ON_DRO

P 숫자 파일이 드롭될 때 호출됨

그림. column의 상세 속성(수평헤더부)

113/240


그림. column의 상세 속성(데이터부)

표 8. column의 상세 속성(수평헤더부)


title 제목 텍스트 헤더에 표시될 텍스트

forecolor 글자색 색상 글자의 색상

backcolor 바탕색 색상 바탕 색상

gradient_effect 그라데이션

효과 선택

0:none

1:vertical

2:horizontal

3:forwarddiagonal

4:backwarddiagonal

gradient_startc

olor 시작색 색상 그라데이션 효과 시작 색 지정

gradient_endco

lor 종료색 색상 그라데이션 효과 종료 색 지정



114/240




checkbox_sho

w 체크박스

TRUE/

FALSE 체크박스 보일지 여부

image 이미지 커스텀 이미지 설정

표 9. column의 상세 속성(데이터부)



name 이름 텍스트 컬럼 이름

descrption 설명 텍스트 컬럼에 대한 설명



text_horzalign 좌우정렬 선택 0:left, 1:center, 2:right

text_vertalign 상하정렬 선택 0:top, 1:center, 2:bottom

editable 편집 가능 TRUE/

FALSE 셀 편집 가능 여부

hidden 숨김 TRUE/





FALSE

max_length 만큼 입력하면 자동으로 다음 오브



허용

TRUE/


data_type 데이터타입 선택 0:숫자. 1:영문, 2:한글

input_type 입력 타입 선택 0:editbox, 1:checkbox, 2:combobox

make_case 대소문자강

제 선택




link_data Dataset

연결 선택


data를 선택

picklist_linkdata Dataset 연

결 선택

Data set list에서 picklist를 생성할 dataset을 연

결

mouse_cursor 마우스 선택 0: CURSOR_ARROW

115/240


속성 ID 속성이름 유형 설명 커서 유형 1:CURSOR_IBEAM

2:CURSOR_WAIT

3:CURSOR_CROSS

4:CURSOR_UPARROW

5:CURSOR_SIZENWSE

6:CURSOR_SIZENESW

7:CURSOR_SIZEWE

8:CURSOR_SIZENS

9:CURSOR_SIZEALL

10:CURSOR_NO

11:CURSOR_HAND

12:CURSOR_HELP

combobox_styl

e

콤보박스

스타일 선택

0:code combobox(코드 콤보)

1:normal combobox(일반 콤보)

combobox_edit

able

콤보 편집

가능

TRUE/

FALSE

콤보박스로 설정되어 있을 경우 편집 가능 여부

설정

combobox_def

aultvalue_type

콤보 기본

값 유형 선택 Index , data

combobox_dat

a

콤보 기본

데이터 입력 화면 로딩 시 콤보박스에 표시되는 기본 값

combobox_exc

elstyle

콤보박스

엑셀스타일 선택

0:display text

1:code only

2:code+comment

3:comment only

combobox_aut

ocodevalid

픽리스트코

드값체크

TRUE/

FALSE

픽리스트에설정되어있는 리스트중에 없는 코드

값을 입력시에 체크해주는 옵션

checkbox_truev

alue check값 텍스트 체크박스가 check 되었을 때의 값 설정

checkbox_false

value uncheck값 텍스트 체크박스가 uncheck 되었을 때의 값 설정

checkbox_exce

lstyle

체크박스

엑셀스타일 선택 0:text, 1:value



116/240






Z:숫자만 가능


이외의 문자는 비패턴 문자로서 문자 그대로 디

스플레이)



apply_rightpatt

ern 패턴 정렬

TRUE/

FALSE 좌측패턴정렬 적용 여부

places 소수점이하 숫자 소수점 이하 자리 수 (0이면 소수점 이하 없음)

hostdata_includ

edot

전문에소숫

점포함

TRUE/

FALSE

호스트로 전송 시에 소수점을 포함해서 전송할

것인지 유무

resizable 사이즈 변

경

TRUE/

FALSE 컬럼 사이즈 변경 가능 여부

excel_rw 엑셀 출력 TRUE/

FALSE 엑셀 출력 가능 여부

statistics_show 통계 데이

터 포함

TRUE/

FALSE 통계에 데이터 포함 여부

statisticsrow_ty

pe

통계열 유

형 선택 0: 합계, 1: 평균, 3: 개수, 4:최소값, 5: 최대값

base_midstatist

ics 소계 행

TRUE/

FALSE 컬럼 기준으로 소계 행 설정 여부

midstatistics_s

how

소계 데이

터 포함

TRUE/

FALSE 소계행 데이터 포함 여부

midstatistics_ty

pe

소계행 유

형 선택 0:합계, 1:평균, 2:개수, 3:최소값, 4:최대값

hostsend 데이터전송 TRUE/

FALSE



cellmerge 셀병합 TRUE/

FALSE 동일한 데이터일 경우 셀 병합 가능 여부

image 이미지속성 커스텀 이미지 선택

image_horzalig

n

이미지 수

평정렬 선택

0:왼쪽, 1:가운데, 2:오른쪽, 3:텍스트의 왼쪽,

4:텍스트의 오른쪽

picklist 픽리스트 커스텀 픽리스트 속성 설정

picklist_hiddeni 픽리스트 선택 0:숨김, 1:보이기

117/240



tem 아이템숨김

picklist_selstyle 픽리스트

셀표시방식 선택

0:code only

1:code+comment

2:comment only

picklist_viewsty

le

픽리스트

뷰표시방식 선택

0:code only

1:code+comment

2:comment only

show_tooltip 툴팁 표시 TRUE/

FALSE 풍선 도움말 보일지 여부

default_value 초기값 텍스트 컬럼 row 추가 시 초기 설정 값

prefilldata 사전 입력

데이터 텍스트 화면 오픈 시 사전 입력 데이터 설정

print_prefix 특정값 텍스트 화면인쇄 시 특정 값을 미리 설정 (예:\)

on_columnclick ON_COLU

MNCLICK 이벤트 클릭했을 때 호출됨

on_columndblcl

ick

ON_COLU

MNDBLCLI

CK

이벤트 더블 클릭했을 때 호출됨

on_columnmou

sehover

ON_COLU

MNMOUS

EHOVER

이벤트 마우스 오버 시 호출됨

그림. 그리드 통계행 속성 등록창

118/240


표 10. 통계행의 속성

항목 설명

통계행 번호 몇 번째 통계행인지 알려주는 번호

통계행 내용 통계행 내용(합계, 평균, 개수, 최소값, 최대값)

통계행 제목 통계행 제목

통계행 전경 색상 통계행 데이터부 글자색

통계행 배경 색상 통계행 데이터부 바탕색

통계행 헤더 전경 색상 통계행 헤더부 글자색

통계행 헤더 배경 색상 통계행 헤더부 바탕색

통계행 헤더 수평정렬 좌측정렬, 중앙정렬, 우측정렬

통계행 헤더 수직 정렬 상단정렬, 중앙정렬, 하단정렬

표 11. 통계열의 속성

항목 설명

통계열 번호 몇 번째 통계열인지 알려주는 번호

통계열 넓이 통계열의 넓이 지정

통계열 내용 통계열 내용(합계, 평균, 개수, 최소값, 최대값)

통계열 수평 정렬 좌측정렬, 중앙정렬, 우측정렬

통계열 수직 정렬 상단정렬, 중앙정렬, 하단정렬

통계열 전경 색상 통계열 데이터부 글자색

119/240


통계열 배경 색상 통계열 데이터부 바탕색

통계열 헤더 수평 정렬 좌측정렬, 중앙정렬, 우측정렬

통계열 헤더 수직 정렬 상단정렬, 중앙정렬, 하단정렬

통계열 헤더 전경 색상 통계열 헤더부 글자색

통계열 헤더 배경 색상 통계열 헤더부 바탕색

표 12. 화면으로 팝업메뉴 띄우기

항목 설명

화면경로 팝업 메뉴가 있는 화면의 경로

화면번호 팝업 메뉴가 있는 화면의 제목

표 13. 팝업메뉴 설정(공통메뉴)

항목 설명

메뉴경로 [메뉴]–>[도구]–>[팝업메뉴 등록]을 통해 등록한 메뉴의 경로

공통메뉴 [메뉴]–>[도구]–> [팝업메뉴 등록]을 통해 등록한 메뉴의 제목

120/240


표 14. 팝업메뉴 설정(사용자정의 메뉴)

항목 설명

메뉴 아이템 이름 추가할 사용자정의 메뉴 아이템 이름

팝업메뉴 설정 예제 – 화면으로 팝업메뉴 띄우기

[화면으로 팝업메뉴 띄우기]는 팝업메뉴 디자인부터 기능구현까지 사용자가 정의할 수 있다.

그림. 일반 팝업메뉴 그림. 화면 팝업메뉴

왼쪽 그림은 일반적인 팝업메뉴이고, 오른쪽 그림은 사용자가 만든 화면을 팝업메뉴로 띄운

것이다. 아래 그림은 [화면으로 팝업메뉴 띄우기]를 예제이다.

① 팝업메뉴로 띄울 화면을 만든다.

② 화면이 저장되어 있는 경로를 지정해준 후, 화면번호 옆의 콤보

박스에 있는 화면 제목을 지정하고 저장[확인]한다.

③ [미리보기]를 통해 결과를 확인한다.

그림. 화면으로 팝업메뉴 띄우기 예제

121/240


팝업메뉴 설정 예제 – 공통메뉴 설정

[메뉴]–>[도구]–>팝업 메뉴 등록]을 통해 추가한 팝업메뉴 제목을 지정한다. 변경할 속성이 있

으면 [메뉴 아이템 속성 변경]에서 변경을 한 후 [속성변경]버튼을 눌러 저장한뒤 [확인]한다.

팝업메뉴 설정 예제 – 사용자정의 메뉴

①메뉴 아이템 이름을 입력한다.

②구분선, 팝업메뉴에 대한 설정을

한다.

③메뉴 아이템에 실행함수 연결한다.

④[추가]버튼을 눌러 사용자정의 메

뉴를 추가한다.

⑤위처럼 필요한 만큼 추가한 뒤 [확

인]버튼을 누른다.

122/240


그리드 컬럼 추가 예제

컬럼 타이틀 입력 예제

그리드 열 속성 등록은 [수평헤더부]와 [데이터부]를 구분하여 한다. 먼저 [수평헤더부]에서는

행 별로(헤더는 여러 행 지정이 가능) 컬럼 타이틀을 지정할 수 있다. 원하는 행을 선택 후

속성의 title 에 입력한다.

컬럼별 툴팁 입력 예제

원하는 행을 선택 후 속성의 tooltip 에 텍스트를 입력하여 컬럼 별 풍선 도움말을 보여줄 수

있다. 해당 컬럼에 마우스 커서가 올라가면 툴팁이 나타난다.

열추가 버튼을 클릭하여 원하

는 수만큼 열을 추가한다.

선택한 열을 삭제한다.

위로, 아래로 버튼을 클릭하

여 열의 순서를 바꿀 수 있

다.

123/240


컬럼 속성 지정 예제

컬럼의 넓이, 데이터 패턴, 정렬, 타입 등을 지정할 수 있다.

그리드 헤더 수 지정 예제

header_horzcount

header_vertcount

124/240


그리드 라인 넘버 표시 예제

linenumber_show 속성을 True로

지정하면 그리드 맨 앞에 순번이

표시된다.

체크박스 표시, 멀티 체크 예제

use_checkrow 속성이 True이면

수직헤더부 다음 열에 체크박스가

표시된다.

multi_ checkrow 속성이 True이면

멀티 체크가 가능하다.

그리드 헤더 병합 예제

병합을 원하는 행 또는 열을 선택 후 마우스 오른쪽 버튼을 클릭하여 [선택된 헤더 병합]메뉴

를 선택하면 병합된다. 반대로 병합된 행 또는 열을 선택 후 [선택된 헤더 병합 해제] 메뉴를

선택하면 병합 해제된다.

행 또는 열을 선택하는 방법은 [Ctrl] 키를 누른 채로 병합 원하는 칸을 차례로 마우스 왼쪽

버튼을 클릭하여 선택한다.

125/240


그리드에 데이터 입력 예제

=> JAVAScript

function btnGrd_on_mouseup()

{

var strData = fldGrd.GetText(); //필드의 데이터

grdList.deleteall(); //그리드 초기화

grdList.setheadertext(0, 0, strData); //헤더에 데이터를 입력.(행, 열, 데이터)

// 그리드에 데이터와 함께 새로운 열 추가.(데이터, 행, 열)

grdList.insertitemtext(0, 0, strData);

// 그리드 컬럼에 데이터 입력.(데이터, 행, 열)

grdList.setitemtext(0, 1, strData);

grdList.insertitemtext(1, 0, strData);

……

grdList.refresh(); // 그리드 리프레쉬

}

※ grdList.refresh() – 그리드 내 데이터의 최종 넓이와 높이를 계산하여 스크롤 영역을 계산하

거나 통계행이 있을 때 계산 시점이므로 그리드의 값을 변경할 경우 마지막 라인에 반드시

입력해 주어야 한다.

※ JAVAScript는 함수 내에서만 사용할 지역 변수일 경우에는 반드시 var문을 사용하

여 선언해 주어야 합니다. 선언하지 않고 사용할 경우 단위 화면 내의 전역변수로 사

용되어 화면 동작 및 구현한 로직이 정상적으로 동작하지 않을 수 있습니다. 위의 예

제 코드에서는 필드의 데이터를 가져와 변수에 넣어줄 때 (var strData =

fldGrd.GetText();) var 문을 사용하여 각 할당받을 변수를 선언하여 주었습니다. 선언

해 주지 않을 경우 이후 다른 함수 동작 중에도 strData 변수에 새로운 값을 할당하

기 전에는 해당 값이 계속 유지 되므로 원하지 않는 동작이 일어날 수 있습니다.

126/240


그리드 데이터 가져오기 예제

=> JAVAScript 예제

function btnGrd2_on_mouseup()

{

// 그리드 헤더 데이터 가져오기(행, 열)

var strGrdHeaderData = grdList.getheadertext(0, 0);

// 그리드 컬럼 데이터 가져오기(행, 열)

var strGrdData = grdList.getitemtext(0, 0);

// 데이터를 메시지 박스로 보여줌

screen.alert("getheadertext(0, 0) : " + strGrdHeaderData +

"\ngetitemtext(0, 0) : " + strGrdData);

}

※ screen.alert – xFrame에서 제공하는 메시지 박스 API

+ – JAVAScript 에서 텍스트를 연결할 때 “+” 기호를 사용한다.

\n – JAVAScript 에서 줄바꿈 시 사용한다.

선택된 행, 열 찾기 예제

127/240



{

var selectrow = grdList.getselectrow(); // 그리드의 선택된 행 가져오기

var selectcol = grdList.getselectcolumn(); // 그리드의 선택된 열 가져오기

screen.alert("선택 행 : " + selectrow + ", 선택 열 " + selectcol);

}

체크된 행 찾기 예제


{

var strMsg = "";

var nCheckedRow = grdList.getcheckedrow(0); // 체크된 행 개수 확인

while (–1 < nCheckedRow)

{

strMsg = strMsg + nCheckedRow + ","; //몇 번째 행인지 확인

nCheckedRow = grdList.getcheckedrow(nCheckedRow + 1);

}

screen.alert(strMsg);

}

128/240


cell_devidercount/ cell_devidecolor 속성 예제

행 나눔 개수 / 행 나눔 색상 속성

selectrow_backcolor/ selectrow_border 속성 예제

선택된 행의 바탕색 / 선택된 행의 테두리 색상 설정

gradient_effect / gradient_startcolor/ gradient_endcolor 속성 예제

gradient 는 가로, 세로, 대각선 등으로 효과를 줄 수 있다. gradient 색상은 색상속성 창에서

선택하여 지정한다.

헤더 gradient

vertscrollbar_style / horzscrollbar_style 속성 예제

그리드의 수직스크롤, 수평스크롤의 속성 지정

=>그리드 크기에 상관없이 스크롤이 생성되지 않음

129/240


=>그리드의 크기에 따라 수직, 수평 스크롤이 자동으로 생성된다.

=>그리드에 항상 수평, 수직 스크롤이 생성된다.

dynamic_fixedrows / dynamic_fixedcols 속성 예제

열고정바와 행고정바를 동적으로 사용자가 원하는 위치로 drag하여 고정할 수 있다.

fixedrows / fixedcols를 모두 True로 설

정하고 [열 고정바 보이기], [행 고정

바 보이기]를 클릭하면 그리드에 검정

라인이 생성된다.

130/240


statistics_row / statistics_column속성 예제

통계행과 통계열을 등록한 그리드 결과 화면

dragable 속성 예제

그리드 행과 컬럼간 이동 속성을 설정한다.

[data1]의 행을 3번째 행으로 이동

[타이틀 1]의 열을 2번째 열로 이동

수직 스크롤을 내린경우 [data3]까지 고

정된 행의 데이터를 확인 할 수 있다.

수평 스크롤을 우측으로 이동된 경우 [행나

눔표시]까지 고정된 컬럼 데이터를 확인 할

수 있다.

통계행 통계열

131/240


6.8. 버튼(button)

: 오브젝트 윈도우의 버튼 오브젝트 아이콘

그림. 버튼 속성 예제

132/240


표 15. 버튼의 속성



name 이름 텍스트 버튼의 이름

description 설명 텍스트 버튼의 이름에 대한 설명

arrayindex 배열인덱

스 숫자

해당 콤포넌트를 control array 로 구성할 경우

array Index









0:single–flat

1:single–raised

2:double–raised

3:xp–style




션 효과 선택

0:none

1:vertical

2:horizontal

3:forwarddiagonal

4:backwarddiagonal

gradient_startcolor 시작색 색상 그라데이션 효과 시작 색 지정

gradient_endcolor 종료색 색상 그라데이션 효과 종료 색 지정



drawfocusrect 포커스 표

시

TRUE/F

ALSE 포커스를 받았을 때 점선 표시 여부

push_state 버튼 눌림

상태

TRUE/F

ALSE 버튼 눌림 상태 설정



0: CURSOR_ARROW

1:CURSOR_IBEAM

2:CURSOR_WAIT

133/240


속성 ID 속성이름 유형 설명 3:CURSOR_CROSS

4:CURSOR_UPARROW

5:CURSOR_SIZENWSE

6:CURSOR_SIZENESW

7:CURSOR_SIZEWE

8:CURSOR_SIZENS

9:CURSOR_SIZEALL

10:CURSOR_NO

11:CURSOR_HAND

12:CURSOR_HELP

text 텍스트 텍스트 버튼 위에 나타낼 텍스트

hot_key 핫키 선택 function key 지정

image_normal normal 이

미지 커스텀 이미지 속성 창에서 선택

image_focus focus 이미

지 커스텀 이미지 속성 창에서 선택

image_disable disable 이


image_down 마우스 다

운 이미지 커스텀 이미지 속성 창에서 선택

image_hover 마우스 오

버 이미지 커스텀 이미지 속성 창에서 선택

image_fillstyle

이미지 채

우기 스타

일

선택

0:기본

1:수평 채움

2:수직 채움

3:모두 채움

hidden 숨김 TRUE/F

ALSE

거래 화면에 보이지 않음. 거래 데이터에는 존

재

enable 활성화 TRUE/F

ALSE 버튼 활성화 여부

tabstop 탭멈춤 TRUE/F

ALSE 탭 키 이동 시 포커스를 받을지 여부

click_setfocus 포커스 받

는 여부

TRUE/F

ALSE

버튼을 클릭했을 때 클릭 이벤트를 타는것은

물로 이전 오브젝트에서 포커스를 가져오기

134/240



도 하는데 이때 포커스를 가져올지 여부


link_data Dataset

연결 선택


data를 선택

on_mousein ON_MOU

SEIN 이벤트 버튼 위에 마우스 커서가 위치할 때 호출됨

on_mouseout ON_MOU

SEOUT 이벤트 버튼 밖으로 마우스 커서가 나갔을 때 호출됨

on_mousedown ON_MOU

SEDOWN 이벤트 버튼에 마우스 눌렸을 때 호출됨

on_mouseup ON_MOU

SEUP 이벤트 버튼에서 마우스가 up 됐을 때 호출됨

on_focusin ON_FOCU


on_focusout ON_FOCU


on_rclick ON_RCLI

CK 이벤트 마우스 오른쪽 버튼 클릭 시 호출됨

on_rdblclick ON_RDBL

CLICK 이벤트 마우스 오른쪽 버튼 더블 클릭 시 호출됨

버튼 폰트 색 선택 예제

버튼 그라데이션 효과 설정 예제

버튼 border 스타일 설정 예제

135/240


버튼 이미지 선택 예제

각 속성 값을 더블 클릭하면 이미지 속성 등록창이 나

타난다.

경로를 지정하거나 이미지 아이디를 직접 검색하여 이

미지 아이템을 조회한 뒤, 원하는 이미지를 선택한다.

버튼에 이벤트 연결 예제

각 속성값을 더블 클릭하면 [이벤트 처리 다이얼로그]가 나타난다. VBScript나 JavaScript 를

선택하여 나타난 스크립트 이벤트 함수 내에 스크립트 코드를 작성한다.

136/240


6.9. 테이블(table)

: 오브젝트 윈도우의 테이블 오브젝트 아이콘

그림. 테이블 속성 예제

테이블 컨트롤은 생성 시 기본으로 2행, 3열을 기본으로 생성된다. 오브젝트 윈도우에서 생성시

사용자가 테이블 행, 열을 지정할 수 있다.

그림. 테이블 생성 예제

137/240


표 16. 테이블의 속성



name 이름 텍스트 테이블의 이름

description 설명 텍스트 테이블의 이름에 대한 설명





line_color 라인색 색상 라인의 색상

hidden 숨김 TRUE/F

ALSE

거래 화면에 보이지 않음. 거래 데이터에는

존재

on_click ON_CLIC

K 이벤트 클릭할 때 호출됨

셀분할 예제

분할하고자 하는 셀을 선택하고 마우스 오른쪽 버튼을 클릭하면 [테이블 셀 분할] 메뉴가 나

온다. 속성 창에 원하는 열, 행 개수를 입력하고 확인 버튼을 누르면 분할된다.

138/240


셀병합 예제

병합하고자 하는 셀을 Ctrl 키를 누른 채로 차례로 선택하고 마우스 오른쪽 버튼을 클릭하면

[테이블 셀 병합] 메뉴가 나온다. 메뉴를 선택하면 셀이 병합된다.

셀 속성 등록 예제

셀에 이미지, 패턴, 색상 등 속성을 지정할 수 있다. 테이블에서 오른쪽 마우스 버튼을 누르

면 [테이블 셀 속성] 메뉴가 나타나고 클릭하면 [셀 속성창]이 나타난다.

139/240


6.10. 체크박스(checkbox)

: 오브젝트 윈도우의 체크박스 오브젝트 아이콘

그림. 체크박스 속성 예제

140/240


표 17. 체크박스의 속성



name 이름 텍스트 체크박스의 이름

description 설명 텍스트 체크박스 이름에 대한 설명


스 숫자

입력 인덱스. 데이터를 호스트로 송신할 때에 각 항

목의 인덱스로 사용됨


스 숫자

출력 인덱스. 데이터를 호스트에서 수신할 때에 각

항목의 인덱스로 사용됨. 경우에 따라 입력 인덱스

만 사용하기도 함.


FALSE 체크박스의 길이에 의해 width, height 를 자동으로

조정








left_text 텍스트위

치

TRUE/

FALSE

체크박스 텍스트 위치 지정. TRUE 일 경우 체크박

스의 왼쪽에 텍스트가 표시됨

view_style 체크박스

스타일 선택 0:original–style, 1:xp–style

text 텍스트 텍스트 체크박스 옆에 나타낼 텍스트

true_value TRUE값 텍스트 check되었을 때의 값

false_value FALSE값 텍스트 uncheck되었을 때의 값




auto_dup 자동

DUP

TRUE/

FALSE



input_type 입력유형 선택 0:선택(입력가능), 1:필수(필수입력), 2:잠금(입력불가)



hidden 숨김 TRUE/


141/240



host_send 데이터전

송

TRUE/

FALSE



default_check 체크여부 TRUE/

FALSE 화면 호출 시에 체크박스에 체크 여부 설정



link_data Dataset

연결 선택

Data set list 에서 해당 오브젝트와 연결할 data 를

선택

on_focusout ON_FOC

USOUT 이벤트 입력 포커스를 잃을 때 호출됨

on_focusin ON_FOC

USIN 이벤트 입력 포커스를 얻을 때 호출됨

on_click ON_CLIC

K 이벤트 마우스로 항목을 클릭할 경우 호출됨

on_validation ON_VALI

DATION 이벤트 업무 전체 거래를 올리기 전 호출 됨

체크박스 텍스트 위치 설정 예제

체크박스 상태 가져오기 예제

142/240


function btnChk_on_mouseup()

{

var strChk = "선택된 체크박스는?";

if(chk1.GetCheck()) { // chk1이 체크됐는지 확인

strChk = strChk + "\n체크박스1";

}

if(chk2.GetCheck()) { // chk2가 체크됐는지 확인

strChk = strChk + "\n체크박스2";

}

screen.alert(strChk);

}

※ GetCheck() – 해당 체크박스에 체크가 되어 있으면 True, 체크되어 있지 않으면 false

143/240


6.11. 콤보박스(combobox)

: 오브젝트 윈도우의 콤보박스 오브젝트 아이콘

그림. 콤보박스 속성 예제

144/240


표 18. 콤보박스의 속성



name 이름 텍스트 선택버튼의 이름

description 설명 텍스트 콤보박스 이름에 대한 설명

in_index 입력인덱스 숫자 입력 인덱스. 데이터를 호스트로 송신할 때

에 각 항목의 인덱스로 사용됨


출력 인덱스. 데이터를 호스트에서 수신할

때에 각 항목의 인덱스로 사용됨. 경우에 따

라 입력 인덱스만 사용하기도 함.

autosize 자동크기 TRUE/FA

LSE

콤보박스의 길이에 의해 width, height 를

자동으로 조정













border_color_fo

cus 테두리색상 색상 포커스 받은 콤보박스의 테두리의 색상

button_hidden 버튼 숨김 TRUE/FA

LSE 콤보 다운 버튼 숨김 여부

button_backcol

or 버튼 배경색 색상 콤보 다운 버튼 색상 지정

button_arrowcol

or

버튼 화살표

색 색상 콤보 다운 버튼 화살표 색상 지정

apply_inputtype

color

input 타입색

상적용

TRUE/FA

LSE



contentbox_sizi

ng

contentbox

크기지정 선택

0:fit_combobox(콤보박스에 맞춤)

1:fit_content(콤보내용에 맞춤)

145/240



link_data Dataset

연결 선택


data를 선택

picklist_linkdata Dataset 연

결 선택

Data set list 에서 picklist 를 생성할 dataset

을 연결 max_length 최대길이 숫자 입력 가능한 최대 길이 min_length 최소길이 숫자 반드시 입력해야 하는 최소 길이


allow_dup DUP가능 TRUE/FA

LSE DUP 기능 사용 유무

auto_dup 자동 DUP TRUE/FA

LSE

화면 호출 시에 DUP 버퍼에서 자동으로 읽

어와서 채우는 기능. default_value 속성을 무

력화 함.

auto_skip 자동 SKIP TRUE/FA

LSE

max_length 만큼 입력하면 자동으로 다음 오

브젝트로 입력포커스를 넘기는 속성

auto_clear 자동 CLEAR TRUE/FA

LSE 거래 후 자동으로 지워지는 속성

Auto_codevalid 픽리스트코

드값체크

TRUE/FA

LSE

픽리스트에설정되어있는 리스트중에 없는 코

드값을 입력시에 체크해주는 옵션

make_case 대소문자강

제 선택








enable 활성화 TRUE/FA

LSE 활성화 여부

editable 편집 가능 TRUE/FA

LSE 편집 가능 여부 지정

imemode 한/영 입력모

드 선택 0:english, 1:korean

hidden 숨김 TRUE/FA

LSE


존재

host_send 데이터전송 TRUE/FA

LSE

호스트로 데이터 전송 유무 결정. 이 플래그

가 FALSE면 호스트로 전송하지 않음.

default_value_t

ype 초기값 타입 선택

index

data

146/240




tabstop 탭멈춤 TRUE/FA

LSE 탭 키 이동 시 포커스를 받을지 여부

dragable 드래그 TRUE/FA

LSE 마우스 드래그 가능 여부

accept_drop 드롭 TRUE/FA

LSE 다른 객체로부터 드롭 가능 여부

combobox_styl

e

콤보박스 스

타일 선택



combobox_data 콤보박스 데

이터 커스텀 콤보박스 데이터 설정


picklist_hiddenit

em

픽리스트 아

이템 숨김 선택 0:숨김;1:보이기

picklist_selstyle 표시방식 선택

0:code only

1:code+comment

2:comment only

picklist_viewstyl

e

픽리스트 뷰

스타일 선택

0:code only

1:code+comment

2:comment only

picklist_maskva

lue mask value 입력 픽리스트에 mask value 지정

showselectbox_

focusin

포커스 받을

시 선택박스

보임

선택

0:hide

1:always

2:empty value

3:exist value

on_create ON_CREAT

E 이벤트 필드 생성시 호출됨

on_keydown ON_KEYDO

WN 이벤트 키가 눌릴 때 호출됨

on_focusout ON_FOCUS

OUT 이벤트 입력 포커스를 잃을 때 호출됨

on_focusin ON_FOCUSI

N 이벤트 입력 포커스를 얻을 때 호출됨

on_itemchange ON_ITEMCH

ANGE 이벤트 아이템 변경 시 호출됨

147/240



on_validation ON_VALIDA

TION 이벤트 업무 전체 거래를 올리기 전 호출 됨

on_begindrag ON_BEGIND

RAG 이벤트 마우스 드래그 시작 시 호출됨

on_dropcomplet

e ON_DROPC

OMPLETE 이벤트

드래그 시작한 곳의 개체가 아닌 다른 개체

에 마우스 드롭 완료 시 호출됨

콤보박스에 데이터 넣기 예제 – 픽리스트 연결

정해진 코드와 같이 고정된 값의 반복 사용이 필요한 경우 픽리스트를 사용한다.

먼저 프로젝트 내에서 사용할 픽리스트를 작성한다.

코드 편집 : [메뉴]–>[도구]–>[코드 등록] 메뉴항목을 선택하여 사용할 코드를 직접 만들거나

편집함. 아래 그림은 ‘test’ 라는 이름의 코드를 등록하는 예이다.

그림. 코드 등록

☞ 픽리스트 연결하는 방법

① 버튼을 클릭하여 속성 등록창을 연다. (또는 콤보박스를 더블 클릭한다.)

148/240


② 속성 등록창에서 원하는 코드 아이템을 선택하고 확인한다.

③ 픽리스트가 제대로 연결되었는지 확인해본다.

콤보박스에 데이터 넣기 예제 – addstring

function btnCombo_on_mouseup()

{

cbo2.removeall(); // 콤보리스트 초기화

cbo2.addstring("콤보리스트1"); // 콤보박스에 텍스트를 추가

cbo2.addstring("콤보리스트2");

cbo2.insertstring(1, "콤보리스트3"); // 텍스트를 리스트 중간에 추가

}

149/240


※ removeall() – 콤보박스 내의 데이터를 모두 지운다.

addstring – 콤보박스에 차례대로 데이터를 추가한다.

insertstring – 지정한 인덱스 행에 데이터를 추가한다.

콤보박스 데이터 가져오기 예제 – gettext

function btnCombo2_on_mouseup()

{

var strcbo = cbo2.GetText(); // 콤보박스에 선택된 데이터 가져오기

screen.alert("콤보텍스트 : " + strcbo);

}

150/240


6.12. 라디오버튼(radio button)

: 오브젝트 윈도우의 선택버튼 오브젝트 아이콘

그림. 라디오버튼 속성 예제

151/240


표 19. 라디오버튼의 속성


control_id control id 숫자 화면 내 컨트롤의 순번

name 이름 텍스트 선택버튼의 이름

description 설명 텍스트 선택버튼 이름에 대한 설명

in_index 입력인덱스 숫자 입력 인덱스. 데이터를 호스트로 송신할 때

에 각 항목의 인덱스로 사용됨


출력 인덱스. 데이터를 호스트에서 수신할

때에 각 항목의 인덱스로 사용됨. 경우에 따

라 입력 인덱스만 사용하기도 함.

autosize 자동크기 TRUE/FA

LSE

선택버튼의 길이에 의해 width, height 를

자동으로 조정








view_style 스타일 선택

0:original–radio

1:button–singleflat

2:button–singleraised

3:button–dubleraised

border_color 테두리 색상 선택 선택버튼의 테두리 색상 설정

link_data Dataset

연결 선택


data를 선택

text 텍스트 텍스트 선택버튼 옆에 나타낼 텍스트

select_group 선택그룹 텍스트

선택 그룹의 이름. 하나의 화면 내에서 같은

이름을 갖는 선택버튼들 중에서 하나의 버튼

만 선택이 가능하다.

select_value 선택값 텍스트 선택되었을 때에 데이터로 사용될 값

unselect_value 미선택값 텍스트 선택되지 않았을 때에 데이터로 사용될 값

unselectable 필수선택

여부

TRUE/FA

LSE

TRUE 일 경우 반드시 한가지가 선택되지

않아도 됨


allow_dup DUP가능 TRUE/FA DUP 기능 사용 유무

152/240



LSE

auto_dup 자동 DUP TRUE/FA

LSE

화면 호출 시에 DUP 버퍼에서 자동으로 읽

어와서 채우는 기능. default_value 속성을 무

력화 함.






LSE


존재

tabstop 탭멈춤 TRUE/FA

LSE 탭 키 이동 시 포커스를 받을지 여부

host_send 데이터전송 TRUE/FA

LSE

호스트로 데이터 전송 유무 결정. 이 플래그

가 FALSE면 호스트로 전송하지 않음.

default_select 초기 선택

여부

TRUE/FA

LSE 생성시 선택 여부

on_focusout ON_FOCUS

OUT 이벤트 입력 포커스를 잃을 때 호출됨

on_focusin ON_FOCUSI

N 이벤트 입력 포커스를 얻을 때 호출됨

on_click ON_CLICK 이벤트 마우스로 항목을 클릭할 경우 호출됨

라디오 버튼 만들기 예제

select_group 속성값이 같은 라디오 버튼끼리 그룹이 된다. 위 그림과 같이 0그룹으로 값이

지정된 그룹 내에서 한가지를 선택할 수 있고 select_group 속성에 1이라고 지정한 그룹 라디

오 버튼 중 한가지를 선택 가능하게 만들어진다.

153/240


기본 선택 버튼 지정 예제

최초 실행 시 기본으로 선택되어 있어야 하는 경우에는 라디오 버튼의 default_select 속성을

True로 지정하면 된다.

선택된 라디오 버튼 확인 예제

function BtnRdo_on_mouseup()

{

var strRdo = "선택된 라디오 버튼은?";

if(Rdo1.GetCheck()) { // Rdo1이 체크됐는지 확인

strRdo = strRdo + "\n라디오버튼1";

}

if(Rdo2.GetCheck()) {


}

if(Rdo3.GetCheck()) {


}

screen.alert(strRdo);

}

154/240


6.13. 탭(tab)

: 오브젝트 윈도우의 탭 오브젝트 아이콘

그림. 탭 속성 예제

155/240


표 20. 탭의 속성



name 이름 텍스트 탭의 이름

description 설명 텍스트 탭 이름에 대한 설명





back_color 바탕색상 색상 탭의 바탕 색상

border 테두리 선택 0:none, 1:flat, 2:flat_gradient, 3:raised

border_color 테두리색상 색상 탭 버튼 테두리 색상

tab_color 탭바탕색상 색상 탭 내부의 바탕 색상

tabitem_posit

ion 아이템위치 선택

0:top

1:bottom

tabitem_font 아이템글꼴 선택 글꼴 선택

tabitem_selfo

nt 선택탭글꼴 선택 선택된 탭의 글꼴 선택

tabitem_fore

color

탭아이템글

꼴색상 색상 탭 아이템의 글꼴 색상

tabitem_back

color

탭아이템바

탕색상 색상 탭 아이템의 바탕 색상

tabitem_selfo

recolor

선택탭버튼

글꼴색상 색상 선택된 탭의 글꼴 바탕 색상

tabitem_selb

backcolor

선택탭버튼

바탕색상 색상 선택된 탭의 버튼 바탕 색상

tabitem_mou

sehover

선택탭아이

템마우스오

버

TRUE/

FALSE 선택된 탭 아이템 마우스 오버 설정 여부

tabitem_hov

erforecolor

마우스오버

글꼴색상 색상 탭 아이템 마우스 오버 시 글꼴 색상

tabitem_ima

ge

탬아이템이


tabitem_seli

mage

선택된아이

템이미지 커스텀 이미지 속성 창에서 선택

tabitem_disa 비활성화탭 커스텀 이미지 속성 창에서 선택

156/240



bleimage 이미지

tabitem_fitim

age

탭아이템이

미지 크기

지정

TRUE/

FALSE 탭 아이템에 이미지 크기 맞춤 여부

tabitem_heig

ht 탭버튼높이 숫자 탭 버튼의 높이

tabitem_hidd

en 아이템숨김

TRUE/

FALSE 탭 아이템 숨김 여부

tabitem_xbut

ton

아이템 닫

기버튼

TRUE/

FALSE 탭 아이템 닫기 버튼(X)을 보여줄지 여부

titlebar_show 탭타이틀바

보임

TRUE/

FALSE 탭 안의 타이틀바를 보여줄 지 여부

titlebar_font 탭타이틀바

글꼴 글꼴 탭 타이틀바 폰트

titlebar_heig

ht

탭타이틀바

높이 숫자 탭 타이틀바 높이

titlebar_forec

olor

탭타이틀바

전경색 색상 탭 타이틀바 전경색

titlebar_back

color

탭타이틀바

배경색 색상 탭 타이틀바 배경색

titlebar_gradi

ent_effect

탭타이틀바

그라데이션

효과

선택

0:none

1:vertical

2:horizontal

3:forwarddiagonal

4:backwarddiagonal

titlebar_gradi

ent_startcolo

r

탭타이틀바

그라데이션

시작색

색상 탭 타이틀바 그라데이션 시작 색상

titlebar_gradi

ent_endcolor

탭타이틀바

그라데이션

종료색

색상 탭 타이틀바 그라데이션 종료 색상

titlebar_icon 탭타이틀바

아이콘 커스텀 탭 타이틀바 아이콘 이미지 등록창

titlebar_mini

mizebox

탭타이틀바

최소화버튼

TRUE/

FALSE 탭 타이틀바 최소화 버튼 보일지 여부

titlebar_maxi 탭타이틀바 TRUE/ 탭 타이틀바 최대화 버튼 보일지 여부

157/240



mizebox 최대화버튼 FALSE

titlebar_close

box

탭타이틀바

닫기버튼

TRUE/

FALSE 탭 타이틀바 닫기 버튼 보일지 여부

titlebar_user

button

탭타이틀바

사용자버튼 커스텀 탭 타이틀바 사용자 버튼 등록창

tab 탭항목 커스텀 탭 항목들을 정의하는 속성



hidden 숨김 TRUE/

FALSE 거래 화면에 보일지 여부. 거래 데이터에는 존재

on_itemcreat

e

ON_ITEMC

REATE 이벤트 탭 아이템이 생성될 때 호출됨

on_itemdestr

oy

ON_ITEMD

ESTROY 이벤트 탭 아이템이 삭제될 때 호출됨

on_itemchan

ge

ON_ITEMC

HANGE 이벤트 탭 아이템이 변경될 때 호출됨

on_itemclick ON_ITEMC

LICK 이벤트 탭 아이템을 클릭할 때 호출됨

on_itemrclick ON_ITEMR

CLICK 이벤트 탭 아이템을 오른쪽 마우스 클릭할 때 호출됨

on_itemdblcli

ck

ON_ITEMD

BLCLICK 이벤트 탭 아이템을 더블 클릭할 때 호출됨

on_titlebardb

lclick

ON_TITLE

BARDBLC

LICK

이벤트 탭 타이틀바를 더블 클릭할 때 호출됨

on_titlebarbu

ttonclick

ON_TITLE

BARBUTT

ONCLICK

이벤트 탭 타이틀바 버튼을 클릭할 때 호출됨

158/240


그림. 탭 항목의 설정 예제

표 21. 탭의 상세 속성

항목 설명

탭 번호 몇 번째 탭인지 알려주는 탭 번호

탭 제목 탭 버튼에 나타날 제목

탭 넓이 탭 버튼의 좌우 크기 (pixel 단위)

탭 수평정렬 왼쪽, 가운데, 오른쪽

탭 수직정렬 왼쪽, 가운데, 오른쪽

탭 툴팁 탭의 풍선 도움말로 나타날 텍스트

탭 타이틀바 텍스트 탭 타이틀바의 텍스트

탭 패널 넓이 탭 내부의 패널 넓이(pixel 단위)

탭 패널 높이 탭 내부의 패널 높이(pixel 단위)

탭 패널 색상 탭 내부의 패널 색상

탭 화면 – 화면경로 탭의 내용이 될 화면의 디렉토리

탭 화면 – 아이템 탭의 내용이 될 화면의 아이템(화면번호)

159/240


탭 추가 예제

탭을 추가하거나 삭제할 때는 tab 속성값을 더블 클릭하여 [탭 속성창] 탭 추가 버튼, 탭 삭제

버튼을 이용한다.

그림. 탭 속성창

화면 링크 예제

각 탭 별로 기존에 저장된 화면을 링크할 수 있다.

160/240


탭 내부의 값 가져오기 예제

function BtnTab_on_mouseup()

{

// 0번째 탭 내부의 “fldNomal” 이라는 이름을 가진 컨트롤을 할당 받음

fldtab1 = tab1.getchildinstancebyname(0, "fldNomal");

if(factory.isobject(fldtab1) == false) { // 할당 여부 확인

return; // 할당 받지 못했으면 중단

}

strfld1 = fldtab1.GetText(); // 할당 받은 필드의 텍스트를 가져옴

screen.alert(strfld1);

}

※ getchildinstancebyname – 탭에 링크된 화면 내 컨트롤의 이름을 지정하여 사용할 수 있게

가져온다.

factory.isobject – 오브젝트가 정상적으로 할당됐는지 체크한다.

tab_color 속성 예제

탭 패널의 색상을 지정한다.

tabitem_position 속성 예제

탭 아이템의 위치를 설정한다.

161/240


tabitem_selimage 속성 예제

탭 아이템에 삽입되는 이미지 설정

tabitem_hidden 속성 예제

탭 아이템 숨김 설정

162/240


6.14. 트리(tree)

: 오브젝트 윈도우의 트리 오브젝트 아이콘

그림. 트리 속성 예제

163/240


표 22. 트리의 속성



name 이름 텍스트 트리의 이름

description 설명 텍스트 트리 이름에 대한 설명





fore_color 글자색상 색상 트리 글자의 색상

back_color 바탕색상 색상 트리의 바탕 색상


border 트리 테두

리 선택

0:none

1:single–flat

2:double–raised

3:double–sunken

border_color 트리 테두

리색상 색상 트리 테두리 색상

has_buttons +버튼 표시 TRUE/

FALSE 확장버튼(+)를 보여줄지 여부

has_lines 라인 표시 TRUE/

FALSE

아이템의 연결 상태를 라인으로 표시 할지 여

부

has_checkboxes 체크박스

표시

TRUE/

FALSE 트리에 체크 박스 표시 여부

imagelist 이미지리스

트 커스텀 이미지 속성 창에서 선택

itemheight 트리아이템

높이 숫자 아이템 높이 설정

picklist 픽리스트

속성 커스텀 픽리스트 연결



dragable 드래그 TRUE/

FALSE 마우스 드래그 가능 여부

accept_drop 드래그 TRUE/

FALSE 다른 트리로부터 드래그 여부

164/240


Itemdblclick_exp

and 확장

TRUE/

FALSE 트리아이템을 더블클릭 시 확장 여부

on_begindrag ON_BEGIN

DRAG 이벤트 마우스 드래그 시작 시 호출됨

on_enddrag ON_ENDD

RAG 이벤트

드래그 시작한 곳의 개체 안에 마우스 드롭

완료 시 호출됨

on_dropcomplete ON_DROP

COMPLET

E

이벤트 드래그 시작한 곳의 개체가 아닌 다른 개체에

마우스 드롭 완료 시 호출됨


LICK 이벤트 아이템을 클릭했을 때 호출됨

on_itemdblclick ON_ITEMD

BLCLICK 이벤트 아이템을 더블 클릭했을 때 호출됨

on_itemselect ON_ITEMS

ELECT 이벤트 아이템이 선택되었을 때 호출됨

on_itemexpande

d

ON_ITEME

XPANDED 이벤트 아이템이 펼쳐졌을 때 호출됨

on_rclick ON_RCLIC

K 이벤트 마우스 오른쪽 버튼을 클릭했을 때 호출됨

picklist 설정 예제

picklist 속성 값을 더블 클릭하면 [픽리스트 속성 등록창]이 나타난다. 속성 창에서 등록된 코

드를 선택하고 확인 버튼을 클릭하면 트리가 생성된다.(picklist 만들기는 콤보 오브젝트 설명

참조)

165/240


트리 버튼 모양 설정 예제

True일 때 False일 때

166/240


6.15. 상태바(status bar)

: 오브젝트 윈도우의 상태바 오브젝트 아이콘

그림. 상태바 속성 예제

표 23. 상태바의 속성



name 이름 텍스트 상태바의 이름

description 설명 텍스트 상태바 이름에 대한 설명

autosize_ite

ms

아이템 사

이즈 자동

조정

TRUE/

FALSE

상태바의 넓이와 아이템의 넓이를 비래하게 자동

적으로 만들지 여부





167/240



back_color 바탕색상 색상 탭의 바탕 색상


0:none

1:single–flat

2:single–sunken

3:double–sunken

border_color 테두리색상 색상 테두리 색상

items 상태바속성 커스텀 상태바 속성 설정

on_click ON_CLICK 이벤트 항목을 마우스로 클릭할 때 호출됨

on_mousein ON_MOUS

EIN 이벤트 마우스 커서가 상태바 위에 위치할 때 호출됨

on_mouseout ON_MOUS

EOUT 이벤트 마우스 커서가 상태바 밖으로 나갔을 때 호출됨

상태바 그리기 예제

상태바의 items 속성을 더블 클릭하면 [상태바 아이템 속성 등록창] 이 나타난다. [추가], [삭제]

버튼을 클릭하여 상태바에 보여질 아이템 개수를 정할 수 있고, 각 아이템 별로 텍스트, 넓이,

색상 등의 속성을 지정할 수 있다.

상태바 효과 예제 – ticker

텍스트가 상태바의 오른쪽에서부터 왼쪽으로 이동한다.

168/240



function BtnStatus_on_mouseup()

{

status.setstatustext(0, "출력중.."); // 0번 아이템에 “출력중..” 텍스트를 입력

status.setstatusticker(0, true); // 0번 아이템 ticker 효과 시작

}

※ setstatustext – 상태바의 원하는 아이템에 텍스트를 입력한다

setstatusticker – 상태바의 원하는 아이템의 텍스트에 ticker 효과를 준다. 마지막 값이 True

이면 시작하고 False 로 지정할 때 정지한다.

상태바 효과 예제 – blink

텍스트가 지정한 색깔로 번갈아 깜박인다.


function BtnStatus2_on_mouseup()

{

// 0번 아이템에 blink시 글자색 지정

status.setstatusblinkforecolor(0, 255, 0, 0);

// 0번 아이템에 blink시 바탕색 지정

status.setstatusblinkbackcolor(0, 224, 223, 227);

// 0번 아이템 blink 효과 시작

status.setstatusblink(0, true);

}

※ setstatusblinkforecolor – 아이템별 상태바가 깜박일 때 글자색을 지정한다.

setstatusblinkbackcolor – 아이템별 상태바가 깜박일 때 바탕색을 지정한다.

setstatusblink – 상태바의 아이템별 blink 효과를 준다. 마지막 값이 true이면 시작하고 false

로 지정할 때 정지한다.

169/240


6.16. 웹브라우저(web browser)

: 오브젝트 윈도우의 웹브라우저 오브젝트 아이콘

그림. 웹브라우저 속성 예제

표 24. 웹브라우저의 속성



name 이름 텍스트 웹브라우저의 이름

description 설명 텍스트 웹브라우저 이름에 대한 설명





url URL 텍스트 웹브라우저 오브젝트에 나타낼 url 주소

hidden 숨김 TRUE/




170/240


웹브라우저 예제


function BtnWebbrowser_on_mouseup()

{

webbrowser.seturl("http://www.softbase.co.kr");

}

※ seturl – 지정한 주소의 웹페이지를 보여준다.

171/240


6.17. 웹파일매니저(web filemanager)

: 오브젝트 윈도우의 웹파일매니저 오브젝트 아이콘

그림. 웹파일매니저 속성 예제

표 25. 웹파일매니저의 속성



name 이름 텍스트 웹파일매니저의 이름

description 설명 텍스트 웹파일매니저 이름에 대한 설명





hidden 숨김 TRUE/


urlencoding_

utf8

utf–8 코딩

여부

TRUE/

FALSE url을 utf–8방식으로 인코딩할 지 여부

on_download

complete

ON_DOW

NLOADCO

MPLETE

이벤트 다운로드 완료 시 호출됨

172/240


6.18. ActiveX

: 오브젝트 윈도우의 ActiveX 오브젝트 아이콘

그림. ActiveX 속성 예제

표 26. ActiveX의 속성



name 이름 텍스트 Activex의 이름

description 설명 텍스트 Activex 이름에 대한 설명





classid class id 커스텀 윈도우에 등록되어 있는 ActiveX 중 선택

hidden 숨김 TRUE/




designtime_c

reate

디자인시

생성

TRUE/

FALSE 디자인 시 Activex 생성 여부

version 버전 숫자 버전 정보

173/240


ActiveX 지정 예제

윈도우에 등록되어 있는 ActiveX(*.OCX)를 import하는 component 이다. 기존에 사용 중이거

나 보유하고 있던 AcitveX Component를 재사용할 수 있는 기능이다.

classid 속성에서 import 할 AcitveX component를 선택한다.

174/240


6.19. 타이머(timer)

: 오브젝트 윈도우의 타이머 오브젝트 아이콘

그림. 타이머 속성 예제

표 27. 타이머의 속성



name 이름 텍스트 타이머의 이름

description 설명 텍스트 타이머 이름에 대한 설명





hidden 숨김 TRUE/



FALSE 타이머 활성화 여부

interval 간격 숫자 이벤트를 발생시킬 시간 간격

on_time ON_TIME 이벤트 설정된 시간 간격(interval) 마다 호출됨

175/240


6.20. 이미지(image)

: 오브젝트 윈도우의 이미지 오브젝트 아이콘

그림. 이미지 속성 예제

표 28. 이미지의 속성



name 이름 텍스트 이미지의 이름

description 설명 텍스트 이미지 이름에 대한 설명





176/240










imagesize 이미지크기 선택

0: 원래 크기

1: 창에 맞춤

2:이미지에 맞춤

image_fillstyl

e 이미지채움 선택

0:기본

1:수평채움

2:수직채움

3:모두채움

mouse_curso

r

마우스


0: CURSOR_ARROW

1:CURSOR_IBEAM

2:CURSOR_WAIT

3:CURSOR_CROSS

4:CURSOR_UPARROW

5:CURSOR_SIZENWSE

6:CURSOR_SIZENESW

7:CURSOR_SIZEWE

8:CURSOR_SIZENS

9:CURSOR_SIZEALL

10:CURSOR_NO

11:CURSOR_HAND

12:CURSOR_HELP

image 이미지 속

성 커스텀 이미지 선택

hidden 숨김 TRUE/


on_click ON_CLICK 이벤트 이미지 클릭 시 호출됨

177/240


이미지 등록 예제

[메뉴]–>[도구]–>[이미지 등록] 메뉴항목을 선택

[이미지 불러오기] 버튼 클릭 –> 이미지 선택 –> [이미지 등록] 버튼을 클릭하여 등록 성공 팝

업창 확인 후 [닫기] 버튼을 누른다.

이미지 사용 예제

image 속성을 마우스로 더블 클릭하여 [이미지 속성 등록창] 에서 이미지 경로 옆에 있는

178/240


버튼을 클릭하여 [경로선택] 창을 띄워 경로를 선택한다.

원하는 이미지를 선택한 뒤 [확인]버튼을 눌러 이미지를 설정을 완료한다.

179/240


6.21. 사각형 (rectangle)

: 오브젝트 윈도우의 사각형 오브젝트 아이콘

그림. 사각형 속성 예제

표 29. 사각형의 속성



name 이름 텍스트 사각형의 이름

description 설명 텍스트 사각형 이름에 대한 설명





back_color 내부색상 색상 내부 칠 색상


0:none

1:single–flat

2:single–raised

3:single–sunken

180/240



4:double–raised

5:double–sunken

border_width 테두리두께 숫자 테두리의 두께 (pixel 단위)

border_style 테두리모양 선택

0:solid

1:dash

2:dot

3:dashdot

4:dashdotdot


transparent 투명 TRUE/

FALSE

테두리만 그리고 내부는 채우지 않음을 나타내는

속성

hidden 숨김 TRUE/


사각형 그리기 예제 – transparent

transparent 속성을 True 로 설정하면 내부는 채우지 않으므로 back_color 를 지정하더라도

나타나지 않는다. False로 설정하면 back_color의 색상이 나타난다.

false true

181/240


6.22. 둥근사각형 (roundrectangle)

: 오브젝트 윈도우의 둥근사각형 오브젝트 아이콘

그림. 둥근사각형 속성 예제

표 30. 둥근사각형의 속성



name 이름 텍스트 둥근사각형의 이름

description 설명 텍스트 둥근사각형 이름에 대한 설명






ellipse_width 모서리반경 숫자 모서리 타원의 반경


border_style 테두리모양 선택

0:solid

1:dash

2:dot

182/240


3:dashdot

4:dashdotdot



FALSE


속성

hidden 숨김 TRUE/


둥근사각형 그리기 예제 – ellipse_width

ellipse_width 가 0 이면 사각형 100 이면 둥근원이 된다.

50 20

183/240


6.23. 타원 (ellipse)

: 오브젝트 윈도우의 타원 오브젝트 아이콘

그림. 타원 속성 예제

표 31. 타원의 속성



name 이름 텍스트 타원의 이름

description 설명 텍스트 타원 이름에 대한 설명






border_widt

h 테두리두께 숫자 테두리의 두께 (pixel 단위)



FALSE

테두리만 그리고 내부는 채우지 않음을 나타내는 속

성

hidden 숨김 TRUE/


184/240


6.24. 직선 (line)

: 오브젝트 윈도우의 직선 오브젝트 아이콘

그림. 직선 속성 예제

표 32. 직선의 속성



name 이름 텍스트 직선의 이름

description 설명 텍스트 직선 이름에 대한 설명

x1 X좌표 숫자 pixel 단위

y1 Y좌표 숫자 pixel 단위

x2 넓이 숫자 pixel 단위

y2 높이 숫자 pixel 단위

line_width 선두께 숫자 선의 두께 (pixel 단위)

line_style 선유형 선택

0:solid(일반 직선)

1:dash(dash 형태 점선)

2:dot(dot 형태 점선)

3:dashdot(dash–dot 가 반복되는 점선)

4:dashdotdot(dash–dot–dot가 반복되는 점선)

line_color 선색상 색상 선의 색상

arrow_style 화살표유형 선택 0:none (화살표 없음)

185/240


1:right–arrow (끝점 화살표)

2:left–arrow (시작점 화살표)

3:both–arrow (양방향 화살표)

hidden 숨김 TRUE/


라인 그리기 예제 – arrow_style

설정에 따라 화살표 모양이 된다.

186/240


6.25. 마름모 (lozenge)

: 오브젝트 윈도우의 마름모 오브젝트 아이콘

그림. 마름모 속성 예제

표 33. 마름모의 속성



name 이름 텍스트 마름모의 이름

description 설명 텍스트 마름모 이름에 대한 설명









FALSE


속성

hidden 숨김 TRUE/


187/240


6.26. 삼각형(triangle)

: 오브젝트 윈도우의 삼각형 오브젝트 아이콘

그림. 삼각형 속성 예제

표 34. 삼각형의 속성



name 이름 텍스트 삼각형의 이름

description 설명 텍스트 삼각형 이름에 대한 설명








transparent 투명 TRUE/FA

LSE

테두리만 그리고 내부는 채우지 않음을 나타

내는 속성


LSE


존재

188/240


6.27. 그래프(Graph) – 막대, 선, 점

: 오브젝트 윈도우의 그래프(막대, 선, 점) 오브젝트 아이콘

그림. 그래프(막대, 선, 점) 속성 예제

189/240


표 35. 그래프의 속성



name 이름 텍스트 그래프의 이름

description 설명 텍스트 그래프 이름에 대한 설명





title 타이틀 텍스트 그래프 타이틀 이름

x_item_data 항목 커스텀 그래프 항목 등록


LSE


존재


border_style 테두리타입 선택

0:none

1:single–flat

2:double–raised

3:double–sunken



chartback_color 배경색 색상 그래프의 배경색상 설정

line_style 라인타입 선택

0:solid

1:dash

2:dot

3:dashdot

4:dashdotdot

line_width 라인두께 선택 1, 2,3,4,5,6,7,8,9

chart_type 차트 타입 선택 0:막대, 1:꺾은선, 2:점

x_item_gap_pct 간격 설정 숫자 X축 item 간격 설정

show_item_data 데이터타입 선택

0:없음

1:항목 텍스트

2:항목 데이터

show_item_toolti

p 툴팁 선택

0:없음

1:항목 텍스트

2:항목 데이터

3:항목 텍스트[데이터]

190/240



show_legend 숨김 TRUE/FA

LSE 그래프 항목 숨김 여부 설정

show_legend_tex

t 숨김

TRUE/FA

LSE 그래프 항목 숨김 여부 설정

axis_style 축스타일 선택

0:없음

1:가로–▤

2:세로–▥

3:가로&세로–▦

axis_line_style 축라인 스

타일 선택

0:solid

1:dash

2:dot

3:dashdot

4:dashdotdot

axis_color 축 색상 색상 축 색상 설정

y_axis_minvalue y 축 최소

값 숫자 y축 최소값 설정

y_axis_maxvalue y 축 최대

값 숫자 y축 최대값 설정

y_axis_interval y 축 간격

값 숫자 y축 간격값 설정

y_axis_places y 축 소수

점 표시 숫자 y축 데이터 소수점 표시 설정

on_create ON_CREA

TE 이벤트 그래프 생성 시 호출됨

그래프 데이터 항목 등록

그림. 그래프 데이터 속성 등록 창

191/240


범례 또는 항목 추가, 삭제, 위치 변경 등이 가능하고 데이터 값 등을 확인할 수 있다.

그림. 그래프 종류

그래프의 타입을 지정할 수 있다. 막대, 꺾은선, 점 그래프로 선택 가능하다.

192/240


6.28. 그래프(Graph) – 원, 도넛

: 오브젝트 윈도우의 그래프(원, 도넛) 오브젝트 아이콘

그림. 그래프(원, 도넛) 속성 예제

표 36. 그래프의 속성



name 이름 텍스트 그래프의 이름

description 설명 텍스트 그래프 이름에 대한 설명





title 타이틀 텍스트 그래프 타이틀 이름

193/240




border_style 테두리타

입 선택

0:none

1:single–flat

2:double–raised

3:double–sunken




chart_type 그래프유

형 선택 0:원, 1:도넛

show_line 라인숨김 TRUE/FAL

SE 그래프 라인 숨김 여부

line_style 라인타입 선택

0:solid

1:dash

2:dot

3:dashdot

4:dashdotdot

line_width 라인두께 숫자 1, 2, 3, 4, 5, 6, 7, 8, 9

ine_color 라인색상 색상 그래프 테두리 라인 색상 설정

show_item_data 데이터타

입 선택

0:없음

1:퍼센트

2:항목 텍스트

3:항목 데이터

show_legend 숨김 TRUE/FAL

SE 범례 항목 보일지 여부

item_data 항목 커스텀 그래프 항목 등록

hidden 숨김 TRUE/FAL

SE

거래 화면에 보이지 않음. 거래 데이터

에는 존재

on_create ON_CRE

ATE 이벤트 그래프 생성 시 호출됨

194/240


그래프 데이터 항목 등록

그림. 그래프 데이터 속성 등록창

항목 추가가 가능하고 지정된 색상과 데이터 값을 확인할 수 있다.

그래프 종류 선택

그림. 그래프 종류

그래프의 타입을 지정할 수 있다. 원, 도넛형태 그래프 선택이 가능하다.

195/240


6.29. 화면(Screen)

화면 속성 예제

그림. 화면 속성 예제

표 37. 화면의 속성


title 타이틀 텍스트 저장 시 화면의 이름

trancode 거래코드 숫자 지정된 거래 코드

hidden 숨김 true/fal

se 화면 숨김 여부 설정

screen_help 화면도움말 텍스트 어떤 화면인지 도움말을 등록



196/240




back_image 배경이미지 커스텀 이미지 속성 창에서 선택

back_imagesiz

e 이미지크기 선택

0:원래 크기

1:화면에 맞춤

2:이미지에 화면맞춤

back_imagehor

zalign

배경이미지

수평정렬 선택

0:left

1:center

2:right

back_imagever

talign

배경이미지

수직정렬 선택

0:left

1:center

2:right

on_load ON_LOAD 이벤트 화면 로드 시 호출됨

on_activate ON_ACTIV

ATE 이벤트 화면이 활성화 될 때 호출됨

on_destroy ON_DEST

ROY 이벤트 화면이 메모리에서 닫힐 때 호출됨

on_size ON_SIZE 이벤트 화면의 사이즈가 변경될 때 호출됨

on_beforetran ON_BEFO

RETRAN 이벤트 거래 전에 호출됨

on_trancomplet

e

ON_TRAN

COMPLET

E

이벤트 거래 이후 호출됨

on_submitcom

plete

ON_SUBM

ITCOMPLE

TE

이벤트 submit 완료 시 호출됨

on_keydown ON_KEYD

OWN 이벤트 키가 눌렸을 때 호출됨

on_rclick ON_RCLIC

K 이벤트 오른쪽 마우스를 클릭했을 때 호출됨

197/240


6.30. 트리그리드(tree grid)

: 오브젝트 윈도우의 트리그리드 오브젝트 아이콘

그림. 트리그리드 속성 예제

198/240


표 38. 트리그리드의 속성



name 이름 텍스트 트리그리드의 이름

description 설명 텍스트 트리그리드의 이름에 대한 설명











back_color 바탕색 색상 트리그리드의 바탕 색상


cell_height 셀높이 숫자 셀 높이 설정

cell_dividerowc

ount 셀구분 숫자 셀 구분 개수 설정

cell_dividecolor 셀구분색상 색상 셀 구분 바탕 색상

cell_linecolor 셀라인색상 색상 셀 구분 선 색상







selectrow_back

color

선택시 배

경색 색상 선택한 행 배경 색상

selectrow_bord

ercolor

선택시 테

두리색 색상 선택한 행 테두리 색상

header_horzco

unt 행 헤더수 숫자 행 헤더 수 설정



header_ishostd

ata

헤더데이터

호스트전송

TRUE/


199/240



header_height 헤더높이 숫자 헤더 높이 설정


효과 선택

0:none

1:vertical

2:horizontal

3:forwarddiagonal

4:backwarddiagonal

gradient_startc

olor 시작색 색상 그라데이션 효과 시작 색 설정

gradient_endco

lor 종료색 색상 그라데이션 효과 종료 색 설정

linenumber_sh

ow 순번 컬럼

TRUE/


linenumber_titl

e

순번컬럼


linenumber_for

ecolor

순번컬럼

글꼴색 색상 순번 컬럼 글꼴 색상 설정

linenumber_ba

ckcolor

순번컬럼

배경색 색상 순번 컬럼 바탕 색상 설정

vertscrollbar_st

yle

가로스크롤

스타일 선택

0:none(없음)

1:auto(자동)

2:always(항상)

horzscrollbar_s

tyle

세로스크롤

스타일 선택

0:none(없음)

1:auto(자동)

2:always(항상)

has_buttons +버튼 표시 TRUE/

FALSE 확장버튼(+)를 보여줄지 여부




dynamic_fixedc

ols 동적고정열

TRUE/


statistics_row 통계행 커스텀 통계행에 대한 속성

statistics_colu

mn 통계열 커스텀 통계열에 대한 속성

folder_midstatis

tics

폴더 소계

행 종류 선택

0:none

1:합계

200/240



2:평균

3:건수

4:최소값

5:최대값



column_movea

ble 컬럼 이동

TRUE/

FALSE 컬럼간 이동 가능 여부

row_moveable 로우 이동 TRUE/

FALSE 로우간 이동 가능 여부


FALSE 다중 행 선택 가능 여부


FALSE 다중 열 선택 가능 여부

use_checkrow 선택가능 TRUE/

FALSE 그리드 체크 박스 사용 여부

autozoom 확대축소 TRUE/

FALSE

Art+마우스휠 동작시에 그리드를 최소 50%에서

최대 200%까지 확대,축소하는 기능

hidden 숨김 TRUE/




popupmenu_sh

ow

팝업메뉴

show여부

TRUE/

FALSE


지 여부

on_keydown ON_KEYD


on_itemselchan

ge

ON_ITEMS

ELCHANG

E


on_itemeditco

mplete

ON_ITEME

DITCOMPL

ETE



LICK 이벤트 셀 클릭 시 호출됨

on_itemdblclick ON_ITEMD

BLCLICK 이벤트 셀 더블 클릭 시 호출됨

201/240



on_headerclick ON_HEAD

ERCLICK 이벤트 헤더 클릭 시 호출됨

on_headerdblcl

ick

ON_HEAD

ERDBLCLI

CK


on_checkrowcli

ck

ON_CHEC

KROWCLI

CK

이벤트 체크 행 클릭 시 호출됨

on_rclick ON_RCLIC

K 이벤트 그리드에서 오른쪽 마우스 클릭 시 호출됨

column 의 설정 예제

그림. 트리그리드 열속성 등록창(수평헤더부)

202/240


그림. 트리그리드 열속성 등록창(데이터부)







효과 선택

0:none

1:vertical

2:horizontal

3:forwarddiagonal

4:backwarddiagonal

gradient_startc


gradient_endco



203/240





checkbox_sho

w

체크박스

보임

TRUE/

















FALSE




허용

TRUE/



input_type 입력 타입 선택 0:editbox, 1:checkbox, 2:combobox


강제 선택






0: CURSOR_ARROW

1:CURSOR_IBEAM

2:CURSOR_WAIT

3:CURSOR_CROSS

4:CURSOR_UPARROW

204/240


속성 ID 속성이름 유형 설명 5:CURSOR_SIZENWSE

6:CURSOR_SIZENESW

7:CURSOR_SIZEWE

8:CURSOR_SIZENS

9:CURSOR_SIZEALL

10:CURSOR_NO

11:CURSOR_HAND

12:CURSOR_HELP

combobox_styl

e

콤보박스

스타일 선택



combobox_edit

able

콤보 편집

가능

TRUE/

FALSE


설정

combobox_def

aultvalue_type

콤보 기본

값 유형 선택 Index , data

checkbox_truev

alue

체크박스

기본 데이

터

입력 체크박스 선택 시 데이터

checkbox_false

value

체크박스

기본 데이

터

입력 체크박스 선택하지 않을 경우 데이터






Z:숫자만 가능



스플레이)



apply_rightpatt

ern 패턴정렬

TRUE/

FALSE 좌측 패턴 정렬 적용 여부


hostdata_includ

edot

전문에소수

점포함

TRUE/

FALSE


것인지 유무

205/240




경

TRUE/





터 포함

TRUE/


base_midstatist

ics 소계 행

TRUE/


hostsend 데이터전송 TRUE/

FALSE






0:code only

1:code+comment

2:comment only



on_columndblcl

ick

ON_COLU

MNDBLCLI

CK


그림. 그리드 통계행 속성 등록창

206/240



항목 설명










그림. 그리드 통계열 속성 등록창


항목 설명






207/240






트리그리드 실행 예

그림. 트리그리드 실행 예

트리그리드는 그리드와 유사한 컨트롤로 트리열로 설정된 컬럼은 위의 그림과 같이 데이터가

트리 형태로 표시된다. 데이터에 대하여 확장/축소가 가능하며 이러한 기능을 Drill & Down 이

라 표현하기도 한다.

그림. 축소한 트리 그리드

트리그리드는 그리드보다 제한된 속성을 가지고 있으며, 제공되는 api도 다르다.

208/240


트리그리드 컬럼 추가 예제


트리그리드 열 속성 등록은 [수평헤더부]와 [데이터부]를 구분하여 한다. 먼저 [수평헤더부]에

서는 행 별로(헤더는 여러 행 지정이 가능) 컬럼 타이틀을 지정할 수 있다. 원하는 행을 선택

후 속성의 title 에 입력한다.

컬럼별 툴팁 입력 예제

원하는 행을 선택 후 속성의 tooltip 에 텍스트를 입력하여 컬럼 별 풍선 도움말을 보여줄 수

있다. 해당 컬럼에 마우스 커서가 올라가면 툴팁이 나타난다.




다.



209/240



컬럼 넓이, 데이터 패턴, 정렬, 타입 등을 지정할 수 있다.

그리드 헤더 수 지정 예제

트리그리드는 header_vertcount 속성은 지원되지 않는다.

header_horzcount

210/240


트리그리드 라인 넘버 표시 예제

linenumber_show 속성을 True로

지정하면 그리드 맨 앞에 순번이

표시된다.

체크박스 표시, 멀티 선택 예제

use_checkrow 속성이 True이면

수직 헤더부 다음 열에 체크박스가

표시된다.

multi_checkrow 속성이 True이면

멀티 체크가 가능하다.

트리그리드 헤더 병합 예제






211/240


트리그리드에 데이터 입력 예제


function btnGrd_on_mouseup()

{

grdTree.deleteallitems();

grdTree.insertitem("하나은행", 0, 1, "하나은행", "");

grdTree.insertitem( "명동지점", 1, 2, "", "하나은행");

grdTree.insertitem( "구로지점", 1, 2, "", "하나은행");

grdTree.insertitem( "영등포지점", 1, 2, "", "하나은행");

grdTree.setitemtext (1, 1, "홍길동");

grdTree.setitemtext( 2, 1, "대조영");

grdTree.setitemtext( 3, 1, "이순신");

grdTree.refresh();

}








fldGrd.GetText();) var 문을 사용하여 각 할당 받을 변수를 선언하여 주었습니다. 선언


기 전에는 해당 값이 계속 유지되므로 원하지 않는 동작이 일어날 수 있습니다.

212/240


트리그리드 데이터 가져오기 예제



{

// 그리드 헤더 데이터 가져오기(행, 열)

var strGrdHeaderData = grdList.getheadertext(0, 0);

// 그리드 컬럼 데이터 가져오기(행, 열)

var strGrdData = grdList.getitemtext(0, 0);

// 데이터를 메시지 박스로 보여줌

screen.alert("getheadertext(0, 0) : " + strGrdHeaderData +

"\ngetitemtext(0, 0) : " + strGrdData);

}

※ screen.alert – xFrame에서 제공하는 메시지 박스 API

+ – JAVAScript 에서 텍스트를 연결할 때 “+” 기호를 사용한다.

\n – JAVAScript 에서 줄바꿈 시 사용한다.

213/240





{

var selectrow = grdList.getselectrow(); // 그리드의 선택된 행 가져오기

var selectcol = grdList.getselectcolumn(); // 그리드의 선택된 열 가져오기

screen.alert("선택 행 : " + selectrow + ", 선택 열 " + selectcol);

}

나머지, 트리그리드에 대한 기능은 그리드와 유사하다. 위에서 설명한 그리드 컨트롤의 기능

을 참조하길 바란다.

214/240


6.31. 멀티라인그리드(multiline grid)

: 오브젝트 윈도우의 멀티라인그리드 오브젝트 아이콘

그림. 멀티라인그리드 속성 예제

215/240


표 43. 멀티라인그리드의 속성



name 이름 텍스트 멀티라인그리드의 이름

description 설명 텍스트 멀티라인그리드의 이름에 대한 설명


스 숫자




스 숫자








back_color 바탕색 색상 트리그리드의 바탕 색상


cell_height 셀높이 숫자 셀 높이 설정

cell_dividerowco

unt 셀구분 숫자 셀 구분 개수 설정

cell_dividecolor 셀구분색

상 색상 셀 구분 바탕 색상

cell_linecolor 셀라인색

상 색상 셀 구분 선 색상








selectrow_style 선택된 열

의 스타일 선택

0:none

1:normal

2:border only

selectrow_backc

olor

선택시 배

경색 색상 선택한 행 배경 색상

selectrow_border

color

선택시 테

두리색 색상 선택한 행 테두리 색상

216/240



selectcell_backc

olor

선택된 셀

배경색 색상 선택된 셀의 배경 색상

selectcell_forecol

or

선택된 셀

전경색 색상 선택된 셀의 전경 색상

header_horzcou

nt 행 헤더수 숫자 행 헤더 수 설정

header_vertcoun

t 열 헤더수 숫자 열 헤더 수 설정



header_ishostdat

a

헤더데이

터 호스트

전송

TRUE/


header_height 헤더높이 숫자 헤더 높이 설정

header_clicksort 헤더클릭

시 정렬

TRUE/

FALSE 헤더클릭시 자동 정렬 여부


션 효과 선택

0:none

1:vertical

2:horizontal

3:forwarddiagonal

4:backwarddiagonal

gradient_startcol

or 시작색 색상 그라데이션 효과 시작 색 설정

gradient_endcolo

r 종료색 색상 그라데이션 효과 종료 색 설정

linenumber_sho

w 순번 컬럼

TRUE/


linenumber_title 순번컬럼


linenumber_fore

color

순번컬럼

글꼴색 색상 순번 컬럼 글꼴 색상 설정

linenumber_back

color

순번컬럼

배경색 색상 순번 컬럼 바탕 색상 설정

vertscrollbar_styl

e

가로스크


0:none(없음)

1:auto(자동)

2:always(항상)

217/240



horzscrollbar_sty

le

세로스크


0:none(없음)

1:auto(자동)

2:always(항상)



fixedrows 고정행 숫자 고정 row 개수

dynamic_fixedro

ws

동적고정

행

TRUE/

FALSE 동적으로 그리드의 고정 행 지정 가능 여부


dynamic_fixedcol

s

동적고정

열

TRUE/


statics_row 통계행 커스텀 통계행에 대한 속성창

statics_column 통계열 커스텀 통계열에 대한 속성창

mid_statistics 소계행 종

류 선택

0:none

1:합계

2:평균

3:건수

4:최소값

5:최대값



row_addable 로우 추가 TRUE/

FALSE 로우 추가 가능 여부

max_addablerow

s

최대 추가

로우 숫자

사용자가 최대로 추가할 수 있는 Row Count 설

정. 설정되어 있지 않으면 무한대


FALSE 다중 행 선택 가능 여부


FALSE 다중 열 선택 가능 여부

use_checkrow 선택가능 TRUE/

FALSE 그리드 체크 박스 사용 여부

autocheckrow_e

diting 자동 체크

TRUE/

FALSE 그리드 셀 입력 시 자동 체크 여부

checkrowwithsel

ect

체크와로

우선택

TRUE/

FALSE

Use_checkrow 체크시에 Row 를 함께 선택하게

할지 여부

autozoom 확대축소 TRUE/ Art+마우스휠 동작시에 그리드를 최소 50%에서

218/240



FALSE 최대 200%까지 확대,축소하는 기능

hidden 숨김 TRUE/




popupmenu 팝업메뉴 커스텀 팝업 메뉴에 대한 속성창

popupmenu_sho

w

팝업메뉴

show 여

부

TRUE/

FALSE


지 여부

on_keydown ON_KEY


on_itemselchang

e

ON_ITEM

SELCHA

NGE


on_itemeditcomp

lete

ON_ITEM

EDITCO

MPLETE


on_itemclick ON_ITEM

CLICK 이벤트 셀 클릭 시 호출됨

on_itemdblclick

ON_ITEM

DBLCLIC

K

이벤트 셀 더블 클릭 시 호출됨

on_headerclick

ON_HEA

DERCLIC

K

이벤트 헤더 클릭 시 호출됨

on_headerdblclic

k

ON_HEA

DERDBL

CLICK


on_checkrowclic

k

ON_CHE

CKROW

CLICK

이벤트 체크 행 클릭 시 호출됨

on_rclick ON_RCLI

CK 이벤트 그리드에서 오른쪽 마우스 클릭 시 호출됨

on_vscroll ON_VSC

ROLL 이벤트 수직스크롤 이동시 호출됨

on_hscroll ON_HSC 이벤트 수평스크롤 이동시 호출됨

219/240



ROLL

column 의 설정 예제

그림. 멀티라인그리드 열속성 등록창(수평헤더부)

그림. 멀티라인그리드 열속성 등록창(데이터부)

220/240








효과 선택

0:none

1:vertical

2:horizontal

3:forwarddiagonal

4:backwarddiagonal

gradient_startc


gradient_endco





checkbox_sho

w

체크박스

보임

TRUE/



on_headermou

sehover

ON_HEAD

ERMOUSE

HOVER

이벤트 마우스 오버시 호출됨












221/240






FALSE




허용

TRUE/



input_type 입력 타입 선택

0:editbox

1:checkbox

2:combobox



0: CURSOR_ARROW

1:CURSOR_IBEAM

2:CURSOR_WAIT

3:CURSOR_CROSS

4:CURSOR_UPARROW

5:CURSOR_SIZENWSE

6:CURSOR_SIZENESW

7:CURSOR_SIZEWE

8:CURSOR_SIZENS

9:CURSOR_SIZEALL

10:CURSOR_NO

11:CURSOR_HAND

12:CURSOR_HELP

combobox_styl

e

콤보박스

스타일 선택



combobox_edit

able

콤보 편집

가능

TRUE/

FALSE


설정

combobox_def

aultvalue_type

콤보 기본

값 유형 선택

index , data (input_type을 콤보박스로 선택했을

때)

combobox_dat

a

콤보박스

데이터 커스텀

콤보박스 데이터 설정 (input_type 을 콤보박스로

선택했을 때)

combobox_aut

ocodevalid

픽리스트코

드값체크

TRUE/

FALSE

픽리스트에설정되어있는 리스트중에 없는 코드

값을 입력시에 체크해주는 옵션

checkbox_truev 체크박스 입력 체크박스 선택 시 데이터

222/240



alue 기본 데이

터

checkbox_false

value

체크박스

기본 데이

터

입력 체크박스 선택하지 않을 경우 데이터






Z:숫자만 가능



스플레이)



apply_rightpatt

ern 패턴정렬

TRUE/

FALSE 좌측 패턴 정렬 적용 여부


hostdata_includ

edot

전문에소수

점포함

TRUE/

FALSE


것인지 유무


경

TRUE/





터 포함

TRUE/


statisticsrow_ty

pe

통계열 타

입 선택

0:합계

1:평균

2:개수

3:최소값

4:최대값

base_midstatist

ics 소계 행

TRUE/


midstatistics_s

how

소계행 데

이터 포함

TRUE/

FALSE 소계행 데이터 포함 여부

hostsend 데이터전송 TRUE/ 호스트로 데이터 전송 유무 결정. 이 플래그가

223/240



FALSE FALSE면 호스트로 전송하지 않음.


image_horzalig

n

이미지 수

평 정렬 선택

0:왼쪽

1:가운데

2:오른쪽

3:텍스트의 왼쪽

4:텍스트의 오른쪽


picklist_hiddeni

tem

픽리스트

아이템숨김 선택 0:숨김, 1:보이기


0:code only

1:code+comment

2:comment only

picklist_viewsty

le

픽리스트

뷰 스타일 선택

0:code only

1:code+comment

2:comment only

show_tooltip 툴팁 표시 TRUE/

FALSE 풍선 도움말 보일지 여부

default_value 초기값 텍스트 초기값 설정

prefilldata 사전 입력

데이터 텍스트 화면 오픈 시 사전 입력 데이터 설정

print_prefix 특정값 텍스트 화면인쇄 시 특정값을 미리 설정 (예:\)



on_columndblcl

ick

ON_COLU

MNDBLCLI

CK


on_columnmou

sehover

ON_COLU

MNMOUS

EHOVER

이벤트 마우스 오버시 호출됨

224/240


그림. 멀티라인그리드 통계행 속성 등록창


항목 설명










225/240


그림. 멀티라인그리드 통계열 속성 등록창


항목 설명








통계열 헤더 수평 정렬 좌측정렬, 중앙정렬, 우측정렬

통계열 헤더 수직 정렬 상단정렬, 중앙정렬, 하단정렬



226/240


멀티라인그리드 실행 예

멀티라인그리드는 하나의 로우가 여러 개의 서브로우를 가질 수 있는 구조로 되어있다.

로우를 추가하면 로우헤더의 형태와 같은 로우들이 추가된다. 멀티라인그리드는 그리드보다

제한된 속성을 가지고 있으며, 제공되는 api도 다르다.

멀티라인그리드 컬럼 추가 예제

0행

1행

2행

서브0행

서브1행

서브2행




다.



227/240



멀티라인그리드 열 속성 등록은 [수평헤더부]와 [데이터부]를 구분하여 한다. 먼저 [수평헤더

부]에서는 행 별로(헤더는 여러 행 지정이 가능) 컬럼 타이틀을 지정할 수 있다. 원하는 행을

선택 후 속성의 title 에 입력한다.


컬럼 넓이, 데이터 패턴, 정렬, 타입 등을 지정할 수 있다.

228/240


멀티라인그리드 헤더 수 지정 예제

멀티라인그리드 헤더 병합 예제






header_horzcount

229/240


멀티라인그리드에 데이터 입력 예제


function btn_search_on_mouseup()

{

multi_grid.insertitemtext(0,0,0,"01"); //상태체크

multi_grid.setitemtext(0,0,1,"20090324"); //상태체크한 날짜

multi_grid.setitemtext(0,1,1,"1111"); //상품코드

multi_grid.setitemtext(0,2,1,"03"); //승인번호

multi_grid.setitemtext(0,1,2,"데스크탑"); //상품명

multi_grid.setitemtext(0,2,2,"1900000"); //승인가격

multi_grid.refresh();

}








fldGrd.GetText();) var 문을 사용하여 각 할당 받을 변수를 선언하여 주었습니다. 선언


기 전에는 해당 값이 계속 유지되므로 원하지 않는 동작이 일어날 수 있습니다.

230/240


멀티라인그리드 데이터 가져오기 예제


function multi_grid_on_itemclick(nClickRow, nClickSubRow, nClickColumn)

{

fld_1.settext(multi_grid.getitemtext(nClickRow,0,0)); //상태체크

fld_2.settext(multi_grid.getitemtext(nClickRow,1,1)); //상품코드

fld_3.settext(multi_grid.getitemtext(nClickRow,1,2)); //상품명

fld_4.settext(multi_grid.getitemtext(nClickRow,0,1)); //체크일자

fld_5.settext(multi_grid.getitemtext(nClickRow,2,1)); //승인번호

fld_6.settext(multi_grid.getitemtext(nClickRow,2,2)); //승인가격

}

231/240




function multi_grid_on_itemclick(nClickRow, nClickSubRow, nClickColumn)

{

var nRow = multi_grid.getselectrow();

var nSubRow = multi_grid.getselectsubrow();

var nColumn = multi_grid.getselectcolumn();

screen.alert("선택된 로우 : " + nRow + "\n선택된 서브 로우 : " + nSubRow +

"\n선택된 컬럼 : " + nColumn);

}

232/240


6.32. 캡션(Caption)

: 오브젝트 윈도우의 캡션 오브젝트 아이콘

그림. 캡션 속성 예제

표 48. 캡션의 속성



name 이름 텍스트 캡션의 이름

description 설명 텍스트 캡션에 대한 설명


FALSE


정




233/240







text 텍스트 텍스트 화면에 표시할 텍스트









transparent 투명도 TRUE/

FALSE 바탕의 투명도 설정 여부

hidden 숨김 TRUE/


캡션 사용 예제

캡션 컨트롤은 특정 컨트롤에 투명성이 적용된 컨트롤이다. 텍스트 컨트롤과의 차이점이기

도 하며, 텍스트 컨트롤에 비해 제한된 기능이 적용된다.

그리고 캡션 컨트롤은 Event 속성이 지원되지 않는다. 따라서 단순히 텍스트 성으로 디자인하

고자 하는 경우 사용되는 컨트롤이다.

캡션의 다른 기능은 위에서 설명한 [텍스트] 컨트롤을 참조하기 바란다.

사각형 컨트롤위에 캡션 컨트롤을 올려놓은 디자인

사각형에서 지정한 바탕색이 투명되어 보인다.

캡션 컨트롤과 텍스트 컨트롤의 차이

234/240


6.33. 패널(Panel)

: 오브젝트 윈도우의 패널 오브젝트 아이콘

그림. 패널 속성 예제

표 49. 패널의 속성



name 이름 텍스트 패널의 이름

description 설명 텍스트 패널에 대한 설명





panel_width 패널넓이 숫자 pixel 단위

235/240



panel_height 패널높이 숫자 pixel 단위



hidden 숨김 TRUE/



back_image 배경이미지 커스텀 배경 이미지 설정

back_imagesi

ze

배경이미지

크기 선택

0:원래크기

1:패널에맞춤

back_imageh

orzalign

배경이미지

수평 정렬 선택 0:left;1:center;2:right

back_imagev

ertalign

배경이미지

수직 정렬 선택 0:top;1:center;2:bottom







round_edge 모서리 반

경 숫자

패널 모서리 둥글게 강도 설정 (숫자클수록 원에

가까워짐)

패널은 패널 위에 디자인된 모든 컨트롤을 그룹핑할 수 있는 컨트롤이다. 탭 패널과 유사한

기능이기는 하나, 탭 패널은 아이템이라는 속성이 있고, 화면을 Link 할 수 있으나, 패널 위에

컨트롤을 Drag & Drop하여 그룹화시킨다.

236/240


패널 사용 (컨트롤 그룹핑)

패널 가로/ 세로 길이 설정

그림. 패널 내부에 스크롤 생성

패널 속성 중 width, height 속성의 값 보다 panel_width, panel_height 값이 클 경우 위와 같이

패널내 스크롤이 생성된다.

패널을 이동 시키면 패널안에 포함된

모든 컨트롤이 그룹핑되어 이동된다.

237/240


7. 웹 서버용 파일 추출

실제 운영 환경에서는 화면 DB에서 화면을 xml 형식으로 Export 하여 웹 서버에 적용하여 사용하

게 된다.

7.1. 웹 서버용 화면 추출

[메뉴]–>[도구]–> [웹 서버용 파일 추출] 메뉴항목을 선택

추출할 항목조건을 입력한 후 [검색] 버튼을 누른다. 추출할 항목을 선택한 후 [선택추출] 버

튼을 클릭하거나 [모두추출] 버튼을 실행하면 지정한 경로에 추출된다.(전송 효율을 위해 압축

옵션을 선택하여 추출할 수 있다)

만약 지정된 FPT 서버로 바로 전송을 원할 경우에는 [예] 버튼을 클릭한다.

지정된 FPT 서버로 추출한 파일들이 자동으로 전송하는 기능을 제공한다.

238/240


7.2. XML EXPORT [메뉴]–>[도구]–>[Export]–>[XML] 메뉴항목을 선택

지정한 경로에 현재 화면(.xml)파일과 스크립트(.JS) 파일이 추출된다.

7.3. XML IMPORT [메뉴]–>[도구]–>[import]–>[XML] 메뉴항목을 선택

import 할 xml 파일을 선택하면 화면이 나타난다.

239/240


8. 웹 서버 환경 파일 구축

개발이 완료된 화면을 XML 형식으로 Export 하여 웹 서버에 적용하여 사용하게 된다.

웹서비스가 되는 디렉토리에 xFrame 에서 추출한 파일을 업로드하여 사용한다.

8.1. 환경 파일 구성

image : 화면에서 사용하는 이미지 디렉토리

예) 00공지사항_on.gif, 00로그인버튼_down.gif

picklist : 코드목록인 picklist 파일 디렉토리

예) 00과목구분.pic, 40거래상태코드.pic

screen : 개발 완료된 화면 디렉토리.

common_module – 공통모듈 스크립트 파일이 저장된다

화면이름.xml – 화면 디자인정보가 XML 형식으로 저장되어 있는 파일.

화면이름.vbs – 화면 로직 구현정보가 스크립트 형식으로 저장되어 있는 파일.

- common_module 디렉토리와 화면

파일들로 구성된다.

240/240


xFrame@DevStudio 사용안내서

Copyright© 2004 Softbase Corporation

DevStudio ver 9.12.31.1

㈜소프트베이스

우편번호 152-768

서울특별시 구로구 구로3동 235번지 한신IT타워 1215호

전화: (02) 2108-8030

팩스: (02) 2108-8032

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

http://www.softbase.co.kr/�

xframe@devstudio 관리자 매뉴얼xframe.co.kr/board/download.php?file=boardfile... · 8/240...

Documents