Contents GAUCE 개념 및 API 1-1 GAUCE 소개 1-2 GAUCE API 1-3 GAUCE Component

Presentation on theme: "Contents GAUCE 개념 및 API 1-1 GAUCE 소개 1-2 GAUCE API 1-3 GAUCE Component"— Presentation transcript:

1

2 Contents GAUCE 개념 및 API 1-1 GAUCE 소개 1-2 GAUCE API 1-3 GAUCE Component
2. GAUCE Insall 2-1 GAUCE Install 2-2 Install 후 작업사항 2-3 WAS별 참고사항 3. Web Builder 3-1 Web Builder 소개 3-2 Web Builder 환경설정 4. Report Builder 4-1 Report Builder 소개 4-2 Report Builder API 4-3 Report Builder 구성 5. GAUCE를 이용한 개발 5-1 실습 1-1 5-2 실습 1-2 5-3 실습 1-3 5-4 연습문제 1 5-5 연습문제 2 5-6 실습 2

3 GAUCE 개념 및 API

4 1. GAUCE 소개 GAUCE 란? GAUCE는 기존 Web 개발의 난점을 극복하기 위한 다양한 웹 Data Presentation Model 들을 Component 화하여 단순히 조회 기능만이 가능한 웹 리포팅툴의 한계를 뛰어넘는 입력, 수정, 삭제까지 가능한 완벽한 애플리케이션의 손쉬운 개발이 가능한 제품입니다. GAUCE는 분산 DB 환경에서 웹 브라우저를 통해 기업, 고객, 공급망 등 다양한 사용자가 다양한 방식으로 DB 에 접근, 웹 애플리케이션을 활용할 수 있도록 해주는 Enterprise Client Web 개발 플랫폼입니다. ◎ 인터넷이 널리 보급되면서 기존 업무 시스템이 웹 환경으로 급속히 전환되고 있다. GAUCE는 기존의 업무 시스템 뿐만 아니라 신규 시스템을 웹 환경으로 전환함에 있어 기존의 정적인 웹 페이지로 구현하지 못한 역동적인 트랜잭션 기능을 구현 가능하게 하며 최소의 개발 비용으로 업무 생산성과 효율성을 극대화 시켜주는 시스템 통합(SI) 솔루션이다. ◎ Server Performance를 지원하는 독창적인 DataSet Component와 다양한 Client 개발용 GUI Component들이 일원화된 환경으로 통합되어 있는 신개념 Component 기반의 웹 개발 및 운영 플랫폼입니다.

5 GAUCE System Architecture
◎ WAS 사용 시 - WAS의 상위 Layer에 위치하며, Component 와의 연동을 담당한다. ◎ WAS 비사용 시 - GAUCE는 Servlet Engine에 add on 되어 작동 ◎ 클라이언트 프로그램 - GAUCE Component는 HTML내에서 OBJECT Tag형식으로 선언하여 사용하고 이 HTML을 통해 서버와 통신한다. ◎ 서버 프로그램 - 비즈니스 로직 처리 : 자바 기반에서 사용하는 방법 사용 (EJB, 일반 JAVA BEAN, JSP, SERVLET 등) - GAUCE Component로 Data 전송 처리 : 비즈니스 로직 에서 처리하여 생성된 Data를 WAS(or Servlet Engine)에 add on 되어 있는 GAUCE library를 사용하여 클라이언트의 GAUCE Component에서 사용할 수 있도록 Data 구조를 만들어 클라이언트로 전송

6 GAUCE 개발환경 1. GAUCE 소개 Server 개발환경 Client 환경(개발자) User 환경(일반사용자)
Servlet 구동이 가능한 모든 Web Server Platform UNIX(HP-UX, AIX, Solaris, Digital 등), LINUX, Windows NT, 2000Server DBMS Oracle8.1.6이상, DB2, Informix, Sybase, SQL Server, MySQL 등 Web Server Netscape Ent. Server, Oracle Web Server, Apache Server, IIS WAS Apache-JServ, Jakarta-Tomcat, BEA-WebLogic, IBM-WebSphere. Sysbase-EAServer, Alliare-JRUN, HP-AP 등 Client 환경(개발자) OS Windows 2000 이상 CPU 최소 Pentium 166MHz, 권장 Pentium 400MHz 이상 Memeory 최소 128MB (256MB 이상 권장) 용량 11MB Web Browser InternetExplorer 5.5 (InternetExplorer 6.0 권장) User 환경(일반사용자) OS Windows 98SE, Windows ME, Windows 2000, Windows XP Web Server InternetExplorer 5.5 (InternetExplorer 6.0 권장) Memory Win 98 SE/ME : 최소 64MB (128MB 권장) Win 2000 : 최소 128MB (256MB 권장) 용량 8MB ◎ GAUCE의 구성 - GAUCE : WAS Server 또는 Web Server 등에 올려지며 기종에 관계없이 Servlet Engine 을 지원하는 곳에 GAUCE 를 Add on 한다.(서버 단에 위치함) - ADE Component :개발 PC와 Client PC에 설치되어야 한다. 서버 단의 Component는 .cab file 형식으로 설치한다. - Web Builder : 개발 PC에 설치한다. - Report Builder :개발 PC에 설치한다.

7 GAUCE Active Enterprise 채용시
GAUCE 는 Java 의 장점인 플랫폼 독립적인 시스템 구성과 Microsoft Active-X 의 장점인 역동적 사용자 환경 (UI : User Interface)이 조합된 최상의 M.V.C 모델을 지원합니다. 구분 기존 방식 GAUCE Active Enterprise 채용시 View HTML, Applet HTML / ActiveX Component / Applet Control JSP / Servlet/ASP 일반 방식과 동일 Model EJB ◎ View : Data 를 사용자에게 보여주기 위한 기능요소 ◎ Control : Business Logic 에 따라 Data 를 변환 / 가공하기 위한 기능 요소 ◎ Model : Data 의 원천으로 DB 와 상호작용하며 Data 를 관리하는 기능 요소 ◎ GAUCE에서는 View와 Control부분이 완벽하게 분리되어 있으므로 Control 부분의 코딩에서는 View단의 Source가 포함되어서는 안된다. (화면이 표현된 JSP/ Servlet은 Business logic부분과 같이 사용되어서는 안되며 화면 JSP/Servlet과 Business logic JSP/Servlet은 따로 작성한다.)

8 GAUCE 지원방식 1. GAUCE 소개 DataSet Data Transfer HTML http Servlet Engine
WAS Servlet Engine Web Browser ◎ GAUCE의 지원방식 - Client : 웹 브라우저를 사용하는 Client는 일반적인 Web Page와 동일하게 순수 HTML이나, DHTML, JSP, Servlet등 현재 Web에서 사용 가능한 대부분의 방식을 이용하여 Web Page를 생성할 수 있으며, Web Page 내에 ActiveX Component를 embedded 시킴으로써 Client의 개발은 완성된다. 이때 ActiveX component는 Data를 송수신할 서버측 Object에 대한 정보를 부여 받게 된다. - Server : 서버측에서는 일반적인 Java 프로그램에서의 개발과는 달리, Client의 ActiveX 로 부터 호출되는 서버 Object는 화면의 HTML 구성에 대한 정보를 관리하지 않으며, 단지 ActiveX component의 행동양식과 Business logic을 담당하게 된다. Client와 Server 사이의 데이터는 일반적인 프로그램에서 HTTP 프로토콜을 이용하여 Record한 건 단위로 서버 Object를 호출하는 것과는 달리, ActiveX component에 서는 buffering 되었던 여러 개의 record를 각각의 transaction type과 함께 data tunneling 기법을 이용하여 한꺼번에 전송되며, 서버 object는 각각의 transaction type에 따라 입력, 수정, 삭제를 동시에 처리하는 효율적인 개발이 이루어질 수 있다. - 이 처리 과정내부에 적절한 Data의 표현을 위한 Grid, Chart, Graph, Web Report 생성을 위한 Component 기반의 개발툴을 내장 시키는 경우에는 기존 시스템 자원을 그대로 활용할 수 있으므로 Web Application Server나 JDBC, EJB등 기존 시스템 구조상의 변동은 유발시키지 않으면서도 최적의 개발생산성이 가능해지는 것이다. Grid,Tree-View Chart Report Excel Export

9 GAUCE 서버 서비스 동작 구조 (GAUCE Container)
◎ Service Pool - 한번 사용한 GAUCE 서비스 객체를 POOL에 반납하여 향후 재 사용함으로써 새로운 서비스 객체 생성으로 초래되는 오버헤드를 감소시키고 서버의 처리속도를 향상시킨다. ◎ Context Pool - 업무 Domain별 Context를 서비스 호출마다 생성하지 않고 한번 생성된 Context를 POOL로 관리함으로써 Context를 생성하는 오버헤드를 감소시키고 Context관리를 효율적으로 할 수 있다. ◎ Connection Pool - DataBase에 대한 Connection을 지정된 개수만큼 생성하여 POOL로 관리함으로써 DataBase 접속 시 초래하는 오버헤드를 감소시키고 처리속도를 향상시켜준다. ◎ GAUCEService가 생성되는 과정 ① 서비스 로더(ServiceLoader)는 서비스 pool에서 가용한 GAUCEService를 가져온다. 만약 서비스 pool에 가용한 GAUCEService가 없을 경우 서비스 로더는 새로운 GAUCEService를 생성한다. ② 서비스 로더는 컨테이너에 있는 LifeCycleManager를 통해 서비스에 대한 LifeCycle을 얻어온다. ③ LifeCycle을 얻어온 다음 서비스 로더는 LifeCycle을 시작(start)시킨다. ④ 서비스에 대한 LifeCycle이 시작되면 먼저 Context의 변경이 있는지 조사하기 위해서 환경파일 (gauce.properties)의 변경여부를 조사한다. 만약 환경파일의 변경이 없을 경우 서비스 로더는 Context Pool에 있는 Context를 얻어와서 가용한 서비스를 만든 후 반환한다. ⑤ 만약 환경파일이 변경되었다면 LifeCycleManager로 하여금 Context를 Refresh 하도록 명령한다. ⑥ LifeCycleManager 는 파일 시스템 상에 존재하는 물리적 환경파일(gauce.properties)을 GAUCEProperties 객체로 변경한 후 Context Pool에 있는 기존의 Context를 새로운 정보가 반영되도록 한다. ⑦ 서비스 로더는 Context Pool에 있는 Context를 얻어와서 가용한 서비스로 만든다. ⑧ 이렇게 생성된 GAUCEService는 ServiceLoader의 newService 메소드를 통해 반환된다.

10 GAUCE API – Select(1) 2. GAUCE API ◎ ServiceLoader
- GAUCE 서버에서 서비스를 제공하기 위해 사용 가능한 GauceService를 관리하며 필요한 서비스가 없을 경우 GauceService객체를 생성한다. ◎ GauceService - GAUCE의 서비스를 나타낸다. Component와 서버의 통신에 필요한 객체(GauceDataSet, GauceRequest, GauceResponse)를 관리한다. ◎ Context - GAUCE 서버에서 서비스를 할 때 업무 도메인(Domain, 영역)별 환경 정보를 관리 하는 것이다. ◎ Logger - GAUCE Engine에 관한 정보를 남기는 메시지 log, 프로그램실행 시 발생되는 오류의 기록을 남기는 오류 log, 디버깅 용으로 기록을 남기는 디버거 log를 관리 하는 객체로 GauceContext에서 얻어올 수 있다.

11 GAUCE API – Select(2) 2. GAUCE API ◎ GauceDataSet
- Component와 GAUCE 서버간에 전송되는 자료의 저장공간을 나타낸다. GauceDataSet의 구조는 일반 DataBase의 테이블 개념과 유사하다. ◎ GauceDataSet Header Create - GauceDataSet에 자료를 저장하기 위해서 컬럼 정보를 설정하는 작업이다. ◎ addDataRow - 컬럼 정보가 생성되고 각 컬럼별로 자료를 저장해서 하나의 행이 완성되면 완성된 행을 GauceDataSet에 등록시켜야 하는데 그 때 사용되어진다. ◎ GauceDataRow (Select) - Component로 전송할 자료들을 GauceDataRow의 각 칼럼에 저장한다. GauceDataRow의 성격 중 TB_JOB_NORMAL 타입을 사용한다. ◎ GauceRequest - GauceService를 통해 얻어진다. Component에서 요청되는 Request객체를 나타내며 Component로부터 전송된 여러 가지 정보를 얻어낼 수 있다. ◎ GauceResponse - GAUCE 서버에서 생성된 GauceDataSet의 자료를 Component로 전송하기 위한 Response객체이다. ◎ GauceDataSet Flush - 현재 GauceDataSet에 저장되어 있으며 아직 Component로 송신되지 않은 GauceDataRow를 Component로 전송한다. ◎ GauceResponse Flush - Buffer에 남은 Packet을 Component로 전송하고 Buffer를 비운다 ◎ Commit - GAUCE 서비스의 작업 종료를 의미한다.

12 GAUCE API - Transaction
◎ ServiceLoader - GAUCE 서버에서 서비스를 제공하기 위해 사용 가능한 GauceService를 관리하며 필요한 서비스가 없을 경우 GauceEService객체를 생성한다. ◎ GauceService - GAUCE의 서비스를 나타낸다. Component와 서버의 통신에 필요한 객체(GauceDataSet, GauceRequest, GauceResponse)를 관리한다. ◎ Context - GAUCE 서버에서 서비스를 할 때 업무 도메인(Domain, 영역)별 환경 정보를 관리 하는 것이다. ◎ Logger - GAUCE Engine에 관한 정보를 남기는 메시지 log, 프로그램실행 시 발생되는 오류의 기록을 남기는 오류 log, 디버깅 용으로 기록을 남기는 디버거 log를 관리 하는 객체로 GauceContext에서 얻어올 수 있다. ◎ GauceDataRow (Transaction) - Component로부터 전송받은 자료들을 GauceDataRow의 각 칼럼에 저장한다. GauceDataRow는 성격에 따라 네 가지 즉 TB_JOB_NORMAL,TB_JOB_INSERT,TB_JOB_DELTE,TB_JOB_UPDATE 속성으로 분류 된다. ◎ GauceResponse Commit - GAUCE 서비스의 작업 종료를 의미하며 오류정보와 메시지를 Component로 보낼 수 있다.

13 개발 Component ; ADE Components -1
3. GAUCE Component 개발 Component ; ADE Components -1 Non-Visual Component DataSet : GAUCE 서버와 접속하여 Data 연계 및 버퍼링 역할을 담당하는 Component TR : 여러 DataSet을 연결할 수 있으며 Data의 입력, 수정, 삭제 기능을 제공 Bind : 일반 Component와 연결되어 DataSet의 자료를 변경하고, 읽어오는 기능을 하는 Component Report : Report Builder를 이용하여 design한 양식에 맞게 DataSet의 자료를 Web상에서 출력 ImageDataset : 이미지 Data를 서버에서 가져와 특정Component에서 사용할 수 있도록 하는 Component Visual Component Grid :동일한 유형의 연속된 자료를 표 형태로 표현하고 입력, 수정, 삭제가 가능하도록 함 TreeView : 트리 형태로 DataSet의 자료를 계층적으로 표현 XChart : 통계 Data를 다양한 형태의 그래프로 표현. EMEdit : 날자, 주민번호, 금액 등 포맷에 맞는 Data 입력, 출력이 가능한 포맷 마스크제공 Menu : 윈도우 메뉴와 같이 메뉴를 표현 LuxeCombo : 기존 code콤보의 단점인 Code와 Data 두개의 컬럼만을 지정할 수 있다는 한계를 멀티 컬럼의 형태로 확장시킨 구조를 갖고 있는 Component TextArea : 여러 줄의 문자열을 보여주며 DataSet의 Long Type 자료를 표현. Radio : 상호 배타적인 선택사항을 보여주는 토글버튼 표현 및 기능 수행 Tab : HTML의 DIV를 변경하여 색인화된 표의 형태로 화면을 제어할 수 있는 기능을 제공 기타 InputFile : 파일 저장 다이얼로그 박스 제공으로 서버로 자료 업 로드시 파일 지정기능 수행 ◎ Non-Visual Component - 정의는 되어 있으나 브라우저 상에서 표현되지 않는 Component이다. ◎ Visual Component - 페이지에 정의된 DataSet 과의 연동을 통해 Data를 표현하는 Component로 브라우저 상에서 확인 가능하다. - DataSet과 연결하지 않으면 Data값을 확인할 수 없고 단지 Design된 Visual Component만 표현된다. ◎ DataSet (필수 Component) - ADE Component중 가장 중요한 Component로 브라우저 상에는 표현되지 않는 Non-Vaisual Component 다. - Data 를 저장하는 Buffer의 역할을 하며 서버모듈을 통해 전달된 모든 Data를 DataSet Component가 지니게 된다. - DataSet의 DataID라는 속성을 통해 해당 서버모듈과 연결할 수 있으며 사용형식은 DataSet ID.DataID = “서비스가 위치하는 URL”을 지정함으로써 해당 서비스가 보내는 모든 Data를 저장한다. - 위의 형식으로 받은 Data는 Visual Component 를 통해 표현된다. ◎ ADE Component와 HTML Component - GAUCE가 제공하는 Component(ADE Component)는 DataSet과의 연결을 통해 Data를 표현한다. - 하지만 일반 Component(HTML Component)는 DataSet과 연결하는 DataID 속성을 가지고 있지 않으며 따라서 DataSet 을 통해 Data를 표현하는 기능을 가지고 있지 않다. - 일반 Component와 비슷한 기능을 하지만 DataSet과의 연동이 가능한 ADE Component는 LuxeCombo, Radio, TextArea가 있다.

14 개발 Component ; ADE Components -2
3. GAUCE Component 개발 Component ; ADE Components -2 EMEdit Menu Grid Report TreeView ◎ EMEdit : input 박스와 같은 형태를 가지고 있지만 EMEdit는 날짜, 사원번호, 금액 또는 각종 Format이 지정된 Code의 입력이나 출력에 사용한다. XChart

15 개발 Component ; ADE Components -3
3. GAUCE Component 개발 Component ; ADE Components -3 MENU LuxeCombo GRID Tab EMEdit Report

16 GAUCE 설치

17 GAUCE Install 작업 -1 1. GAUCE Install 1 2 4 3
① gauce를 Install 하고자 하는 Directory를 생성한다. (임의의 Directory 생성!) - GAUCE Install시 자동으로 Directory 를 생성하기 때문에 이 작업은 필수 사항은 아니다. ② gauce Directory로 이동한다. ③ CD-ROM에 있는 pkg 확장자 파일을 Directory로 복사하거나 FTP를 이용해서 복사한다. - 이 작업은 CD-ROM에서 직접 Install 될 경우 수행하지 않아도 된다. ④ GAUCE.pkg 파일을 –jar 옵션을 사용하여 실행한다.

18 GAUCE Install 작업 -2 1. GAUCE Install 4 1 2 3
① GAUCE를 Install할 Directory를 지정한다. 그러면 License 입력하는 메시지가 나온다. ② License Key를 입력하면 입력한 사항이 정확한지 확인하는 메시지가 나온다. - License Key 즉 시리얼 번호는 GAUCE 구입시 발행되는 시리얼 번호를 입력하면 되며 시리얼 번호는 설치 후 변경이 가능하므로 임의의 값을 넣어도 된다. ③ y(yes) 를 입력 하면 처리 결과가 나오며 설치가 완료된다. ④ Directory가 생성되었는지 확인한다. - 위의 단계가 종료되면 정상 설치가 되었다. 3

19 Install Directory 1. GAUCE Install config GAUCE property 파일
내 용 config GAUCE property 파일 -builder.properties : Web Builder의 속성을 지정해주는 파일로 Group의 환경을 지정해 준다. -gauce.properties : GAUCE에서 사용되는 다양한 속성값 들을 지정해 주는 파일이다. (protocol, charset, firstrow, DB Connection…) -Context 관련 파일 doc GAUCE API 관련문서 (Html 파일) lib GAUCE Class Library 파일 license License Key 파일 log GAUCE Log 파일 (error, debug, message) sample GAUCE sample 관련 파일 (Html, JSP) ◎ Sample - blob : Blob Type과 관련된 sample.(Image) - chart : chart와 관련된 sample이 위치하고 있으며 Line, Bar, Pie, Dual에 관한 예제를 볼수있음.(Xchart에 대한 sample은 아님.) - etc : GAUCE가 제공하는 Radio, Tab, InputFile, TextArea에 관련한 html 파일이 위치. - firstrow : firstrow sample 위치. - gaucelet : servlet을 이용한 서비스와 html파일이 위치. - grid : select, transaction등 grid 관련 예제가 포함. - image : sample Directory에서 사용된 image 존재. - m-d : Master/Detail 관련예제 위치. - report : report의 간단한 예제부터 chart를 포함한 예제들이 존재. - select : 기본 조회성 서비스를 보여주는 예제가 위치. - tr : 입력작업 뿐만 아니라 tr을 이용한 조회작업에 대한 예제도 확인 가능.

20 Install 후 Client 작업사항 -Component
1. Installer.exe 실행 배포된 CD의 Component 설치 파일이 있는 위치로 이동 후 Installer.exe를 실행한다. 2. 설치 Install 버튼을 Click하면 설치가 되며 만약 열려있는 Browser가 있으면 종료하라는 message 창이 뜬다. 3. 설치 종료 Component가 완료되면 GAUCE가 제공하는 sample을 실행시켜 Data와 화면이 제대로 실행되는지 확인한다. ◎ 주의사항 : 설치 시 Web Browser를 반드시 종료 하여야 한다. ◎ Local PC에 설치된 Component를 확인하려면 C:\WINNT\Downloaded Program Files(Win2000기준) 폴더를 열어 ToinbW로 시작하는 파일 이름들이 존재하는지를 확인한다. ◎ Component가 제대로 설치되지 않았을 때는 기존의 Component를 삭제하고 다시 설치한다. ※ ToinbW로 시작하지 않은 파일 - Xchart, DataExport, LuxeWCombo로 설치된다.

21 Install후 작업사항 2. Install 후 작업사항 CLASSPATH에 lib Directory를 추가한다.
Servlet Engine을 다시 구동한다. 정상적으로 설치가 되었는지 확인하다. 1. CLASSPATH에 lib 절대경로(Full path)를 등록한다. - CLASSPATH 수정 시 servlet 또는 JDBC Driver 부분의 class도 등록해 주어야 한다. <수정전> Ex) window용 Apache Tomcat 4.0 의 경우 bin Directory의 catalina.bat 파일을 수정 한다. set CLASSPATH=%CLASSPATH%;%CATALINA_HOME%\bin\bootstrap.jar <수정후> set CLASSPATH=%CLASSPATH%;%CATALINA_HOME%\bin\bootstrap.jar; C:\GAUCE\lib;C:\Tomcat\common\lib\servlet.jar;C:\Tomcat\common\lib\classes12.jar - lib 밑의 파일들을 jar 파일로 묶었을 경우 이 파일을 WAS(or Servlet Engine)별로 jar를 import하는 Directory에 등록한다. - CLASSPATH가 존재하지 않는 WAS나 Servlet Engine의 경우에는 lib밑의 화일들을 jar 파일로 묶어 jar파일을 인식할 수 있는 곳에 위치시킨다. Ex) C:\Tomcat\common\lib 에 GAUCE30.jar를 위치시킴 (window용 Apache Tomcat 4.0기준) 2. bin Directory에 있는 start 파일을 이용하여 Servlet 엔진을 재 구동한다. 3. GAUCE 설치 Directory에서 제공하는 sample을 확인하기 위한 작업 - GAUCE가 정상적으로 설치 되었는지를 확인할 수 있다. ① sample Directory를 웹 서비스가 가능한 장소로 옮긴다. ② sample Directory 내의 treeview.jsp파일을 열어 session 설정부분의 Directory 경로를 GAUCE sample이 위치한 절대경로로 잡아준다. Ex) session.setAttribute("dir", “C:\\ Tomcat \\webapps\\ROOT\\sample\\"); ③ Browser에서 전체 sample의 실행결과를 확인할 수 있다.

22 WAS&Servlet Engine별 참고사항
WebLogic Class Path File명 Release / Version WebLogic을 기동시키는 bat(.sh) File bat(.sh) File의 CLASSPATH 부분에 GAUCE에서 사용하는 lib 경로를 추가 설정한다. WebSphere Class Path File명 Release / Version Admin.config Admin.config File내 com.ibm.ejs.sm.adminserver.classpath 부분에 GAUCE lib 경로를 추가 설정한다. JEUS Class Path File명 Release / Version Localproperties Localproperties File안에 USER.CLASSPATH 부분에 GAUCE에서 사용하는 lib 경로를 추가 설정한다. ORACLE(OSDK) Class Path File명 Release / Version Class 설정 File (.profile, shell) CLASSPATH부분에 GAUCE에서 사용하는 lib 경로를 추가 설정한다. Tomcat Class Path File명 Release / Version catalina.bat catalina.bat File안에 USER.CLASSPATH 부분에 GAUCE에서 사용하는 lib 경로를 추가 설정한다. ◎ CLASSPATH부분 설정은 각 서버 운영자의 관리방법에 따라 Setting해 주는 부분이 다를 수 있다. ◎ GAUCE에 대한 PATH를 추가하고자 할 경우 먼저 해당하는 WAS(or Servlet Engine)의 CLASSPATH 위치를 먼저 파악해야 한다. ◎ CLASSPATH 경로를 사용하지 않는 WAS(or Servlet Engine)의 경우에는 lib밑의 내용들을 jar 파일로 묶어 해당 WAS(or Servlet Engine)가 jar파일을 인식하는 곳에 위치시킨다. ※ 주의 사항 : 모든 WAS (or Servlet Engine) 의 설정이 끝나면 반드시 WAS를 재가동 시켜야 한다. JRUN Class Path File명 Release / Version Localproperties Localproperties File안에 USER.CLASSPATH 부분에 GAUCE에서 사용하는 lib 경로를 추가 설정한다.

23 Web Builder

24 ADE designer ; Dynamic Web Builder
UI (User Interface) 개발 기능성을 극대화한 Component 기반의 전용 Web Client designer 1 4 ① Tool Box : 다양한 방식의 Data 표현을 위한 ADE Component Set ② HTML 구성요소를 배치하여 작업하는 design창 ③ design 창에서 작업한 내용을 HTML 문서화한 Source 창 ④ Property 페이지 개별 Component의 속성 부여 (Component에 Rbutton 적용 시 나타나는 창) 2 3

25 Web Builder 화면 -1 1. Web Builder 소개 4 1 5 2 3 ◎ Web Builder 기본화면
① Html를 design하는 화면 ② GAUCE 에서 사용하는 ADE Component, 일반 Component들을 쉽게 사용할 수 있으며 추가 가능하다. ③ Source : design한 Html Source를 확인할 수 있으며 ADE Component의 이벤트, 일반 범용적인 script 작성이 가능하다. ④ Tool이 제공하는 메뉴로 구성되어 있다. ⑤ Design 창에서 객체를 선택하면 그 객체에 대한 속성을 변경할 수 있는 정보를 표시하는 창이다. 표시되는 내용은 객체마다 다양하며 카테고리별로 그룹화 되어있다. 3

26 Web Builder 화면 -2 1. Web Builder 소개 1 2 3 ◎ Source
- Design 창에서 작업한 내용을 HTML 문서로 생성하며 Source 창을 통하여 code를 확인하고 수정할 수 있다. ① HTML Outline : HTML문서의 계층구조를 보여준다. ② Script Outline : HTML과 객체의 이벤트 목록을 보여주고 code 생성을 도와준다. 생성 유무는 font의 굵기로 표시된다. ③ 선택된 객체(component)의 이벤트에 대한 스크립트를 생성하기 위해서 Double Click하면 관련된 기본 JavaScript code가 생성된다.

27 Web Builder 환경설정 -1 2. Web Builder 환경설정 2 3 4 5 6 1
① GAUCE설치 directory 의 config directory 에 있는 builder.properties를 편집도구로 연다. - Web Builder로 호출하고자 하는 서비스가 있는 directory를 설정한다. - 실제로 Web Builder 에서 호출할 서비스가 존재하는 directory 가 D:\gauceSample\sample30라면, 그룹이름을 임의로 “sample”과 같은 식으로 정하고 다음과 같이 builder.properties에 설정한다. - Ex) sample=D:\\gauceSample\\sample30 - 주의 : builder.properties에 설정할 때는 directory 구분자를 추가하여 반드시 두개로 하도록 한다. ② Service Set  Information Tab  Configuration 를 선택하면 Configuration 입력 창이 나타나며, 이때 서버의 GAUCE Group을 등록한다. ③ Group Name :builder.properties에서 지정했던 그룹이름(이 예제에서는 sample)을 입력한다. ④ URL Address : 실제로 서비스를 호출할 때, 사용되는 URL 중 Domain 혹은 IP와 port번호까지만 입력한다.(Directory들은 입력하지 않는다.) ⑤ JSP Path : builder.properties에서 설정한 최하위 Directory 의 바로 상위 Directory 의 웹 서버상의 Alias를 적는다. - 이것은 builder.properties에는 물리적인 실제 패스가 기록되어 있지만, Web Builder 에서는 URL로 서비스를 찾는 차이점이 있기 때문이다. ⑥ Servlet Path : JSP Path + Servlet Invoke Name(이를테면, servlet 혹은 servlets)를 입력한다.

28 Web Builder 환경설정 -2 2. Web Builder 환경설정
◎ 결론적으로 Web Builder에서 GAUCE 서비스를 ServiceSet으로 호출하여 사용하려면, builder.properties와 Web Builder의 ServiceSet Configuration탭에서 각각의 입력 항목들이 다음과 같이 조합되어야 한다. - 서비스가 실제로 존재하는 곳 : D:\gauceSample\sample30\sample.jsp - Web Builder의 configuration탭의 입력 항목들 중 [URL Address] + [JSP Path] + [builder.properties에서 설정한 실제 Directory의 최하위 Directory] 로 조립하였을 때, 이 서비스를 Web Browser로 호출할 때 사용되는 URL은 로 조립되면 된다. ◎ 따라서 본 예제에서는 localhost: gauce + sample30 으로 조립되도록 builder.properties와 Web Builder 의 configuration탭을 조정하여 설정한다. ◎ 그룹을 추가하고자 하면, builder.properties에 그룹을 추가하고 Web Builder에서 위와 같은 과정으로 새로운 그룹을 설정하여 주면 된다. 그룹의 추가에 제한은 없으며, GAUCE 서비스가 Web Browser 상에서 호출이 가능한 상태라면, 모두 Web Builder에서 호출할 수 있다. ※ Web Builder로 GAUCE 서비스를 호출하기 위해서는 Web Builder에서 서비스를 호출하기 전에 완성된 서비스(JSP/Servlet)로 작성되어 있어야 한다.

29 Report Builder

30 Report designer; Dynamic Report Builder
Web Reporting 개발 가능성을 극대화한 시각적 Web Report designer 1 2 6 5 4 ① 박스, 칼럼, 계산, 그림, 선, 글상자, SubType 등의 컨트롤 옵션 제공 ② Header, Footer 등의 Band 형태의 시각적 design 환경 제공 ③ Object들의 정렬기능 ④ 용지, 정렬, 스타일, font, 넓이, 칼라, Directory 설정 등 다양한 설정 옵션 ⑤ Report 다이얼로그를 통한 출력 전 이미지 확인 ⑥ Source보기를 통해 현재 편집된 문서의 Source code 확인 3

31 Report Builder 화면 -General
Report Component에서 사용되는 스크립트를 생성해주는 저작도구 1 2 3 4 5 6 7 8 ◎ 일반적인 Report를 작성할 수 있는 Type ① FHeader : 첫 장의 헤더를 다르게 하고자 할 경우 사용한다. ② Header : 프린트 될 용지의 맨 위에 출력되는 부분이다. ③ DHeader : 매 페이지마다 Default band영역 위에 출력되는 부분으로 Band의 특성상 Default Band 에서 표현되는 Data 값의 헤더정보나 Image 또는 Chart를 표현하고자 할 때 주로 사용된다. ④ Default : 실제 Data가 출력되는 Band로 여러 Row가 있을 때 반복하여 출력되는 부분이다. 이 Band에서 출력되는 Data는 ReportComponent의 DetailDataID에 연결된 DataSet의 자료를 이용하여 표현된다. ⑤ DFooter : 매 페이지마다 Default Band영역 맨 아래에 출력되는 부분이다. (Data의 길이에 따라 위치가 이동됨) ⑥ LDFooter : 마지막페이지의 Default Band영역 맨 아래에 출력되는 부분이다. ⑦ Tail : 맨 마지막페이지에서 출력되는 부분으로 LDFooter 아래 출력된다. ⑧ Footer : 매 페이지 하단에 출력되는 부분으로 Data의 길이에 의해 위치가 이동되지 않으며 페이지의 하단에 고정적으로 출력된다. ◎ DetailDataID - Report의 Default, 추가된 Band(추가되는 Band는 Default Band의 특성을 갖는다)등에서 사용될 Data를 제공할 DataSetID를 기술한다. - DataSet의 row count 만큼 출력된다. ◎ MasterDataID - Report의 Header, Footer등(Default Band를 제외한 Band)에서 사용될 Data를 제공할 DataSetID를 기술한다. - 첫번째 Record에 있는 값만 출력할 수 있다.

32 Report Builder 화면 -Composite
◎ SubType을 사용하는 Report를 design할 때 사용하는 Type. - General Type의 Band 중 FHeader, Header, Tail, Footer의 Band로 구성되어 있으며 General Type에서 존재하지 않았던 Area Band가 추가된다. - Area : SubType으로 생성된 파일(.sbt)을 Insert 하여 사용한다. 여러 개의 SubType을 하나의 Area에서 사용가능하며 Add Area를 통하여 Area Band가 추가 가능하다. (Area2, Area3,…….)

33 Report Builder 화면 -Subtype
◎ SubReport 형식으로 Composite에 포함되어 사용되는 Report를 design할 때 사용한다. - General Type의 Band 중 DHeader, Default, DFooter, LDFooter의 Band로 구성되어 있다. - 따라서 SubType 만으로 완벽한 Report형태를 만들 수 없으므로 SubType으로 만든 파일은 Composite Type의 Area에 Insert 되어 사용된다. - SubType에 존재하는 Band의 역할은 General Type과 동일하다.

34 Report Builder 화면 -General(예제)
출력화면 design 화면 ◎ design 화면 - 각 Band별로 design한 화면이다. ◎ 출력화면 - Dynamic Report Builder에서 design된 결과에 대한 Source를 ViewSource View에서 확인할 수 있으며 이 Source는 Report Component의 Format부분에 Setting된다. - Report Component의 DetailDataID는 Default에서 표현될 Data를 가지고 있는 DataSetID 를 지정해 주어야 한다. - 각 Band의 특성에 맞게 출력화면이 구성되었음을 확인할 수 있다.

35 Report Builder 화면 –Composite(예제 )
출력 화면 SubType 화면 Composite 화면 1 2 3 ◎ 위의 출력화면과 같은 형식을 얻기 위해서는 SubType과 Composite Type을 이용한다. ◎ SubType ① emp_nm, emp_no, dept_nm의 Data를 출력하기 위해 default Band에 컬럼을 위치 시킨다. ② yyyy, result_amt 컬럼을 이용하여 년도와 매출액 Data를 출력하기 위해 design 한다. ③ 메뉴의 Insert  Picture를 사용하여 적절한 크기를 잡아준 후 Property 속성에서 Type을 Chart로 설정하고 Chart Component의 ID 값을 ID에 Setting한다. ◎ Composite 화면 - SubType을 Composite Type에서 사용하기 위해서 Area Band에 생성된 SubType의 파일을 Insert(InsertSubType) 시킨다.(①, ②를 Insert) - ③은 Area를 추가한 후 Insert 되었다. - 각각의 SubType은 Property 속성에서, 표현될 Data를 가지고 있는 DataSet을 설정해 주어야 한다. (MasterDataID, DetailDataID) ※ Html Source상에서 Report Builder로 Design을 가져오는 방법 - Html Source상에서 Report Component의 Format부분의 Source를 Copy하여 Report Builder 의 Source View에 붙여넣으면 Format에 해당하는 Design을 Report Builder에서 볼 수 있다. - Composite type을 이용하여 Report Component의 Format을 완성했다면 실제 Html Source상 에서 Report Builder로 다시 Design을 가져오려 할 때에는 확인하고자 하는 Local PC에 Composite에 포함되어 있는 SubType(.sbt)이 지정된 장소에 위치해 있어야만 한다. (SetOptionSubType에서 지정한 Directory)

36 Report Builder 툴바 설명 3. Report Builder 의 구성 새파일 저장 미리보기 잠금 컬럼 이미지 텍스트
2 4 6 8 10 새파일 저장 미리보기 잠금 컬럼 이미지 텍스트 Subtype 용지설정 화면비율설정 열기 도움말 글상자 계산컬럼 선 밴드 추가 Area 추가 1 3 5 7 9 1 5 7 3 ① 테두리를 선을 사용하지 않고 그리고 싶을 경우 사용한다. - 스타일, 두께, 테두리 색상, 배경색상, SuppressLevel1)을 설정한다. ② MasterDataID, DetailDataID에 연결된 DataSet의 Data를 바인딩 시켜 표현하고자 할 때 사용한다. - 일반, 글꼴, 테두리, 마스크, SuppressLevel을 설정한다. ③ Avg, Sum, Count, Min, Max를 값을 출력 할 때 사용한다. - 일반 속성을 제외한 다른 속성은 컬럼과 같다. ④ 그림이나 Chart를 출력하고자 할 때 사용한다. - 그림(또는 Chart), 테두리, Suppress별 속성을 설정한다. ⑤ 선을 그릴 때 사용 - 펜, SuppressLevel 속성을 설정한다. ⑥ 일반 text 와 같은 기능을 한다. - 일반, 글꼴, 테두리, Suppress별 속성을 설정한다. ⑦ Band name to be added (Band 추가) - FHeader, Header, Dheader, Default(기본 Default Band ),Dfooter, Tail, Footer는 추가(삭제)를 할 수 없다. ⑧ 용지설정 ( 설정 메뉴의 용지설정) - 용지크기 설정 - 용지 방향 설정 : 가로 세로 - 여백 설정 : 왼쪽, 위쪽 주1) - Suppress기능을 사용할 때 suppress level을 지정한다. - Suppress 기능이란 기준되는 Column의 값이 연속하여 동일할 때 반복하여 출력하지 않고 해당 값의 최초 출력 시에만 한번 출력하는 기능을 말한다. - Suppress Level은 상위로 올라갈수록 큰 값을 지정하며, 2개 이상의 Column에 같은 값을 지정하면 지정한 Column들을 기준으로 함께 Suppress를 처리한다. 10 4 2

37 Report Builder의 Option
1 5 3 ◎ Option Dialog Box(Set → Option) : 출력물의 기본값을 설정하는 대화상자. ① General : 정렬 (왼쪽, 중앙, 오른쪽), Band 값 사용, 수평 마진 ② Font : 글꼴, 스타일, 크기, Italic, Underline ③ Pen : 스타일, 두께 ④ Border : 스타일, 두께 ⑤ Color : 글꼴 색깔, 배경색깔, 펜 색깔, 테두리 색깔 ⑥ Subtype : 작업 Directory로 Subtype 파일이 저장되는 경로명을 지정해준다. 2 4 6

38 Report Builder의 Set Grid
1 ◎ Set Grid Dialog Box(Set → Set Grid) ① 그리드의 사용 여부 Setting 및 그리드 간격 설정. ② Font : 글꼴, 스타일, 크기, Italic, Underline

39 Report Builder의 Align 3. Report Builder 의 구성 1 2 3
◎ 해당 Object들의 정렬기능 (Align) Ex) - 정렬하고자 하는 Object를 선택한다.(②와 같은 방법으로..) - ① 메뉴 또는 ③의 단축 아이콘을 사용하여 지정하고자 하는 align 기능을 줄 수 있다. 3

40 Report Builder의 Source View
1 ◎ Report Builder의 Tag Source 보기 ① View  Source View 를 선택하면 Report Builder에서 design한 문서의 Source code를 확인할 수 있다. ② Copy to Clipboard 또는 마우스 선택 등의 방법으로 Source를 복사하여 Report Component의 Format탭에 붙여주고 표현할 Data를 가지고 있는 DataSet을 연결하면 결과 값을 확인할 수 있다. 2

41 GAUCE 를 이용한 개발

42 목표 : 사원정보 조회 화면을 만든다. 실습 - 1 업무정의(Table정의,화면정의)
1. 실습 1-1 실습 - 1 목표 : 사원정보 조회 화면을 만든다. 업무정의(Table정의,화면정의) Service 생성(JSP/Servlet) HTML작성 (Web Builder) 1.실습목표 - Script를 이용하여 사원정보 조회 화면을 만든다. - Client단의 화면은(Html) Web Builder로 구성한다. - DataSet, Grid, LuxeCombo Component 활용을 습득한다.

43 실행결과 1. 실습 1-1 1-1. 실행결과 화면 ▶ 사원명, 직급명을 검색조건으로 조회하는 화면이다.
① jsp /servlet으로 서비스를 생성한다. - Argument로 사원명과 직급코드를 받는 Select Type Service 생성 ② Web Builder로 화면을 design한다. - Service(jsp/servlet) 와 DataSet Component 연결(DataSet의 DataID속성) - 조회된 Data를 Display시 Grid Component 사용 - 조회 조건을 입력할 Text Object사용 - 직급 명을 조회조건으로 사용하기 위해 LuxeCombo 사용 - Report 형식을 사용하기 위해 Report Component 사용 - Search 버튼으로 사용할 Image사용 - Grid에 표현된 Data를 Excel로 표현하는데 사용할 Image 사용 - Report를 확인하기 위해 Image 사용 ③ Browser를 통해 HTML을 실행한다. - 조회된 Data가 없는 경우에는 Message를 띄운다.

44 Table 정의 1. 실습 1-1 TB_EMP_INFO1 TB_GRADE TB_LEVEL TB_DEPT
EMP_NO (8) - 사원번호 GRADE_CD (2) - 직급code EMP_NM (20) - 사원명 DEPT_CD (5) - 부서code LEVEL_CD (1) - 기술등급code BIRTH_DATE (8) - 생년월일 TB_GRADE GRADE_CD (2) - 직급code GRADE_NM (20) - 직급명 TB_LEVEL TB_DEPT S_LEVEL_CD (1) - 기술등급code S_LEVEL_NM (20) - 기술등급명 DEPT_CD (5) – 부서code DEPT_NM (20) - 부서명 PRNT_CD (5) - 부모 부서code 1-2. Table정의 - 사원번호,사원명,기술등급,생년월일 Data조회 - 직급명 조회(TB_GRADE Table에서 GRADE_NM) - 부서명 조회 (TB_DEPT Table에서 DEPT_NM) - 기술등급 조회 (TB_LEVE Table에서 S_LEVEL_NM)

45 Components - 1 DataSet 1. 실습 1-1
♣ Visual Component들이 사용할 Data를 서비스 하는 Component ▽ Attribute - Logical : Crosstab으로 처리할 때 DataSet간의 연결 - DataID : Server 즉 URL을 지정(이 경로의 Data를 Request) - CountRow : 조회된 Row의 개수 - RowPosition : 현재 Row의 위치값 - SortExpr : DataSet의 정력식을 기술 ▽ Methods - NameString : DataSet의 Data를 조회하거나 지정할 수 있음 - Reset : DataID에 기술된 URL을 통해 Data를 수신 1-3. Components설명(1) DataSet ◎ Attributes of Methods type - NameValue : 해당 Row와 Column에 해당하는 값을 Value로 지정 (integer -> integer, string -> string) - NameString : 해당 Row와 Column에 해당하는 값을 Value로 지정 (integer,string -> string) (예) var AA = DataSet ID.NameString(row,”column명”); DataSet ID.NameString(row,”column명”) = AA; ◎ Methods/Functions - Reset : Data와 Setting된 모든 Property에 따라 DataSet을 Reload - AddRow : Row를 추가 - DeleteRow : 해당 Row를 삭제 - Sort : Sorting기능 실행 - Filter : Filter기능 실행 (예) DataSet ID.Reset(); ◎ Events - OnLoadCompleted : Data Load가 완료되면 발생 - OnRowPosChanged : Row의 위치 변경시 발생 - OnColumnChanged : Row, Col Idx에 해당하는 값이 변경되었을 때 발생 - OnFilter : 해당 Row가 Filter 처리될 때 발생. 사용자가 Filter Logic을 구현하는 부분.

46 Components – 2(1) Grid 1. 실습 1-1 ♣ DataSet과 연결하여 화면에 Table형태로 Display
▽ Attribute - DataID : 표현할 Data를 가지고 있는 DataSet Component ID 기술 - Format : Grid에 출력될 Column 정보를 정의 (Format 속성 정의 가능) - Editable : Grid에 입력기능 여부를 지정 ▽ Methods - ExportFile: Grid의 내용을 CSV Type의 File로 저장 - RunExcel : Grid에 표현된 대로 Excel을 실행시켜 표현 - CountRow : 조회된 Row의 개수 - RowPosition : 현재 Row의 위치값 ▽ ColumnProp - EditStyle: Grid에서 Data 입력 시 지정된 Edit Style로 정의 Grid ◎ Attributes - ColSizing : Column Resize기능 사용여부 - TitleHeight : Title의 높이 지정 - RowHeight : 화면에 보이는 Row높이 지정 - IndWidth : Grid 맨 왼쪽의 indicator display 사용여부(0:None) - Editable : Grid에 Key Column을 제외한 Column에 입력 기능 여부 ◎ Methods/Functions - Focus : Focus갖게 함 - RunExcel : Grid에 표현된대로 Excel로 표현 ◎ Events - OnEnter : 사용자가 Cell 수정을 시작할 때 발생 - OnClick : 사용자가 Mouse Click시 발생 - OnDblClick : 사용자가 Mouse Double Click시 발생 - OnLastDown : Editable 상태에서 record의 맨 마지막에서 하향키를 누르면 발생

47 Components – 2(2) Grid 1. 실습 1-1 ♣ DataSet과 연결하여 화면에 Table형태로 Display
▽ Attribute - DataID : 표현할 Data를 가지고 있는 DataSet Component ID 기술 - Format : Grid에 출력될 Column 정보를 정의 (Format 속성 정의 가능) - Editable : Grid에 입력기능 여부를 지정 ▽ Methods - ExportFile: Grid의 내용을 CSV Type의 File로 저장 - RunExcel : Grid에 표현된 대로 Excel을 실행시켜 표현 - CountRow : 조회된 Row의 개수 - RowPosition : 현재 Row의 위치값 ▽ ColumnProp - EditStyle: Grid에서 Data 입력 시 지정된 Edit Style로 정의 Grid ◎ Property - HeadColor : Grid Title의 Text Color지정 - HeadBgColor : Grid Title의 Background Color지정 - TextColor : Grid Column의 Text Color지정 - BgColor : Grid Column 의 Background Color지정 - Suppress : Column Display시 Suppress 기능 사용여부 ◎ Grid Tag Information - <R></R> : Cross Tab에서 적용될 Repeat Tag - <C></C> : Column Tag - <F></F> : Fixed 기능,Resize불가 - <G></G> : Column 들을 Gtouping할 때 사용(2단) - <X></X> : Column 들을 Gtouping할 때 사용(3단)

48 Components - 3 Report 1. 실습 1-1
♣ Tag script를 이용한 다양한 형태의 report를 web에서 print하는 component ▽ Attribute - DetailDataID : Default Band에 Binding되는 DataSet Component ID - MasterDataID : Default Band를 제외한 나머지 Band에 Binding되는 DataSet Component ID - Format : Report Builder 에서 작성된 양식 format (Report Component의 Format 에 사용) - SuppressColumns : Suppress 양식 출력 시 Column지정 - Landscape : Report 출력 시 용지의 인쇄방향을 정의 ▽ Methods - Preview: Report를 미리보기 - Print : Report를 인쇄 1-3-3 Report ◎ 개요 : Tag script를 이용한 print component. ◎ Attributes. - andRectDispFlag,BandColumn,MargineX,MargineY,PaperWidth,PaperLength,ImagSyncFlag ※ Suppress Column syntax. - SuppressColumn=”index:pageskip,columnid;index:columnid,columnid” - Index : Suppress level ( 19 ~1까지) - Pageskip : 이 문자열 입력시 suppresscolumn값이달라질 때 page를 skip한다 - Columnid : Suppress level이 적용될 column명, 여러 개 입력가능 ※ Band Selection syntax. - BandSelection=” bandid:bandValue, bandValue; bandid: bandValue” - Band id : report의 detail band id들,여러 개 입력가능 Band Value : Band Column의 값 ◎ Methods / Functions : Preview, Print ◎ Event : OnError ◎<!-- Report Component --> <OBJECT id="aidrp_1" classid="clsid:37D13B2F-E5EB-11D2-973D-00104B15E56F" codebase="../gauceocx/toinbrep.cab#version=1,0,6,1“> <PARAM NAME="DetailDataID" value="dataset2"> <PARAM NAME="BandRectDispFlag" value="0"> <PARAM NAME="PaperSize" value="A4"> <PARAM NAME="LandScape" value="0"> <PARAM NAME="NullRecordFlag" value="1"> <PARAM NAME="Format" VALUE=‘ <B><T>id="사원명" ,left=339 ,top=26 ,right=550 ,bottom=119</T></B> <B><C>id="Emp_nm" ,left=339 ,top=8 ,right=550 ,bottom=74</C></B>'> </OBJECT>

49 Components – 4(1) LuxeCombo 1. 실습 1-1
♣ 기존 CodeCombo의 단점인 Code와 Data 두개의 컬럼만을 지정할 수 있다는 한계를 멀티 컬럼의 형태로 확장 시킨 구조를 갖고 있는 Component로서, DataSet을 이용하여 Value를 정의할 수도 있고, Value를 직접 선언해서 정의할 수도 있음 ▽ Attribute - ComboDataID : List용으로 사용할 DataSet의 ID를 기술 - ListExprFormat : Combo의 List 창에 표시할 Data Column과 디스플레이 포맷 - CBData : DataSet을 연결하지 않고, 직접 선언하여 사용할 때 Data 목록을 기술 - SearchColumn : Search 기능에 대상이 되는 Column을 지정 - CBDataColumns : ComboDataID에 DataSet을 지정하는 방식이 아니고, CBData Property로 Combo Data를 입력했을 때, 입력된 데이터의 Column 명을 임의로 정의 LuxeCombo ◎ CBData : 기존 코드 콤보와 달라진 점은 멀티 컬럼 정의가 가능해졌다는 부분이다. ◎ ListExprFormat ▼ Single Column Style - literal : 컬럼 데이터를 제외한 일반 문자열 - % : 컬럼 데이터에 매핑될 Alias - ColumnName : 데이터를 가져올 컬럼명 - Syntax : [literal]%1[[literal]%N]…;ColumnName1[;ColumnNameN]… - Ex) "[%] %; City; Countty” => [Seoul] Korea ▼ Multi Column Style - ColumnName : 리스트 박스에 표시할 컬럼. ComboDataID에 지정한 데이터셋의 컬럼명 중에서 사용하거나 Data 프로퍼티를 사용할 경우 CBDataColumns에 지정한 컬럼명 중에서 사용. - Align : 리스트 박스에 표시할 컬럼의 정렬 방식. 0:Left, 1:Center, 2:Right - Width : 리스트 박스에 표시할 컬럼의 폭. pixel 단위로 지정하며, 생략 가능하다. 생략했을 경우 (현재 콤보의 폭/ 컬럼 개수) 값으로 디폴트 설정된다. - Syntax : ColumnName 1^ Align 1[^ Width 1][, ColumnName N^ Align N[^ Width N]],… - Ex) "Code^2^30,Country^1^100,City^1^100,Address^0^300"

50 Components – 4(2) LuxeCombo 1. 실습 1-1
♣ 기존 CodeCombo의 단점인 Code와 Data 두개의 컬럼만을 지정할 수 있다는 한계를 멀티 컬럼의 형태로 확장 시킨 구조를 갖고 있는 Component로서, DataSet을 이용하여 Value를 정의할 수도 있고, Value를 직접 선언해서 정의할 수도 있음 ▽ Attribute - ComboDataID : List용으로 사용할 DataSet의 ID를 기술 - ListExprFormat : Combo의 List 창에 표시할 Data Column과 디스플레이 포맷 - CBData : DataSet을 연결하지 않고, 직접 선언하여 사용할 때 Data 목록을 기술 - SearchColumn : Search 기능에 대상이 되는 Column을 지정 - CBDataColumns : ComboDataID에 DataSet을 지정하는 방식이 아니고, CBData Property로 Combo Data를 입력했을 때, 입력된 데이터의 Column 명을 임의로 정의 LuxeCombo ◎ SearchColumn: SearchColumn이 지정되지 않았다면, 첫번째 컬럼을 기준으로 Search 기능이 작동한다. ◎ CBDataColumns - Ex) Code,Country,City,Address - ColumnName : Data Property에 지정한 Data의 첫번째 항목에 해당하는 Column name ※ Column Style ▼ Multi Column Dropdown ▼ Multi Column DropdownList ▼ Single Column Dropdown ▼ Single Column DropdownList - Multi Column : Combo에 Data를 표시할 때 여러 개 컬럼을 표시 - Single Column : Combo에 Data 를 표시할 때 한 개의 컬럼만 표시 - Dropdown : Combo의 Style을 입력 가능한 스타일로 설정 - DropdownList : Combo의 Style을 입력 불가능한 스타일로 설정

51 서비스 생성(JSP/Servlet) - Select
1. 실습 1-1 서비스 생성(JSP/Servlet) - Select STEP 1 : ServiceLoader 객체를 생성한 후 ServiceLoader를 통해 GauceService를 생성한다. STEP 2 : 생성된 GauceService로부터 GauceResponse객체를 얻는다. STEP 3 : 자료를 저장할 GauceDataSet객체를 생성한다. STEP 4 : 생성된 GauceDataSet을 First-row가 가능한 GauceDataSet으로 설정한다. STEP 5 : GauceDataSet에 컬럼 정보를 설정한다. STEP 6 : GauceDataSet에 자료를 저장한다. STEP 7 : GauceDataSet을 Component로 전송하고 작업을 종료한다. 1-4 서비스 ◎ STEP 1 : ServiceLoader loader = new ServiceLoader(request, response); ◎ STEP 2 : GauceResponse res = service.getGauceResponse(); ◎ STEP 3 : GauceDataSet dSet = new GauceDataSet(); ◎ STEP 4 : res.enableFirstRow(dSet); ◎ STEP 5 : dSet.addDataColumn(new GauceDataColumn("zip_code", GauceDataColumn.TB_STRING, 6)); ◎ STEP 6 : for (int i = 1; i <= 100; i++) { GauceDataRow row = dSet.newDataRow(); row.addColumnValue("10000" + i); ………… dSet.addDataRow(row); } ◎ STEP 7 : dSet.flush(); res.flush(); res.commit("성공적으로 작업이 끝났습니다."); res.close();

52 Web Builder로 화면 Design STEP 1 : DataSet과 서비스를 연결한다.
1. 실습 1-1 Web Builder로 화면 Design STEP 1 : DataSet과 서비스를 연결한다. STEP 2 : Grid, Combo를 DataSet과 연결한다. STEP 3 : 화면 세부처리를 한다. STEP 4 : Script를 작성한다. STEP 5 : 저장 후 Browser에서 실행결과를 확인한다. 1-5 화면 design ◎ STEP1 : 실행결과 화면에서 Grid와 LuxeCombo가 위치하고 있으므로 각각의 Data 값을 가지고 있는 Dataset 2개를 화면에 정의 해야 하며 DataSet의 DataID 속성을 이용하여 서비스(JSP/Servlet)를 연결한다. ◎ STEP2 : Grid와 LuxeCombo에 Data값을 표현하기 위해서는 각 Component의 DataID 속성을 이용하여 Data를 가지고 있는 DataSet과 연결해 준다. ◎ STEP3 : Grid, LuxeCombo에 Color를 주는 등 화면 세부처리를 한다. ◎ STEP4 : Button을 Click 시 조건에 해당하는 사원정보를 보여주는 Script를 작성할 수 있다. ◎ STEP5 : Save시 기본적으로 html 파일형식으로 저장되며 웹 서버를 통해 Web Browser에 실행된다.

53 Dataset과 서비스 연결 1. 실습 1-1 2 1 4 3 1-5-1 Dataset과 서비스 연결
① Grid와 LuxeCombo에 값을 표현하기 위해서는 먼저 Data 값을 가지는 DataSet을 화면에 정의한다. ② Tools >> Service Set 또는 Service Set 아이콘을 이용하여 Service Info를 띄운다. - 사용될 그룹을 선택하고 Request 버튼을 Click하면 그 그룹이 가지고 있는 서비스 리스트를 확인할 수 있다. ③ Service Info창과 DataSet의 Property창을 동시에 한 화면에 띄운 후 해당 DataSet과 관계를 가지는 Service를 선택한다. ④ 해당되는 DataSet의 DataID속성을 Setting한다.(DataSet과 서비스 연결) - ADE_Data_1의 DataSet에는 Grid에서 사용될 서비스(gauceEmp01.jsp)를 Double Click 하여 DataSet Property의 DataID 속성을 Setting한다. - ADE_Data_2의 DataSet에는 LuxeCombo에서 사용되는 서비스(gauceEmp01_CCombo)를 Setting 한다.

54 Visual Component와 DataSet 연결- Grid(1)
1. 실습 1-1 Visual Component와 DataSet 연결- Grid(1) 2 4 1 3 1-5-2 Visual Component와 DataSet 연결 – Grid(1) ① Tool Box의 ADE Component Set과 HTML Component Set을 이용하여 화면을 design 한다. - Grid(ADE_Grid_1), LuxeCombo(ADE_LuxeCombo_1), Text(Textbox_1), Button등을 Setting 한다. ② Component의 id의 값을 바꿀 수 있는 Property 창이다. - Component의 속성 값을 변경하는 Property창은 해당 Component에서 Rbutton을 사용하여 나타나는 창이다. ③ Tools >> Service Set 또는 Service Set 아이콘을 이용하여 Service Info를 띄운다. - Grid에 대한 DataSet이 연결된 서비스를 Service List에서 선택하면 서비스가 가지고 있는 Column List를 확인할 수 있다.

55 Visual Component와 DataSet 연결- Grid(2)
1. 실습 1-1 Visual Component와 DataSet 연결- Grid(2) 2 4 1 3 1-5-2 Visual Component와 DataSet 연결 – Grid(2) ④ Grid의 Component Property창(Rbutton 이용!)을 Service Info창과 함께 띄운 후 컬럼을 Setting 한다. - Service Info창의 Column List에서 Setting하고자 하는 컬럼을 Double Click하면 Grid의 Property의 Column ID가 Setting 된다. - 첫 컬럼은 Child 버튼을 Click해야 값이 추가된다.(Parent/Child 개념으로 동작) - <X></X>,<G></G> : Grid의 Header 영역을 3단까지 올릴 수 있다. - <X></X>,<G></G> 와 같은 Group Tag들은 다른 컬럼을 포함하는 관계이므로 Child/Add 개념을 적절히 사용한다. - Grid의 Format : <C> Name=사원명 ID=EMP_NM Width=90</C> <C> Name=직급명 ID=GRADE_NM Width=90</C> <C> Name=사원번호 ID=EMP_NO Width=90</C> <C> Name=부서명 ID=DEPT_NM Width=100</C> <C> Name=기술등급 ID=S_LEVEL_NM Width=70</C> <C> Name=직급코드 ID=GRADE_CD Width=70</C> <X> Name=전체정보 <C> Name=부서코드 ID=DEPT_CD Width=70</C> <G> Name=개인정보 <C> Name=생년월일 ID=BIRTH_DATE Width=70</C> <C> Name=기술등급 ID=LEVEL_CD Width=70</C> </G> </X>

56 Visual Component와 DataSet 연결(LuxeCombo)
1. 실습 1-1 Visual Component와 DataSet 연결(LuxeCombo) 2 1 3 1-5-3 Visual Component와 DataSet 연결(LuxeCombo) ① DataSet과 연결하여 LuxeCombo에 Data를 표현하기 위해 연결할 DataSet을 설정한다. ② Combo의 List창에 직급명을 표시하기 위해 Display Format에 “%;GRADE_NM” 으로 설정한다.(Combo Style이 Single Column Style 이므로) ③ GRADE_NM Column을 기준으로 Search 기능을 작동시키기 위하여 SearchColumn에 커서를 두고 ServiceSet에서 원하는 Column을 선택하여 Double Click하면 Setting된다. ◎ LuxeCombo Source <OBJECT id=ADE_LuxeCombo_1 classid=clsid:60109D65-70C0-425c-B3A4-4CB001513C69 > <PARAM NAME="ComboStyle" VALUE="5"> <PARAM NAME="Index" VALUE="0"> <PARAM NAME="ListExprFormat" VALUE="%;GRADE_NM"> <PARAM NAME="ComboDataID" VALUE="ADE_Data_2"> <PARAM NAME="SearchColumn" VALUE="GRADE_NM"> </OBJECT>

57 화면 세부처리 1. 실습 1-1 4 1 2 3 5 1-6 화면 세부처리 ◎ 전체적인 화면설계가 끝난 후 세부적인 처리를 한다.
◎ 사원명을 검색조건으로 하기 위해서 TextBox와 버튼을 선언한다. ① Grid의 Header의 Font 와 Background Color 를 변경할 수 있다. ② Mask :Grid에 표시되는 Data영역의 Data를 Masking한다.(예제:XXXX-XX-XX) ③ Grid의 Row에 나타나는 Data값의 Font 와 Background Color를 변경할 수 있다. ④ 각각의 컬럼의 값을 변경시킨 후에는 반드시 Modify 버튼을 Click해야만 값을 반영 시킬 수 있다. ⑤ Apply 버튼을 먼저 선택한 후 OK 버튼을 Click한다. ◎ Grid 각각의 컬럼에 주는 속성값은 Manual의 Column Prop에서 확인 가능하다. 5

58 Script 작성 - 1 1. 실습 1-1 1 3 2 1-7 Script 작성(1)
1-7-1 Button에 OnClick() Event 주기 ① Source창에서 Script Outline Button을 Click하면 화면 design에서 사용되었던 Component 의 ID를 확인할 수 있다.(id값을 가진 Component) ② 이벤트를 줄 Component를 Double Click하면 선택한 Component에서 사용 가능한 Event 종류가 나타나며 Double Click으로 선택하면 왼편의 Source창에 Setting된다. (Button_1에 onclick() Event 선택!) ③ “조회” 버튼 Click시의 자바 스크립트를 기술한다. - Textbox_1 의 사원명 값과 LuxeCombo에서 선택한 부서의 부서코드 값을 Argument로 받아 Data를 조회하는 Script작성 - <SCRIPT language=JavaScript> function Button_1_onclick() { var In_emp_nm = Textbox_1.value; var In_grade_cd = ADE_Data_2.NameString(ADE_Data_2.RowPosition, 'GRADE_CD'); ADE_Data_1.DataID = ' in_emp_nm='+In_emp_nm+'&in_grade_cd='+In_grade_cd; ADE_Data_1.Reset(); </SCRIPT>

59 Script 작성 - 2 1. 실습 1-1 1 1-7 Script 작성(2)
1-7-2 Dataset에 OnLoadCompleted Event 주기 ① DataSet이 Data Load를 마쳤을 때 Data의 rowcount를 알 수 있다. - <SCRIPT language=JavaScript event=OnLoadCompleted(rowcount) for=ADE_Data_1> if(rowcount==0){ alert("검색된 Data가 없습니다!"); }else{ alert(rowcount+" 건의 Data가 \n 조회되었습니다"); } </SCRIPT> ◎ DataSet의 Param 값으로 사용된 DataID(Web Builder 사용시) - <PARAM NAME="DataID" VALUE=" toinb_dataid4=gauceEmp01.jsp&in_emp_nm=&in_grade_cd="> ◎ Script상에 기술된 DataID - ADE_Data_1.DataID = ' in_emp_nm='+In_emp_nm+'&in_grade_cd='+In_grade_cd; ※ 실질적인 코딩에서는 Script상에 기술된 DataID와 같은 형식으로 사용되어야 하지만 Web Builder를 사용 하였을 경우에는 toinb_dataid4=gauceEmp01.jsp&amp 같은 값이 더 추가가 된다. Web Builder가 GAUCE뿐만 아니라 Toinb라는 제품이 함께 사용하면서 붙는 Source로 Web Builder에서 임의적으로 추가한 이 Source는 파싱될 때 무시된다. 하지만 Script상이나 Web Builder를 사용하지 않을 시에는 Script상에 기술된 DataID와 같은 방법으로 기술한다.

60 1. 실습 1-1 실행결과 확인 1-8 실행 결과 확인 ◎ File  Preview 또는 F12 로 Design Tab과 Source Tab에서 작성하였던 결과를 Browser를 통하여 확인한다.

61 Grid의 내용을 외부파일로 표현 2. 실습 1-2 2 1 3 1-8-1 Grid의 내용을 외부파일로 표현
◎ Grid에서 보여지는 Data의 내용을 외부파일(CSV) 로 저장하거나 Excel에서 표현한다. ① HTML Component Set에서 Button 을 선택하여 Drag 한다. ② CSV파일로 저장하기 위한 Button과 Excel로 표현하기 위해 사용될 Button을 design 한다, ③ Property창에서 해당되는 Button의 Value값을 수정한다.

62 Script 작성(Grid의 내용을 외부파일로 표현)
2. 실습 1-2 Script 작성(Grid의 내용을 외부파일로 표현) 1 2 1-8-2 Script 작성 CSV Button에 OnClick() Event 주기 ① Grid의 내용을 CSV Type의 File로 저장한다. - Syntax :GridID.ExportFile(filename,exporthide) - function Button_2_onclick() { ADE_Grid_1.ExportFile("사원정보조회",true); } Excel Button에 OnClick() Event 주기 ② Grid에 표현된대로 Excel을 실행시켜 표현하도록 한다. - Syntax :GridID.RunExcel(docname) - function Button_3_onclick() ADE_Grid_1.RunExcel("사원정보조회");

63 Report 출력 3. 실습 1-3 1 4 3 1-9 Report 출력하기
◎ Grid에 Display된 사원정보를 Report로 출력한다. ① Component Set에서 Report Component와 Button을 선택한다. ② Componet를 Drag하여 화면에 design 한 후 Report Component를 선택한 후 오른쪽 버튼을 이용하여 Property 창을 띄운다. ③ 사원정보를 가지고 있는 DataSet ID를 Report의 Property중 DetailDataID에 연결한다.(DetailDataID :Report Builder 설명을 참조할 것) ④ Report의 Format부분은 Report Builder를 통하여 생성된 Source로 설정하므로 RLD 버튼을 Click하여 Report Builder를 띄운다.

64 3. 실습 1-3 Report Builder -1 1 2 3 4 1-9-1 Report Builder를 이용하여 Report Componet Format Source 만들기 ① Text를 위치시키고 “사원정보조회” 로 Setting 한다. ② 모든 페이지에서 default에 표현된 컬럼에 관한 정보를 나타내 주기위해서 DHeader에 각 컬럼에 맞는 텍스트 값을 Setting 한다. ③ Column을 이용하여 표현하고자 하는 값을 Setting한다. (Report Component의 DetailDataID에 설정된 DataSet의 컬럼) ④ 현재 페이지(#p)와 전체 페이지(#t)를 나타내기 위해 Text에 값을 Setting한다. (고정된 Band)

65 3. 실습 1-3 Report Builder -2 1 2 3 4 1-9-2 Report Builder를 이용하여 Report Componet Format Source 만들기 ① Report Builder에서 design이 완성되면 View >> Source View를 통하여 design 결과에 대한 Source를 얻는다. Copy to Clipboard를 통하여 Source를 Report Component의 Format(③) 부분에 Copy하면 Format이 설정된다. ② Report Component의 RLD버튼을 통해 Report Builder를 실행한 경우에 design이 끝난 후 결과를 저장하지 않고 Report Builder를 닫으면 저장유무에 관한 메시지가 나타난다. “아니오” 버튼을 Click하면 Tool이 사라지면서 Report Component의 Format에 자동 Copy 되어 설정되는 것을 확인할 수 있다. ③ Report Component의 Property창으로 Format이 설정된 모습을 볼 수 있다. ④ Report Builder의 default에 설정된 컬럼들에 값을 나타내기 위해서는 컬럼 값을 가지고 있는 DataSetID를 Setting해 주어야 한다.

66 Script 작성 - Report 출력 3. 실습 1-3 2 1 1-9-3 Script작성 (Report 출력하기)
출력Button(Button_4)에 OnClick() Event 주기 ① Event를 줄 Button의 ID를 선택하고 onclick을 선택한다. ② Report를 미리보기 한다. - ReportID.Preview() - function Button_4_onclick() { ADE_Report_1.Preview(); }

67 실행결과 확인 - Browser 3. 실습 1-3 1-10 Browser에서 실행결과 확인
- 모든 작업이 끝나면 만들어진 페이지(html)를 서버에 저장한다. - Browser에서 결과를 확인할 수 있다.

68 연습문제 - 1 4. 연습문제 1 emp.html popup.html 1-11 연습문제(1)
◎ EditStyle를 이용하여 Grid에 Data를 손쉽게 입력할 수 있다. ◎ EditStyle의 Popup을 이용하여 Data의 세부적인 사항을 다른 창에서 선택하여 Grid에 입력하도록 한다. ◎ popup.html에 표현될 서비스가 사용하는 DB Table은 TB_DEPT이다 (DEPT_CD, DEPT_NM 이용) ◎ 작업순서 ① emp.html의 부서코드에 EditStyle – Popup을 설정한다. ② Popup이라는 속성을 주게 되면 Grid는 OnPopup() Event를 발생시킨다. ③ OnPopup() 에서 새로운 창을 띄운다 (showModalDialog 이용!) ④ 새로운 창에는 부서코드와 부서명의 Data를 나타내는 Grid가 위치하고 있으며 이 Grid에서 원하는 정보를 Double Click하면 그 결과값이 emp.html에 리턴된다. ⑤ DataSet의 NameString이나 NameValue를 통하여 리턴된 부서코드의 값을 Setting 한다.

69 5. 연습문제 2 연습문제 - 2 1 2 1-12 연습문제(2) ◎ DataSet의 구조를 서비스(JSP/Servlet)을 이용하지 않고 Html내에서 직접 정의 할 수 있다. ◎ default Band를 제외한 곳에 Column값을 위치 시켰을 때는 MasterDataID에 DataSet을 Setting한다. ◎ 작업순서 ① Header에 Text로 위치했던 값을 title이라는 Column 값으로 바꾼다. ② Text(직급명, 사원명)와 Column(gradenm, name)을 위치시킨다. ③ Report Component에서 MasterDataID에 연결할 DataSet을 만든다. ④ 출력 Button에 onclick() Event에서 Preview 하기 전에 Header를 생성한다. - title, gradenm, name을 가진 DataSet을 생성한다. - Header 정보 생성 : SetDataHeader(DataSet의 Header 정보) - row 추가 : Data값을 추가하기 위해서 row가 필요하다(Addrow()) - Data 생성 : NameString or NameValue를 이용하여 값을 Setting 한다. - tile : 임의적으로 추가해도 된다. - gradenm : LuxeCombo에서 선택한 Grade_nm으로 Setting한다. - name : 임의적인 이름으로 Setting한다. ⑤ 실행시켜 결과 값을 확인한다.

70 목표 : Transaction작업을 한다. 실습 - 2 업무정의(Table정의,화면정의)
6. 실습 2 실습 - 2 목표 : Transaction작업을 한다. 업무정의(Table정의,화면정의) Service 생성(JSP/Servlet) HTML작성 (Web Builder) 2.실습목표 - Grid의 업체 명을 조회한 자료를 입력박스와 바인딩 시켜서 Transaction 처리를 한다.

71 6. 실습 2 실행결과 2-1.실습결과 화면 2-1-1 화면정의 ◎ 화면설명 : 해당하는 업체정보를 조회하여 입력, 수정, 삭제한다. ① Grid Component를 사용하여 업체코드, 업체 명을 조회한다. ※ 자세한 사항은 실습(1)을 참조한다. ② Bind Component를 이용하여 상세항목을 조회한다. ③ 업체정보를 처리하는 Transaction Style의 Service를 만든다. ④ TR Component를 이용하여 작업(입력,수정,삭제)한 내용을 DB처리 한다. ◎ 처리방법 - Insert, Modify, Delete 버튼을 눌러 상태를 설정한 후 Data를 입력, 수정, 삭제한다. - Data의 입력, 수정, 삭제가 완료되면 Save버튼을 눌러 변경된 내용을 DB에 적용한다. - Data의 입력, 수정, 삭제 중 Cancel버튼을 누르면 변경된 내용을 취소하고 원 상태로 돌아간다.

72 Table 정의 6. 실습 2 TB_CUST_INFO CUST_CD Char(6) 업체code
CUST_NM VarChar2(30) 업체 명 PRESIDENT_NM VarCHar2(20) 대표 CUST_ADDR VarCHar2(50) 주소 CUST_TEL_NO VarCHar2(12) 대표전화 CUST_CATEGORY VarCHar2(20) 업종 EMP_NO Number(10,0) 종업원수 ESTAB_DATE VarChar2(8) 설립년월일 2-2. Table 정의 ◎ 업체코드(CUST_CD)는 Key로 정의되어 있으므로 수정이 불가능하다. ◎ 조회 : 업체 명을 검색 조건으로 하여 해당 업체 명에 근사하는 업체 명을 가진 업체정보를 조회한다. ◎ 정렬 : 조회된 내용을 선택된 조건(업드,업체 명)에 해당하는 순서로 정렬한다. ◎ 처리 : ① Insert, Modify, Delete 버튼을 눌러 상태를 설정한 후 Data를 입력, 수정, 삭제한다. ②-1. Data의 입력, 수정, 삭제가 완료되면 Save버튼을 눌러 변경된 내용을 DB에 적용한다. ②-2. Data의 입력, 수정, 삭제 중 Cancel버튼을 누르면 변경된 내용을 취소하고 원 상태로 돌아간다.

73 6. 실습 2 Components - 1 Bind ♣ 일반 HTML에서 사용되는 Edit, TextArea 등의 Input Tag로 적용되는 일반 Component와 DataSet Component와 연결할 수 있는 기능을 내장하는 Bind Component로써 일반Component와 연결되어 DataSet의 자료를 변경하고, 읽어오는 기능을 하는데 사용 ▽ Attribute - DataID : Binding 할 DataSet Component ID - BindInfo : binding 할 column 명과 input tag 로 적용되는 일반 Component ID의 정보를 기술하는데 사용(Tag : <C> … </C> 만 존재) - Col : DataSet 의 binding 될 column 명 - Ctrl : HTML control 의 ID - Param : Ctrl 에서 값을 지정한 property 2-3. Component Bind ◎ Param값 설정 - Text, Textarea : value - EMEdit : text - CheckBox : checked ◎ Radio는 자체가 배열로 구성되어 있는 만큼 Bind를 통한 연결이 어렵다. ◎ Combo는 자체적인 연결을 갖고 있으므로 Bind를 통한 별도의 연결이 필요 없다.

74 Components - 2 Transaction 6. 실습 2
♣ Web상에서 추가/수정/삭제된 Data의 Transaction처리시 사용 ▽ Attribute - Action : Transaction작업을 수행할 Service가 등록되어있는 경로 - KeyName : 해당 Service를 호출하기 위해 사용하는 KeyName (Toinb_dataid4) - KeyValue : 해당 Transaction 작업을 수행할 Service와 DataSet을 정의 - Parameter : 해당 Transaction이 작업 수행 시에 사용할 입력변수 값을 정의 ▽ Method - Post : Transaction Service를 호출 ▽ Event - OnSuccess : Transaction 작업 시 성공했을 때 발생 - OnFail : Transaction 작업 시 오류가 발생되었을 때 발생 Transaction ◎ Parameter : 입력변수를 DataSet에 저장하지 않고 직접 Control Data로 넘길 경우에 사용한다. ◎ Post : KeyValue에 설정되어 있는 DataSet에 변경내역이 있을 때 해당 내용을 Action에 설정되어 있는 경로로 Transaction을 일으킨다. ◎ Ex> < OBJECT id="tbtr_1" classid="clsid:0A2233AD-E771-11D2-973D-00104B15E56F" > < PARAM NAME ="ServerIP" value=""> < PARAM NAME ="KeyName" value="Toinb_dataid4"> < PARAM NAME ="KeyValue" value="JSP(I: CUSTINFO = ADE_Data_1)"> < PARAM NAME ="Action" value="/sample/tr/tr_iio.jsp"> </ OBJECT > ◎ Transaction의 Error처리 - TR은 onSuccess / onFail의 두가지 이벤트를 갖고 있다. 이 두 이벤트는 모두 Server로부터의 수행결과에 따라 발생하는 이벤트로써 두 이벤트에서 모두 ErrorCode / ErrorMsg를 갖고 있다.

75 6. 실습 2 Components - 3 EMEdit ♣ 날짜, 사원번호, 금액 또는 각종 Format이 지정된 Code의 입력이나 출력에 사용 ▽ Attribute - Format : 문자형태의 값을 입력받을 때 그 입력형식을 정의 - ClipMode : Control의 Text값을 받을 시 Mask Character를 포함해서 받을 것인지 여부를 지정 - MoveCaret : Control내에 입력된 데이터가 없는 상태에서 Focus를 받았을 때, 커서위치를 맨앞으로 설정 ▽ Method - Focus : Control로 focus를 이동시킴 EMEdit ◎ Focus - EMEdit.Focus() - GAUCE에서 제공하는 Component에 focus를 줄 때는 기존에 Script상에서 사용하였던 focus가 아닌 Focus라는 점을 주의해야 한다.

76 실습순서 STEP 1 : Grid Component 사용하여 업체code, 업체 명을 조회한다.
6. 실습 2 실습순서 STEP 1 : Grid Component 사용하여 업체code, 업체 명을 조회한다. STEP 2 : Bind Component를 이용하여 상세항목을 조회한다. STEP 3 : 업체정보를 처리하는 Transaction Service를 만든다. STEP 4 : TR Component를 이용하여 작업한 내용을 DB처리 한다. STEP 5 : Script 작성 및 event처리를 한다. STEP 6 : 저장 후 Browser에서 실행결과를 확인한다. 2-4 실습순서 (실습-2에 관련된 실습 단계) ◎ STEP1 : 실습-1에서 작업했던 순서대로 Grid에 Data를 표현하고 조회작업을 시행한다. ◎ STEP2 : Bind Component를 화면에 정의하여 일반 Component인 Textbox가 DataSet의 내용을 표현하고 편집할 수 있도록 한다. ◎ STEP3 : 서비스 생성순서에 의해 Transaction 서비스를 만든다. ◎ STEP4 : TR Component에 서비스와 DataSet을 지정하여 Setting 한다. ◎ STEP5 : Insert, Update, Delete, Save에 대한 Event와 Script처리를 한다. ◎ STEP6 : Save시 기본적으로 html 파일형식으로 저장되며 웹 서버를 통해 Web Browser에 실행된다.

77 STEP 1: 업체코드, 업체 명 조회 - Grid 6. 실습 2 3 1 4 2
2-4-1 STEP1 : 업체정보를 조회하는 화면과 Script을 작성한다. Grid ◎ JSP를 이용하여 업체정보를 조회하는 서비스를 만든다.(gauceTR01.jsp) - Select-SQL : SELECT CUST_CD, CUST_NM, PRESIDENT_NM, CUST_ADDR, CUST_TEL_NO, CUST_CATEGORY, EMP_NO, ESTAB_DATE FROM TB_CUST_INFO WHERE CUST_NM LIKE :CUST_NM||'% ① Web Builder를 이용하여 화면에 DataSet을 정의하고 서비스(gauceTR01.jsp)와 연결한다. ② Grid를 화면에 design하고 미리 정의된 DataSet과 연결한 후 Data를 표현하기 위해 Grid의 Format정보를 Setting 한다. - <PARAM NAME="Format" VALUE=" <C> Name=업체코드 ID=CUST_CD Width= </C> <C> Name=업체 명 ID=CUST_NM Width= </C>"> ③ Textbox를 이용하여 조회에 필요한 design을 한다. ④ Button_1에 OnClick() Event를 주어 업체 명에 의해 업체정보를 조회하는 Script 처리를 한다. - <SCRIPT language=JavaScript> function Button_1_onclick() { In_cust_nm = Textbox_1.value; ADE_Data_1.DataID = ' ADE_Data_1.Reset(); } </SCRIPT>

78 STEP 2: 상세항목 조회 – Bind(1) 6. 실습 2 2-4-2
DataSet이 가지고 있는 업체정보를 상세하게 조회한다. - Design ◎ 왼편의 HTML Component Set의 Label, Textbax, Button을 이용하여 화면을 design한다. ◎ Textbox, EMEdit - 업체코드 : Text :Textbox_cust_cd - 업체 명: Text : Textbox_cust_nm - 대표자명: Text : Textbox_president_nm - 주소: Text : Textbox_cust_addr - 전화번호: Text : Textbox_cust_tel - 업종: Text : Textbox_category - 종업원수 : Text : Textbox_emp_no - 설립년월일 : EMEdit : ADE_EMEdit_1 ◎ Button - 입력 : Button_insert - 삭제 : Button_delete - 저장 : Button_save - 취소 : Button_cancel

79 STEP 2: 상세항목 조회 – Bind(2) 6. 실습 2 1 2 3 4 5 2-4-2-2 .Bind
◎ Bind Component를 화면에 design 한다. - Textbox와 EMEdit에 DataSet의 내용을 표현하기 위해서는 Bind Component를 이용한다. ① Bind Component의 DataID를 이용하여 DataSet과 연결한다. ② Column : DataSet의 컬럼을 Setting한다. (왼편의 Service List에서 업체정보를 조회하는 서비스를 Double Click 하면 ColumnList가 나타난다. 원하는 컬럼을 Double Click 하여 Bind Property의 Column에 값을 Setting 시킨다.) ③ Control ID : Column에 Setting 된 값을 표현하고자 하는 Textbox나 EMEdit의 ID와 연결한다. ④ Param : Textbox와 같은 일반 Component는 Value로 Setting 한다. EMEdit는 Text로 Setting한다. ⑤ Add Button으로 Setting 된 값을 추가한다. ◎ <OBJECT id=ADE_Bind_1 classid=clsid:9C9AB433-EA85-11D2-A4F CEBEE49 VIEWASTEXT> <PARAM NAME="DataID" VALUE="ADE_Data_1"> <PARAM NAME="BindInfo" VALUE=“ <C>Col=CUST_CD Ctrl=Textbox_cust_cd Param=value</C> <C>Col=CUST_NM Ctrl=Textbox_cust_nm Param=value</C> <C>Col=PRESIDENT_NM Ctrl=Textbox_president_nm Param=value</C> <C>Col=CUST_ADDR Ctrl=Textbox_cust_addr Param=value</C> <C>Col=CUST_TEL_NO Ctrl=Textbox_cust_tel Param=value</C> <C>Col=CUST_CATEGORY Ctrl=Textbox_category Param=value</C> <C>Col=EMP_NUM Ctrl=Textbox_emp_no Param=value</C> <C>Col=ESTAB_DATE Ctrl=ADE_EMEdit_1 Param=text</C>"> </OBJECT>

80 STEP 2: 상세항목 조회 – EMEdit 6. 실습 2 1 2-4-2-3. EMEdit Setting
① Format : YYYY-MM-DD로 Setting하게 되면 EMEdit 자체에서 유효성 검사를 해주게 된다. (ex - MM에 12가 넘는 숫자를 설정하면 값이 입력되지 않는다.)

81 STEP 3: Transaction Service를 만든다.
6. 실습 2 STEP 3: Transaction Service를 만든다. STEP 1 : ServiceLoader 객체를 생성한 후 ServiceLoader를 통해 GauceService를 생성한다. STEP 2 : 생성된 GauceService로부터 GauceResponse객체를 얻는다. STEP 3 : Component에서 전송된 GauceDataSet을 키 값을 이용해 GauceRequest객체에서 추출해 낸다. STEP 4 : Component에서 전송된 GauceDataSet이 null값이 아니면 정상작업을 처리하고, 그렇지 않으면(null값을 가진다면) Component로 오류 메시지를 전송한다. STEP 5 : 모든 작업이 끝나면 res.commit(); 메소드를 통해 Component에게 작업의 종료를 알려주고 GauceResponse를 close한다. 서비스 ◎ STEP 1 : ServiceLoader loader = new ServiceLoader(request, response); ◎ STEP 2 : GauceResponse res = service.getGauceResponse(); ◎ STEP 3 : final String KEY = "DETAIL"; GauceDataSet detailSet = req.getGauceDataSet(KEY); ◎ STEP 4 : if (detailSet != null) { GauceDataColumn[] cols = detailSet.getDataColumns(); GauceDataRow[] rows = detailSet.getDataRows(); for (int i = 0; i < rows.length; i++) { if (rows[i].getJobType() == GauceDataRow.TB_JOB_INSERT) { // INSERT 작업 처리 } if (rows[i].getJobType() == GauceDataRow.TB_JOB_ UPDATE) { // UPDATE 작업 처리 } if (rows[i].getJobType() == GauceDataRow.TB_JOB_ DELETE) { // DELETE 작업 처리 } } } else { res.writeException("Native", "9999", "지정된 데이터셋[" + KEY + "]이 없습니다."); ◎ STEP 5 : res.commit(); res.close();

82 STEP 4: Transaction Component Setting
6. 실습 2 STEP 4: Transaction Component Setting 2 1 3 4 Transaction Component ① Trasaction Component를 화면에 design 한다. ② Transaction의 Property창을 띄운다. ③ Transaction에 사용되는 Service를 Service List에서 선택한 후 Double Click을 하면 오른편의 TR Property가 자동으로 Setting 된다. ④ Setting 된 형식을 Add Button을 눌러 왼편의 List에 추가한다. ⑤ Apply  OK 를 통해 Setting을 완료한다. ◎ <OBJECT id=ADE_TR_1 classid=clsid:0A2233AD-E771-11D2-973D-00104B15E56F > <PARAM NAME="Action" VALUE="/gauce30/gauceTr02.jsp"> <PARAM NAME="KeyName" VALUE="toinb_dataid4"> <PARAM NAME="KeyValue" VALUE="gauceTr02.jsp(I:CUSTINFO=ADE_Data_1)"> <PARAM NAME="ServerIP" VALUE="localhost:8888"> </OBJECT> ◎ Web Builder는 Toinb와 GAUCE가 공용으로 하는 Tool인 관계로 Transaction Service가 Tool을 사용하지 않을 때의 Coding 방식과 차이가 난다. - KeyValue 값을 비교해 본다. - < OBJECT id="tbtr_1" classid="clsid:0A2233AD-E771-11D2-973D-00104B15E56F" > < PARAM NAME ="ServerIP" value="localhost:8888 "> < PARAM NAME ="KeyName" value=“toinb_dataid4"> < PARAM NAME ="KeyValue" value="JSP(I: CUSTINFO = ADE_Data_1)"> < PARAM NAME ="Action" value=" ="/gauce30/gauceTr02.jsp"> </ OBJECT > 5

83 STEP 5: Script 처리 – Insert,Delete,Cancel
6. 실습 2 STEP 5: Script 처리 – Insert,Delete,Cancel 1 2 3 2-4-5 Script 처리 – Insert, Delete, Cancel ① function Button_insert_onclick() { ADE_Data_1.AddRow(); } ② function Button_delete_onclick() ADE_Data_1.DeleteRow(ADE_Data_1.RowPosition); ③ function Button_cancel_onclick() ADE_Data_1.UndoAll();

84 STEP 5: Script 처리 – Save 6. 실습 2 1 2 3
Script 처리 – Save (Trasaction 작업) ① function Button_save_onclick() { ADE_TR_1.Post(); } ② Transaction시에 성공여부 확인하기 <script language="JavaScript" for="ADE_TR_1" event="OnSuccess()"> alert("작업이 성공적으로 수행되었습니다"); </script> ③ Transaction 수행 시 오류가 발생했을 경우 Error Message나 Code를 볼 수 있다. <script language="JavaScript" for="ADE_TR_1" event="OnFail()"> alert(“작업실패 : " + ADE_TR_1.ErrorMsg);