HTML 연동 가이드 - 소프트베이스...2012/02/17 · HTML연동 가이드 - 4 - HTML 파일과 XFrame Viewer와의 연동 아키텍처는 아래의 그림과 같다. 구분

SOFTBASE XFRAME DEVELOPMENT GUIDE SERIES

HTML 연동 가이드

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

HTML연동 가이드

- 2 -

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

목목차차


- 3 -

이 장에서는 XFrameViewer를 포함하고 있는 HTML 파일과의 연동 처리 구조에 대해서 기술합니다. 이

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

HTML 파일 구조

HTML 연동 아키텍처

XFrameViewer 주요 이벤트 및 API

XFrameViewer를 포함하기 위한 HTML 파일의 구조는 아래와 같이 구성된다. HTML의 특정 영역을

DIVISION을 구성하고 해당 DIVISION의 내용에 XFrameViewer를 포함하는 JavaScript 파일을 포함하는

형식으로 처리된다.

HTML

xFrameViewer.js

HTML TOP 프레임 영역HTML TOP 프레임 영역

HTMLLEFT

프레임 영역

HTMLLEFT

프레임 영역

HTML Contents 프레임 영역HTML Contents 프레임 영역

xFrameViewer가 표시될DIVISION 영역


<include>xFrameViewerOBJECT Tag

HTML

xFrameViewer.js

HTML TOP 프레임 영역HTML TOP 프레임 영역

HTMLLEFT

프레임 영역

HTMLLEFT

프레임 영역

HTML Contents 프레임 영역HTML Contents 프레임 영역



<include>xFrameViewerOBJECT Tag

11 장장:: HHTTMMLL 연연동동 개개요요

HTML파일 구조


- 4 -

HTML 파일과 XFrame Viewer와의 연동 아키텍처는 아래의 그림과 같다.

구분 설명

1

XFrameViewer가 로드를 시작하면 Global Module 및 Global XDataSet 정보를 로드한다.

XFrame Viewer가 로드 완료되면 자동으로 XFrameViewerLoaded 이벤트를 발생시킨다.

XFrame Viewer의 파라미터에 MAINFRAMESCREEN 파라미터가 있을 경우, 해당 화면을 로드한

다.

2 XFrameViewerLoaded 이벤트 처리 함수에서 XFrameViewer 오브젝트의 SetMainFrameScreen

함수를 호출하여 XFrame 화면을 로드한다.

3 XFrame 화면의 screen_on_load 이벤트에서 factory.fireXFrameviewerevent 함수를 이용하여

HTML에게 XFrameViewerEvent를 발생시킨다.

4 XFrame Viewer 오브젝트의 GetMainFrameScreen 함수를 이용하여 로드된 XFrame 화면의 오

브젝트를 구한다.

5 XFrame 화면 오브젝트를 이용하여 XFrame 화면의 멤버 오브젝트를 구한다.

6 XFrame 화면 오브젝트 및 멤버 오브젝트를 이용하여 XFrame 화면과의 연동 처리를 수행한다.

HTML

HTML에서 xFrame ViewerEmbedding


xFrame Viewer xFrame Screen (Main 화면)

파라미터 처리 및공통 모듈 로드파라미터 처리 및공통 모듈 로드

Event FireEvent Fire

Load 완료 이벤트 발생Load 완료 이벤트 발생

공유 데이터 설정 및Main 화면 로드


xFrameViewerLoaded 이벤트처리 함수


Main 화면 로드 시작Main 화면 로드 시작

SetMainFrameScreen API 호출SetMainFrameScreen API 호출

xFrame 화면오브젝트를 구함


xFrameViewerEvent 이벤트처리 함수


화면 로드 시작화면 로드 시작

xFrame 화면 멤버오브젝트를 구함


xFrame 화면연동 Biz 로직 처리


Main 화면의 오브젝트 리턴Main 화면의 오브젝트 리턴

GetMainFrameScreen API 호출GetMainFrameScreen API 호출

화면의 멤버 오브젝트 리턴화면의 멤버 오브젝트 리턴

화면 로드 완료 이벤트(firexframeviewerevent)화면 로드 완료 이벤트

(firexframeviewerevent)

멤버 변수, 멤버 함수멤버 변수, 멤버 함수

화면 멤버 변수 참조 및 멤버 함수 호출화면 멤버 변수 참조 및 멤버 함수 호출

screen.getmembers(1) API 호출screen.getmembers(1) API 호출

HTML






























HTML






























HTML 연동 아키텍처


- 5 -

XFrameViewer 주요 이벤트 및 API

HTML에서 발생하는 XFrameViewer 주요 이벤트 및 API

구분 이벤트/API 이름 설명

이벤트

XFrameViewerLoaded XFrameViewer가 HTML에 로드되면 발생하는 이벤트

XFrameViewerEvent XFrame 화면의 스크립트 로직에서 factory.

FireXFrameviewerevent 함수 호출에 의해서 발생하는 이벤트

API

SetMainFrameScreen XFrameViewer의 Main 화면으로 사용할 화면을 로드한다.

GetMainFrameScreen XFrameViewer의 Main 화면으로 로드한 화면의 인스턴스 오브젝

트를 구한다.

SetSharedData

XFrameViewer에게 Key&Value 형식으로 데이터를 설정한다.

XFrame 화면에서는 factory.getshareddata 함수를 이용하여 값을

구할 수 있다.

주로 SSO를 통해서 로그인 이후에 XFrameViewer를 포함하고 있

는 페이지로 이동하는 경우에, 로그인한 사용자의 정보를

XFrameViewer에게 전달하기 위해서 사용한다.


- 6 -

HTML내의 스크립트에서 사용하는 XFrame 화면 주요 이벤트 및 API

구분 XFrame

오브젝트

이벤트/API

이름

설명

이벤트

screen on_load XFrame 화면 로드가 완료되었음을 알려주는 이벤트

screen on_submitcomplete XFrame에서 업무 서버로부터 수신한 데이터의 처리

가 완료되었음을 알려주는 이벤트

API

factory fireXFrameviewerevent

XFrame 화면내에서 HTML 쪽으로 이벤트를 발생시

키위 위해서 사용

이 함수가 호출되면 XFrame Viewer를 통해 HTML 쪽

으로 XFrameViewerEvent 이벤트가 발생함

factory getshareddata XFrameViewer의 SetSharedData 함수를 통해서 설정

한 데이터 값을 구한다.

factory gethtmlparam

XFrame Viewer에게 전달되는 HTML 파라미터의 값

을 읽어온다.

XFrameViewer가 사용하는 파라미터가 아닌 사용자

정의 파라미터 값을 읽어오는 용도로 사용된다.

screen getinstancebyname

XFrame 화면내의 특정 UI 오브젝트의 인스턴스를 이

름을 기준으로 구함

requestsubmit XFrame 화면의 XDataSet 데이터를 업무 서버로 송신


- 7 -

이 장에서는 XFrameViewer를 포함하고 있는 HTML 파일과의 연동 처리 샘플에 대해서 기술합니다. 이

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

HTML 샘플 파일

XFrame 샘플 화면

샘플 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");

22 장장.. HHTTMMLL 연연동동 샘샘플플

샘플 HTML 파일 및 JavaScript 파일


- 8 -

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>


- 9 -

샘플 HTML 파일에 대한 설명은 아래와 같다.

라인 설명

1 ~ 10 HTML 문서 타입 선언 및 HTML HEAD 부분 설정

13 ~ 14 XFrame Viewer 및 메인 화면 관련 오브젝트를 지정할 변수 선언

17 ~ 32

메인 화면 로드 이벤트 처리 함수

XFrameViewer 오브젝트를 이용하여 메인 화면 오브젝트 및 화면의 멤버 오브젝트를 구한다.

화면 멤버 오브젝트를 통해서 화면 스트립트 파일에서 선언한 멤버 변수(화면 글로벌 변수)를

참조한다.

XFrameViewer에 로드된 메인 화면 오브젝트를 이용하여, 화면의 필드 오브젝트를 구하고 값을

설정한다.

화면 멤버 오브젝트를 통해서 화면 스트립트 파일에 정의되어 있는 함수를 호출한다.

36 ~ 47 XFrame 화면에서 fireXFrameviewerevent 함수를 통해서 발생시킨 이벤트를 처리하는 함수이다.

strEventName 및 strEventInfo 파라미터를 이용하여, 이벤트에 따른 분기 처리를 수행한다.

49 ~ 59

XFrameViewer의 로드 완료 이벤트를 처리한다.

HTML 스트립트에서 나중에 사용하기 위해서, XFrameViewer 오브젝트를 변수에 할당한다.

XFrameViewer 오브젝트를 통해서 화면에서 사용할 공유 데이터를 설정한다.

XFrameViewer 오브젝트를 통해서 메인 화면을 로드한다.

메인 화면은 XFrameViewer.js 내에서 MAINFRAMESCREEN 파라미터에 값을 지정한 것과 동일

한 효과를 나타낸다.

64 ~ 66 XFrameViewer가 표시될 DIVISION을 정의하고, XFrameViewer.js 파일을 Include한다.


- 10 -

샘플 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);













XFrameViewerDivision.appendChild(XFrameViewerObjectTag);


- 11 -

샘플 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 파라미터 가이드”문서를 참조한다.


- 12 -

XFrame 샘플 화면 폼

XFrame 샘플 화면의 폼 구성은 아래의 그림과 같다.

폼에 대한 설명은 아래와 같다.

구분 이름 설명

사용자 이름

필드 fldUserName

HTML로 데이터를 전달하기 위한 필드

“HTML로 값 전달” 버튼을 클릭하며 필드의 값을 이벤트 정보 파라

미터에 설정하여 전달한다.

HTML로 값

전달 버튼 btnFireViewerEvent

사용자 이름 필드의 값을 이벤트 정보 파라미터에 설정하여 HTML

에게 XFrameViewerEvent를 발생시킨다.

HTML에서

직접 값 설정

필드

fldUserAge HTML에서 화면내의 필드의 값을 직접 설정하기 위한 필드

XFrame 샘플 화면


- 13 -

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);

}


- 14 -

XFrame 샘플 화면 자바 스크립트 파일의 설명은 아래와 같다.

라인 설명

1 XFrame 화면에서 사용할 화면 글로벌 변수를 선언한다.

XFrame 화면의 멤버 오브젝트를 통해서 직접 접근해서 값을 읽어오거나, 설정할 수 있다.

3 ~ 10

XFrame 화면의 로드 이벤트를 처리한다.

Factory.getshareddata 함수를 이용하여, HTML에서 설정한 공유 데이터를 읽어온다.

HTML로 XFrameViewerEvent를 발생시킨다. 파라미터로 이벤트 이름 및 화면 URL 경로를 전달

한다.

12 ~ 15 HTML 파일에서 직접 호출 테스트를 하기 위한 함수이다.

17 ~ 22

XFrame 화면에서 XDataSet 방식으로 서버와 비동기 통신을 수행이 완료되면 발생하는 이벤트

처리 함수 이다.

처리 결과값에 따라서 HTML에게 XFrameViewerEvent를 발생시킨다.

24 ~ 28

XFrame 화면에서 사용자가 입력한 값을 HTML로 전달하기 위한 버튼 클릭 이벤트를 처리하는

함수이다.

필드의 값을 읽어서 이벤트 정보 파라미터로 설정하여 HTML로 XFrameViewerEvent를 발생시킨

다.

Documents

HTML 연동 가이드 - 소프트베이스...2012/02/17 · HTML연동 가이드 - 4 - HTML 파일과 XFrame Viewer와의 연동 아키텍처는 아래의 그림과 같다. 구분