Microsoft PowerPoint - WiseGrid Developer Manual for JAVA.pptx

Similar documents
Microsoft Word - ntasFrameBuilderInstallGuide2.5.doc

다른 JSP 페이지호출 forward() 메서드 - 하나의 JSP 페이지실행이끝나고다른 JSP 페이지를호출할때사용한다. 예 ) <% RequestDispatcher dispatcher = request.getrequestdispatcher(" 실행할페이지.jsp");

API STORE 키발급및 API 사용가이드 Document Information 문서명 : API STORE 언어별 Client 사용가이드작성자 : 작성일 : 업무영역 : 버전 : 1 st Draft. 서브시스템 : 문서번호 : 단계 : Docum

PowerPoint Template

혼자서일을다하는 JSP. 이젠일을 Servlet 과나눠서한다. JSP와서블릿의표현적인차이 - JSP는 <html> 내에서자바를사용할수있는수단을제공한다. - 서블릿은자바내에서 <html> 을작성할수있는수단을제공한다. - JSP나서블릿으로만웹페이지를작성하면자바와다양한코드가

2장 변수와 프로시저 작성하기

Windows 8에서 BioStar 1 설치하기

목차 윈도우드라이버 1. 매뉴얼안내 운영체제 (OS) 환경 윈도우드라이버준비 윈도우드라이버설치 Windows XP/Server 2003 에서설치 Serial 또는 Parallel 포트의경우.

untitled

14-Servlet

Microsoft Word - windows server 2003 수동설치_non pro support_.doc

untitled

Eclipse 와 Firefox 를이용한 Javascript 개발 발표자 : 문경대 11 년 10 월 26 일수요일

Microsoft Word - src.doc

Install stm32cubemx and st-link utility

var answer = confirm(" 확인이나취소를누르세요."); // 확인창은사용자의의사를묻는데사용합니다. if(answer == true){ document.write(" 확인을눌렀습니다."); else { document.write(" 취소를눌렀습니다.");

Microsoft PowerPoint Android-SDK설치.HelloAndroid(1.0h).pptx

[Brochure] KOR_TunA

제이쿼리 (JQuery) 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호

C++ Programming

untitled

< 목차 > Ⅰ. 개요 3 Ⅱ. 실시간스팸차단리스트 (RBL) ( 간편설정 ) 4 1. 메일서버 (Exchange Server 2007) 설정변경 4 2. 스팸차단테스트 10

BEA_WebLogic.hwp

untitled

SBR-100S User Manual

Microsoft PowerPoint SDK설치.HelloAndroid(1.5h).pptx

Interstage5 SOAP서비스 설정 가이드

리눅스설치가이드 3. 3Rabbitz Book 을리눅스에서설치하기위한절차는다음과같습니다. 설치에대한예시는우분투서버 기준으로진행됩니다. 1. Java Development Kit (JDK) 또는 Java Runtime Environment (JRE) 를설치합니다. 2.

ICAS CADWorx SPLM License 평가판설치가이드

슬라이드 1

슬라이드 1

<4D F736F F F696E74202D203137C0E55FBFACBDC0B9AEC1A6BCD6B7E7BCC72E707074>

I T C o t e n s P r o v i d e r h t t p : / / w w w. h a n b i t b o o k. c o. k r

ISP and CodeVisionAVR C Compiler.hwp

Microsoft PowerPoint - 04-UDP Programming.ppt

RHEV 2.2 인증서 만료 확인 및 갱신

Studuino소프트웨어 설치

쉽게 풀어쓴 C 프로그래밊

View Licenses and Services (customer)

게시판 스팸 실시간 차단 시스템

1. Windows 설치 (Client 설치 ) 원하는위치에다운받은발송클라이언트압축파일을해제합니다. Step 2. /conf/config.xml 파일수정 conf 폴더에서 config.xml 파일을텍스트에디터를이용하여 Open 합니다. config.xml 파일에서, 아

아이콘의 정의 본 사용자 설명서에서는 다음 아이콘을 사용합니다. 참고 참고는 발생할 수 있는 상황에 대처하는 방법을 알려 주거나 다른 기능과 함께 작동하는 방법에 대한 요령을 제공합니다. 상표 Brother 로고는 Brother Industries, Ltd.의 등록 상

목차 BUG DEQUEUE 의 WAIT TIME 이 1 초미만인경우, 설정한시간만큼대기하지않는문제가있습니다... 3 BUG [qp-select-pvo] group by 표현식에있는컬럼을참조하는집합연산이존재하지않으면결괏값오류가발생할수있습니다... 4

슬라이드 1

ArcGIS Desktop 9.2 Install Guide

DBMS & SQL Server Installation Database Laboratory

PowerPoint 프레젠테이션

슬라이드 1

PowerPoint 프레젠테이션


로거 자료실

HLS(HTTP Live Streaming) 이용가이드 1. HLS 소개 Apple iphone, ipad, ipod의운영체제인 ios에서사용하는표준 HTTP 기반스트리밍프로토콜입니다. 2. HLS 지원대상 - 디바이스 : iphone/ipad/ipod - 운영체제 :

Analytics > Log & Crash Search > Unity ios SDK [Deprecated] Log & Crash Unity ios SDK. TOAST SDK. Log & Crash Unity SDK Log & Crash Search. Log & Cras

PowerPoint 프레젠테이션

Slide 1

<4D F736F F F696E74202D20B5A5C0CCC5CDBAA3C0CCBDBA5F3130C1D6C2F75F31C2F7BDC32E >

Microsoft PowerPoint - CSharp-10-예외처리

Connection 8 22 UniSQLConnection / / 9 3 UniSQL OID SET

Data Sync Manager(DSM) Example Guide Data Sync Manager (DSM) Example Guide DSM Copyright 2003 Ari System, Inc. All Rights reserved. Data Sync Manager

윈도우시스템프로그래밍

Secure Programming Lecture1 : Introduction

1. 안드로이드개발환경설정 안드로이드개발을위해선툴체인을비롯한다양한소프트웨어패키지가필요합니다 툴체인 (Cross-Compiler) 설치 안드로이드 2.2 프로요부터는소스에기본툴체인이 prebuilt 라는이름으로포함되어있지만, 리눅스 나부트로더 (U-boot)

JavaGeneralProgramming.PDF

*Revision History 날짜 내용 최초작성 Tel Fax [2] page

PathEye 공식 블로그 다운로드 받으세요!! 지속적으로 업그래이드 됩니다. 여러분의 의견을 주시면 개발에 반영하겠 습니다.

MasoJava4_Dongbin.PDF

비디오 / 그래픽 아답터 네트워크 만약에 ArcGolbe를 사용하는 경우, 추가적인 디스크 공간 필요. ArcGlobe는 캐시파일을 생성하여 사용 24 비트 그래픽 가속기 Oepn GL 2.0 이상을 지원하는 비디오카드 최소 64 MB 이고 256 MB 이상을 메모리

SQL Developer Connect to TimesTen 유니원아이앤씨 DB 기술지원팀 2010 년 07 월 28 일 문서정보 프로젝트명 SQL Developer Connect to TimesTen 서브시스템명 버전 1.0 문서명 작성일 작성자

untitled

USER GUIDE

Endpoint Protector - Active Directory Deployment Guide

PowerPoint Presentation

Spring Boot/JDBC JdbcTemplate/CRUD 예제

PowerPoint 프레젠테이션

<C0CCBCBCBFB52DC1A4B4EBBFF82DBCAEBBE7B3EDB9AE2D D382E687770>

1217 WebTrafMon II

chapter1,2.doc

MySQL-.. 1

MF Driver Installation Guide

Windows Server 2012

메일서버등록제(SPF) 인증기능적용안내서 (Exchange Windows 2000) OS Mail Server SPF 적용모듈 작성기준 Windows Server 2000 Exchange Server 2003 GFI MailEssentials 14 for

DocsPin_Korean.pages

NTD36HD Manual

1. 자바프로그램기초 및개발환경 2 장 & 3 장. 자바개발도구 충남대학교 컴퓨터공학과

untitled

Research & Technique Apache Tomcat RCE 취약점 (CVE ) 취약점개요 지난 4월 15일전세계적으로가장많이사용되는웹애플리케이션서버인 Apache Tomcat에서 RCE 취약점이공개되었다. CVE 취약점은 W

OnTuneV3_Manager_Install

Office 365 사용자 가이드

C# Programming Guide - Types

vRealize Automation용 VMware Remote Console - VMware

목차 BUG offline replicator 에서유효하지않은로그를읽을경우비정상종료할수있다... 3 BUG 각 partition 이서로다른 tablespace 를가지고, column type 이 CLOB 이며, 해당 table 을 truncate

오프라인 사용을 위한 Tekla Structures 라이선스 대여

API - Notification 메크로를통하여어느특정상황이되었을때 SolidWorks 및보낸경로를통하여알림메시지를보낼수있습니다. 이번기술자료에서는메크로에서이벤트처리기를통하여진행할예정이며, 메크로에서작업을수행하는데유용할것입니다. 알림이벤트핸들러는응용프로그램구현하는데있어

4S 1차년도 평가 발표자료

server name>/arcgis/rest/services server name>/<web adaptor name>/rest/services ArcGIS 10.1 for Server System requirements - 지

02 C h a p t e r Java

FileMaker 15 ODBC 및 JDBC 설명서

Microsoft PowerPoint - 권장 사양

PowerPoint 프레젠테이션

Transcription:

WISEGRID 개발자매뉴얼

WISEGRID 개발자매뉴얼목차 01 Chapter 설치및설정 1. 제품개요 2. 운영환경 3. 제품구성 4. 제품설치 4 5 6 7 02 Chapter 샘플코드 1. 초기화 10 2. 헤더생성 13 3. 프로퍼티셋팅 16 4. 서버와통신하기 I 18 5. 서버와통신하기 II 21 03 Chapter 기타 1. API 매뉴얼 2. 라이선스발급절차 3. FAQ 27 28 31-2-

WISEGRID 개발자매뉴얼목차 1. 제품설치및설정 1 2 3 제품개요 운영환경 제품구성 4 제품설치 -3-

제품개요 1. 제품개요 제품개요 WiseGird 는웹업무화면을빠르게개발하고엑셀과유사한형태의스프레드시트기능을갖는그리드컴포넌트로기존 C/S 어플리케이션과같은직관적이고편리한사용자인터페이스를제공합니다 Fast Interactive Fast Interactive 사용자 풍부한사용자기능 업무효율성향상 빠른응답속도 (50%) 대량데이터처리 개발생산성향상 (30%) 데이터 Traffic 감소 (40%) 개발소스일관성확보 손쉬운기능확장 Web Application 개발생산성 유지보수편의성 표준화 데이터 Traffic 감소 사용자편의성 도입효과 개발생산성 데이터적합성검사와데이터를나타내는데소비되는개발공수부분을해결하게됨으로기존웹개발에비해개발소스가 30% 이상줄어들게되어개발생산성을높일수있습니다. 유지보수편의성 정형화된패턴개발을유도하여 UI 형태에대한일괄적용및화면변경사항을쉽게반영할수있습니다. 표준화 통신속도 Web 2.0 Ajax 엔진사용, 유니코드지원, 국내 PKI 지원을통한웹기술의표준을지향하여일반웹어플리케이션구축시유연한구조를지원합니다. 순수데이터만통신을함으로서일반적인웹화면의 Traffic 과비교하여 40% 이상 Traffic 감소로통신속도가크게향상되고서버 / 네트워크자원을효율적으로사용할수있게됩니다. 사용자편의성 데이터작성및편집을 Excel 수준으로쉽게할수있어일반적인웹어플리케이션에비해업무생산성을크게향상시킬수있습니다. -4-

운영환경 2. 제품운영환경 WiseGrid 의 Client 운영환경과 Server 운영환경은아래와같습니다. 1 Client 운영환경 구분내용 하드웨어 메모리 : 512MB RAM (1GB 이상권장 ) 디스크 : 100MB 이상의저장공간 운영체제 브라우저 Windows 2000 / XP 이상 Microsoft Internet Explorer 5.0 이상 2 Server 운영환경 구분내용 하드웨어 메모리 : 512MB RAM (1GB이상권장 ) 디스크 : 100MB 이상의저장공간 운영체제 JVM 버전 Encording 규격 Windows 2000 / XP / 2003 이상 UNIX (Solaris, HP-UX, AIX, IRIX, True64 등 ) Linux (Redhat, Suse, 한컴 Linux, Buyo 등 ) Java Runtime Environment 1.4 이상 Java Servlet 2.3 이상 서버인코딩은 UTF-8 로통신하게되므로 WAS 에별도의인코딩필터를설정해놓으면통신이불가능함 적용 WAS WebLogic 6.1, 7.0, 8.1, 9.0, 9.1, 9.2 Jeus 4.0, 4.1, 4.2, 5.0 WebSphere 5.0, 5.1, 6.0 Resin 2.1, 3.0 Tomcat 4.1, 5.0, 5.5, 6.0 상기 WAS 버전외의제품은적용된 Java Servlet 및 JSP 규격을확인하여적용가능여부를판단할수있음 -5-

제품구성 3. 제품구성 WiseGrid 의공급시제공되는제품패키지구성은다음과같습니다. 1 2 제품 CD : WiseGrid Installation 파일제품매뉴얼 : 출력된제품매뉴얼 WiseGrid Installation 파일을실행하여로컬 PC 에설치된디렉토리구조 WiseGrid Demo docs 개발자및사용자매뉴얼, 제품소개서포함 install client WiseGrid, WiseGrid Unicode Cabinet File 포함 server 각언어별 XLib (Server Lib) 포함 samples 각언어별샘플포함 (Java,.NET 1.1,.NET 2.0, ASP) utils Reference Installer 포함 (WiseGrid 설치에러시사용 ) -6-

제품설치 4. 제품설치 WiseGrid Cabinet File 설치 WiseGrid Installer 가포함된 WiseGrid Cabinet File 을복사합니다. WiseGrid Cabinet File 은 Web Server 에복사되어야하며 URL 로접근가능한곳에위치해야합니다. (Web Server 와 WAS 가분리되지않은경우에는 WAS 에설치 ) 따라서, Web Server 의 Web ROOT 하위에특정폴더를생성해 WiseGrid Cabinet File 을올려놓습니다. 위의경우 Tomcat 에 Web ROOT 하위에 WiseGrid 라는폴더를생성해 Cabinet File 을올려놓았습니다. 별도의설치없이복사만해놓으면됩니다. -7-

제품설치 4. 제품설치 XLib 설치 XLib 는 WiseGrid 와서버사이드간에주고받는전문을객체화시켜주는라이브러리와데이터형식인 GridData 클래스를포함하고있습니다. JAR 형태로배포되므로각 WAS 별 lib 폴더위에올리시면됩니다. 위의경우 Tomcat 의기본컨텍스트 ROOT 밑에 WEB-INF/lib 안에올려놓았습니다. 복사가완료된후 WAS 를다시시작하면설치가완료됩니다. -8-

WISEGRID 개발자매뉴얼목차 2. 샘플코드 1 2 3 초기화 헤더생성 프로퍼티셋팅 4 서버와통신하기 I 5 서버와통신하기 II -9-

초기화 WiseGrid 를초기화하는방법은아래와같습니다. WiseGrid 는 ActiveX 형태의제품이므로 HTML 에표현하기위해서는 <OBJECT> 태그를이용해초기화를합니다. <OBJECT> 태그를별도의스크립트파일로생성하여작업해보겠습니다. Web ROOT 위치에 js 라는폴더를생성하고 WiseGridTag.js 라는파일을만들어아래와같이코딩합니다. function initwisegrid(objname, width, height) var WG_TAG = <OBJECT ID= + objname + codebase= /WiseGrid/WiseGrid.cab#version=4,0,0,1 ; WG_TAG = WG_TAG + NAME= + objname + WIDTH= + width + HEIGHT= + height + border=0 ; WG_TAG = WG_TAG + CLASSID='CLSID:E8AA1760-8BE5-4891-B433-C53F7333710F > ; WG_TAG = WG_TAG + " <PARAM NAME = 'strlicensekeylist' VALUE = '122670CA8BD07EF9CD21AC63B6EB6E08'>"; WG_TAG = WG_TAG + </OBJECT> ; document.write(wg_tag); Codebase에는 WiseGrid의경로를정확히입력합니다. 위의예제처럼절대경로로설정하지않고상대경로로설정할경우에는 document.write 될페이지에서부터 WiseGrid.cab 이있는폴더의상대경로를입력하면됩니다. Version 은다운로드받은 WiseGrid 의버전을적습니다. 주의할사항은버전의구분자가.(period) 가아니라,(comma) 입니다. (Version 정보를잘못기입하면 WiseGrid 가설치가안되거나계속설치되는상황이발생할수있습니다.) WiseGrid 의제품별 CLASSID 와개발용라이선스키는아래와같습니다. WiseGrid - Class ID : CLSID:E8AA1760-8BE5-4891-B433-C53F7333710F - Developer License : 122670CA8BD07EF9CD21AC63B6EB6E08 (1 Month Only) WiseGrid Unicode - Class ID : CLSID:0CE50171-51F4-4b1e-992B-4ECC8E0BE537 - Developer License : 8BA4276E9CF2E8B2BBA5F636F384FD4A (1 Month Only) WiseGrid 와 WiseGrid Unicode 는별도의 Class ID 를가진다른제품입니다. ( 내부기능은현재시점까지는모두동일합니다. 2008 년 12 월기준 ) 다운로드받으신 WiseGrid 제품의 Class ID 와개발라이선스를사용하면됩니다. -10-

초기화 WiseGridTab.js 파일생성이완료되었으면 WiseGrid 를이용한 Sample 페이지를작성해보겠습니다. WebROOT 위치에 WiseGridSample.html 파일을생성한후아래와같이코딩합니다. <html> <head> <title>wisegrid Initialize Sample</title> <script language="javascript" src="/js/wisegridtag.js"></script> </head> <body> <h1>wisegrid Initialize Sample</h1> <hr> <table> <tr> <td><script>initwisegrid("wisegrid", "100%", "300");</script></td> </tr> </table> </body> </html> 아래와같이파일들이준비되었다면 WAS 를 StartUp 하고 WiseGridSample.html 페이지를띄워봅니다. 페이지를띄우면아래와같이 WiseGrid 의설치가자동진행됩니다. 설치버튼을누릅니다. (WiseGrid 를 Local PC 에처음설치하는사용자인경우에만설치를진행합니다.) -11-

초기화 설치가완료되면아래와같이비어있는 WiseGrid 가생성됩니다. WiseGrid 의초기화작업이완료되었습니다. -12-

헤더생성 초기화가완료된 WiseGrid 에헤더를셋팅하는방법을살펴봅니다. <html> <head> <script src= /js/wisegridtag.js"></script> <script language="javascript" for="wisegrid" event="initialize()"> setheader(); </script> <script> function setheader() document.wisegrid.addheader("check", " 체크박스 ", "t_checkbox", 2, 40, true); document.wisegrid.addheader("text", " 텍스트 ", "t_text", 20, 80, true); document.wisegrid.addheader("number", " 숫자 ", "t_number", 10.2, 60, true); document.wisegrid.addheader("date", " 날짜 ", "t_date", 10, 60, true); document.wisegrid.addheader("combo", " 콤보 ", "t_combo", 3, 60, true); document.wisegrid.addheader("imagetext", " 이미지 ", "t_imagetext", 20, 100, true); document.wisegrid.boundheader(); </script> </head> <body> <table width="800" height="400" cellspacing="0" cellpadding="0" border="0"> <tr> <td><script>initwisegrid("wisegrid", "800", "400");</script></td> </tr> </table> </body> </html> 위의소스는 WiseGrid 의헤더에 체크박스, 텍스트, 숫자, 날짜, 콤보, 이미지 라는컬럼을생성합니다. 각각의자세한설명은아래와같습니다. 헤더는어느시점에 Add 해야할까요? WiseGrid 는 ActiveX 형태의제품이기때문에내부적으로별도의 Initialize 작업이필요합니다. 그래서 WiseGrid Object 가브라우저에 document.write 되는순간내부적으로 Initialize 작업을진행하게됩니다. 브라우저의 onload Event 시점에 WiseGrid 에헤더를추가하는메서드를사용하게되면그리드가초기화작업이아직완료되지않은상태에서메서드를사용하게되어오류가발생할수도있습니다. ( 일반적으로 Body onload 시점과 WiseGrid 의 Initialize 시점은거의동일시점에발생하지만, 간혹시스템의성능에따라조금늦게발생할수도있습니다.) -13-

헤더생성 그래서, WiseGrid 는내부적으로 Initialize 가완료되었을시점에 JavaScript Event 를발생시켜줍니다. 아래의소스코드를참조해주십시오. <script language="javascript" for="wisegrid" event="initialize()"> setheader(); </script> 생성시킨 WiseGrid Object 의 ID 가 "WiseGrid" 라면위와같이해당 ID 명으로 Initialize() Event 가발생하게됩니다. 이 Event 를받아서헤더를셋팅하는메서드들을동작시키면 WiseGrid 에헤더를추가할수있습니다. 위의소스에서는 Initialize Event 를받아서 setheader() 라는 Handler Function 을호출했습니다. 그럼, 헤더를추가하는메서드인 AddHeader 메서드에대해알아봅니다. AddHeader() 메서드 - AddHeader() 메서드를이용하면 WiseGrid 에지정한타입별로컬럼을생성할수있습니다. AddHeader() 메서드에들어가는 Parameter 는다음과같습니다. AddHeader(String strcolumnkey, String strcolumntext, String strcolumntype, double dblmaxlength, long nsize, boolean beditable) strcolumnkey : 등록된컬럼에접근할수있는키로사용됩니다. strcolumntext : 컬럼헤더에표시될텍스트를입력합니다. strcolumntype : 사용할수있는 ColumnType 은다음과같습니다. * t_checkbox : 컬럼을체크박스로설정합니다. * t_text : 컬럼을일반텍스트로설정합니다. * t_number : 컬럼을숫자타입으로설정합니다. * t_date : 컬럼을날짜타입으로설정합니다. * t_combo : 컬럼을콤보박스로설정합니다. * t_imagetext : 컬럼을이미지텍스트로설정합니다. dblmaxlength : 셀에삽입될데이터의 MaxLength 를결정합니다. ex) 40 40 개문자 ex) 40.3 (t_number 타입의경우 ) 정수자리 : 40, 소수점이하자리 : 3 ex) -1 : -1 인경우에는 MaxLength 를체크하지않습니다. nsize : 컬럼헤더의 Width Size 를결정합니다. beditable : 셀의수정가능여부를결정합니다. (true : 수정가능, false : 수정불가능 ) -14-

헤더생성 function setheader() document.wisegrid.addheader("check", " 체크박스 ", "t_checkbox", 2, 40, true); document.wisegrid.addheader("text", " 텍스트 ", "t_text", 20, 80, true); document.wisegrid.addheader("number", " 숫자 ", "t_number", 10.2, 60, true); document.wisegrid.addheader("date", " 날짜 ", "t_date", 10, 60, true); document.wisegrid.addheader("combo", " 콤보 ", "t_combo", 3, 60, true); document.wisegrid.addheader("imagetext", " 이미지 ", "t_imagetext", 20, 100, true); document.wisegrid.boundheader(); 위와같이, Initialize Event 의 Handler 로호출된 setheader Fuction 안에화면에필요한컬럼들을 AddHeader 메서드를이용하여셋팅하고 BoundHeader 메서드로 Bounding 시키면아래의이미지와같이비어있는 WiseGrid 에헤더들이셋팅됩니다. 위의상태는헤더는추가되었지만디자인요소들은전혀추가되지않은상태입니다. WiseGrid 의다양한 Property 들을이용해디자인요소들을추가할수있습니다. -15-

프로퍼티셋팅 WiseGrid 의 Property 들을사용하여디자인을셋팅하는방법을살펴봅니다. <html> <head> <script src= /js/wisegridtag.js"></script> <script language="javascript" for="wisegrid" event="initialize()"> setproperty(); setheader(); </script> <script> function setproperty() // Cell Font Setting document.wisegrid.strcellfontname = " 돋움 "; document.wisegrid.ncellfontsize = 10; // Header Font Setting document.wisegrid.strhdfontname = " 돋움 "; document.wisegrid.nhdfontsize = 10; document.wisegrid.bhdfontbold = true; // Header Color document.wisegrid.strhdbgcolor = "95 177 206"; document.wisegrid.strhdfgcolor = "255 255 255"; // Cell Color document.wisegrid.strgridbgcolor ="255 255 255"; document.wisegrid.strcellbgcolor ="255 255 255"; document.wisegrid.strcellfgcolor ="51 51 51 ; // 내용중략 // ETC document.wisegrid.strbgimage = "../../images/icompia_logo_white.gif"; document.wisegrid.nalphalevel = 200; document.wisegrid.nrowheight = 22; function setheader() // 내용중략 </script> </head> <body> <table width="800" height="400" cellspacing="0" cellpadding="0" border="0"> <tr> <td><script>initwisegrid("wisegrid", "800", "400");</script></td> </tr> </table> </body> </html> -16-

프로퍼티셋팅 위의예제는 WiseGrid 가초기화될때발생하는 Initialize Event 를받아 setproperty, setheader 두개의 Handler 를호출하여 WiseGrid 의헤더셋팅과기본디자인속성등을정의하는소스코드입니다. 이렇게소스가구성되면사용자는아래의이미지와같이페이지로드시점에이미 WiseGrid 에 Header 와 Property 들이셋팅된상태로화면을보게됩니다. -17-

서버와통신하기 I 아래의그림은 WiseGrid 와 Server 의통신구조도입니다. WiseGrid 는최근의 RIA 기반 Web 2.0 기술트랜드인 AJAX(Asyncronous Java And Xml) 의기본클래스 XMLHTTPRequest 객체를이용해 HTTP 또는 HTTPS 방식으로비동기 ( 또는동기 ) 통신을합니다. WiseGrid 와 Server 가주고받는데이터는전문 (Raw Data) 형태또는압축된 Zip 데이터 (Binary Data) 형태로주고받습니다. (Binary Data 의경우, 압축조회시 Server 에서 WiseGrid 로전송할때, GZip 형태로압축해전송, 양방향이아니고단방향임 ) Server 는 XLib 를이용해전달받은전문을 Parsing 하여 GridData 형의객체로변환합니다. 개발자는생성된 GridData 객체를이용해 DB 에데이터를전달합니다. 역으로 DB에서쿼리해온데이터를 GridData형의객체에넣어주신후 XLib를이용해전문 ( 또는바이너리데이터 ) 으로 Parsing 해 WiseGrid 로전달하면조회된데이터가 WiseGrid 에그려집니다. Client 에설치된 WiseGrid 는 DoQuery 라는메서드를이용해서버사이드를비동기호출합니다. DoQuery 메서드에대해자세히알아봅니다. <script> function doquery() var fromdate = document.examform.fromdate.value; var todate = document.examform.todate.value; // 조회시필요한조회조건을 Parameter 셋팅 document.wisegrid.setparam("fromdate", fromdate); document.wisegrid.setparam("todate", todate); // 해당서블릿으로헤더정보와셋팅된 Parameter들을전문화시켜전달 document.wisegrid.doquery("/servlet/wisegrid.sample.basicselect"); </script> -18-

서버와통신하기 I 서버에전달할파라메터설정 SetParam(String strparamkey, String strparamvalue) SetParam 메서드는서버에전달할파라메터를설정합니다. * strparamkey : 서버에서 Parameter 에접근할 Key * strparamvalue : 서버에전달할 Parameter Value 서버와의통신 WiseGrid 에서의통신은사용목적에따라조회시와등록, 수정, 삭제시의두가지방법으로나뉘어질수있습니다. 1. 조회시의 DoQuery 사용방법 DoQuery(String strurl) DoQuery 메서드에서버와통신할 URL만넘길경우 WiseGrid는서버에생성된 Header 정보와 Parameter 들을전문화시켜전송합니다. basyncmode와 bvalidationcheck는비워둘경우 default값으로 true가셋팅되어전송합니다. Default 값 : basyncmode - true( 비동기 ), bvalidationcheck - true(validation Check 함 ) document.wisegrid.doquery("/servlet/wisegrid.sample.basicselect"); DoQuery(String strurl, String strcolumnkey, boolean basyncmode, boolean bvalidationcheck) DoQuery 메서드는기본적으로비동기통신을하고 Validation Check 를하도록설정되어있지만비동기통신을하지않거나 Validation Check 를하지않으려는경우에는 basyncmode, bvalidationcheck 값을 false 로넘기면됩니다. document.wisegrid.doquery("/servlet/wisegrid.sample.basicselect, null, false, false); 여기서잠깐! - Validation Check 란? WiseGrid 의컬럼들은각각 Type(t_text, t_number...) 과 MaxLength 를가지고있습니다. Server Side 로부터전달된전문이각각의컬럼에설정된 Type 과 MaxLength 에맞지않는데이터가내려올경우, Validation Check 가 true 로설정되어있다면 WiseGrid 는에러메세지를보이고모든데이터를초기화시켜버립니다. -19-

서버와통신하기 I 2. 등록, 수정, 삭제시의 DoQuery 사용방법 DoQuery(String strurl, String strcolumnkey) DoQuery 메서드에 URL 과 t_checkbox 타입의 Column Key 또는저장모드로설정된 t_text 타입의 Column Key 를같이넘기게되면 t_checkbox 타입의컬럼에서체크가되어있는 Row 또는저장모드가변경된 Row 와셋팅된 Parameter 들이같이전송됩니다. (basyncmode 와 bvalidationcheck 는비워둘경우 default 값으로 true 가셋팅되어전송합니다.) document.wisegrid.doquery("/servlet/wisegrid.sample.basicselect, CHECK ); DoQuery(String strurl, int[] nrow) DoQuery 메서드에 URL 과전송할 Row 의인덱스를배열로넘기게되면해당 Row 와셋팅된 Parameter 들이같이전송됩니다. (basyncmode 와 bvalidationcheck 는비워둘경우 default 값으로 true 가셋팅되어전송합니다.) var nrows = new Array(3); nrows[0] = 0; nrows[1] = 3; nrows[2] = 5; document.wisegrid.doquery("/servlet/wisegrid.sample.basicselect, nrows); DoQuery(String strurl, WISEGRIDDATA_ALL ) DoQuery 메서드에 URL 과 "WISEGRIDDATA_ALL" 값을넘기게되면 WiseGrid 의전체데이터와셋팅된 Parameter 들이같이전송됩니다. (basyncmode 와 bvalidationcheck 는비워둘경우 default 값으로 true 가셋팅되어전송합니다.) document.wisegrid.doquery("/servlet/wisegrid.sample.basicselect, WISEGRIDDATA_ALL ); -20-

서버와통신하기 II WiseGrid 는 XMLHTTPRequest 객체를이용하여비동기 ( 또는동기 ) 적으로 Server Side 에전문을전달합니다. 이때, 전달되는전문은 WISEGRID_DATA 라는 Parameter 에담겨전달됩니다. 아래의예제는 Server Side 를 Servlet 으로구성한예제입니다. Servlet 에서는 WISEGRID_DATA 로올라온전문을 Getting 하여전문을받아처리합니다. 아래의소스를참조해주십시오. // BasicSelect.java package wisegrid.sample; import javax.servlet.servletexception; import javax.servlet.http.*; import java.io.ioexception; import java.io.printwriter; import xlib.cmc.operategriddata; import xlib.cmc.griddata; public class BasicSelect extends HttpServlet // WiseGrid 전달하는 Request 는항상 POST 타입이므로 dopost 로받아야합니다. public void dopost(httpservletrequest req, HttpServletResponse res) throws IOException, ServletException // 빈 GridData 객체를생성합니다. GridData gdreq = null; GridData gdres = null; // WiseGrid 는통신시에 UTF-8 형식으로데이터를주고받습니다. req.setcharacterencoding("utf-8"); res.setcontenttype("text/html; charset=utf-8"); // 전문을 Write 할 PrintWriter 객체를미리생성해놓습니다. PrintWriter out = res.getwriter(); try // WiseGrid 로부터전달된전문을받습니다. String rawdata = req.getparameter("wisegrid_data"); // 받아온전문을 Parsing 해 GridData 객체를생성합니다. gdreq = OperateGridData.parse(rawData); // 생성한객체를특정메서드에넘겨처리합니다. if( select.equals(gdreq.getparam( mode ))) gdres = BasicSelectQry(gdReq); else gdres = BasicInsertQry(gdReq); // 다음페이지에서계속. -21-

서버와통신하기 II // 이전페이지에서계속 catch(exception e) // Exception 발생시 gdres 객체를초기화하고메세지와상태값만셋팅합니다. gdres = new GridData(); gdres.setmessage("error: " + e.getmessage()); gdres.setstatus("false"); e.printstacktrace(); finally try // WiseGrid에전달할데이터가담긴 GridData 객체와미리생성해놓은 PrintWriter 객체를넘겨 // 데이터를 Parsing 한후전송합니다. OperateGridData.write(gdRes, out); catch(exception e) e.printstacktrace(); WiseGrid 는 POST 방식으로 WISEGRID_DATA 라는파라메터에전문을담아 Server Side 를호출합니다. 인코딩방식으로 AJAX 표준인코딩방식인 UTF-8 형태로전문을전달합니다. 따라서 request, response 의인코딩형식을 UTF-8 형태로반드시설정해야합니다. 전달받은전문을 OperateGridData 클래스의 parse 메서드에전달하면 GridData 형의객체를생성해줍니다. 클라이언트에서전달한 mode 라는파라메터값으로현재의프로세스가 select 프로세스인지 Insert 프로세스인지판단하여분기합니다. 최종적으로생성된 GridData 객체와 Response 의 Writer 객체를 OperateGridData 클래스의 write 메서드에넘기면객체를다시전문화하여 Response Write 합니다. 예외발생시에는 GridData 객체를새로생성하여에러메시지와상태값 ( 필요시에는파라메터도포함 ) 만셋팅하여 Write 합니다. -22-

서버와통신하기 II 1. 조회시처리메서드 Client 에서전달받은전문으로생성한 GridData 객체를넘겨받아로직처리를진행합니다. public GridData BasicSelectQry(GridData gdreq) throws Exception // 전송할데이터를담을빈 GridData 를생성합니다. GridData gdres = null; int rowcount = 0; try // WiseGrid 에서전달된헤더정보와 ComboList, ImageList 를복사해 GridData 를생성합니다. // cloneresponsegriddata 메서드를사용하면헤더를일일이생성하지않고손쉽게만들수있습니다. gdres = OperateGridData.cloneResponseGridData(gdReq); // 조회조건으로사용할 Param 값들을가져옵니다. String from_date = gdreq.getparam("from_date"); String to_date = gdreq.getparam("to_date"); // 받아온조회조건을 Business Logic 단에넘겨해당데이터를쿼리해옵니다. // 본예제에서는 DB Connection 부분은제외되어있습니다. // 조회해온데이터의 rowcount 가 100 건이라고가정합니다. rowcount = 100; // 조회된데이터가없을경우메세지와상태값만셋팅한후 Return 합니다. if(rowcount == 0) gdres.setmessage(" 조회된데이터가없습니다."); gdres.setstatus("true"); return gdres; // Combo List 를 Server Side 에서도셋팅할수있습니다. // 화면단에서셋팅하지않은경우에는 Server Side 에서셋팅합니다. String[] combovalue = " 콤보 1", " 콤보 2", " 콤보 3"; String[] combohiddenvalue = "C1", "C2", "C3"; gdres.getheader("combo").setcombovalues(combovalue, combohiddenvalue); // Image List 를 Server Side 에서도셋팅할수있습니다. // 화면단에서셋팅하지않은경우에는 Server Side 에서셋팅합니다. String[] imageurls = "../imgs/image01.gif", "../imgs/image02.gif"; gdres.getheader("imagetext").setimageurls(imageurls); // 다음페이지에서계속. -23-

서버와통신하기 II // 이전페이지에서계속. // GridData 에데이터를셋팅합니다. for(int i = 0; i < rowcount; i++) // t_text, t_number, t_date 에는 addvalue(string value, String hiddenvalue) 메서드를사용합니다. // t_combo 에는 addselectedhiddenvalue(string value) 또는 addselectedindex(int comboindex) // 메서드를사용합니다. // t_imagetext 에는 addvalue(string value, String hiddenvalue, int imageindex) 메서드를사용합니다. gdres.getheader("check").addvalue( 0", ""); gdres.getheader("text").addvalue("text : " + String.valueOf(i), ""); gdres.getheader("number").addvalue(string.valueof(i), ""); gdres.getheader("date").addvalue("20081201", ""); gdres.getheader("combo").addselectedhiddenvalue("c1"); gdres.getheader("imagetext").addvalue("imagetext : " + String.valueOf(i), "", 0); catch(exception e) throw e; // 메세지와상태값을셋팅합니다. gdres.setmessage(" 성공적으로작업하였습니다."); gdres.setstatus("true"); return gdres; Client 에서전달받은전문으로생성한 GridData 객체를 cloneresponsegriddata 메서드를이용해헤더부분과콤보리스트, 이미지리스트부분만복사하여새로운객체로생성합니다. Client 에서전달한파라메터들을 getparam 메서드를이용해얻어와 DB 의데이터를조회할때조회조건으로사용합니다. Database 에서조회된 DataSet 형태의객체를 RowCount 만큼 Loop 하면서 GridData 객체에데이터를전달합니다. 성공적으로작업을완료하였다면메시지와상태값을셋팅한후생성된 GridData 를반환합니다. -24-

서버와통신하기 II 2. 등록 ( 수정, 삭제 ) 시처리메서드 Client 에서전달받은전문으로생성한 GridData 객체를넘겨받아로직처리를진행합니다. public GridData BasicInsertQry(GridData gdreq) throws Exception // 전송할데이터를담을빈 GridData 를생성합니다. GridData gdres = new GridData(); int rowcount = 0; try // 화면에서전달받은컬럼중하나의컬럼에해당하는 RowCount 를가져온다. rowcount = gdreq.getheader( CHECK").getRowCount(); // 등록시입력할데이터를정해진형태로만들어놓는다. String indata[][] = new String[rowCount][]; // 데이터셋팅 for(int i = 0; i < rowcount; i++) String Data[] = gdreq.getheader( TEXT").getValue(i), gdreq.getheader( NUMBER").getValue(i), gdreq.getheader( DATE").getValue(i), gdreq.getheader( COMBO").getComboHiddenValues()[ gdreq.getheader( COMBO").getSelectedIndex(i)], gdreq.getheader("price").getvalue(i) ; indata[i] = Data; // 생성된자료구조를 DataBase 에넘겨처리한다. // 화면에전달할파라미터, 메시지, 상태값을셋팅한다. gdres.addparam("mode", "insert"); gdres.setmessage(" 성공적으로작업하였습니다."); gdres.setstatus("true"); catch (Exception e) throw e; return gdres; Insert 작업후메시지와파라메터, 상태값등을전달할빈 GridData 객체를생성합니다. 특정컬럼의로우카운트를얻어내어해당로우카운트만큼 Loop 하면서각컬럼의값들을가져온다. 가져온데이터는 DataBase 에전달할특정객체형태로만들어 Model 영역에전달해 DataBase 에 Insert 한다. 처리가완료되면메시지와파라메터, 상태값등을셋팅해반환한다. -25-

WISEGRID 개발자매뉴얼목차 3. 기타 1 2 3 API 매뉴얼 라이선스발급절차 FAQ -26-

API 매뉴얼 WiseGrid 는주기적으로업데이트를진행하기때문에오프라인 API 매뉴얼을제공하지않습니다. 아래의사이트에접속하시면 300 여개 API 의상세기능과실제동작등을확인해볼수있습니다. (300 여개 API : Property 70 여개, Method 210 여개, Event 20 여개, 2008 년 12 월기준 ) 주소 : http://wisegrid.icompia.com/documents-intro.do -27-

라이선스발급절차 WiseGrid 라이센스요청은 WiseGrid Forum 사이트를통해서만발급해드리고있습니다. 세금계산서가완료되었을경우 WiseGrid Forum 사이트에가입하신후발급신청이가능합니다. WiseGrid Forum : http://wisegrid.icompia.com 라이센스요청은기업회원만요청가능하므로현재일반회원이신분은기업회원으로회원정보를수정해주시기바랍니다. 일반회원에서기업회원으로변경하는방법은아래의게시물을참조해주십시오. http://wisegrid.icompia.com/article/forumfaq/120701663915261 WiseGrid Forum 사이트상단의 How to Buy > 라이센스발급요청메뉴를클릭합니다. 맨처음보이는기본정보는현재사용자의회사정보와사용자정보입니다. 정보가맞는지확인하고맞지않을경우 MyPage 로이동해수정합니다. 고객사정보를기입합니다. 고객사정보는실제 WiseGrid 가적용된사이트를사용할고객사를의미합니다. 프로젝트명은현재진행중인프로젝트명을기입합니다. 담당자, 연락처, 팩스, e-mail 은운영담당자의정보를기입합니다. -28-

라이선스발급절차 환경정보는반영될서버의환경정보를기입합니다. 개발환경은개발언어에따라 JAVA, ASP.NET VB, ASP.NET CS, ASP 로구분되어있습니다. 해당언어를선택합니다. 기타서버정보는사용하는서버의환경정보를간단하게기입해주시면됩니다. ( 개발환경을선택하면언어별로기입예제가아래에보이게됩니다. 해당하는사항으로수정하시면됩니다.) 환경정보는추후에지원요청이있을때저희가참고할수있는자료가되므로가급적정확히기입부탁드립니다. 라이선스정보부분입니다. WiseGrid 의라이센스정책은서버단위 CPU 라이센스입니다. 라이선스정보는서버단위로입력하시면됩니다. ( 서버가두대라면 2 건입력 ) 한개이상의서버를라이선스요청하신다면오른쪽상단에보이는 + 버튼을클릭하시면한줄이더생깁니다. 실수로추가하였다면해당로우를체크하시고 - 버튼을누르면삭제됩니다. 라이센스는 IP 와 CPU 정보로생성되므로 CPU 수량과, CPU Core 구분, Hyper Threading 여부를정확히입력하셔야합니다. 라이센스구분은 WiseGrid, WiseGrid Unicode, WiseGrid + FusionCharts, WiseGrid Unicode + FusionCharts 로되어있습니다. 해당하는라이센스구분을선택합니다. -29-

라이선스발급절차 기타문의사항은별도의문의사항이있으시면넣으면됩니다. 라이센스발급요청의준비가완료되었다면하단의발급요청버튼을클릭합니다. 라이센스발급요청이정상적으로처리되었습니다. -30-

FAQ Q. WiseGrid 설치시에러가발생합니다. A. WiseGrid 가사용하는 Windows System Dll 파일들중에 Registry 에정상적으로등록되지않은파일이존재하면 WiseGrid 의설치가정상진행되지않고오류를발생할수있습니다. WiseGrid 설치중아래와같은메세지가발생할경우아래에첨부된 WiseGrid Reference Installer 를다운받아설치하신후 WiseGrid 설치를다시진행하십시오. WiseGrid Reference Installer 를실행한후에 WiseGrid 설치작업을진행하였는데도동일한증상이발생하면 아래와같이 command 명령을입력해 Dll 을수동등록합니다. C:\> cd windows\system32 C:\WINDOWS\system32> regsvr32 atl.dll 위와같이입력하면아래와같은메시지박스가뜹니다. 이렇게정상적으로메시지가뜨면 WiseGrid 설치작업을다시진행해보십시오. -31-

FAQ Q. WiseGrid 업데이트는어떻게하나요? A. WiseGrid Forum 사이트에업데이트된최신버전을다운로드받은뒤서버에올라가있는 WiseGrid.cab 파일과교체합니다. 그리고 WiseGrid 의 Object TAG 가담겨있는스크립트파일을오픈한뒤 codebase 에정의된 Version 을다운로드받은버전과동일하게변경합니다. 예 ) codebase= /WiseGrid/WiseGrid.cab#version=4,0,0,1 주의할사항은버전의구분자가.(period) 가아닌,(comma) 입니다. 버전을변경한이후시점부터 WiseGrid 가포함된페이지에접근하는유저들은자동업데이트가진행됩니다. Q. 날짜제한라이선스 ( 무료라이선스 ) 를사용하는경우만료메세지가뜹니다. 어떻게해야하나요? A. 개발자라이선스를구매한경우로컬에서유효기간없이사용가능하지만날짜제한라이선스 ( 무료라이선스 ) 를사용하는경우 WiseGrid 가로컬 PC 에설치된지한달이지나면매번통신할때마다라이선스만료메시지가발생합니다. 이렇게만료메세지가보일때에는 WiseGrid Forum 사이트의 How to Buy > 개발라이센스초기화메뉴를클릭해이동합니다. 페이지접속후 WiseAdmin 이라는 ActiveX 를설치하시면해당화면에서바로초기화버튼으로초기화가가능합니다. 초기화시점부터한달간만료메시지없이사용이가능합니다. Q. WiseGrid 가서버와통신시한글데이터가모두? 로전환되어보입니다. A. WiseGrid 는 XMLHTTPRequest(AJAX) 를이용해서버서이드와비동기통신을합니다. XMLHTTPRequest 의인코딩표준이 UTF-8 이기때문에 WiseGrid 또한기본인코딩방식을 UTF- 8 로고정하였습니다. ( 사이트개발시무조건 UTF-8 로개발해야하는것이아니라 WiseGrid 와서버사이드페이지와의통신인코딩방식이 UTF-8 로고정되면됩니다.) WAS 단에인코딩필터를걸어놓는경우한글깨짐현상이발생할수있습니다. WAS 단에별도의인코딩필터가걸려있는지확인해보십시오. -32-

본 WISEGRID 사용자매뉴얼은 2008 년 12 월을기준으로작성되었으며, 일체의저작권은 아이컴피아가소유하고있습니다. 아이컴피아의허락없이 이책의일부혹은전체내용을무단복사, 복제전재하는것은 저작권법에저촉됩니다. 주 소 : 137-130 서울시서초구양재동 249-2번지봄날아침 2층 전 화 : 02-577-9111 팩 스 : 02-529-9111 홈페이지 : http://www.icompia.com 이메일 : wisegrid@icompia.com