Introducing WebBrowser

WebBrowser is the component used to display other web page screens or contents within the Nexacro application screen. Since each WebBrowser component can display the web page screen, it is possible to display the number of web page screens at the same time by placing multiple WebBrowser components. In addition, not only web pages but also contents such as videos and images are available.

The WebBrowser component provides methods and events for interaction between Nexacro applications and web pages. Interaction between web pages refers to the function of exchanging data between two screens, such as transmitting element properties or script variable values in the web page to the Nexacro application or, conversely, calling the script function declared in the web page from the Nexacro application side. The developer can use the getProperty, setProperty, and callMethod methods to read or set the values of elements or properties of the web page, and call functions. In addition, it is possible to transmit user data or call the function by generating the usernotify event from the web page side to the Nexacro application.

When accessing the web page from the Nexacro application, the window object and document object of JavaScript are used. The window is the top-level object representing the web browser window, and all global objects and functions, including the document object, belong to the window object. The document is the object that contains the information (DOM) of the html document loaded in the web browser window and represents the web page itself. Since the document object is the sub-object of the window object, it must be accessed in the form of window.document in the first place, but the window can be omitted, so you can access the object by simply using the document.

Cross-domain problems may occur when the WebBrowser component loads the external web page with a different domain. The simplest way to fix this is to make the two files have the same domain. However, when this is not possible, you should use the way to avoid cross-domains, including CORS.

In the cross-domain environment, usage is limited due to the Same-origin policy. In other words, it is not possible to call AJAX between domains with different hostnames, protocols, and ports, therefore, CORS (Cross-Origin Resource Sharing) should be applied or it should be avoided with the JSONP method.

Example

An example similar to the WebBrowser component is the iframe. The iframe is similar to frame, but it is the internal frame element that is made to be more easily used and it functions to display other web pages or contents within one web page.

Creating WebBrowser

You can show external web page screens within the Nexacro application screen.

sample_webbrowser_01_01

Creating WebBrowser Component

Select WebBrowser from the toolbar, and drag it to an appropriate size on Form to create it. If you just click on the form, then it will be created with the default size.

Setting url Properties

Select WebBrowser created in the form and set the url property in the Properties window.

Property	Value
url	http://[Server URL]/[File Name]

Checking with QuickView

Run it with QuickView (Ctrl + F6).

Once you have set the url property, the WebBrowser component will display that URL page.

Importing Element Property Value

This describes how to get the property value of the element defined in the loaded web page from the Nexacro web application using the getProperty and callMethod methods of the WebBrowser component.

Example

The following is an example of loading the web page using the WebBrowser component on the Nexacro screen.

Clicking the Get Input Value button imports the value of the input element of the HTML page loaded in the WebBrowser component to the Nexacro application, sets it in the Static component, and displays it on the screen.

sample_webbrowser_02_01

sample_webbrowser_02.xfdl

Core features used in the example

getProperty: This is the method that returns the property value defined in the document object of the WebBrowser component.
callMethod: This is the method that calls the method defined in the document object of the WebBrowser component.
document (Javascript): It is the JavaScript object that contains web page information (DOM). You can access the elements of the html document using the document object.
getElementById (Javascript): This is the JavaScript method that returns the element corresponding to the ID.

How to implement an example

Creating WebBrowser Component

Create the WebBrowser , Button , Static components from the toolbar and place them on Form as shown in the example screen.

Creating html File

Create the webbrowser.html file by copying the source code of http://demo.nexacro.com/developer_guide/N/Service/webbrowser.html file.

Setting url Properties

Set the URL of the webbrowser.html document created in the previous process in the url property of the WebBrowser component.

Property	Value
url	http://[Server URL]/[File Name]

If the server URL is fixed, then specify the value of the url property directly. In the example, the URL value is checked and set in the onload event function for local testing.

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

Implementing Get input value Button Function

Import the value property value of the input element in the html page in Nexacro.

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

Line 3: Returns DOM information of the document object of the html page as the Plugin object.
Line 5: html Calls the getElementById method in the html page to return the DOM information of the element with the id of inputText.
Line 7: Returns the value of the value property among the properties of the input element with the id of inputText.
Line 9: Sets the value of the value property to the text property of Static00.
Line 11 to 18: Disables the resources of the Plugin object that has been used. If not disabled, a memory leak may occur.

The following is a part of the code of the html page loaded in the WebBrowser component, and you can check the value property value of the input element with the id of inputText.

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

Checking with QuickView

Run QuickView (Ctrl + F6) to check the result.

When you click the Get input value button, the input element of the web page loaded in the WebBrowser component is set "This is value of inputText in html page." The text is set in the Static component at the bottom of the screen.

Setting Element Property Value

This describes how to set the property value of the element defined in the loaded web page by using the setProperty method of the WebBrowser component.

Example

The following is an example of loading the web page using the WebBrowser component on the Nexacro screen.

If you click the Set Input Value button, then the string set in the Edit component of the Nexacro application screen is set as the value of the input element of the web page loaded in the WebBrowser component.

sample_webbrowser_03_01

sample_webbrowser_03.xfdl

Core features used in the example

setProperty: This is the method that sets the value for the property defined in the document object of the WebBrowser component.
getProperty: This is the method that returns the value for the property defined in the document object of the WebBrowser component.
callMethod: This is the method that returns the method defined in the document object of the WebBrowser component.
document (Javascript): This is the JavaScript object that contains web page information (DOM). You can access the elements of the html document using the document object.
getElementById (Javascript): This is the JavaScript method that returns the element corresponding to the ID.

How to implement an example

Creating WebBrowser Component

Create the WebBrowser , Button , Edit components from the toolbar and place them on Form as shown in the example screen.

Creating html File

Create the webbrowser.html file by copying the source code of http://demo.nexacro.com/developer_guide/N/Service/webbrowser.html.

Setting url Properties

Set the URL of the webbrowser.html document created in the previous process in the url property of the WebBrowser component.

Property	Value
url	http://[Server URL]/[File Name]

Implementing Set input value Button Function

Set the value set in the Edit component of the Nexacro application as the value property value of the input element in the html page loaded in the WebBrowser component. The code below operates as follows.

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

Line 3: Returns DOM information of the document object of the html page as the Plugin object.
Line 5: html Calls the getElementById method in the html page to return the DOM information of the element with the id of inputText.
Line 7: Sets the text property value of the Edit00 component to the value property value of the element with the id of inputText.
Line 9 to 16: Disables the resources of the Plugin object that has been used. If not disabled, then a memory leak may occur.

Checking with QuickView

Run QuickView (Ctrl + F6) to check the result.

If you click the Set input value button, then you can see "This is a value from Nexacro." of the Edit component on the screen. The text is set in the Input element of the web page loaded into the WebBrowser component.

Importing Variable Value of Script

This describes how to get the variable value of JavaScript defined in the loaded web page from the Nexacro web application by using the getProperty method of the WebBrowser component.

Example

The following is an example of loading the web page using the WebBrowser component on the Nexacro screen.

Clicking the Get Variable button sets "This is strHTML variable value in HTML page.", which is the strHTML variable value of the web page loaded in the WebBrowser component, in the Static component of the Nexacro application.

sample_webbrowser_02_01

sample_webbrowser_04.xfdl

The following is the strHTML variable declared in the web page.

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

Core features used in the example

getProperty: This is the method that returns the value for the property defined in the document object of the WebBrowser component.
window (Javascript): This is the top-level JavaScript object representing the web browser window. All global objects and functions, including the document object, belong to the window object and can be accessed through the window object.

How to implement an example

Creating WebBrowser Component

Create the WebBrowser , Button , Static components from the toolbar and place them on Form as shown in the example screen.

Creating html File

Create the webbrowser.html file by copying the source code of http://demo.nexacro.com/developer_guide/N/Service/webbrowser.html.

Setting url Properties

Set the URL of the webbrowser.html document created in the previous process in the url property of the WebBrowser component.

Property	Value
url	http://[Server URL]/[File Name]

Implementing Get Variable Button Function

Import the JavaScript strHTML variable value in the html page from the Nexacro application.

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

Line 3: Returns the Plugin object containing the window object information of the html page.
Line 5: Stores the strHTML variable value of the html page in the str variable.
Line 7: Sets the str variable value to the text property of Static00.
Line 9 to 13: Disables the resources of the Plugin object that has been used. If not disabled, then a memory leak may occur.

Checking with QuickView

Run QuickView (Ctrl + F6) to check the result.

Click the Get Variable button to set "This is strHTML variable value in HTML page.", which is the strHTML variable value of the web page loaded in the WebBrowser component, in the Static component of the Nexacro application.

Calling Function of Script

This describes how to call the JavaScript function defined in the loaded web page by using the callMethod method of the WebBrowser component. When calling the function with the callMethod method, you can also transmit multiple arguments.

Example

The following is an example of loading the web page using the WebBrowser component on the Nexacro screen.

When the Call Function button is pressed, the colorFunction function declared in the web page loaded in the WebBrowser component is called. The colorFunction function calls the function that changes the color of the title string by taking the string as the argument. If the function is called normally, then the color of the "webbrowser.html" string is changed to red.

sample_webbrowser_02_01

sample_webbrowser_05.xfdl

The following is the colorFunction function declared in the web page called by the Nexacro application.

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

Core features used in the example

getProperty: This is the method that returns the property value defined in the document object of the WebBrowser component.
callMethod: This is the method that calls the method defined in the document object of the WebBrowser component.
window (Javascript): This is the top-level JavaScript object representing the web browser window. All global objects and functions, including the document object, belong to the window object and can be accessed through the window object.

How to implement an example

Creating WebBrowser Component

Create the WebBrowser , Button , Static components from the toolbar and place them on Form as shown in the example screen.

Creating html File

Create the webbrowser.html file by copying the source code of http://demo.nexacro.com/developer_guide/N/Service/webbrowser.html.

Setting url Properties

Set the URL of the webbrowser.html document created in the previous process in the url property of the WebBrowser component.

Property	Value
url	http://[Server URL]/[File Name]

Implementing Get Variable Button Function

Import the JavaScript strHTML variable value in the html page from the Nexacro application.

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

Line 3: Returns the Plugin object containing the window object information of the html page.
Line 5: Transmits the "red" string of the html page as the argument and calls the alertFunction function.
Line 7 to 11: Disables the resources of the Plugin object that has been used. If not disabled, a memory leak may occur.

Checking with QuickView

Run QuickView (Ctrl + F6) to check the result. When you press the Call Function button, the color of the string is changed.

Transmitting User Data Using usernotify Event

This describes how to transmit user data from the web page to the Nexacro application through the onusernotify event.

Example

The following is an example of loading the web page using the WebBrowser component on the Nexacro screen.

When the [send to Nexacro] button of the web page loaded in the WebBrowser component is pressed, "This is a value of inputText in html page." transmitted through the user data of the usernotify event from the web page to the Nexacro application to the TextArea component is output.

sample_webbrowser_02_01

sample_webbrowser_06.xfdl

Core features used in the example

onusernotify: This is the event that occurs when information is transmitted from the web page loaded in the WebBrowser component to the Nexacro application.
userdata: This is the read-only property of the WebUserNotifyEventInfo object that has user data transmitted from the web page loaded in the WebBrowser component to the Nexacro application.

How to implement an example

Creating WebBrowser Component

Create the WebBrowser component and the TextArea component from the toolbar and place them on Form as shown in the example screen.

Creating html File

Create the webbrowser.html file by copying the source code of http://demo.nexacro.com/developer_guide/N/Service/webbrowser.html.

Setting url Properties

Set the URL of the webbrowser.html document created in the previous process in the url property of the WebBrowser component.

Property	Value
url	http://[Server URL]/[File Name]

Adding and Writing Event Function of WebBrowser00 Component

Add the onusernotify event function to the WebBrowser component and write the following.

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

Line 3: Checks whether there is user data transmitted from the web page loaded in the WebBrowser component to the Nexacro application.
Line 5 to 7: Outputs user data as the alert pop-up.

Writing Event Function in Web Page

Write the event function that can trigger the usernotify event on the web page (webbrowser.html) toward the Nexacro application.

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

Line 2 to 5: Declares the global object, NEXACROHTML.
Line 7: Declare the FireUserNotify event function in the NEXACROHTML object.
Line 9 to 16: If the browser type is Nexacro browser, calls the on_fire_onusernotify event function of the NEXACROWEBBROWSER object with userdata as the argument, and in other browsers, sets userdata as the title of the DOM object.

Checking with QuickView

Run QuickView (Ctrl + F6) to check the result. When you click the send to Nexacro button of the web page loaded in the WebBrowser component, "This is a value of inputText in html page." is output.

Displaying Data with innerHTML

Let us see how to display the specified value in the WebBrowser component using the setProperty method.

Example

When you enter the value (text or HTML tag) in the Edit component and click the button, the value is displayed in the WebBrowser component.

sample_webbrowser_07.xfdl

Core features used in the example

setProperty: You can set the value of the property defined in the document object. The example sets the value of the innerHTML property. The value specified as the innerHTML property value is added as content under the tag at the specified location.

How to implement an example

Placing Screen

Place the WebBrowser component on the screen and the Edit component and the Button component at the top. Do not set the url property value of the WebBrowser component.

Writing onclick Event Function

When the button is clicked, the document object is imported and the innerHTML property value is set.

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

Checking with QuickView

Run QuickView (Ctrl + F6) to check the result. If you enter the HTML tag in the Edit component, the tag operates like actual content.

Using External Web Editor

Let us take a look at how to use CKEditor among external web editors. We don't utilize the full API but just look at how to simply set up and get content.

Example

The web editor is displayed by loading the HTML file specified in the WebBrowser component. When the [setData] button is clicked, a specific HTML code string is transmitted and displayed in the web editor, and when the [getData] button is clicked after modifying the contents of the web editor, the HTML code string is fetched and displayed in the lower TextArea component.

In the example, CKEditor version 4 was used. You can use CKEditor for free or with a charge depending on how you use it.

https://ckeditor.com/ckeditor-4/

CKEditor version 5 does not support IE11.

https://docs.ckeditor.com/ckeditor5/latest/builds/guides/support/browser-compatibility.html

sample_webbrowser_02_01

sample_webbrowser_08.xfdl

Core features used in the example

callMethod: Calls the function defined in the window object. If there is a return value, then you can accept the return value and process it.

How to implement an example

Placing Screen

Place the WebBrowser component, Button component, and TextArea component on the screen. Do not set the url property value of the WebBrowser component.

Writing onload Event Function

Execute the script that loads the HTML file that calls the web editor within the onload event function of the form object.

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

The HTML file is shown below. For the HTML code sample, the CKEditor example was referred.

https://docs.ckeditor.com/ckeditor5/latest/builds/guides/integration/basic-api.html

<!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>

Writing onloadcompleted Event Function

To execute the callMethod method, get the window object and put it as the variable.

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

Writing onclick Event Function

When the button is clicked, the HTML code string is sent to the web editor, or the HTML code edited in the web editor is returned.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	_win.callMethod("setData", "<p><strong>Nexacro N</strong></p><p><em>Nexacro 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 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"));
};

Checking with QuickView

Run QuickView (Ctrl + F6) to check the result.

Using MS Office Viewer

This is the method to run the online viewer directly from the web browser without downloading the document file.

Example

If you select the desired file URL in the Grid component, it is displayed in the WebBrowser component.

This is how you use the services provided by Microsoft. The service may not operate depending on circumstances.

https://support.office.com/en-us/article/view-office-documents-online-1cc2ea26-0f7b-41f7-8e0e-6461a104544e

sample_webbrowser_09.xfdl

Core features used in the example

url: Able to specify the file path located locally in the url property value, but in the example, only document files registered online can be used.

How to implement an example

Place the Grid component and the WebBrowser component on the screen.

Create the Dataset object and add one column. Then, add the URL value of the document file as column data.

In the example, the document file provided as the sample was used.

http://file-examples.com/index.php/sample-documents-download/

Select the Dataset object and set it as the binddataset property to the Grid component by dragging and dropping.

Write the oncelldblclick event function of the Grid component as follows.

When the cell is double-clicked, the URL value is imported, encoded, and then the online service is called.

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

Run QuickView (Ctrl + F6) to check the result.