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 장 : HTML 연동개요... 3 HTML파일구조... 3 HTML 연동아키텍처... 4 XFrameViewer 주요이벤트및 API... 5 HTML에서발생하는 XFrameViewer 주요이벤트및 API... 5 HTML내의스크립트에서사용하는 XFrame 화면주요이벤트및 API... 6 2 장. HTML 연동샘플... 7 샘플 HTML 파일및 JavaScript 파일... 7 샘플 HTML 파일... 7 샘플 JavaScript 파일... 10 XFrame 샘플화면... 12 XFrame 샘플화면폼... 12 XFrame 샘플화면자바스크립트파일... 13-2 -
1 장 : HTML 연동개요 이장에서는 XFrameViewer 를포함하고있는 HTML 파일과의연동처리구조에대해서기술합니다. 이 장에서기술하는내용은아래와같습니다. HTML 파일구조 HTML 연동아키텍처 XFrameViewer 주요이벤트및 API HTML 파일구조 XFrameViewer 를포함하기위한 HTML 파일의구조는아래와같이구성된다. HTML 의특정영역을 DIVISION 을구성하고해당 DIVISION 의내용에 XFrameViewer 를포함하는 JavaScript 파일을포함하는 형식으로처리된다. HTML HTML TOP 프레임영역 HTML Contents 프레임영역 HTML LEFT 프레임영역 xframeviewer 가표시될 DIVISION 영역 <include> xframeviewer.js xframeviewer OBJECT Tag - 3 -
HTML 연동아키텍처 HTML 파일과 XFrame Viewer 와의연동아키텍처는아래의그림과같다. HTML xframe Viewer xframe Screen (Main 화면 ) HTML 에서 xframe Viewer Embedding 파라미터처리및공통모듈로드 xframeviewerloaded 이벤트처리함수 Event Fire Load 완료이벤트발생 공유데이터설정및 Main 화면로드 SetMainFrameScreen API 호출 Main 화면로드시작 화면로드시작 xframeviewerevent 이벤트처리함수 화면로드완료이벤트 (firexframeviewerevent) xframe 화면오브젝트를구함 GetMainFrameScreen API 호출 Main 화면의오브젝트리턴 xframe 화면멤버오브젝트를구함 xframe 화면연동 Biz 로직처리 screen.getmembers(1) API 호출화면멤버변수참조및멤버함수호출 화면의멤버오브젝트리턴멤버변수, 멤버함수 구분 설명 1 2 3 4 XFrameViewer가로드를시작하면 Global Module 및 Global XDataSet 정보를로드한다. XFrame Viewer가로드완료되면자동으로 XFrameViewerLoaded 이벤트를발생시킨다. XFrame Viewer의파라미터에 MAINFRAMESCREEN 파라미터가있을경우, 해당화면을로드한다. XFrameViewerLoaded 이벤트처리함수에서 XFrameViewer 오브젝트의 SetMainFrameScreen 함수를호출하여 XFrame 화면을로드한다. XFrame 화면의 screen_on_load 이벤트에서 factory.firexframeviewerevent 함수를이용하여 HTML에게 XFrameViewerEvent를발생시킨다. XFrame Viewer 오브젝트의 GetMainFrameScreen 함수를이용하여로드된 XFrame 화면의오브젝트를구한다. 5 XFrame 화면오브젝트를이용하여 XFrame 화면의멤버오브젝트를구한다. 6 XFrame 화면오브젝트및멤버오브젝트를이용하여 XFrame 화면과의연동처리를수행한다. - 4 -
XFrameViewer 주요이벤트및 API HTML 에서발생하는 XFrameViewer 주요이벤트및 API 구분이벤트 /API 이름설명 이벤트 XFrameViewerLoaded XFrameViewerEvent XFrameViewer 가 HTML 에로드되면발생하는이벤트 XFrame 화면의스크립트로직에서 factory. FireXFrameviewerevent 함수호출에의해서발생하는이벤트 SetMainFrameScreen XFrameViewer 의 Main 화면으로사용할화면을로드한다. API GetMainFrameScreen SetSharedData XFrameViewer의 Main 화면으로로드한화면의인스턴스오브젝트를구한다. XFrameViewer에게 Key&Value 형식으로데이터를설정한다. XFrame 화면에서는 factory.getshareddata 함수를이용하여값을구할수있다. 주로 SSO를통해서로그인이후에 XFrameViewer를포함하고있는페이지로이동하는경우에, 로그인한사용자의정보를 XFrameViewer에게전달하기위해서사용한다. - 5 -
HTML 내의스크립트에서사용하는 XFrame 화면주요이벤트및 API 구분 XFrame 이벤트 /API 설명 오브젝트 이름 screen on_load XFrame 화면로드가완료되었음을알려주는이벤트 이벤트 screen on_submitcomplete XFrame에서업무서버로부터수신한데이터의처리가완료되었음을알려주는이벤트 XFrame 화면내에서 HTML 쪽으로이벤트를발생시 factory firexframeviewerevent 키위위해서사용 이함수가호출되면 XFrame Viewer를통해 HTML 쪽 으로 XFrameViewerEvent 이벤트가발생함 factory getshareddata XFrameViewer의 SetSharedData 함수를통해서설정한데이터값을구한다. API factory gethtmlparam XFrame Viewer에게전달되는 HTML 파라미터의값을읽어온다. XFrameViewer가사용하는파라미터가아닌사용자 정의파라미터값을읽어오는용도로사용된다. screen getinstancebyname XFrame 화면내의특정 UI 오브젝트의인스턴스를이름을기준으로구함 requestsubmit XFrame 화면의 XDataSet 데이터를업무서버로송신 - 6 -
2 장. HTML 연동샘플 이장에서는 XFrameViewer 를포함하고있는 HTML 파일과의연동처리샘플에대해서기술합니다. 이 장에서기술하는내용은아래와같습니다. HTML 샘플파일 XFrame 샘플화면 샘플 HTML 파일및 JavaScript 파일 샘플 HTML 파일 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 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="pragma" content="no-cache"> <head> <meta http-equiv="content-type" content="text/html; charset=euc-kr"> <title>xframeviewer Sample HTML Page</title> </head> <script type="text/javascript" language="javascript"> var objxframeviewer = null; // XFrameViewer 오브젝트변수 var objxframemainscreen = null; // XFrame 메인화면오브젝트변수 var objxframemainscreenmember = null; // XFrame 메인화면멤버오브젝트변수 function HandleScreenOnLoadEvent(strEventInfo) { // XFrame 초기화면오브젝트를구하여변수에할당 objxframemainscreen = objxframeviewer.getmainframeinstance(); // XFrame 초기화면 JavaScript 멤버오브젝트를구하여변수에할당 objxframemainscreenmember = objxframemainscreen.getmembers(1); // XFrame 초기화면의멤버변수접근 alert("html> m_strmembervariable : " + objxframemainscreenmember.m_strmembervariable); // 화면의필드오브젝트를구하여, 값설정 var objuserage = objxframemainscreen.getinstancebyname("flduserage"); objuserage.settext("36"); - 7 -
30 31 32 33 34 35 36 37 38 39 40 41 42 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 // 화면의함수호출 objxframemainscreenmember.callfromhtmlscript("param_1", "PARAM_2"); </script> <script type="text/javascript" language="javascript" for="xframeviewer" event="xframeviewerevent(streventname, streventinfo)"> if(streventname == "screen_on_load") { HandleScreenOnLoadEvent(strEventInfo); else if(streventname == "button_on_mouseup") { alert("streventinfo : " + streventinfo); else if(streventname == "screen_on_submitcomplete") { alert("streventinfo : " + streventinfo); </script> <script type="text/javascript" language="javascript" for="xframeviewer" event="xframeviewerloaded()"> // XFrameViewer 오브젝트를변수에저장 objxframeviewer = XFrameViewer; // 공유데이터를 XFrameViewer 에설정 objxframeviewer.setshareddata("data_key_1", "DATA_VALUE_1"); objxframeviewer.setshareddata("data_key_2", "DATA_VALUE_2"); // XFrameViewer 의메인화면 URL 설정 objxframeviewer.setmainframescreen("/sample/html"); </script> <body scroll="no" bgcolor="white" text="black" link="blue" vlink="purple" alink="red" style="margin:0;"> <div id="xframeviewerdivision"> <script src="./xframeviewer.js"></script> </div> </body> </html> - 8 -
샘플 HTML 파일에대한설명은아래와같다. 라인 설명 1 ~ 10 HTML 문서타입선언및 HTML HEAD 부분설정 13 ~ 14 XFrame Viewer 및메인화면관련오브젝트를지정할변수선언 17 ~ 32 36 ~ 47 49 ~ 59 메인화면로드이벤트처리함수 XFrameViewer 오브젝트를이용하여메인화면오브젝트및화면의멤버오브젝트를구한다. 화면멤버오브젝트를통해서화면스트립트파일에서선언한멤버변수 ( 화면글로벌변수 ) 를참조한다. XFrameViewer에로드된메인화면오브젝트를이용하여, 화면의필드오브젝트를구하고값을설정한다. 화면멤버오브젝트를통해서화면스트립트파일에정의되어있는함수를호출한다. XFrame 화면에서 firexframeviewerevent 함수를통해서발생시킨이벤트를처리하는함수이다. streventname 및 streventinfo 파라미터를이용하여, 이벤트에따른분기처리를수행한다. XFrameViewer의로드완료이벤트를처리한다. HTML 스트립트에서나중에사용하기위해서, XFrameViewer 오브젝트를변수에할당한다. XFrameViewer 오브젝트를통해서화면에서사용할공유데이터를설정한다. XFrameViewer 오브젝트를통해서메인화면을로드한다. 메인화면은 XFrameViewer.js 내에서 MAINFRAMESCREEN 파라미터에값을지정한것과동일한효과를나타낸다. 64 ~ 66 XFrameViewer 가표시될 DIVISION 을정의하고, XFrameViewer.js 파일을 Include 한다. - 9 -
샘플 JavaScript 파일 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 var XFrameViewerObjectTag = document.createelement('<object ID="XFrameViewer" CLASSID="CLSID:525CE85A-4C03-49a2-BB50-DB94C12F8446" width=100% height=100% VIEWASTEXT></OBJECT>'); var XFrameViewerParam01 = document.createelement('<param NAME="APPPATH" VALUE="C:\\XFrame">'); var XFrameViewerParam02 = document.createelement('<param NAME="APPNAME" VALUE="Application Name">'); var XFrameViewerParam03 = document.createelement('<param NAME="SCREENSOURCE" VALUE="DB">'); var XFrameViewerParam04 = document.createelement('<param NAME="SCREENURL" VALUE="">'); var XFrameViewerParam05 = document.createelement('<param NAME="SCREENPROJECT" VALUE="xbase">'); var XFrameViewerParam06 = document.createelement('<param NAME="MAINFRAMESCREEN" VALUE="/SAMPLE">'); var XFrameViewerParam07 = document.createelement('<param NAME="TERMINALMODE" VALUE="DEVELOPMENT">'); var XFrameViewerParam08 = document.createelement('<param NAME="EXCLUSIVE_MODE" VALUE="TRUE">'); var XFrameViewerParam09 = document.createelement('<param NAME="BROWSER_MENUBAR" VALUE="TRUE">'); var XFrameViewerParam10 = document.createelement('<param NAME="BROWSER_TOOLBAR" VALUE="TRUE">'); var XFrameViewerParam11 = document.createelement('<param NAME="BROWSER_ADDRESSBAR" VALUE="TRUE">'); var XFrameViewerParam12 = document.createelement('<param NAME="BROWSER_STATUSBAR" VALUE="TRUE">'); var XFrameViewerParam13 = document.createelement('<param NAME="BROWSERWIDTH" VALUE="1024">'); var XFrameViewerParam14 = document.createelement('<param NAME="BROWSERHEIGHT" VALUE="742">'); var XFrameViewerParam15 = document.createelement('<param NAME="WORKINGDIR" VALUE="C:\\XFrame\\bin\\">'); var XFrameViewerParam16 = document.createelement('<param NAME="USE_CACHE" VALUE="TRUE">'); var XFrameViewerParam17 = document.createelement('<param NAME="SHOW_CONSOLETRACE" VALUE="FALSE">'); var XFrameViewerParam18 = document.createelement('<param NAME="BROWSER_RESIZE" VALUE="FALSE">'); XFrameViewerObjectTag.appendChild(XFrameViewerParam01); XFrameViewerObjectTag.appendChild(XFrameViewerParam02); XFrameViewerObjectTag.appendChild(XFrameViewerParam03); XFrameViewerObjectTag.appendChild(XFrameViewerParam04); XFrameViewerObjectTag.appendChild(XFrameViewerParam05); XFrameViewerObjectTag.appendChild(XFrameViewerParam06); XFrameViewerObjectTag.appendChild(XFrameViewerParam07); XFrameViewerObjectTag.appendChild(XFrameViewerParam08); XFrameViewerObjectTag.appendChild(XFrameViewerParam09); XFrameViewerObjectTag.appendChild(XFrameViewerParam10); XFrameViewerObjectTag.appendChild(XFrameViewerParam11); XFrameViewerObjectTag.appendChild(XFrameViewerParam12); XFrameViewerObjectTag.appendChild(XFrameViewerParam13); XFrameViewerObjectTag.appendChild(XFrameViewerParam14); XFrameViewerObjectTag.appendChild(XFrameViewerParam15); XFrameViewerObjectTag.appendChild(XFrameViewerParam16); XFrameViewerObjectTag.appendChild(XFrameViewerParam17); XFrameViewerObjectTag.appendChild(XFrameViewerParam18); XFrameViewerDivision.appendChild(XFrameViewerObjectTag); - 10 -
샘플 JavaScript 파일에대한설명은아래와같다. 라인 설명 1 ~ 2 XFrameViewer 오브젝트태그생성 4 ~ 23 XFrameViewer에게전달할 HTML 파라미터설정한다. XFrameViewer에서사용하지않은사용자정의파라미터도정의할수있다. 사용자정의파라미터는 XFrame 화면에서 factory.gethtmlparam 함수를이용하여설정된파라미터값을구할수있다. MAINFRAMESCREEN 파라미터는 XFrameViewer가로드될때처음으로표시되는화면의경로를지정한다. 파라미터의값을지정하지않을경우 ( 공백문자열로지정한경우 ), HTML 파일에서 XFrameViewerLoaded 이벤트에서 SetMainFrameScreen 함수를통해서로드할화면의경로를지정해야한다. EXCLUSIVE_MODE 파라미터는 XFrameViewer가표시될때, 전용방식으로표시될지여부를지정하며, HTML 영역의일부에만 XFrameViewer가표시될때에는 FALSE 로지정해야한다. 25 ~ 41 XFrameViewer 에게전달할파라미터설정값들을 HTML 에추가한다 43 XFrameViewer 가표시될 DIVISION 영역에 XFrameViewer 영역을추가한다. 샘플 JavaScript 파일에대한자세한설정은 XFrameViewer 파라미터가이드 문서를참조한다. - 11 -
XFrame 샘플화면 XFrame 샘플화면폼 XFrame 샘플화면의폼구성은아래의그림과같다. 폼에대한설명은아래와같다. 구분이름설명 사용자이름필드 HTML로값전달버튼 HTML에서직접값설정필드 fldusername btnfireviewerevent flduserage HTML로데이터를전달하기위한필드 HTML로값전달 버튼을클릭하며필드의값을이벤트정보파라미터에설정하여전달한다. 사용자이름필드의값을이벤트정보파라미터에설정하여 HTML 에게 XFrameViewerEvent를발생시킨다. HTML에서화면내의필드의값을직접설정하기위한필드 - 12 -
XFrame 샘플화면자바스크립트파일 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 var m_strmembervariable = "MemberVariableValue"; function screen_on_load() { var strshareddata1 = factory.getshareddata("data_key_1"); var strshareddata2 = factory.getshareddata("data_key_2"); var strscreenurl = screen.getscreenurl(); factory.firexframeviewerevent("screen_on_load", strscreenurl); function callfromhtmlscript(strparam1, strparam2) { screen.alert("staparam1 : " + strparam1 + ", strparam2 : " + strparam2); function screen_on_submitcomplete(mapid, result, recv_userheader, recv_code, recv_msg) { if(result == 1) { factory.firexframeviewerevent("screen_on_submitcomplete", mapid); function btnfireviewerevent_on_mouseup(objinst) { var strusername = fldusername.gettext(); factory.firexframeviewerevent("button_on_mouseup", strusername); - 13 -
XFrame 샘플화면자바스크립트파일의설명은아래와같다. 라인 1 3 ~ 10 설명 XFrame 화면에서사용할화면글로벌변수를선언한다. XFrame 화면의멤버오브젝트를통해서직접접근해서값을읽어오거나, 설정할수있다. XFrame 화면의로드이벤트를처리한다. Factory.getshareddata 함수를이용하여, HTML에서설정한공유데이터를읽어온다. HTML로 XFrameViewerEvent를발생시킨다. 파라미터로이벤트이름및화면 URL 경로를전달한다. 12 ~ 15 HTML 파일에서직접호출테스트를하기위한함수이다. 17 ~ 22 24 ~ 28 XFrame 화면에서 XDataSet 방식으로서버와비동기통신을수행이완료되면발생하는이벤트처리함수이다. 처리결과값에따라서 HTML에게 XFrameViewerEvent를발생시킨다. XFrame 화면에서사용자가입력한값을 HTML로전달하기위한버튼클릭이벤트를처리하는함수이다. 필드의값을읽어서이벤트정보파라미터로설정하여 HTML로 XFrameViewerEvent를발생시킨다. - 14 -