SOFTBASE XFRAME DEVELOPMENT GUIDE SERIES 2012.02.18 서울특별시구로구구로 3 동한신 IT 타워 1215 호 Phone 02-2108-8030 Fax 02-2108-8031 www.softbase.co.kr Copyright 2010 SOFTBase Inc. All rights reserved
목차 1 장 : ActiveX 컴포넌트개요... 3 ActiveX 컴포넌트개요... 3 ActiveX 컴포넌트주요기능... 4 ActiveX 컴포넌트아키텍처... 5 프라퍼티아키텍처... 5 API 호출아키텍처... 6 외부컴포넌트이벤트처리아키텍처... 7 2 장 : ActiveX 컴포넌트연동... 8 ActiveX 컴포넌트내부프라퍼티... 8 ActiveX 컴포넌트 API... 10 3 장 : ActiveX 컴포넌트샘플...11 샘플개요... 11 외부컴포넌트설정... 12 ActiveX 콘트롤생성... 12 PDF Reader API... 14 외부컴포넌트 API 호출샘플화면및소스... 15 화면스크립트파일... 16-2 -
1 장 : ActiveX 컴포넌트개요 이장에서는 XFrame 에서제공하는 ActiveX 컴포넌트에대해서기술합니다. 이장에서기술하는내용은 아래와같습니다. ActiveX 컴포넌트개요 ActiveX 컴포넌트주요기능 ActiveX 컴포넌트아키텍처 ActiveX 컴포넌트개요 ActiveX 컴포넌트는 XFrame 솔루션에서제공하는컴포넌트가아닌, 외부컴포넌트를 XFrameDevStudio 에서 연동하여개발하기위한컴포넌트이다. ActiveX 컴포넌트는외부컴포넌트를 Embeding 하는기능을수행하여 XFrame 에서제공하는컴포넌트와함께화면을구성하는기능을제공한다. 예를들어외부컴포넌트는차트컴포넌트, 리포팅솔루션의 Report Viewer, PDF 파일을보기위한 PDF Viewer 컴포넌트등이있다. ActiveX 컴포넌트는아래의그림과같이, 오브젝트창에표시되어있다. - 3 -
ActiveX 컴포넌트주요기능 ActiveX 컴포넌트는다음과같은주요기능을제공한다. 외부컴포넌트 Embeding 기능 외부컴포넌트에서제공하는프라퍼티표시기능 외부컴포넌트에서제공하는 API 호출기능 외부컴포넌트에서발생하는이벤트처리기능 - 4 -
ActiveX 컴포넌트아키텍처 ActiveX 컴포넌트는아키텍처는아래의그림과같다. XFrame 화면 외부컴포넌트 ActiveX 컴포넌트 innerctrl API Property Event ActiveX 컴포넌트는내부에외부컴포넌트를연동하기위한 innerctl 이란고정된이름의내부오브젝트를 제공하여, 외부컴포넌트를연동할수있는기능을제공한다. 프라퍼티아키텍처 ActiveX 컴포넌트는아래의표와같이, ActiveX 컴포넌트에서제공하는프라퍼티와 ActiveX 컴포넌트에 Embeding 된컴포넌트에서제공하는프라퍼티로구분된다. 구분 ActiveX 내부프라퍼티외부컴포넌트프라퍼티 설명 ActiveX 컴포넌트에서제공하는기본프라퍼티를의미한다. ActiveX 컴포넌트에 Embeding된컴포넌트에무관하게동일한프라퍼티를제공한다. ActiveX 컴포넌트에 Embeding된컴포넌트에서제공하는프라퍼티를의미한다. 외부컴포넌트프라퍼티는 Embeding된컴포넌트의종류에따라다르다. 외부컴포넌트프라퍼티는 XFrameDevStudio에서화면개발시에만설정이가능하고, 실행시에외부컴퍼는트에서제공하는 API를통해서만변경가능하다. ActiveX 내부프라퍼티에대한설명은 2 장. ActiveX 컴포넌트연동 부분을참조한다. - 5 -
API 호출아키텍처 XFrame 화면내의스크립트함수에서외부컴포넌트가제공하는 API 를호출하기위해서는 ActiveX 컴포넌트의 내장오브젝트인 innerctrl 오브젝트를통해서호출된다. ActiveX 가제공하는 API 는다음과같이두가지종류의 API 로구분된다. 구분 ActiveX 내부 API 외부컴포넌트 API 설명 ActiveX 컴포넌트에서제공하는기본 API를의미한다. ActiveX 컴포넌트에 Embeding된컴포넌트에무관하게동일한 API를제공한다. ActiveX 내부 API는 XFrame내의다른컴포넌트에서제공하는 API와같이 ObjectName.API_Name 형식으로호출한다. ActiveX 컴포넌트에 Embeding된컴포넌트에서제공하는 API를의미한다. 외부컴포넌트 API는 Embeding된컴포넌트의종류에따라다르다. ActiveX 컴포넌트의내부오브젝트인 innerctrl 오브젝트를통해서호출한다. ActiveX 내부 API 에대한자세한설명은 2 장. ActiveX 컴포넌트연동 부분을참조한다. ActiveX 에서제공하는 API 는 ActiveX 내부 API 와외부컴포넌트 API 에따라호출방식의차이가있으며, 내부 구조는아래의그림과같다. XFrame 화면 스크립트함수 ActiveX 컴포넌트내부 API 호출외부컴포넌트 API 호출 API ActiveX 컴포넌트 innerctrl 외부컴포넌트 API Property Event 구분 1 2 설명 XFrame 화면의스크립트함수에서 ActiveX 콤포넌트자체에서제공하는 API를호출하면, ActiveX 컴포넌트자체의 API가호출된다. XFrame 화면의스크립트함수에서외부컴포넌트의 API를호출하기위해서 ActiveX 컴퍼넌트의내부오브젝트인 innerctrl 오브젝트를통해서함수를호출한다. 2 innerctrl 오브젝트를통해서호출된 API 는실제 Embeding 된외부컴포넌트의 API 를호출한다. - 6 -
외부컴포넌트이벤트처리아키텍처 외부컴포넌트에서제공하는이벤트를처리하기위해서는외부컴포넌트에서제공하는이벤트처리함수를 지정하여처리되며, 이벤트흐름은아래의그림과같다. XFrame 화면 외부컴포넌트 Event 처리스크립트함수스크립트로직 ActiveX 컴포넌트 innerctrl API Property Event 구분 1 설명 Embeding 된컴포넌트에서이벤트가발생하며, ActiveX 컴포넌트의내부컴포넌트인 innerctrl 에게전달된다. 2 innerctrl 내부컴포넌트는 ActiveX 컴포넌트의이벤트처리스크립트함수를호출한다. - 7 -
2 장 : ActiveX 컴포넌트연동 이장에서는 XFrame 에서제공하는 ActiveX 컴포넌트를이용하여외부컴포넌트를연동하는방법에대해서 기술합니다. 이장에서기술하는내용은아래와같습니다. ActiveX 컴포넌트내부프라퍼티 ActiveX 컴포넌트내부 API ActiveX 컴포넌트내부프라퍼티 ActiveX 컴포넌트에서제공하는내부프라퍼티는아래의표와같다. 구분이름설명 ID Position control_id name description x, y, width, height classid XFrame 화면작성시콘트롤에게자동으로지정되는화면내에서유일한식별값이다. 콘콘트롤생성될때자동으로할당되며, 개발자가임의로변경할수없다. XFrame 화면의스크립트나콘트롤의이벤트를처리하기위해서개발자가지정하는이름이다. 콘트롤에대한부가적인설명을표시하는속성이다. 오브젝트의 getdescription 함수를이용하여값을구할수있다. 각각콘트롤에대한 X 좌표, Y 좌표, 너비및크기속성이다. Embedding된컴포넌트를구별하는클래스 ID를의미한다. 컴포넌트들은다른컴포넌트들과구별되는유일한 ID를가지고있고, 이값을 Class ID를부른다. hidden XFrame 화면실행시에, ActiveX 컴포넌트를숨길지여부를지정한다. Main Prop tabstop designtime_create XFrame 화면실행시에, ActiveX 컴포넌트로탭이동을허용할지를지정한다. XFrameDevStudio를이용하여화면개발시 Embeding된컴포넌트를생성여부를지정한다. 외부컴포넌트가정상적으로동작하기위해서는여러가지환경적인부분이구성되어야컴포넌트가정상적으로동작하는경우에는반드 - 8 -
시 false 로설정해야한다. fireevent_procmode license_key version Embedding된컴포넌트에서발생하는이벤트에대한이벤트처리함수를동기식으로호출할지, 비동기식으로처리할지를지정한다. XFrameViewer는기본적으로외부컴포넌트에서발생하는이벤트를비동기로처리한다. 즉, 이벤트가발생하며, 해당이벤트에대한정보를엔진내부의이벤트 Queue에넣은이후에, 처리하는구조로되어있다. 외부컴포넌트가발생한는이벤트에파라미터로전달되는값을외부컴포넌트내부에서이벤트발생후, 최기화하는경우에, 실제 XFrame 화면의이벤트처리함수에서해당값을잘못읽는경우가있다. 이런컴포넌트에대해서는반드시 true 로설정해야한다. Embedding되는컴포넌트생성시라이센스키가필요한경우, 라이센스키값을지정한다. XFrame에서내부적으로사용하는정보이며, 개발자가변경할수없다. - 9 -
ActiveX 컴포넌트 API ActiveX 컴포넌트에서제공하는 API 는아래의표와같다. 구분 설명 getclassid ActiveX 오브젝트에설정된외부컴포넌트의 classid 속성값을구한다. getinnerctrlname ActiveX 오브젝트에설정된 classname 을가져오는 API 이다. - 10 -
3 장 : ActiveX 컴포넌트샘플 이장에서는 XFrame 에서제공하는 ActiveX 컴포넌트를이용하여외부컴포넌트를연동하는샘플에대해서 기술합니다. 이장에서기술하는내용은아래와같습니다. 샘플개요 외부컴포넌트설정 외부컴포넌트 API 호출 샘플개요 본장에서설명하는 ActiveX 샘플은 XFrame 화면내에 Adobe 사의 PDF Reader 컴포넌트를연동하여, PDF 파일을표시하는샘플을설명한다. 이장의샘플을따라하기위해서는먼저 PC 에 Adobe 사의 Acorbat Reader 가설치되어있어야한다. Acrobat Reader 프로그램은 Adobe 홈페이지 (www.adobe.com) 에서다운로드받을수있다. - 11 -
외부컴포넌트설정 ActiveX 콘트롤생성 xframe DevStudio 에서제공하는 UI 콘트롤중에아래의그림과같이 ActiveX 콘트롤을선택하여화면에 생성한다. 화면에생성한 ActiveX 콘트롤을선택하고속성창에서아래와같이 classid 항목을더블클릭한다. - 12 -
아래의그림과같이로컬시스템에등록된콘트롤중에서 Adobe PDF Reader 를선택한다. 위와같이선택하고확인버튼을클릭하면아래의그림과같이표시된다. - 13 -
PDF Reader API Adobe PDF Reader 는다음과같은 API 를제공한다. 그외의 API Adobe 사의홈페이지를참조한다. Object API 설명 PDF Reader LoadFile 로컬에저장된 PDF 파일을로드한다.. setshowtoolbar PDF Reader 의툴바를숨김처리한다.. - 14 -
외부컴포넌트 API 호출샘플화면및소스 외부컴포넌트 API 를호출하는샘플화면은아래와같은컴포넌트로구성되어있다. Object API 설명 필드 ActiveX 오브젝트버튼 fldlocalpdffilepath fldwebpdffileurl objpdfreader btnopenlocalpdffile btnopenwebpdffile 로컬 PDF 파일의경로를표시하는필드 WEB 서버에있는 PDF 파일의 URL를표시하는필드 Adobe사의 PDF Viewer를 Embeding하는 ActvieX 컴포넌트 로컬 PDF 파일의경로에해당하는파일을 PDF Viewer에표시한다. WEB 서버에있는 PDF 파일의 URL에해당하는파일을 PDF Viewer에표시한다. btnshowpdfviewertoolbar PDF Viewer 의툴바를숨긴다. btnhidepdfviewertoolbar PDF Viewer 의툴바를표시한다. 실행시의화면은아래와그림과같다. - 15 -
화면스크립트파일 화면스크립트파일의내용은아래와같고, 소스내용에대한설명은소스내의주석을참조한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 // 로컬 PC 에있는 PDF 파일오픈버튼클릭이벤트처리 function btnopenlocalpdffile_on_mouseup(objinst) { var nret; var strlocalpdffilepath; // 로컬 PDF 파일경로 } // 로컬 PDF 파일경로필드에서값을읽어와서, 길이가 0 인경우리턴 strlocalpdffilepath = fldlocalpdffilepath.gettext(); if(strlocalpdffilepath.length == 0) { return; } // 로컬파일오픈 nret = objpdfreader.innerctrl.loadfile(strlocalpdffilepath); factory.consoleprint(nret); // PDF 파일의첫번째페이지로이동 objpdfreader.innerctrl.gotofirstpage(); return; // WEB 서버에있는 PDF 파일오픈버튼클릭이벤트처리 function btnopenwebpdffile_on_mouseup(objinst) { var strwebpdffileurl; } // WEB PDF 파일경로필드에서값을읽어와서, 길이가 0 인경우리턴 strwebpdffileurl = fldwebpdffileurl.gettext(); if(strwebpdffileurl.length == 0) { return; } // PDF Viewer 를프라퍼터를지정하여 WEB 서버에있는 PDF 파일오픈 objpdfreader.innerctrl.src = "http://localhost:8080/xadmin_dev/media/pdf.pdf"; // PDF 파일의첫번째페이지로이동 objpdfreader.innerctrl.gotofirstpage(); return; // PDF 뷰어툴바숨기기버튼클릭이벤트처리 function btnhidepdfviewertoolbar_on_mouseup(objinst) { objpdfreader.innerctrl.setshowtoolbar(false); } // PDF 뷰어툴바보이기버튼클릭이벤트처리 - 16 -
50 51 52 53 function btnshowpdfviewertoolbar_on_mouseup(objinst) { objpdfreader.innerctrl.setshowtoolbar(true); } - 17 -