xdataset 개발 가이드 - xframe.co.kr 개발 환경 관련 소프트웨어 ... xdataset 데이터...

SOFTBASE XFRAME DEVELOPMENT GUIDE SERIES

xDataSet 개발 가이드

2012.01.28

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

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

Copyright © 2010 SOFTBase Inc. All rights reserved

xDataSet 개발가이드

- 2 -

목차

X-인터넷 개요 ..................................................................................................................................................................... 4

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

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

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

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

xFrame 솔루션 개요 .......................................................................................................................................................... 9

문서의 목적 및 기반 기술 개요 ..................................................................................................................................... 10

문서의 목적 ................................................................................................................................................................................................. 10

기반 기술 개요 ........................................................................................................................................................................................... 10

개발 환경 관련 소프트웨어 ............................................................................................................................................ 11

서버 개발 환경 구성 ....................................................................................................................................................... 12

샘플 어플리케이션 디렉토리 구성 .................................................................................................................................................... 12

샘픔 Web 어플리케이션 디렉토리 구조 ..................................................................................................................................... 12

서버 개발 환경 구성 ....................................................................................................................................................... 13

WAS 서버 구성 .......................................................................................................................................................................................... 13

DB 환경 구성 .............................................................................................................................................................................................. 13

테이블 스키마 정보 .............................................................................................................................................................................. 14

테이블 초기 데이터 .............................................................................................................................................................................. 15

DB 정보 생성 방법 ............................................................................................................................................................................... 16

xDataSet 개요 ................................................................................................................................................................. 17

xDataSet 이란? ........................................................................................................................................................................................... 17

xDataSet 의 주요 기능 ............................................................................................................................................................................ 19

xDataSet 내부 아키텍처 ................................................................................................................................................ 20

데이터 셋 구분 ........................................................................................................................................................................................... 20

송수신 데이터 구조 .................................................................................................................................................................................. 20

내부 데이터 셋 구조 ................................................................................................................................................................................ 22

xDataSet ID ............................................................................................................................................................................................. 22

xDataSet 정의 ......................................................................................................................................................................................... 22

데이터 셋 내부 구조 ............................................................................................................................................................................ 23

트랜잭션 맵 구조 ....................................................................................................................................................................................... 25

업무 서버 시스템 URL 정보 설정 방법 ........................................................................................................................................ 25

데이터 셋의 송수신 대상 레코드 기준 정의 .............................................................................................................................. 26

xDataSet 데이터 처리 흐름 아키텍처 .......................................................................................................................... 27

일반 데이터 처리 흐름도 ....................................................................................................................................................................... 27

First-Row 방식의 데이터 처리 흐름도 ............................................................................................................................................. 28

개발 절차 개요 ................................................................................................................................................................. 29


- 3 -

샘플 어플리케이션 개요 ................................................................................................................................................. 30

데이터 셋 정의 및 트랜잭션 정의 ................................................................................................................................. 32

UI 개발 환경 설정 ..................................................................................................................................................................................... 32

데이터 조회 UI 화면 개발...................................................................................................................................................................... 32

데이터 셋 설정 ........................................................................................................................................................................................... 33

데이터 셋의 칼럼 정의........................................................................................................................................................................ 33

트랜잭션 정의 ............................................................................................................................................................................................. 36

화면 폼 개발 .................................................................................................................................................................... 38

데이셋을 이용한 화면 폼 생성 ............................................................................................................................................................ 38

PICKLIST 코드 바인딩 .............................................................................................................................................................................. 40

버튼 생성 및 속성 정의 ...................................................................................................................................................................... 41

그리드 콘트롤 속성 지정 ................................................................................................................................................................... 42

트랜잭션 완료 정보 표시 부분 개발 ............................................................................................................................................. 43

UI 폼 이벤트 처리 개발 .................................................................................................................................................. 44

트랜잭션 완료 이벤트 처리 .................................................................................................................................................................. 44

트랜잭션 이벤트 발생 이벤트 처리 ................................................................................................................................................... 45

Sync 방식과 Async 방식의 차이 ..................................................................................................................................................... 45

화면 폼 생성 이벤트 처리 ................................................................................................................................................................. 46

트랜잭션 발생 버튼 이벤트 처리 ................................................................................................................................................... 46

데이터 조작 버튼 이벤트 처리 ........................................................................................................................................................ 47

xDataSet.jar 라이브러리 개요 ...................................................................................................................................... 48

샘플 어플리케이션 개요 ................................................................................................................................................. 49

직원 정보 조회 처리 개발 .............................................................................................................................................. 50

직원 정보 변경 처리 부분 개발 ..................................................................................................................................... 53

UI 폼 관련 API 소개 ....................................................................................................................................................... 54

UI 서버(xdataset.jar) 관련 API 소개 ........................................................................................................................... 56


- 4 -

이 장에서는 xFrame 솔루션의 xDataSet 기능을 이용하여 업무 화면을 개발하는데 필요한 기본적인 기술적

배경에 대하여 기술합니다. 이 장에서 기술하는 내용은 아래와 같습니다.

X-인터넷의 개요

xFrame 솔루션 개요

문서의 목적 및 기반 기술 개요

X-인터넷 개요

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

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

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

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

개념일 뿐입니다.

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

11 장장:: 개개요요


- 5 -

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

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

[그림 1-0-2] 컴퓨팅 시스템의 변천 과정 (출처: 어도비)


- 6 -

X-인터넷의 정의

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

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

해서 설명할 수 있습니다.

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

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

텍처를 의미합니다.

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

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

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

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

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

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

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

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


- 7 -

X-인터넷의 도입 배경

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

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

환경 문제점

C/S 환경

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

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

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

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

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

WEB 환경

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

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

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

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

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

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

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

[그림 1-0-3] RIA 도입 목적 (출처 : 포레스터 리서치 2007.3.12 The Business Case For Rich Internet Applications)


- 8 -

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

[그림 1-0-4] RIA 만족도(출처 : 포레스터 리서치 2007.3.12 The Business Case for Rich Internet Application)


- 9 -

xFrame 솔루션 개요

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

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

“통합 UI 솔루션” 입니다.

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

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

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

단계 제품 주요 특장점

개발 환경 xFrame-DevStudio

통합 UI 개발 환경 제공

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

4GL 수준의 화면 개발 기능

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

다양한 UI Control 제공

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

실행 환경 xFrame-Viewer

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

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

주변기기 통합 관리

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

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

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

운영 환경 xFrame-Admin

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

변경 관리, 배포 관리

운영 속보 메시지 처리


- 10 -

문서의 목적 및 기반 기술 개요

문서의 목적

본 문서는 xFrame 솔루션의 기능 중 xDataSet 기능을 이용한 업무 UI 를 개발하고, 자바 기반의 WAS(Web

Application Server) 환경에서 서버 로직을 개발하기 위한 필요 지식을 습득하는데 있습니다.

기반 기술 개요

본 문서의 내용을 이해하고 습득하기 위해서는 다음과 같은 기술에 대한 기본 지식이 필요합니다.

Java Script 언어 : UI의 비즈니스 로직을 개발하기 위한 언어

JAVA 언어 : WAS 환경에서 비즈니스 로직을 개발하기 위한 언어

Web 어플리케이션 서버 기본 개념 : 서버측 개발을 위한 기반 어플리케이션

DBMS 및 SQL : 데이터베이스의 기본 구조 및 쿼리 언어

JSP : 서버측 페이지 개발 기술


- 11 -

이 장에서는 xFrame 솔루션의 xDataSet 기능을 이용하여 업무 화면을 개발하는데 필요한 기본적인 개발

환경을 설정과 관련된 정보에 대하여 기술합니다. 이 장에서 기술하는 내용은 아래와 같습니다.

개발 환경 관련 소프트웨어

서버 개발 환경 구성

DB 환경 구성

개발 환경 관련 소프트웨어

xDataSet 을 이용한 개발을 위해서, 본 교재에서는 다음과 같은 소프트웨어를 사용합니다.

구분 소프트웨어 버전 정보

DBMS MySQL MySQL Community Server 5.0.47 http://www.mysql.com/

JDBC Driver Connector/J 5.1.10 http://www.mysql.com/

DBMS Tool SQLyog 5.12

JDK JDK 5.0 JDK 5.0 Update 22 http://java.sun.com

WAS Tomcat 5.5 http://tomcat.apache.org/

각각의 소프트웨어에 대한 설치 및 구성 방법은 각 소프트웨어 제공회사의 홈페이지에서 확인합니다.

22 장장:: 개개발발 환환경경 준준비비


- 12 -


샘플 어플리케이션 디렉토리 구성

본 교재에서는 각 소프트웨어의 설치 경로 및 샘플 어플리케이션 디렉토리에 대하여 다음과 깉이 가정합니다.

향후, “샘플 어플리케이션 기본 디렉토리” 값은 “$APP_HOME”으로 표기합니다.

구분 값 비고

샘플 Web 어플리케이션 기본 디렉토리 C:\xdataset $ APP_HOME

샘픔 Web 어플리케이션 디렉토리 구조

샘플 Web 어플리케이션에 대한 구성은 아래의 표와 같습니다.

디렉토리 디렉토리 및 파일 설명

$APP_HOME

WEB‐INF\lib\xdataset.jar xDataSet 라이브러리 파일

WEB‐INF\lib\mysql‐connector‐java‐5.1.10‐bin.jar JDBC 드라이버 라이브러리

sql\xframe_data.sql 샘플 어플리케이션 DB 를 생성하는 쿼리

screen\xdataset.xml 샘플 xFrame 화면 정보 XML 파일

screen\xdataset.js 샘플 xFrame 화면 자바 스크립트 파일

jsp\SelectEmp.jsp 직원 정보 조회 처리 JSP

jsp\SelectEmpFirstRow.jps 직원 정보 조회 First‐Row 처리 JSP

jsp\ProcessEmp.jsp 직원 정보 등록/수정/삭제 처리 JSP

jsp\SelectDept.jsp 부서 정보 조회 처리 JSP


- 13 -


WAS 서버 구성

본 교재에서 WAS 서버로 사용하는 Tomcat 서버는 아래와 같이 구성되어 있는 것으로 가정합니다. 향후,

“Tomcat 설치 디렉토리” 값은 “$TOMCAT_HOME”으로 표기합니다.

구분 값 비고

Tomcat 설치 디렉토리 C:\Program Files\Apache Software Foundation\Tomcat 5.5 $TOMCAT_HOME

Tomcat 포트 8080 Tomcat 포트

파일 저장 경로 : $TOMCAT_HOME\\conf\Catalina\localhost\xFrameApp.xml

1 2

3 4

5 6

<Context path="/xFrameApp"

reloadable="true" docBase="C:\xFrameApp"

workDir="C:\xFrameApp\work" />

“샘픔 Web 어플리케이션 디렉토리 구조” 절에서 정의한 것과 같이 디렉토리를 생성하고 파일을 저장한 이후에

Tomcat 서버를 재기동하여 샘플 웹 어플리케이션인 “xFrameApp”를 기동합니다.

DB 환경 구성

샘플 어플리케이션에서 사용하는 DB 구성 및 테이블은 아래와 같습니다.

구분 이름 정보

DB 사용자 ID xframe MySQL 관리자 사용자 ID

DB 사용자 암호 xframe MySQL 관리자 사용자 암호

DB 스키마 이름 xframe_data 샘플어플리케이션을 데이터를 저장하기 위한 스키마

테이블

EMP_INFO 직원 정보 테이블

DEPT_INFO 직원 부서 정보 테이블


- 14 -

테이블 스키마 정보

EMP_INFO 테이블은 아래와 같은 테이블 구조로 구성됩니다.

칼럼 이름 데이터 형식 길이 Key Comment

emp_no CHAR 6 PK 직원번호

emp_name VARCHAR 20 직원이름

emp_age INT 3 직원나이

dept_code CHAR 2 직원부서

title_code CHAR 2 직원직책

mail_addr VARChAR 100 메일주소

DEPT_INFO 테이블은 아래와 같은 테이블 구조로 구성됩니다.

칼럼 이름 데이터 형식 길이 Key Comment

dept_code CHAR 2 PK 부서코드

dept_name VARCHAR 30 부서이름


- 15 -

테이블 초기 데이터

EMP_INFO 테이블은 초기 데이터는 아래와 같습니다.

emp_no emp_name emp_age dept_code title_code mail_addr

100111 김우섭 49 01 05 [email protected]

100112 곽경환 42 02 04 [email protected]

100115 전시교 50 03 05 [email protected]

100117 김종인 47 04 04 [email protected]

100118 유동균 40 05 03 [email protected]

100124 임기조 35 01 02 [email protected]

100133 김용진 31 02 01 [email protected]

100212 김용상 36 03 02 [email protected]

100215 김용완 54 04 05 [email protected]

100218 김지태 33 05 02 [email protected]

100221 홍성일 50 01 05 [email protected]

100223 김경환 43 02 04 [email protected]

100226 정학길 28 03 01 [email protected]

100312 유승한 29 04 01 [email protected]

100319 방인홍 36 05 03 [email protected]

100325 김종욱 37 01 03 [email protected]

EMP_INFO 테이블은 초기 데이터는 아래와 같습니다.

dept_code dept_name

01 총무부

02 기획부

03 재무부

04 영업부

05 구매부


- 16 -

DB 정보 생성 방법

DB 정보 생성 방법은 위의 정보를 기준으로 데이터베이스, 테이블, 테이블 데이터를 수동으로 생성할 수

있으며, 첨부한 파일 “$APP_HOME\sql\xframe_data.sql” 파일을 이용하여 일괄적으로 생성할 수 있습니다.

SQLyog 프로그램을 이용하면 보다 쉽게 데이터를 생성할 수 있습니다.


- 17 -

이 장에서는 xFrame 솔루션의 xDataSet 기능에 대한 기술적인 개요에 대하여 기술합니다. 여기설 설명하는

내용은 내부 구조에 대한 개념적인 부분을 설명합니다. 이 장에서 기술하는 내용은 아래와 같습니다.

xDataSet 개요

xDataSet 내부 아키텍처

xDataSet 데이터 처리 흐름 아키텍처

xDataSet 개요

xDataSet 이란?

xDataSet 이란 xFrame 솔루션에서 UI 부분, 서버 부분에서 데이터를 처리하기 위한 아키텍처입니다. xDataSet

아키텍처는 UI 부분에서 처리하는 부분과 서버에서 처리하는 부분이 상호 연관적인 관계를 가지고 유지적으로

데이터를 처리하기 기반을 제공합니다.

전체적인 아키텍처 구조는 아래의 그림과 같습니다.

33 장장:: xxDDaattaaSSeett 개개요요

[그림 3-0-1] xDataSet 아키텍처

업무 서버 시스템

업무어플리케이션

xDataSet라이브러리

운영 체제 (UNIX 계열, 윈도우 계열)

웹 서버

웹 어플리케이션 서버 (WAS)

사용자 시스템

Viewer

xDataSet 콤포넌트

운영 체제 (윈도우 계열)

인터넷 익스플로어

화면 정보

트랜잭션 I/O 맵트랜잭션 I/O 맵8

7

4 5

3

61

2

DBMS




xDataSet라이브러리xDataSet라이브러리

운영 체제 (UNIX 계열, 윈도우 계열)운영 체제 (UNIX 계열, 윈도우 계열)

웹 서버웹 서버

웹 어플리케이션 서버 (WAS)웹 어플리케이션 서버 (WAS)

사용자 시스템

Viewer

xDataSet 콤포넌트

운영 체제 (윈도우 계열)운영 체제 (윈도우 계열)

인터넷 익스플로어인터넷 익스플로어

화면 정보

트랜잭션 I/O 맵트랜잭션 I/O 맵88

777

44 55

33

6611

22

DBMS


- 18 -

위의 그림에서 데이터의 흐름에 대한 설명은 아래와 같습니다.

구분 설명

1 사용자 시스템에서 사용자가 트랜잭션을 발생시키기 위해서 트랜잭션 I/O 맵에 정의한 트랜잭션 ID

정보를 지정하여 트랜잭션 발생 함수를 호출합니다.

2

xFrame‐Viewer 내부의 xDataSet 콤포넌트가 트랜잭션 ID 의 입력 맵 정보를 기준으로 데이터 셋에서

업무 서버 시스템으로 송신할 데이터를 조립합니다.

이때, 데이터 셋에 저장되어 있는 데이터 뿐만 아니라, 화면의 메타 정보도 함께 조립하여 업무 서버

시스템으로 송신합니다.

3 업무 서버 시스템의 업무 어플리케이션은 사용자 시스템으로부터 수신 받은 정보를 xdataset.jar

라이브러리를 이용하여 필요한 데이터를 추출합니다.

4 업무 서버 시스템의 업무 어플리케이션은 DBMS 와 연동하여 데이터 처리를 수행합니다.

5 업무 서버 시스템의 업무 어플리케이션은 사용자 시스템으로 송신할 데이터를 xdataset.jar

라이브러리를 이용하여 설정합니다.

6 클라이언트로 송신될 데이터가 모두 설정된 이후에, 데이터를 사용자 시스템으로 송신하여, 업무

처리를 완료합니다.

7 사용자 시스템은 업무 서버로부터 수신받은 데이터는 xDataSet 컴포넌트에 의해서 자동 분석됩니다.

8 사용자 시스템의 xDataSet 시스템은 트랜잭션 ID 의 출력 맵 정보를 기준으로 데이터를 화면에

자동으로 표시합니다.


- 19 -

xDataSet 의 주요 기능

xDataSet 의 주요 기능은 아래의 표와 같습니다.

구분 주요 기능

사용자 시스템

(개발자 시스템)

글로벌 데이터 셋 기능

데이터 셋과 UI 컴포넌트간 1:N 데이터 바인딩 기능

Query를 이용한 데이터 셋 자동 생성 기능 및 초기 데이터 설정 기능

데이터 셋을 이용한 화면 UI 컴포넌트 생성 및 자동 바인딩 기능

트랜잭션 맵 기능을 통한 데이터 셋 I/O 설정 기능

First-Row 방식의 데이터 표시 기능


사용자 시스템의 UI로부터 수신된 데이터의 자동 분석

사용자 시스템으로 송신한 데이터에 대한 설정 기능

화면에 대한 Meta 정보 추출 기능

데이터 압축 송수신 기능

First-Row 방식으로 데이터를 사용자 시스템의 UI로 송신하는 기능


- 20 -

xDataSet 내부 아키텍처

사용자 시스템에서 처리되는 xDataSet 내부 아키텍처는 아래와 같습니다.

데이터 셋 구분

데이터 셋은 화면 데이터 셋과 글로벌 데이터 셋으로 구분되며, 각각의 특징은 아래와 표와 같습니다.


화면 데이터 셋 각각의 개별 화면에서 정의한 데이터 셋

각각의 개별 화면에서만 접근 가능함

글로벌 데이터 셋 전역적으로 정의한 데이터 셋

개별 화면에서 접근 가능함.

송수신 데이터 구조

업무 서버로 송신되는 데이터에 대한 구조는 아래의 그림과 같습니다.

송수신 데이터의 각각의 항목에 대한 설명은 아래의 표와 같습니다.


트랜잭션 URL 파라미터

트랜잭션 맵에서 트랜잭션 URL 부분에 사용자가 지정한 파라미터 정보

파라미터 정보는 GET 방식의 URL 지정 방식과 동일

파라미터 이름중 “XDATASET” 이름은 xFrame 내부에서 사용하므로 사용하면

안됨.

업무 서버 시스템업무 서버 시스템사용자 시스템사용자 시스템

화면 데이터 셋

글로벌 데이터 셋


화면 메타 정보



xFrameViewerxFrameViewer


사용자 헤더 데이터


업무 서버 시스템업무 서버 시스템업무 서버 시스템업무 서버 시스템사용자 시스템사용자 시스템사용자 시스템사용자 시스템







xFrameViewerxFrameViewerxFrameViewerxFrameViewer





- 21 -

화면 데이터 셋 각각의 개별 화면에서 지정한 데이터 셋

트랜잭션 맵에서 지정한 데이터 셋의 데이터만 송수신 됨.

글로벌 데이터 셋 글로벌 데이터 셋으로 트랜잭션 맵에서 지정한 데이터 셋만 송수신 됨.


화면 메타 정보는 아래의 데이터로 구성됨

화면 속성의 “trancode”와 “transactionheader” 프라퍼티 정보

화면 경로 및 이름 : 화면이 개발툴내에서 저장되어 있는 경로 및 이름

사용자 시스템 IP 주소 : 실제 사용자 IP 주소

트랜잭션 맵 ID : 사용자가 발생시킨 트랜잭션 ID


- 22 -

내부 데이터 셋 구조

xDataSet ID

각각의 xDataSet 은 고유의 ID 를 가지며, 각각의 ID 는 다음과 같은 제약 사항이 있습니다.



각각의 화면내의 xDataSet ID는 유일한 값을 가짐

화면간 xDataSet의 이름은 동일해도 상관 없음

화면내의 xDataSet ID는 글로벌 데이터 셋의 ID와 중복될 수 없음

글로벌 데이터 셋 전역적으로 유일한 값을 가짐

화면내의 xDataSet ID 값과 중복될 수 없음

xDataSet 정의

xDataSet 칼럼은 다음과 같은 속성을 가진 칼럼들로 구성됩니다.


Column 데이터 셋의 칼럼 이름

단일 데이터 셋 내에서는 중복되지 않는 값을 가짐

Description

칼럼에 대한 부가 설명

Query 실행기를 통해서 칼럼 정보를 설정할 경우에는, 테이블 정의시에 지정

한 칼럼의 “Comment” 값으로 설정됨

Length

칼럼에 들어갈 수 있는 데이터의 최대 길이

Query 실행기를 통해서 칼럼 정보를 설정할 경우에는, 테이블 정의시에 지정

한 칼럼의 “Length” 값으로 설정됨


- 23 -

데이터 셋 내부 구조

xFrameViewer 에서 사용하는 xDataSet 은 아래의 그림과 같이 데이터 셋의 데이터 이외에도 부가적인 정보를

가지고 있습니다.

위의 그림에서 예시한 데이터 셋 정보와 같이 데이터 셋 내부는 아래와 같이 데이터 부와 메타 데이터부로

구성되면, 각 부분에 대한 설명은 아래와 같습니다.


xDataSet 데이터 부 xDataSet에 저장되어 있는 실제 데이터

데이터 셋의 칼럼별/로우별로 데이터가 저장됨

xdataSet 메타

데이터 부

ROW ID 데이터 셋 레코드의 로우 값

RECORD_STATUS

데이터 셋의 변경 상태 정보이면, 트랜잭션이 끝나며 모두 기본 상태

의 NORMAL로 초기화됨.

NORMAL : 기존 데이터에서 값이 변경되지 않은 상태 (기본 상태)

UPDATE : 기존 데이터에서 값이 변경된 레코드 상태

DELETE : 기존 데이터에서 값이 삭제된 레코드 상태

INSERT : 기존 데이터에 새롭게 추가된 데이터 레코드 상태

RECORD_KEY 각 레코드를 구별하는 유일한 값

상태 데이터 부

UI 콘트롤

바인드 정보

데이터 셋과 BIND된 UI 콘트롤 정보 리스트

하나 이상의 UI 콘트롤이 하나의 데이터 셋이 바인딩 될 수 있음

전체 레코드

개수 현재 데이터 셋에 저장되어 있는 전체 레코드 개수

CURRENT_ROW

현재 사용자가 보고 있는 레코드 위치

비어있는 데이터 셋 내에 처음으로 데이터가 저장되는 경우는 첫번째

레코드 위치로 설정됨

[그림 3-0-1] xDataSet 내부 구조

Insert

Delete

Normal

Update

RECORDSTATUS

KEY_4333장호영0012

KEY_3

KEY_2

KEY_1

RECORDKEY

2

1

0

ROWID

43박만수0023

36김철수0049

45홍길동0045

EMP_AGEEMP_NAMEEMP_ID

Insert

Delete

Normal

Update

RECORDSTATUS

KEY_4333장호영0012

KEY_3

KEY_2

KEY_1

RECORDKEY

2

1

0

ROWID

43박만수0023

36김철수0049

45홍길동0045

EMP_AGEEMP_NAMEEMP_ID

CURRENT_ROWCURRENT_ROW

xDataSet 데이터 부xDataSet 데이터 부 xDataSet 메타 데이터 부xDataSet 메타 데이터 부

Ui 콘트롤 바인드 정보

전체 레코드 갯수

상태 데이터 부상태 데이터 부


- 24 -

데이터 셋이 그리드가 아닌 일반 텍스트성 콘트롤에 바인드 되어 있을

경우, UI 콘트롤에 표시되는 데이터는 CURRENT_ROW에 해당하는 데

이터 셋의 정보가 표시됨

데이터 셋이 그리드 콘트롤에 바인딩 되어 있을 경우, 이 정보는 현재

UI 콘트롤에서 사용자가 선택한 ROW가 됨


- 25 -

트랜잭션 맵 구조

트랜잭션 맵은 화면에서 업무 서버 시스템과의 통신시 송수신 데이터 사용되는 데이터 셋의 정보와 업무 서버

시스템의 URL 정보를 관리하는 맵이다. 트랜잭션 맵은 아래와 같은 정보를 정의한다.

하나의 업무 화면에서는 하나 이상의 트랜잭션을 정의할 수 있으며, 각각의 트랜잭션은 트랜잭션 ID로

구분된다.

트랜잭션 ID별로 업무 서버 시스템의 URL 정보와 송수신 데이터 셋의 정보를 정의한다.

송수신 대상 데이터 셋은 각각의 데이터 셋의 송수신 대상 칼럼을 정의한다.

데이터 셋의 송수신 대상 레코드 기준을 정의한다.

업무 서버 시스템 URL 정보 설정 방법

트랜잭션 ID 별로 업무 서버 시스템 URL 을 지정하는 방법은 아래와 같다.

업무 서버 시스템 URL = BASE_URL + TRANSACTION_URL

BASE_URL 은 업무 서버 시스템의 기본 URL 정보를 지정하는 값으로 트랜잭션마다 반복되는 정보를 미리

정의하고, 개발 환경 및 운영 환경에서 업무 시스템의 URL 정보를 일괄적으로 적용하기 위해서 사용된다. 이

값은 아래의 표와 개발시와 실행시 설정되고 참조되는 위치가 다르다.

구분 설명

개발시 xFrame-DevStuidio의 “도구옵션” 메뉴의 기타 탭에서 지정한 xDataSet Base URL 정보

이 값은 개발툴에서 “보기미리보기” 메뉴 선택시에 적용됨

실행시

실행시 참조하는 HTML 파일이 포함하고 있는 JavaScript 파일에 정의된

“XDATASET_BASEURL” 파라미터에 지정한 값

이 값은 개발툴에서 “보기뷰어로 보기” 메뉴 선택시나 실재 운영 환경시에 적용됨.


- 26 -

데이터 셋의 송수신 대상 레코드 기준 정의

트랜잭션 ID 에 대한 송수신 대상 데이터 셋을 지정하는 방법은 아래의 표와 같이 입력/출력에 따라 구분되어

지정하며, 설정값에 따라 데이터를 송수신 대상 데이터가 결정됩니다.

구분 설명

입출력 구분 설정값

입력

공백 트랜잭션 발생시 업무 서버로 송신되지 않는 데이터 셋임

ALL 트랜잭션 발생시 업무 서버로 데이터 셋의 모든 데이터가 송신됨

UPDATE 트랜잭션 발생시 업무 서버로 데이터 셋의 데이터 중에서 “RECORD STATUS” 상

태가 “UPDATE, DELETE, INSERT”로 설정된 레코드만 송신됨

CHECKED

트랜잭션 발생시 업무 서버로 데이터 셋의 레코드 상태와 무관하게 그리드 콘트

롤에서 Check된 레코드만 송신됨.

Check 방식을 사용하기 위해서는 데이터 셋과 링크된 그리드 콘트롤의

“use_checkrow” 및 “multi_checkrow” 속성을 사용함.

이때, 레코드의 상태는 변경 없음.

출력

공백

트랜잭션 발생시 업무 서버로부터 수신처리 되지 않음.

업무 서버에서 해당 데이터 셋에 대한 데이터를 설정한 경우에도 데이터를 처리

되지 않음

UPDATE

업무 서버로부터 수신된 데이터에서 데이터의 “RECORD KEY” 값을 기준으로 기

존 데이터를 업데이트함

업무 서버로부터 수신된 데이터에서 “RECORD KEY” 값에 해당하는 데이터가 기

존에 없는 경우에는 데이터 셋에 새롭게 추가됨

CLEAR 기존에 저장된 데이터 셋의 모든 데이터를 삭제하고, 업무 서버로부터 수신된 데

이터로 데이터 셋의 데이터를 설정함


- 27 -

xDataSet 데이터 처리 흐름 아키텍처

일반 데이터 처리 흐름도

xDataSet 의 데이터는 업무 서버 시스템과 사용자 UI 시스템간에 아래의 그림과 같이 데이터가 처리됩니다.

구분 설명

1 사용자는 UI 이벤트(예: “조회” 버튼 클릭)를 발생시켜 업무 화면의 request_submit( ) 함수를

호출하여 정의된 트랜잭션 ID에 해당하는 트랜잭션을 발생시킴

2 xFrame Viewer에서 트랜잭션 ID에 해당하는 업무 서버 시스템의 URL 정보와 트랜잭션 IO 맵

정보를 기준으로 업무 서버 시스템으로 송신할 데이터를 설정

3 송신 데이터는 데이터 셋의 데이터 이외에도 부가적인 데이터가 송신됨

송신 데이터의 구조는 “송수신 데이터 구조” 절 참조

4 xdataset.jar 라이브러리를 이용해서 입력 데이터를 얻어오고 비즈니스 업무 요건에 따라 처리

5 xdataset.jar 라이브러리를 이용해서 출력 데이터를 설정

6

xFrame Viewer에서 출력 데이터에 대한 수신 및 데이터 처리가 완료되면, 개발자가 정의한 트

랜잭션 완료시 처리할 비즈니스 로직을 처리하기 위해, 화면의 on_submit_complete ( ) 함수

를 호출

사용자 시스템사용자 시스템

엄무 화면엄무 화면 xFrame ViewerxFrame Viewer

입력 데이터 설정

업무 서버 시스템업무 서버 시스템

업무 비즈니스 로직업무 비즈니스 로직

입력 데이터 처리

출력 데이터 설정

출력 데이터 송신(returnData 함수)

트랜잭션 발생(request_submit 함수)

입력 데이터 송신

출력 데이터 수신

출력 데이터 처리

출력 데이터 처리 완료트랜잭션 완료 함수 처리

(on_submit_complete 함수)

출력 데이터

입력 데이터입력 데이터

출력 데이터출력 데이터

사용자 시스템사용자 시스템사용자 시스템사용자 시스템

엄무 화면엄무 화면 xFrame ViewerxFrame ViewerxFrame ViewerxFrame Viewer

입력 데이터 설정

업무 서버 시스템업무 서버 시스템업무 서버 시스템업무 서버 시스템




출력 데이터 송신(returnData 함수)

트랜잭션 발생(request_submit 함수)

입력 데이터 송신



출력 데이터 처리 완료트랜잭션 완료 함수 처리

(on_submit_complete 함수)

출력 데이터



[그림 3-0-1] 일반 데이터 처리 흐름도


- 28 -

First-Row 방식의 데이터 처리 흐름도

First-Row 방식의 데이터 처리는 대량의 데이터를 사용자 UI 시스템으로 전송해야 하는 경우, 사용자의 반응성

및 데이터 처리 시간 단축을 위한 기능입니다.

구분 일반 데이터 처리 흐름 First‐Row 데이터 처리 흐름

1

대량 데이터를 조회하여 출력하는 경우 출

력 데이터를 설정하는 시간이 오래 걸림

이 시간동안 사용자 시스템은 Lock이 걸린

상태로 아무런 동작을 수행하지 않음.

대량의 데이터를 설정시 업무 서버 시스템

에서 대량의 메모리가 사용됨

대량 데이터 조회시 일부 데이터를 중간중간에

일부 데이터를 송신함 (xdataset.jar 라이브러리

의 retrunPartData( ) 함수 사용)

대량의 데이터를 사용하지 않음

2

사용자 시스템에 대량의 데이터를 수신하는

경우, 데이터를 처리하기 위한 시간이 오래

걸림

데이터 처리 완료 이후에 화면에 데이터가

표시됨

사용자 시스템은 일부 데이터를 처리하고 화면

에 표시됨

3 사용자에게 데이터를 표시를 시작하는 시간이 단축되어 사용자의 반응성이 향상됨

4 전체 트랜잭션 처리 시간이 단축됨

[그림 3-0-2] 일반 방식과 First-Row 방식 비교


xFrame ViewerxFrame Viewer





출력 데이터 송신

데이터 송신



트랜잭션 완료

출력 데이터




xFrame ViewerxFrame Viewer




부분 데이터 송신

마지막 데이터 송신

데이터 송신

트랜잭션 완료

출력 데이터



데이터 수신/처리

데이터 수신/처리 부분 데이터 송신




출력 데이터출력 데이터데이터 수신/처리


거래처리단축시간


일반 데이터 처리 흐름도일반 데이터 처리 흐름도 First-Row 데이터 처리 흐름도First-Row 데이터 처리 흐름도시간

데이터표시단축시간



xFrame ViewerxFrame ViewerxFrame ViewerxFrame Viewer





출력 데이터 송신

데이터 송신



트랜잭션 완료

출력 데이터




xFrame ViewerxFrame ViewerxFrame ViewerxFrame Viewer





마지막 데이터 송신

데이터 송신

트랜잭션 완료

출력 데이터




데이터 수신/처리 부분 데이터 송신




출력 데이터출력 데이터데이터 수신/처리




일반 데이터 처리 흐름도일반 데이터 처리 흐름도 First-Row 데이터 처리 흐름도First-Row 데이터 처리 흐름도시간




- 29 -

이 장에서는 xFrame 솔루션의 xDataSet 기능을 통하여 샘플 어플리케이션을 개발합니다. 이 장에서 기술하는

내용은 아래와 같습니다.

개발 절차 개요

샘플 어플리케이션 개요

데이터 셋 정의 및 트랜잭션 정의

UI 폼 개발

UI 폼 이벤트 처리 개발

개발 절차 개요

xDataSet 을 이용하여 업무 화면을 개발하는 절차는 일반적으로 아래와 같습니다. 본 교재에서는 아래의

절차에 따라 샘플 어플이케이션을 개발합니다.

44 장장:: UUII 폼폼 개개발발

[그림 4-0-1] 업무 개발 절차

• 업무 화면에표시된 데이터에대한 기본 DB 테이블 스키마정의

• 테이블 스키마에따른 테이블 생성

DB 테이블 정의

• 트랜잭션 ID에지정된 URL에업무 처리를 위한비즈니스 로직을개발

업무 서버 개발

• 개발 툴 설치• 개발 환경 설정 값

정의

개발 환경 구성

• 화면 상에서사용할 데이터 셋ID 정의

• 데이터 셋에 대한칼럼 정의(쿼리실행기 이용)

화면 데이터 셋 정의

• 서버 개발 환경소프트웨어 설치

• 서버 개발 환경설정 값 정의


• 데이터 셋을이용하여 업무화면 폼 개발 및데이터 바인딩

• 화면내 이벤트 및비즈니스 로직개발

업무 화면 폼 개발

• 업무 화면에 대한유형별 트랜잭션정의

• 트랜잭션별 업무서버 URL 및데이터 셋 I/O 정의

트랜잭션 정의

• 업무 화면 테스트• 업무 서버

비즈니스 로직테스트

• 업무 화면 개발비즈니스 로직테스트

테스트/게발 완료



DB 테이블 정의



DB 테이블 정의






정의



정의






















트랜잭션 정의



트랜잭션 정의










- 30 -


샘플 어플리케이션은 가상의 직원 정보를 조회하고, 직원 정보 수정/삭제/추가 기능을 제공합니다. 샘플

어플리케이션은 전형적인 CRUD 업무 화면입니다. 이 화면을 개발함으로써 기본적인 xDataSet 의 기능을

학습하는 것을 목표로 합니다.

샘플 어플리케이션이 완성되었을 경우 아래와 같은 화면이 됩니다. 이 화면은 $APP_HOME\screen 폴더에

employee.xml 파일 이름으로 저장되어 있습니다.

[그림 4-0-1] 샘플 어플리케이션 설명


- 31 -

위의 그림에서 각각의 항목에 대한 설명은 아래와 같습니다.

구분 설명

1 “조회” 버튼을 클릭하여 직원 정보를 나이를 기준으로 합니다.

“First‐Row 조회” 버튼을 클릭하여, 직원 정보를 나이를 기준으로 First‐Row 방식으로 조회합니다.

2

“신규” 버튼을 클릭하여 새로운 직원정보를 입력합니다.

입력된 정보는 UI 시스템에만 적용되어 있고, 실제 업무 서버와의 처리는 “저장” 버튼을 클릭시에

발생합니다.

3

“삭제” 버튼을 클릭하여 직원 정보를 삭제합니다.

삭제된 정보는 UI 시스템에만 적용되어 있고, 실제 업무 서버와의 처리는 “저장” 버튼을 클릭시에

발생합니다.

4

기존 정보를 그리드에서 선택하여 직원 정보를 변경합니다.

변경된 정보는 UI 시스템에만 적용되어 있고, 실제 업무 서버와의 처리는 “저장” 버튼을 클릭시에

발생합니다.

5 “저장” 버튼 클릭시 업무 서버로 변경된 데이터를 송신하여 처리합니다. 처리 결과는 그리드의 “처리

결과” 칼럼에 표시됩니다.

6 트랜잭션 처리 결과에 대한 정보를 표시합니다.


- 32 -

데이터 셋 정의 및 트랜잭션 정의

UI 개발 환경 설정

xFrame-DevStudio 에서 샘플 어플리케이션 UI 를 개발하기 위한 기본 설정을 진행합니다. 우선 메뉴의 아래의

그림과 같이 설정합니다.

데이터 조회 UI 화면 개발

“화면새 화면” 메뉴를 선택하여 새 화면을 생성합니다. 생성 이후에 화면의 속성을 다음과 같이 설정한

이후에 “화면저장” 메뉴를 선택하여 “Employee” 라는 이름으로 저장합니다.

속성 값

title 직원정보처리

width 700

Height 460

[그림 4-0-1] xFrame-DevStudio 개발 옵션 설정


- 33 -

데이터 셋 설정

샘플 어플리케이션에서 사용되는 데이터 셋은 다음의 표와 같으며, 개발툴에서 “Transaction” 탭의 “xDataSet”

탭을 선택하여 정의합니다.

데이터 셋의 칼럼 정의

데이터 셋의 칼럼을 정의하는 방법은 두가지가 있습니다.

직접 칼럼 이름 방식 : Description, 길이 항목을 지정

쿼리 실행기 방식 : 쿼리 실행기를 통해서 DB에 정의된 테이블의 정보를 이용해서 자동으로 생성

DS_EMP_INFO 데이터 셋 정의

먼저 직원에 대한 정보를 저장할 DS_EMP_INFO 데이터 셋의 칼럼을 정의합니다. . 데이터 셋의 칼럼을

정의하기 위해서 “xDataSet Column”을 정의하는 그리드 상단에 있는 쿼리 실행기 버튼을 클릭하여

실행시킵니다.,

쿼리 실행기를 최초로 실행했을 경우에는 중앙에 있는 “환경설정” 버튼을 클릭하여 다음과 같이 설정합니다.

[그림 4-0-2 데이터 셋 목록

[그림 4-0-3] 쿼리 실행기 환경 설정


- 34 -

환경을 설정한 이후에 다음의 그림과 같이 쿼리를 실행한 이후에 설정합니다.

DS_EMP_INFO 의 칼럼 정보는 아래의 표와 같습니다. 아래의 칼럼중 “process_result” 항목은 데이터 처리

결과를 표시하기 위한 항목으로, DB 테이블 상에 존재하지 않습니다. 따라서 개발자가 직접 추가하여 정의

합니다.

Column Description Length

emp_no 직원번호 6

emp_name 직원이름 20

Emp_age 직원나이 3

dept_code 직원부서 2

titile_code 직원직책 2

mail_addr 메일주소 100

process_result 처리 결과 30

[그림 4-0-4] 쿼리 실행기를 이용한 데이터 셋 칼정 정의


- 35 -

DS_DEPT_INFO 데이터 셋 정의

직원의 부서 코드 정보를 저장하는 DEPT_INFO 데이터 셋 정보도 위에서 정의한 DS_DEPT_INFO 데이터 셋과

같은 방법을 사용하여 다음과 같이 정의합니다.


dept_code 부서코드 2

dept_name 부서이름 30

DS_TITLE_INFO 데이터 셋 정의

직원의 직책 코드 정보를 저장하는 DS_TITLE_INFO 데이터 셋 정보는 DB 테이블 상에 존재하지 않으므로

개발자가 직접 정의하고, 초기 데이터도 설정합니다.


title_code 직책코드 2

title_name 직책이름 30

초기값은 데이터 셋을 정의하는 곳에서 우측 하단에 위치하는 “xDataSet Column Data” 항목에서 아래의 표와

같이 정의합니다.

Title_code Title_name

01 사원

02 대리

03 과장

04 차장

05 부장

DS_EMP_AGE 데이터 셋 정의

직원 정보를 조회하기 위한 기준인 직원 나이 정보를 저장하기 위한 데이터 셋으로 다음의 표와 같이

정의합니다.


emp_age 직원나이 3


- 36 -

트랜잭션 정의

화면에서 발생하는 트랜잭션을 정의하는 곳은 “Transaction” 탭의 “xTranMap” 탭에서 정의하여, 아래의 그립과

같이 트랜잭션을 정의합니다.

트랜잭션 I/O 에 대한 정의는 트랜잭션 발생시 업무 서버 시스템과 송수신할 데이터 셋을 정의하는 것입니다.

위에서 정의한 트랜잭션 ID (xTranMapID) 항목별로 다음의 그림과 같이 정의합니다.

위에서 정의한 트랜잭션에 대한 정보중에 데이터 셋의 속성으로 지정하는 “CLEAR”, “UPDATE”, ALL” 항목에

대한 자세한 설명은 “3 장: xDataSet 개요” 부분을 참고하시길 바랍니다.

[그림 4-0-5] 트랜잭션 정의

[그림 4-0-6] 트랜잭션 I/O 설정


- 37 -

트랜잭션별 송수신 데이터에 대한 설명은 아래의 표와 같습니다.

xTranMapID 입력 데이터 데이터 구분

설명 출력 데이터 데이터 구분

TR_SELECT_EMP TR_FIRSTROW_EMP

DS_EMP_AGE ALL 직원 정보 조회 기준인 직원 나이 정보를 변경 여부와

관계없이 무조건 송신합니다.

DS_EMP_INFO CLEAR

직원 정보를 저장하고 있는 데이터 셋의 데이터를

삭제하고 업무 서버로부터 수신한 데이터를 이용해서 기존

데이터로 저장합니다.

TR_SELECT_DEPT DS_DEPT_INFO CLEAR

직원 부서 정보 데이터를 저장하고 있는 데이터 셋의

데이터를 삭제하고 업무 서버로부터 수신한 데이터를

이용해서 기존 데이터로 저장합니다

TR_PROCESS_EMP

DS_EMP_INFO UPDATE

데이터셋에 저장된 데이터 중에서 초기에 설정한 데이터에

변경(추가/변경/삭제)이 발생한 데이터만을 업무 서버로

송신합니다.

DS_EMP_INFO UPDATE

직원 부서 정보 데이터를 저장하고 있는 데이터 셋의

데이터에서 process_result 칼럼 값을 업무 서버로부터

수신한 데이터를 이용해서 업데이트 합니다


- 38 -

화면 폼 개발

데이셋을 이용한 화면 폼 생성

화면 폼 생성시 미리 정의된 데이터 셋 정보를 이용하여 자동으로 화면 품을 개발할 수 있습니다. 아래의

그림과 같은 “화면 데이터 셋 정보창”을 표시하고, 데이터 셋을 드래그 & 드롭 방식으로 화면 폼 개발 영역에

끌어다 놓으면 자동으로 UI 콘트롤이 생성되면서, UI 콘트롤의 데이터 바인딩 정보(link_data 속성)동 자동으로

설정됩니다.

드래그 대상에 따른 화면 폼 생성 부분은 아래의 표와 같이 결정됩니다.

드래그 대상 처리

데이터 셋을 드래그 데이터 셋에 정의된 칼럼 정보를 기준으로 그리드 콘트롤이 생성

데이터 셋의 칼럼을 드래그 데이터 셋의 칼럼 정보를 이용해서 개발자가 지정한 콘트롤(일반필드 / 숫자필드 /

한글필드 / 비밀번호필드)이 생성

[그림 4-0-1] 화면 데이터 셋 정보창


- 39 -

데이터 셋을 이용환 화면 생성은 아래의 그림과 같이 진행하여, 최종적으로 “[그림 4-0-2] 샘플 어플리케이션

설명” 과 같이 생성합니다.

화면 폼 및 데이터 셋의 연관도에 대한 상세 설명은 아래의 그림과 같습니다.

구분 바인딩 정보

1 DS_EMP_AGE 의 emp_age 칼럼

2 DS_EMP_INFO 데이터 셋에서 “mail_addr” 칼럼을 제외

3 DS_EMP_INFO 데이터 셋에서 각각의 칼럼별로 바인딩

4 DS_DEPT_INFO 데이터 셋을 이용한 PICKLIST 코드 바인딩

5 DS_TITLE_INFO 데이터 셋을 이용한 PICKLIST 코드 바인딩

[그림 4-0-3] 화면 폼 및 데이터 셋 연관도


- 40 -

PICKLIST 코드 바인딩

콤보 박스 또는 그리드 칼럼 속성중 “input_type”이 “combobox”인 칼럼에 대한 코드 정보를 데이터 셋과

연동하는 속성은 “picklist_linkdata” 속정으로 아래의 그림과 정의된다.

위의 그림에서 각각의 항목에 대한 자세한 설명은 아래의 표와 같다.

구분 바인딩 정보

1 PICKLIST 와 바인딩할 데이터 셋 지정

2 코드 정보로 사용될 데이터 셋의 칼럼 지정

3 코멘트 정보로 사용될 데이터 셋의 칼럼 지정

4 숨김 여부 정보로 사용될 데이터 셋의 칼럼 지정

[그림 4-11]의 4 번, 5 번 항목에 대하여 각각 다음과 같이 설정한다.

구분 필리스트 데이터 셋 코드 칼럼 코멘트 칼럼 picklist_setstyle picklist_viewstyle

4 DS_DEPT_INFO Dept_code Dept_name 1 1

5 DS_TITLE_INFO Title_code Title_name 1 1

[그림 4-0-4] PICKLIST 와 데이터 셋 바인딩


- 41 -

버튼 생성 및 속성 정의

트랜잭션 및 사용자가 데이터를 처리하기 위한 버튼을 아래의 그림과 같이 생성한다.

위의 그림에서 각각의 항목에 대한 속성 지정은 아래의 표와 같다.

캡션 name text

1 btnSelect 조회

2 btnFristRowSelect First‐Row 조회

3 btnNewEmp 신규

4 btnDeleteEmp 삭제

5 btnProcessEmp 저장

그림 0-5 버튼 생성


- 42 -

그리드 콘트롤 속성 지정

직원 정보 조회 데이터를 표시할 그리드 콘트롤은 아래의 그림과 같이 생성합니다.

그리드 콘트롤의 세부 속성은 아래와 같습니다.

속성 값 설명

name grdEmpList 그리드 콘트롤의 이름을 지정합니다.

celldevicerowcount 1 그리드 라인을 구별한 기준 로우 개수를 지정합니다.

gradient_effect 1 그리드 헤더부의 그래디언트 효과를 지정합니다.

linenumber_show True 그리드 좌측의 자동 순번 표시 부분을 표시합니다.

그림 0-6 그리드 UI 콘트롤 속성 지정


- 43 -

트랜잭션 완료 정보 표시 부분 개발

트랜잭션이 완료되면 화면의 “on_submitcomplete” 함수가 xFrame-Viewer 에 의해서 자동으로 호출된다. 본

예제에서는 트랜잭션이 완료되었을 경우, 아래의 그림과 같이 해당 정보를 화면에 표시하도록 개발할 것이다.

위의 그림에서 각각의 항목에 대한 설명은 아래와 같다.

구분 UI 콘트롤 UI 콘트롤 이름 최대 길이 설명

1 한글필드 MAP_ID 30 screen_on_submitcomplete 함수의 mapid 값으로 설정

2 한글필드 RESULT 30 screen_on_submitcomplete 함수의 result 값으로 설정

3 한글필드 ERROR_CODE 30 screen_on_submitcomplete 함수의 error_code 값으로 설정

4 멀리타인 ERROR_MSG 300 screen_on_submitcomplete 함수의 error_msg 값으로 설정

[그림 4-0-7] 트랜잭션 완료 정보 표시를 위한 화면 구성


- 44 -

UI 폼 이벤트 처리 개발

트랜잭션 완료 이벤트 처리

트랜잭션이 완료되면 화면의 “on_submitcomplete” 함수가 xFrame-Viewer 에 의해서 자동으로 호출된다.

트랜잭션이 완료시에 자동으로 호출되는 screen_on_submitcomplete 함수의 역할은 트랜잭션의 정상 처리

유무에 대한 정보를 전달하기 위한 것이며, 함수의 파라미터 값은 아래의 표와 같다.

파라미터 설명

mapid 처리 완료된 트랜잭션의 ID 로 툴에서 설정한 xTranMapID 값에 해당함

result 처리 완료에 대한 정보로 ‘1’인 경우에는 정상이고, 그 이외의 경우에는 장애임

recv_userheader 업무 서버 시스템에서 setUserHeader 함수를 통해서 지정한 값

recv_code 업무 서버 시스템에서 setErrorMessage 함수를 통해서 지정한 코드 값

recv_msg 업무 서버 시스템에서 setErrorMessage 함수를 통해서 지정한 메시지 값

본 예제에서는 트랜잭션이 완료되었을 경우, 아래의 그림과 같이 해당 정보를 화면에 표시하도록 개발할

것이다. 트랜잭션 완료 처리시에 호출되는 실제 함수 소스는 아래와 같다.

1 2 3 4 5 6 7

function screen_on_submitcomplete(mapid, result, recv_userheader, recv_code, recv_msg)

{ MAP_ID.settext(mapid); RESULT.settext(result); RECV_CODE.settext(recv_code); RECV_MSG.settext(recv_msg);

}

위의 소스와 같이 함수에서 수행하는 기능은 screen_on_submitcomplete 함수의 파라미터로 넘겨져오는 각

변수들을 화면의 각 UI 콤포넌트에 표시하는 역할을 수행한다.


- 45 -

트랜잭션 이벤트 발생 이벤트 처리

트랜잭션을 발생시키기 위해서는 screen 오젝트의 requestsubmit 함수를 사용하며, 함수에 대한 파라미터에

대한 설명은 아래와 같다.

파라미터 설명

strTranMapID 트랜잭션을 발생시킬 트랜잭션 ID 를 지정한다. 트랜잭션 ID 는 “xTranMapInfo”에서 정의됨

트랜잭션 ID 는 업무 서버의 URL 정보와 송수신될 데이터 셋의 정보를 구별함

bProcAsync

트랜잭션에 대한 통신 처리는 Sync 방식/Async 방식으로 처리할 것을 지정함

True : 트랜잭션이 Async 방식으로 처리되고, on_submitcomplete 함수가 콜백 처리됨

False : 트랜잭션이 Sync 방식으로 처리되고, on_submitcomplete 함수가 콜백 처리되지 않음

Sync 방식과 Async 방식의 차이

트랜잭션 발생시에 처리 방식인 Sync 방식과 Async 방식의 차이는 아래의 표와 같습니다.

항목 Sync 방식 Async 방식

함수 리턴 시점

업무 서버로 데이터를 송신하고, 업무 서버로

데이터를 수신한 후, 수신 데이터에 대한

처리가 완료되면 함수 리턴

업무 서버로 데이터가 송신 완료되면 함수 리턴

트랜잭션 완료 requestsubmit 함수 호출이 리턴되면 거래

처리 완료.

screen_on_submitcomplete 함수가 호출되면

거래 처리 완료

트랜잭션 처리

결과 정보 확인

screen 오브젝트의 특정함수를 호출하여

결과 확인

screen_on_submitcomplete 함수의 파라미터로

확인

특징 트랜잭션이 완료되지 전에 사용자는 아무런

동작을 수행할 수 없음.

트랜잭션을 완료되기 전에 사용자가 다른

동작이나 또 다른 트랜잭션을 발생시킬 수 있음


- 46 -

화면 폼 생성 이벤트 처리

화면 폼이 생성될 때, 화면에서 사용하는 직원 부서 정보에 대한 코드를 미리 가져오기 위해서 트랜잭션이

발생한다.

1 2 3 4

function screen_on_load() {

screen.requestsubmit("TR_SELECT_DEPT", true); }

이 트랜잭션이 완료되면, 화면에서 사용한 직원의 부서 정보에 대한 코드 처리를 정상적으로 수행할 수 있다.

트랜잭션 발생 버튼 이벤트 처리

사용자가 “조회”, “First-Row 조회”, “저장” 버튼을 클릭할 경우, 업무 서버와의 데이터 트랜잭션이 발생시킨다.

각각의 버튼에 대한 “on_mouseup” 이벤트에 대한 처리 소스는 아래와 같다.

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

function btnSelect_on_mouseup() {

screen.requestsubmit("TR_SELECT_EMP", true); } function btnFristRowSelect_on_mouseup() {

screen.requestsubmit("TR_FIRSTROW_EMP", true); } function btnProcessEmp_on_mouseup() {

screen.requestsubmit("TR_PROCESS_EMP", true); }


- 47 -

데이터 조작 버튼 이벤트 처리

사용자가 “신규”, “삭제” 버튼에 대하여 “on_mouseup” 이벤트(마우스로 클릭)가 발생하면 다음과 같은 처리를

수행한다.

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

function btnDeleteEmp_on_mouseup(){

var currentRow; // 그리드에서 사용자가 선택한 로우 값을 얻어옴

currentRow = grdEmpList.getselectrow(); // 선택한 로우 값에 해당하는 데이터를 삭제함 grdEmpList.deleterow(currentRow);

} function btnNewEmp_on_mouseup() {

var totalRowCount;

// 그리드에서 전체 레코드 개수를 구함 totalRowCount = grdEmpList.getrowcount(); // 그리드에서 새로운 행을 추가함 grdEmpList.insertitemtext(totalRowCount, 0, ""); // 그리드의 선택로우를 새로 추가된 행으로 이동 grdEmpList.setselectitem(totalRowCount, 0);

}


- 48 -

이 장에서는 xFrame 솔루션의 xDataSet 기능을 통하여 샘플 어플리케이션의 서버 부분을 개발합니다. 이

장에서 기술하는 내용은 아래와 같습니다.

xDataSet.jar 라이브러리 개요

직원 정보 조회 처리 개발

직원 정보 First-Row 방식 조회 처리 개발

직원 정보 변경 처리 부분 개발

xDataSet.jar 라이브러리 개요

xDataSet.jar 라이브러리는 업무 서버 시스템에서 데이터 셋을 처리하기 위해서 제공되는 라이브러리 입니다.

xDataSet.jar 라이브러리에서 제공하는 주요 기능을 아래와 같습니다.

UI로부터 수신된 데이터 셋에 대한 정보 추출

UI로부터 수신된 화면 메타 정보 추울

UI로 송신할 데이터에 대한 설정

UI로 송신할 데이터에 대한 First-Row 방식 처리

55 장장:: UUII 서서버버 개개발발


- 49 -


본 교재에서 개발할 샘플 어플리케이션은 아래의 표와 파일들이 사용됩니다.

파일 경로 설명

jsp\SelectEmp.jsp 직원 정보 조회 처리 JSP 파일

Jsp\SelectDept.jsp 직원 부서 정보 조회 처리 JSP 파일

jsp\SelectEmpFirstRow.jps 직원 정보 조회 First‐Row 처리 JSP 파일

jsp\ProcessEmp.jsp 직원 정보 처리(수정/추가/삭제) JSP 파일

WEB‐INF\lib\xdataset.jar xDataSet 라이브러리 파일

WEB‐INF\lib\mysql‐connector‐java‐5.1.10‐bin.jar JDBC 드라이버 라이브러리


- 50 -

직원 정보 조회 처리 개발

직원 정보 조회 처리 개발 부분에 대한 소스는 아래와 같습니다.

1 2

3 4

5 6

7 8

9 10

11

12 13

14 15

16 17

18 19

20 21

22 23

24 25

27

28 29

30 31

32 33

34 35

36 37

38 39

40 41

42

<%@ page import="java.sql.DriverManager" %> <%@ page import="java.sql.Connection" %>

<%@ page import="java.sql.PreparedStatement" %> <%@ page import="java.sql.ResultSet" %>

<%@ page import="xdataset.XDataSet" %>

<% Connection conn = null; // DB Connection Object PreparedStatement pstmt = null; // JDBC PreparedStatement Object

ResultSet rs = null; // Query Result Set Object XDataSet xDataSet = null; // XFrame XDataSet Object

try {

// Clear out's buffer out.clearBuffer();

// Create XDataSet object xDataSet = new XDataSet(request, response);

System.out.println("ScreenNo : " + xDataSet.getScreenNo()); System.out.println("IP : " + xDataSet.getTerminalIpAddress());

System.out.println("Map ID : " + xDataSet.getTransactionMapId()); System.out.println("User Header : " + xDataSet.getUserHeader());

// For MySQL

String driverClass = "com.mysql.jdbc.Driver";

String dbUrl = "jdbc:mysql://localhost:3306/xframe_data"; String dbUserId = "xframe";

String dbUserPasswd = "xframe";

// Load JDBC Driver and connect to database Class.forName(driverClass);

conn = DriverManager.getConnection(dbUrl, dbUserId, dbUserPasswd);

// Get data from XDataSet object String temp_emp_age = xDataSet.getData("DS_EMP_AGE", "emp_age", 0);

// Create a select query for EMP_INFO table

String sQuery = "SELECT " +

" emp_name, emp_no, emp_age, dept_code, title_code, mail_addr " +


- 51 -

43 44

45 46

47 48

49 50

51 52

53 54

55

56 57

58 59

60 61

62 63

64 65

66 67

68 69

70 71

72

73 74

75 76

77 78

79 80

81 82

83 84

85 86

87

88

"FROM " + " EMP_INFO " +

"WHERE " + " emp_age > " + temp_emp_age + " " +

"ORDER BY " + " emp_name";

// Creae a statement and execute a statement

pstmt = conn.prepareStatement(sQuery); rs = pstmt.executeQuery();

// Loop a select result records for(int nRow = 0; rs.next(); nRow++) {

// Get data from resultset String emp_name = rs.getString("emp_name"); if(emp_name == null) emp_name = "";

String emp_no = rs.getString("emp_no"); if(emp_no == null) emp_no = "";

String emp_age = rs.getString("emp_age"); if(emp_age == null) emp_age = "";

String dept_code = rs.getString("dept_code"); if(dept_code == null) dept_code = "";

String title_code = rs.getString("title_code"); if(title_code == null) title_code = "";

String mail_addr = rs.getString("mail_addr"); if(mail_addr == null) mail_addr = "";

// Set output data to XDataSet object xDataSet.setData("DS_EMP_INFO", "emp_name", nRow, emp_name);

xDataSet.setData("DS_EMP_INFO", "emp_no", nRow, emp_no); xDataSet.setData("DS_EMP_INFO", "emp_age", nRow, emp_age);

xDataSet.setData("DS_EMP_INFO", "dept_code", nRow, dept_code); xDataSet.setData("DS_EMP_INFO", "title_code", nRow, title_code);

xDataSet.setData("DS_EMP_INFO", "mail_addr", nRow, mail_addr); }

// Return data to XFrame

xDataSet.returnData(); } catch(Exception e) {

try {


- 52 -

89 90

91 92

93 94

95 96

97 98

99 100

101

102 103

104 105

106

if(xDataSet != null) {

// Set error code and error message

xDataSet.setErrorMessage("XDATASET_ERROR", e.getMessage()); System.out.println(e.getMessage());

xDataSet.returnData(); }

} catch(Exception ex) {

System.out.println("Exceptino Msg = " + ex.toString()); }

} finally {

// Release a database resources if(rs != null) { try { rs.close(); } catch(Exception ignore) {} } if(pstmt != null) { try { pstmt.close(); } catch(Exception ignore) {} }

if(conn != null) { try { conn.close(); } catch(Exception ignore) {} }

}

%>

위의 소스에 대한 설명은 아래와 같습니다.

라인 설명

1 ~ 5 JSP 내에서 사용하는 클래스에 대한 부분을 Include 합니다.

8 ~ 11 JSP 내에서 사용하는 변수들을 선언합니다.

15 JSP 의 결과를 출력할 버퍼의 내용을 클리어합니다.

18 JSP 내부 오브젝트인 request 와 response 오브젝트를 이용해서 XDataSet 오브젝트를 생성합니다.

20 ~ 23 XDataSet 오브젝트에 포함되어 있는 부가 메타 정보를 콘솔에 출력합니다.

27 ~ 34 쿼리를 수행하기 위한 DB 에 대한 세션을 구합니다.

37

XDataSet 오브젝트로부터 직원 정보 조회 기준인 직원 나이 정보를 얻어옵니다. 이 정보는

“TR_SELECT_EMP” 트랜잭션에서 정의한 입력 데이터 셋인 “DS_EMP_AGE”의 “emp_age” 칼럼에서

정보를 가져옵니다.

40 ~ 48 직원 정보를 조회하기 위한 Query 를 조립하고 수행하여 ResultSet 오브젝트를 구합니다.

55 ~ 81 ResutlSet 의 정보를 XDataSet 오브젝트에 설정합니다.

85 XDataSet 에 저장된 직원 정보를 송신합니다.

89 ~ 94 로직 처리중 Exception 이 발생하며, XDataSet 오브젝트에 에러 코드와 에러 메시지를 설정하고

송신합니다.


- 53 -

직원 정보 변경 처리 부분 개발

직원 정보를 처리하는 JSP 인 Process.JSP 의 소스 부분은 실제 소스의 주석을 참조한다.


- 54 -

이 장에서는 xFrame 솔루션의 xDataSet 기능과 관련된 API 의 리스트 및 간단한 설명을 기술합니다.

UI 폼 관련 API 소개

UI 서버 관련 API 소개

UI 폼 관련 API 소개

UI 폼 관련 API 소개는 xFrame@DevStudio 를 이용하여 UI 화면에서 사용하는 API 에 대한 설명을 기술합니다.

각 함수의 자세한 설명은 xFrame@DevStudio 의 API 도움말를 참조하시길 바랍니다.

오브젝트 함수 설명

screen

requestsubmit 화면에 설정된 TranMap 기준으로 데이터를 송수신한다.

on_submitcomplete 거래 수신 처리가 완료되었음을 알려주는 Callback 이벤트 함수이다.

getxdatasetrowcount 화면 데이터셋의 열갯수를 반환한다.

getxdatasetcolumncount 화면 데이터셋의 행갯수를 반환한다.

setxdatasetdata 화면 데이터셋에 데이터를 저장한다.

getxdatasetdata 화면 데이터셋에 저장된 데이터를 반환한다.

factory

getxdatasetrowcount 공통 데이터셋의 열갯수를 반환한다.

getxdatasetcolumncount 공통 데이터셋의 행갯수를 반환한다.

setxdatasetdata 공통 데이터셋에 데이터를 저장한다.

getxdatasetdata 공통 데이터셋에 저장된 데이터를 반환한다.

dataset

deleteallrows 데이터셋의 전체 데이터를 삭제한다.

deleterow 데이터셋의 특정 로우를 삭제한다.

deleterowex 데이터셋의 특정 로우를 삭제와 관련된 확장 기능을 제공한다.

getcolumn 데이터세의 칼럼 아이디에 해당하는 컬럼의 인덱스를 반환한다.

getcolumncount 데이터셋의 칼럼 개수를 반환한다.

getcolumndesc 데이터셋의 특정 칼럼의 Description 을 반환한다.

66 장장:: xxDDaattaaSSeett AAPPII 소소개개


- 55 -

getcolumnid 데이터셋의 특정 칼럼의 ID 를 반환한다.

getcolumnlength 데이터셋의 특정 칼럼의 길이를 반환한다.

getdata 데이터셋의 데이터를 반환한다.

getdescription 데이터셋의 Description 을 반환한다.

getobjectkind 해당 오브젝트의 유형을 반환한다.

getpos 데이터셋의 현재 로우 위치를 반환한다.

getrowcount 데이터셋의 레코드 개수를 반환한다.

getrowoperation 데이터셋의 특정 로우가 Insert, Update, Delete 된 로우인지를

반환한다.

init 데이터셋의 데이터를 모두 삭제하고 초기화한다.

insertrow 데이터셋에 새로운 한 개의 빈 레코드를 추가한다.

isglobalxdataset 데이터셋이 글로벌데이터셋인지 판단한다.

moveat 데이터셋의 현재 로우 위치를 특정 위치로 이동한다.

movefirst 데이터셋의 현재 로우 위치를 맨처음으로 이동한다.

movelast 데이터셋의 현재 로우 위치를 마지막으로 이동한다.

movenext 데이터셋의 현재 로우 위치를 한단계 뒤 이동한다.

moveprev 데이터셋의 현재 로우 위치를 한단계 앞으로 이동한다.

setdata 데이터셋에 데이터를 저장한다.

cancelrowoperation 테이터셋의 특정 레코드의 동작을 취소한다.

cancelallrowoperation 테이터셋의 모든 레코드의 동작을 취소한다.


- 56 -

UI 서버(xdataset.jar) 관련 API 소개

UI 서버 관련 API 소개는 xdataset.jar 라이브러리에서 제공하는 API 에 대한 설명을 기술합니다.

오브젝트 함수 설명

xdataset

getScreenNo 화면 번호를 반환한다.

getTerminalIpAddress 클라이언트의 IP 주소를 반환한다.

getTransactionCode 트랜잭션 코드를 반환한다. (화면의 trancode 프라퍼티값)

getTransactionHeader 트랜잭션 헤더를 반환한다.(화면의 tranheader 프로퍼티값)

getTransactionMapId 트랜잭션 맵 ID 를 구한다.

getDataSetNames 데이터셋의 이름 리스트를 Vector 형식으로 반환한다.

getDataSetNamesArray 데이터셋의 이름 리스트를 String[] 형식으로 반환한다.

getColumnNames 데이터셋의 칼럼 이름 리스트를 Vector 형식으로 반환한다.

getColumnNamesArray 데이터셋의 컬럼 이름을 String[] 형식으로 반환한다.

getRecordCount 데이터셋의 레코드 개수를 반환한다.

getColumnCount 데이터셋의 칼럼 개수를 반환한다.

getData 데이터셋의 데이터를 반환한다.

getIntData 데이터셋의 값을 int 형 데이터로 반환한다.

getFloatData 데이터셋의 값을 float 형 데이터로 반환한다.

getDoubleData 데이터셋의 값을 double 형 데이터로 반환한다.

getLongData 데이터셋의 값을 long 형 데이터로 반환한다.

setData 데이터셋에 문자열 값을 저장한다.

setIntData 데이터셋에 int 형으로 값을 저장한다.

setFloatData 데이터셋에 float 형으로 값을 저장한다.

setDoubleData 데이터셋에 double 형으로 값을 저장한다.

setLongData 데이터셋에 long 형으로 값을 저장한다.

setColumnNames 데이터셋의 칼럼 이름을 설정한다.

getRecordKey UI 로부터 수신한 데이터셋의 특정 로우의 레코드키를 반환한다.

setRecordKey UI 로 송신할 데이터셋의 특정 로우의 레코드키를 설정한다.


- 57 -

getRecordType 데이터셋의 레코드 타입을 반환한다. (INSERT/DELETE/UPDATE 등등)

isInsertRecord 데이터셋의 레코드 타입이 Insert 인 지 여부를 반환한다.

isUpdateRecord 데이터셋의 레코드 타입이 Update 인 지 여부를 반환한다.

isDeleteRecord 데이터셋의 레코드 타입이 Delete 인 지 여부를 반환한다.

returnData 데이터셋에 저장된 데이터를 UI 로 송신한다.

returnPartData 현재까지 데이터셋에 저장된 데이터를 UI 로 송신한다. (First‐Row 방식)

setErrorMessage 에러 메시지 및 에러 코드를 설정한다.

getDataSetType 데이터셋의 입출력 속성을 반환한다.

setMessage 일반 메시지 및 코드 정보를 설정한다.

xdataset 개발 가이드 - xframe.co.kr 개발 환경 관련 소프트웨어 ... xdataset 데이터...

Documents