WebBrowser 소개

WebBrowser는 넥사크로플랫폼 애플리케이션 화면 내에 다른 웹 페이지 화면이나 콘텐츠를 보여줄 때 사용하는 컴포넌트입니다. WebBrowser 컴포넌트마다 각각 웹 페이지 화면을 출력할 수 있기 때문에 여러 개의 WebBrowser 컴포넌트를 배치하면 그 숫자만큼의 웹 페이지 화면을 동시에 보여주는 것이 가능합니다. 또한, 웹 페이지뿐 아니라 동영상, 이미지 등의 콘텐츠 역시 가능합니다.

WebBrowser 컴포넌트는 넥사크로플랫폼 애플리케이션과 웹 페이지 간의 상호작용을 위한 메소드와 이벤트를 제공합니다. 웹 페이지간의 상호작용이란 웹 페이지에 있는 엘리먼트 속성 혹은 스크립트 변숫값 등을 넥사크로플랫폼 애플리케이션쪽으로 전달한다거나 반대로 넥사크로플랫폼 애플리케이션 쪽에서 웹페이지에 선언된 스크립트 함수를 호출하는 등의 두 화면 간의 데이터 교환 기능을 의미합니다. 개발자는 getProperty, setProperty, callMethod 메소드를 사용하여 웹 페이지의 엘리먼트나 속성값을 읽어오거나 설정할 수 있고, 함수를 호출할 수 있습니다. 또한, 웹 페이지 쪽에서 넥사크로플랫폼 애플리케이션 쪽으로 usernotify 이벤트를 발생시켜 사용자 데이터를 전달하거나 함수 호출을 하는 것도 가능합니다.

넥사크로플랫폼 애플리케이션에서 웹 페이지로 접근할 때에는 자바스크립트의 window 객체와 document 객체를 사용합니다. window는 웹 브라우저 윈도우를 나타내는 최상위 객체로 document 객체를 비롯한 모든 전역 객체와 함수는 window 객체에 속합니다. document는 웹 브라우저 윈도우에 로딩된 html 문서의 정보(DOM)를 담고 있는 객체로 웹 페이지 자체를 나타냅니다. document 객체는 window 객체의 하위 객체이기 때문에 원래는 window.document 형식으로 접근해야 하지만 window는 생략하여 사용할 수 있으므로 그냥 document만 사용해도 객체에 접근할 수 있습니다.

WebBrowser 컴포넌트에서 도메인이 다른 외부의 웹 페이지를 불러오는 경우 크로스 도메인 문제가 발생할 수 있습니다. 이를 해결하는 가장 간단한 방법은 두 파일의 도메인이 같도록 해주는 것입니다. 그러나 여의치 않을 때에는 CORS를 비롯하여 크로스 도메인을 피할 수 있는 방법을 사용해야 합니다.

사용 예

WebBrowser 컴포넌트와 비슷한 예로 iframe이 있습니다. iframe은 frame과 유사하지만 좀 더 손쉽게 사용할 수 있게 만들어진 내부 프레임 요소로 한 웹 페이지 내에 다른 웹 페이지 혹은 콘텐츠를 출력하는 기능을 합니다.

WebBrowser 만들기

넥사크로플랫폼 애플리케이션 화면 내에 외부의 웹 페이지 화면을 보여줄 수 있습니다.

툴바에서 WebBrowser 를 선택한 후, Form 위에 적당한 크기로 드래그하여 생성합니다. 그냥 폼에 대고 클릭하면 기본 크기로 생성됩니다.

폼에 생성한 WebBrowser를 선택한 후 Properties 창에서 url 속성을 설정합니다.

QuickView(Ctrl + F6)로 실행합니다.

url 속성을 설정했으면 WebBrowser 컴포넌트에 해당 URL 페이지가 표시됩니다.

엘리먼트 속성값 가져오기

WebBrowser 컴포넌트의 getProperty와 callMethod 메소드를 사용하여 로딩된 웹 페이지에 정의된 엘리먼트의 속성값을 넥사크로플랫폼 웹 애플리케이션에서 가져오는 방법에 관해 설명합니다.

예제

다음은 넥사크로플랫폼 화면에서 WebBrowser 컴포넌트를 사용해 웹 페이지를 로딩한 예제입니다.

Get Input Value 버튼을 클릭하면 WebBrowser 컴포넌트에 로딩한 HTML 페이지의 input 엘리먼트의 value 값을 넥사크로플랫폼 애플리케이션 쪽으로 가져와 Static 컴포넌트에 설정하여 화면에 출력합니다.

sample_webbrowser_02.xfdl

예제에서 사용한 핵심 기능

getProperty

WebBrowser 컴포넌트의 document 객체에 정의된 속성값을 반환하는 메소드입니다.

callMethod

WebBrowser 컴포넌트의 document 객체에 정의된 메소드를 호출하는 메소드입니다.

document (Javascript)

웹 페이지 정보(DOM)를 담고 있는 자바스크립트 객체입니다. document 객체를 사용해 html 문서의 요소에 접근할 수 있습니다.

getElementById (Javascript)

ID에 해당하는 엘리먼트를 반환하는 자바스크립트 메소드입니다.

예제 구현 방법

툴바에서 WebBrowser , Button , Static 컴포넌트를 생성하여 예제 화면과 같이 Form에 배치합니다.

http://demo.nexacro.com/developer_guide/17/Service/webbrowser.html 파일의 소스 코드를 복사해서 webbrowser.html 파일을 생성합니다.

WebBrowser 컴포넌트의 url 속성에 앞의 과정에서 생성한 webbrowser.html 문서의 URL을 설정합니다.

this.sample_webbrowser_02_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
	var domain = document.location.href;
	var arrdomain = domain.split('/');
	var currentfile = arrdomain.pop();
	domain = domain.replace(currentfile, "Service/webbrowser.html")
	this.WebBrowser00.set_url(domain);
};

넥사크로플랫폼에서 html 페이지에 있는 input 엘리먼트의 value 속성값을 가져옵니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var _doc = this.WebBrowser00.getProperty("document");

	var dom = _doc.callMethod("getElementById", "inputText");

	var str = dom.getProperty("value");
	
	this.Static00.set_text(str);

	if(_doc && dom)
	{
		_doc.destroy();
		_doc = null;

		dom.destroy();
		dom = null;
	}
};

• 3번 줄: html 페이지의 document 객체가 가진 DOM 정보를 Plugin 객체로 반환합니다.

• 5번 줄: html 페이지에서 getElementById 메소드를 호출하여 id가 inputText인 엘리먼트의 DOM 정보를 반환합니다.

• 7번 줄: id가 inputText인 input 엘리먼트의 속성중 value 속성의 값을 반환합니다.

• 9번 줄: value 속성값을 Static00의 text 속성에 설정합니다.

• 11~18번 줄: 사용을 완료한 Plugin 객체의 자원을 해제합니다. 해제하지 않을 시 메모리 누수가 발생할 수 있습니다.

다음은 WebBrowser 컴포넌트에 로딩한 html 페이지의 코드 중 일부분으로 id가 inputText인 input 엘리먼트의 value 속성값을 확인할 수 있습니다.

<input id="inputButton" type="button" value="send to nexacroplatform" onclick="sendToNexacro()">
<input id="inputText" type="text" value="This is value of inputText in html page." size="64"></p>

QuickView(Ctrl + F6)를 실행하여 결과를 확인합니다.

Get input value 버튼을 누르면 WebBrowser 컴포넌트에 로딩된 웹 페이지의 input 엘리먼트의 설정된 "This is value of inputText in html page." 텍스트가 화면 하단의 Static 컴포넌트에 설정됩니다.

엘리먼트 속성값 설정하기

WebBrowser 컴포넌트의 setProperty 메소드를 사용하여 로딩된 웹 페이지에 정의되어 있는 엘리먼트의 속성값을 설정하는 방법에 대해 설명합니다.

예제

다음은 넥사크로플랫폼 화면에서 WebBrowser 컴포넌트를 사용해 웹 페이지를 로딩한 예제입니다.

Set Input Value 버튼을 클릭하면 넥사크로플랫폼 애플리케이션 화면의 Edit 컴포넌트에 설정한 문자열을 WebBrowser 컴포넌트에 로딩한 웹 페이지의 input 엘리먼트의 value 값으로 설정합니다.

sample_webbrowser_03.xfdl

예제에서 사용한 핵심 기능

setProperty

WebBrowser 컴포넌트의 document 객체에 정의된 속성에 값을 설정하는 메소드입니다.

getProperty

WebBrowser 컴포넌트의 document 객체에 정의된 속성값을 반환하는 메소드입니다.

callMethod

WebBrowser 컴포넌트의 document 객체에 정의된 메소드를 호출하는 메소드입니다.

document (Javascript)

웹 페이지 정보(DOM)를 담고 있는 자바스크립트 객체입니다. document 객체를 사용해 html 문서의 요소에 접근할 수 있습니다.

getElementById (Javascript)

ID에 해당하는 엘리먼트를 반환하는 자바스크립트 메소드입니다.

예제 구현 방법

툴바에서 WebBrowser , Button , Edit 컴포넌트를 생성하여 예제 화면과 같이 Form에 배치합니다.

http://demo.nexacro.com/developer_guide/17/Service/webbrowser.html 파일의 소스 코드를 복사해서 webbrowser.html 파일을 생성합니다.

WebBrowser 컴포넌트의 url 속성에 앞의 과정에서 생성한 webbrowser.html 문서의 URL을 설정합니다.

넥사크로플랫폼 애플리케이션의 Edit 컴포넌트에 설정한 값을 WebBrowser 컴포넌트에 로딩한 html 페이지에 있는 input 엘리먼트의 value 속성값으로 설정합니다. 아래 코드는 다음과 같이 동작합니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var _doc = this.WebBrowser00.getProperty("document");

	var dom = _doc.callMethod("getElementById", "inputText");

	dom.setProperty("value", this.Edit00.text);
	
	if(_doc && dom)
	{
		_doc.destroy();
		_doc = null;

		dom.destroy();
		dom = null;
	}	
};

• 3번 줄: html 페이지의 document 객체가 가진 DOM 정보를 Plugin 객체로 반환합니다.

• 5번 줄: html 페이지에서 getElementById 메소드를 호출하여 id가 inputText인 엘리먼트의 DOM 정보를 반환합니다.

• 7번 줄: Edit00 컴포넌트의 text 속성값을 id가 inputText인 엘리먼트의 value 속성값으로 설정합니다.

• 9~16번 줄: 사용을 완료한 Plugin 객체의 자원을 해제합니다. 해제하지 않을 시 메모리 누수가 발생할 수 있습니다.

QuickView(Ctrl + F6)를 실행하여 결과를 확인합니다.

Set input value 버튼을 누르면 화면의 Edit 컴포넌트의 "This is a value from nexacroplatform." 텍스트가 WebBrowser 컴포넌트에 로딩된 웹 페이지의 Input 엘리먼트에 설정됩니다.

스크립트의 변수값 가져오기

WebBrowser 컴포넌트의 getProperty 메소드를 사용하여 로딩된 웹 페이지에 정의된 javascript의 변숫 값을 넥사크로플랫폼 웹 애플리케이션에서 가져오는 방법에 관해 설명합니다.

예제

다음은 넥사크로플랫폼 화면에서 WebBrowser 컴포넌트를 사용해 웹 페이지를 로딩한 예제입니다.

Get Variable 버튼을 누르면 WebBrowser 컴포넌트에 로딩된 웹 페이지의 strHTML 변숫값인 "This is strHTML variable value in HTML page."를 넥사크로플랫폼 애플리케이션 쪽의 Static 컴포넌트에 설정합니다.

sample_webbrowser_04.xfdl

다음은 웹 페이지에 선언된 strHTML 변수입니다.

<script type="text/javascript">
	.
	.
strHTML = "This is strHTML variable value in HTML page.";
</script>

예제에서 사용한 핵심 기능

getProperty

WebBrowser 컴포넌트의 document 객체에 정의된 속성값을 반환하는 메소드입니다.

window (Javascript)

웹 브라우저 윈도우를 나타내는 최상위 자바스크립트 객체입니다. document 객체를 비롯하여 모든 전역 객체와 함수는 window 객체에 속하기 때문에 window 객체를 통해 접근할 수 있습니다.

예제 구현 방법

툴바에서 WebBrowser , Button , Static 컴포넌트를 생성하여 예제 화면과 같이 Form에 배치합니다.

http://demo.nexacro.com/developer_guide/17/Service/webbrowser.html 파일의 소스 코드를 복사해서 webbrowser.html 파일을 생성합니다.

WebBrowser 컴포넌트의 url 속성에 앞의 과정에서 생성한 webbrowser.html 문서의 URL을 설정합니다.

넥사크로플랫폼 애플리케이션에서 html 페이지에 있는 자바스크립트 strHTML 변숫값을 가져옵니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var _win = this.WebBrowser00.getProperty("window");
	
	var str = _win.getProperty("strHTML");
	
	this.Static00.set_text(str);

	if(_win)
	{
		_win.destroy();
		_win = null;
	}	
};

• 3번 줄: html 페이지의 window 객체 정보를 담은 Plugin 객체를 반환합니다.

• 5번 줄: html 페이지의 strHTML 변숫값을 str 변수에 저장합니다.

• 7번 줄: str 변숫값을 Static00의 text 속성에 설정합니다.

• 9~13번 줄: 사용을 완료한 Plugin 객체의 자원을 해제합니다. 해제하지 않을 시 메모리 누수가 발생할 수 있습니다.

QuickView(Ctrl + F6)를 실행하여 결과를 확인합니다.

Get Variable 버튼을 누르면 WebBrowser 컴포넌트에 로딩된 웹 페이지의 strHTML 변숫값인 "This is strHTML variable value in HTML page."를 넥사크로플랫폼 애플리케이션쪽의 Static 컴포넌트에 설정합니다.

스크립트의 함수 호출하기

WebBrowser 컴포넌트의 callMethod 메소드를 사용하여 로딩된 웹 페이지에 정의된 javascript의 함수를 호출하는 방법에 관해 설명합니다. callMethod 메소드로 함수 호출 시 복수의 인수도 전달할 수 있습니다.

예제

다음은 넥사크로플랫폼 화면에서 WebBrowser 컴포넌트를 사용해 웹 페이지를 로딩한 예제입니다.

Call Function 버튼을 누르면 WebBrowser 컴포넌트에 로딩된 웹 페이지에 선언된 colorFunction 함수를 호출합니다. colorFunction 함수는 문자열을 인수로 하여 타이틀 문자열의 색상을 바꾸는 함수를 호출하는데 정상적으로 함수 호출이 이뤄지면 "webbrowser.html" 문자열 색상이 빨간색으로 변경됩니다.

sample_webbrowser_05.xfdl

다음은 넥사크로플랫폼 애플리케이션에 의해 호출되는 웹 페이지에 선언된 colorFunction 함수입니다.

function colorFunction(str)
{
	var doc = document.getElementById('title_test');
	doc.style.color = str;
}

예제에서 사용한 핵심 기능

getProperty

WebBrowser 컴포넌트의 document 객체에 정의된 속성값을 반환하는 메소드입니다.

callMethod

WebBrowser 컴포넌트의 document 객체에 정의된 메소드를 호출하는 메소드입니다.

window (Javascript)

웹 브라우저 윈도우를 나타내는 최상위 자바스크립트 객체입니다. document 객체를 비롯하여 모든 전역 객체와 함수는 window 객체에 속하기 때문에 window 객체를 통해 접근할 수 있습니다.

예제 구현 방법

툴바에서 WebBrowser , Button , Static 컴포넌트를 생성하여 예제 화면과 같이 Form에 배치합니다.

http://demo.nexacro.com/developer_guide/17/Service/webbrowser.html 파일의 소스 코드를 복사해서 webbrowser.html 파일을 생성합니다.

WebBrowser 컴포넌트의 url 속성에 앞의 과정에서 생성한 webbrowser.html 문서의 URL을 설정합니다.

넥사크로플랫폼 애플리케이션에서 html 페이지에 있는 자바스크립트 strHTML 변숫값을 가져옵니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var _win = this.WebBrowser00.getProperty("window");
	
	_win.callMethod("colorFunction", "red");
	
	if(_win)
	{
		_win.destroy();
		_win = null;
	}	
};

• 3번 줄: html 페이지의 window 객체 정보를 담은 Plugin 객체를 반환합니다.

• 5번 줄: html 페이지의 "red" 문자열을 인수로 전달하고 alertFunction 함수를 호출합니다.

• 7~11번 줄: 사용을 완료한 Plugin 객체의 자원을 해제합니다. 해제하지 않을 시 메모리 누수가 발생할 수 있습니다.

QuickView(Ctrl + F6)를 실행하여 결과를 확인합니다. Call Function 버튼을 누르면 문자열 색상이 변경됩니다.

usernotify 이벤트를 이용한 사용자 데이터 전달하기

웹 페이지에서 onusernotify 이벤트를 통해 넥사크로플랫폼 애플리케이션으로 사용자 데이터를 전달하는 방법에 관해 설명합니다.

예제

다음은 넥사크로플랫폼 화면에서 WebBrowser 컴포넌트를 사용해 웹 페이지를 로딩한 예제입니다.

WebBrowser 컴포넌트에 로딩된 웹 페이지의 [send to nexacroplatform] 버튼을 누르면 TextArea 컴포넌트에 웹 페이지로부터 넥사크로플랫폼 애플리케이션 쪽으로 usernotify 이벤트의 사용자 데이터를 통해 전달된 "This is a value of inputText in html page." 문자열이 출력됩니다.

sample_webbrowser_06.xfdl

예제에서 사용한 핵심 기능

onusernotify

WebBrowser 컴포넌트에 로딩된 웹 페이지에서 넥사크로플랫폼 애플리케이션 쪽으로 정보를 전달할 때 발생하는 이벤트입니다.

userdata

WebBrowser 컴포넌트에 로딩된 웹 페이지에서 넥사크로플랫폼 애플리케이션으로 전달되는 사용자 데이터를 갖는 WebUserNotifyEventInfo 객체의 읽기 전용 속성입니다.

예제 구현 방법

툴바에서 WebBrowser 컴포넌트와 TextArea 컴포넌트를 생성하여 예제 화면과 같이 Form에 배치합니다.

http://demo.nexacro.com/developer_guide/17/Service/webbrowser.html 파일의 소스 코드를 복사해서 webbrowser.html 파일을 생성합니다.

WebBrowser 컴포넌트의 url 속성에 앞의 과정에서 생성한 webbrowser.html 문서의 URL을 설정합니다.

WebBrowser 컴포넌트에 onusernotify 이벤트 함수를 추가하고 다음과 같이 작성합니다.

this.WebBrowser00_onusernotify = function(obj:nexacro.WebBrowser,e:nexacro.WebUserNotifyEventInfo)
{	
	if(e.userdata)
	{
		var str = this.WebBrowser00.id + "_onusernotify: " + e.userdata;
		this.TextArea00.set_value(str);
	}
};

• 3번 줄: WebBrowser 컴포넌트에 로딩된 웹 페이지에서 넥사크로플랫폼 애플리케이션으로 전달되는 사용자 데이터가 있는지 확인한다.

• 5~7번 줄: 사용자 데이터를 alert 팝업으로 출력한다.

웹 페이지(webbrowser.html)에 넥사크로플랫폼 애플리케이션 쪽으로 usernotify 이벤트를 발생시킬 수 있는 이벤트 함수를 작성합니다.

<script type="text/javascript">
if (! window.NEXACROHTML)
{
	window.NEXACROHTML = {};
}

window.NEXACROHTML.FireUserNotify = function(userdata)
{
	if (window.NEXACROWEBBROWSER)
	{
		window.NEXACROWEBBROWSER.on_fire_onusernotify(window.NEXACROWEBBROWSER, userdata);
	}
	else
	{			
		window.document.title = userdata;
	}
}
</script>

• 2~5번 줄: 전역 객체인 NEXACROHTML를 선언합니다.

• 7번 줄: NEXACROHTML 객체에 FireUserNotify 이벤트 함수를 선언합니다.

• 9~16번 줄: 브라우저의 종류가 넥사크로브라우저이면 userdata를 인수로 한 NEXACROWEBBROWSER 객체의 on_fire_onusernotify 이벤트 함수를 호출하고 그 외의 브라우저면 DOM 객체의 타이틀로 userdata를 설정합니다.

QuickView(Ctrl + F6)를 실행하여 결과를 확인합니다. WebBrowser 컴포넌트에 로딩된 웹 페이지의 send to nexacroplatform 버튼을 누르면 TextArea 컴포넌트에 웹 페이지로부터 전달된 "This is a value of inputText in html page." 문자열이 출력됩니다.

innerHTML을 사용해 데이터 표현하기

setProperty 메소드를 사용해 지정된 값을 WebBrowser 컴포넌트에 표시하는 방법을 살펴봅니다.

예제

Edit 컴포넌트에 값(텍스트 또는 HTML 태그)을 입력하고 버튼 클릭 시 해당 값이 WebBrowser 컴포넌트에 표시됩니다.

sample_webbrowser_07.xfdl

예제에서 사용한 핵심 기능

setProperty

document 객체에 정의된 속성의 값을 설정할 수 있습니다. 예제에서는 innerHTML 속성의 값을 설정합니다. innerHTML 속성값으로 지정된 값은 지정된 위치의 태그 아래 콘텐츠로 추가됩니다.

예제 구현 방법

화면에 WebBrowser 컴포넌트를 배치하고 상단에 Edit 컴포넌트와 Button 컴포넌트를 배치합니다. WebBrowser 컴포넌트의 url 속성값은 설정하지 않습니다.

버튼 클릭 시 document 객체를 가져와서 innerHTML 속성값을 설정해줍니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var vHtml = this.WebBrowser00.getProperty("document").getProperty("body");
	vHtml.setProperty("innerHTML", this.Edit00.value);	
};

QuickView(Ctrl + F6)를 실행하여 결과를 확인합니다. Edit 컴포넌트에 HTML 태그를 입력하면 해당 태그가 실제 콘텐츠처럼 동작합니다.

외부 웹에디터 사용하기

외부 웹에디터 중 CKEditor를 사용하는 방법을 살펴봅니다. 전체 API를 모두 활용하지는 않고 간단하게 콘텐츠를 설정하고 가져오는 방법만 살펴봅니다.

예제

WebBrowser 컴포넌트에 지정된 HTML 파일을 로딩해서 웹에디터를 표시합니다. [setData] 버튼 클릭 시 특정 HTML 코드 문자열을 전달해서 웹에디터에 표시하고, 웹에디터의 콘텐츠를 수정한 후 [getData] 버튼 클릭 시 하단 TextArea 컴포넌트에 HTML 코드 문자열을 가져와서 표시합니다.

sample_webbrowser_08.xfdl

예제에서 사용한 핵심 기능

callMethod

window 객체에 정의된 function을 호출합니다. 반환되는 값이 있는 경우 반환값을 받아서 처리할 수 있습니다.

예제 구현 방법

화면에 WebBrowser 컴포넌트, Button 컴포넌트, TextArea 컴포넌트를 배치합니다. WebBrowser 컴포넌트의 url 속성값은 설정하지 않습니다.

form 오브젝트의 onload 이벤트 함수 내에서 웹에디터를 호출하는 HTML 파일을 로딩하는 스크립트를 실행합니다.

this.sample_webbrowser_08_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
	var domain = document.location.href;
	var arrdomain = domain.split('/');
	var currentfile = arrdomain.pop();
	domain = domain.replace(currentfile, "Service/sample_webbrowser_08.html")
	this.WebBrowser00.set_url(domain);
};

HTML 파일은 아래와 같습니다. HTML 코드 샘플은 CKEditor 예제를 참고했습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
	<title>CKEditor 4 – basic editor</title>
    <script src="https://cdn.ckeditor.com/4.10.0/basic/ckeditor.js"></script>	
</head>
<body>
    <textarea name="content" id="editor">
	</textarea>
    <script>
		CKEDITOR.replace( 'editor' );
		
		function setData(str)
		{
			CKEDITOR.instances.editor.setData(str);
		}
		
		function getData()
		{
			return CKEDITOR.instances.editor.getData();
		}			
    </script>
</body>
</html>

callMethod 메소드를 실행하기 위해 window 오브젝트를 가져와서 변수로 담아놓습니다.

this.WebBrowser00_onloadcompleted = function(obj:nexacro.WebBrowser,e:nexacro.WebLoadCompEventInfo)
{
	_win = this.WebBrowser00.getProperty('window');
};

버튼 클릭 시 HTML 코드 문자열을 웹에디터로 보내거나 웹에디터에서 편집한 HTML 코드를 반환합니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	_win.callMethod("setData", "<p><strong>nexacro platform</strong></p><p><em>Nexacro Platform programming is divided into two parts</em></p><p>one to define user-visible screens visible and a second used for the scripts that implement business logic. Additionally, Nexacro Platform provides capabilities for applying and managing styles and themes in screens.</p>");
};

this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.TextArea00.set_value(_win.callMethod("getData"));
};

QuickView(Ctrl + F6)를 실행하여 결과를 확인합니다.

MS 오피스 뷰어 사용하기

문서 파일을 내려받지 않고 웹브라우저에서 바로 온라인 뷰어를 실행하는 방법입니다.

예제

Grid 컴포넌트에서 원하는 파일 URL을 선택하면 WebBrowser 컴포넌트에 표시합니다.

sample_webbrowser_09.xfdl

예제에서 사용한 핵심 기능

url

url 속성값에 로컬에 위치한 파일 경로도 지정할 수 있지만, 예제에서는 온라인 상에 등록된 문서 파일만 사용할 수 있습니다.

예제 구현 방법

해당 셀을 더블클릭했을때 URL 값을 가져와 인코딩 후 온라인 서비스를 호출합니다.

this.Grid00_oncelldblclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
	this.WebBrowser00.set_url("https://view.officeapps.live.com/op/embed.aspx?src="+encodeURI(this.Dataset00.getColumn(e.row,0)));
};