Integrating external pages

eXBuilder6 supports a way to embed an external web page into a page using the embedded page control.

Embedded page

Load an external web page (html, jsp, php, asp, etc...). You actually load the page using an iframe, and you can call scripts from the loaded page.

• Prepare an external web page.

  

• Select the [embedded page] in the palette view to add it to the design editor.

  

• Select the embedded page in the design editor and specify the web page as a relative path in the src property of the property view.

  

• Start the web server and try to open the page.

  

How to communicate content inside/outside the embedded page

Using the cpr.adapters.PlatformAdapter class, it is possible to specify communication and focus movement between external web page files and eXBuilder6 pages.

To use this class, you must have the eXBuilder6 project > runtime > cpr-adapters.js file.

In the description below, the eXBuilder6 application, which contains an embedded page that displays an external web page, will be referred to as a 'host app'.

PlatformAdapter class functions

Examples

• Prepare an external web page (test.html).

  

• Create a function to be called in the script (test.js) to be used in the external web page.

  /**
  *Register functions to be used in external web pages
  *Can be called using the callClientFunction function of an external web page
  */
  cpr.adapters.PlatformAdapter.registerChannelFunction("add", function(a, b) {
  	return a + b;
  });
  
  cpr.adapters.PlatformAdapter.registerChannelFunction("callHostMethod", function() {
  	return true;
  });
  
  function test() {
  	// Call the host app's callHostMethod function
  	cpr.adapters.PlatformAdapter.callHostFunction("callHostMethod")
  }

• Prepare the host app.

  

• Register the callHostMethod function registered in the external embedded page with the host app.

  cpr.core.Platform.INSTANCE.registerChannelFunction("callHostMethod", function() {
  	alert("Call succeeded");
  });

• Click the "Call Host Method" button on the external embed page to see the result.

  

• Click the "← Internal method call add(1,2)" button to call the function registered in the external page.

  /*
   * Called when the click event occurs on the "← internal method call add(1,2)" button.
   * An event that fires when the user clicks the control.
   */
  function onButtonClick3( /* cpr.events.CMouseEvent */ e) {
  	// Calling a global function within an embedded page
  	app.lookup("ep").callClientFunction('add', [1, 2])
  		.then(function(input) {
  			alert(input);
  		});
  }

• This is the result of calling the internal method add(1,2) function.

  

Example of moving the focus of an eXBuilder6 application and an external embedded page

This is an explanation of how to set the focus order for eXBuilder6 applications and external embedded pages.

Use the setFocusHandler function to specify the focus handler of external web pages and host apps.

// Specifies a handler when an embedded page displaying an external page gains focus.
cpr.adapters.PlatformAdapter.setFocusHandler(function(forward) {
	if(forward) {
		// Element to receive focus first
	} else {
		// The last element to receive focus
	}
});