Skip to content

Home

Jump to bottom
Paul Bakker edited this page Aug 21, 2014 · 6 revisions

Introduction

The WebView component brings HTML5 to the Servoy Smart Client. Based on the JavaFX WebView technology, it allows embedding HTML(5) content onto forms, with full bidirectional scripting access

The component allows for displaying websites, as well as displaying custom HTML markup generated by the application.

Relation to the Browser Suite project The Browser Suite project hosted on ServoyForge provided similar functionality, but used 3rd party libraries to achieve its goal. This had the downside of adding a (hefty) additional download when starting a Smart Client (first time and in case of updates). The Browser Suite also offered several features not available in the WebView component, like Flash support. The Browser Suite however is not supported anymore due cross platform issues, see The BrowserSuite is no longer officially supported

Requirements

This component depends on the availability of JavaFX, which must be made available in Smart Clients by setting the property servoy.client.javafx to true through the Servoy Admin pages

JavaFX comes pre-installed with Java 7 update 6 or higher.

On Java 7 < update 6 the user gets prompted when starting the Smart Client to install JavaFX if JavaFX is not yet installed

On Java 6 JavaFX must be manually installed and is only available on Windows

In development, make sure that Servoy Developer is also running on Java 7. See Running Servoy Developer on Java 7 on MAC OSX for instructions how to run Servoy Developer on Java 7 on OSX

Using the component

To display the JFXWebView component on a form, place an empty tabpanel on the form. In the onLoad method of the form, instantiate the JFXWebView component using the following code, where elements.container is a reference to the tabpanel:

var webView = new scopes.svyJFXWebView.WebViewPanel(elements.container)

Loading content

Now that the JFXWebView component is instantiated, content can be loaded. For this the component supports 2 methods:

  1. webView.load(url:String) to load content based on a URL
  2. webView.loadContent(content:String, [contentType:String]) to load content based on a String of HTML content

Media urls

The content in the JavaFX WebView can make use of media:/// urls to access resources stored in the Servoy Media library

Interacting with the content displayed in the component

The component offers two methods to interact with the content being displayed in the component:

  1. webView.executeScriptAndWait(script:String):* to execute a string of JavaScript code in the component and wait for it to finish and return the return value of the script
  2. webView.executeScriptLater(script:String) to execute a string of JavaScript code in the component and return immediatly, letting the script execute in the background

The two method exist because the JavaFX WebView component operates on a different thread than all the regular Servoy logic.

To execute code in another thread and wait for the result of the executed code requires the initiating thread to wait. This is what the webView.executeScriptAndWait(script:String):* method does.

If the return value of the executed script is not relevant, use webView.executeScriptLater(script:String) instead, as it allows the executing of code in the Servoy scripting layer to immediately continue

Upcalling from withing the displayed content to the Servoy scripting layer

From within the content of the JavaFX WebView upcalls can be made to the Servoy scripting layer in two ways:

  1. From JavaScript using servoy.executeMethod(methodName:String, arguments:Array<*>)
  2. Through callback url's, for example: callback://{methodName}?key1=value1&key2=value2. Note that XHTTPRequests using url's using the callback:// protocol are not supported due to CORS restrictions.

The methodName used in the upcalls can be either the name of a method on the form on which the JFXWebView is displayed or a fully qualified path to a method on a form or in a scope

The call to the method specified when doing servoy.executeMethod is asynchronous, so servoy.executeMethod always returns void

A Function object can be send as argument into servoy.executeMethod and then executed inside the Servoy scripting layer as callback

Transparent content

By default the JavaFX WebView component does not support transparent content. For this there is an outstanding Feature Request in the JavaFX project (RT-25004). As can be seen in the related case of RT-25004 some preliminary work was been done in Java 8 to make transparent content possible and by calling some internal API this can already be made to work. Our testing reveals that this work also seems backported to at least Java 7 update 51.

The JFXWebView component contains the calls to the internal API in such a way that if the internal API is available, the component itself is made transparent. This means that if the content that is rendered in the JFXWebView component is also transparent, the UI located under the JFXWebView component will be visible.

To make the content in the JFXWebView component transparent, at least the HTML and BODY tags of the HTML need to be styled to be (semi-)transparent.

<html style="background-color: transparent">
  <body style="background-color: transparent">
    <span style="color: red; font-size: 200px">Hello</span>
  </body>
</html>
Clone this wiki locally