JavaFX on the Web

In this section, we will learn about JavaFX on the Web and how to deploy our note-taking application there.

WebEngine

JavaFX provides a non-GUI component capable of loading HTML5 content, called the WebEngine API (javafx.scene.web.WebEngine). This API is basically an object instance of the WebEngine class to be used to load a file containing HTML5 content. The HTML5 file could be loaded from a local file system, a web server, or from inside a JAR file.

When a file is loaded using a web engine object, a background thread is used to load the file content to not block the JavaFX application thread.

The following are two WebEngine methods for loading HTML5 content:

load(String URL)
loadContent(String HTML)

WebView

JavaFX provides a GUI WebView (javafx.scene.web.WebView) node that can render HTML5 content onto the Scene graph. A WebView node is basically a mini-browser that is capable of responding to web events and allows a developer to interact with the HTML5 content.

Because of the close relationship between loading web content and the ability to display web content, the WebView node object also contains a WebEngine instance.

The JavaFX 8 WebView class implementation provides support for the following HTML5 features:

  • Canvas and SVG

  • Media playback

  • Form controls

  • History maintenance

  • Interactive element tags

  • DOM

  • Web workers

  • Web sockets

  • Web fonts

WebView and engine in action

We are going to have a simple example of how to load an HTML5 web document that contains Google Maps integrated with JavaFX as the scene control using WebView. We then use WebEngine to get the longitude and latitude from the JavaFX TextField controls to execute a JavaScript method that passes those parameters to position the map to be centered to the newly passed position with the marker indication, as shown in the following figure:

For the sake of clarity, I will show and explain only the important parts of the code, which demonstrates the concept mentioned in the preceding paragraph. For the complete code in this chapter, check the web package code GoogleMapViewerFX.java class and map.html file.

To view Google Maps inside the JavaFX application, we need to first create an HTML file to load and integrate with the Maps API, and this is defined in the map.html file. As seen in the preceding picture, the location is centered on Cairo, Egypt, my city, and this is set as the longitude and latitude values passed to the map when we create it, as in the following code snippet:

var latlng = new google.maps.LatLng(30.0594885, 31.2584644);
var Options = {
    zoom: 13,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("canvas"), Options);

Next, we have to notice the JavaScript goToLocation(lng, lat) method; this will be called from the JavaFX application using the webEngine instance to position the map based on the passed longitude and latitude from the JavaFX controls.

Inside GoogleMapViewerFX.java, we have created four controls to compose our UI – two TextField classes for the longitude and latitude, one update button, and a WebView object to view the map.html document:

WebView webView = new WebView();
WebEngine webEngine = webView.getEngine();
final TextField latitude = new TextField("" + 29.8770037);
final TextField longitude = new TextField("" + 31.3154412);
Button update = new Button("Update");

Note that I have created text controls with the initial longitude and latitude, which is different from the original map position. This position is my home position, and you can change it to yours and hit update to view the new position.

To load the map.html file, we have to pass it to the WebEngine class that we created from the WebView class we have created already, as seen in the previous code snippet.

Implement the button’s onAction() method to allow integration between JavaFX controls and JavaScript using the webEngine executeScript() method, as in the following code:

update.setOnAction(evt -> {
   double lat = Double.parseDouble(latitude.getText());
   double lon = Double.parseDouble(longitude.getText());

   webEngine.executeScript("" +
             "window.lat = " + lat + ";" +
             "window.lon = " + lon + ";" +
             "document.goToLocation(window.lat, window.lon);");
});

Run the application and you should see the previous figure positioned to Cairo city! Hit update and you should reach my home, as seen in the following figure.

Try getting your position longitude and latitude; then go to your home too!

Powerful, isn’t it? It is very easy to integrate HTML5 content and interact with already developed web applications to add more rich content from the Web to your existing JavaFX application.

Note-taking as a web application

Once your application is tested, as we have discussed before, you can distribute your application to multiple platforms and environments. We did that already for desktops with native installers using the distributed in this chapter, .jar file under the project’s dist folder.

The same .jar file will be used for web deployment, and the application could be deployed as a web application in many ways, as we will see next.

Running the application for the Web

There are three ways to run your JavaFX application on the Web:

Using Java Web Start to download and start your application once; then, you can use it offline from your machine Embed your JAR into your HTML file to run from an enterprise environment Load your HTML content from the WebEngine class and view it from the WebView class, as discussed previously

Java Web Start

The Java Web Start software provides the power to launch full-featured applications with a single click. Users can download and launch applications, such as a complete spreadsheet program or an Internet chat client, without going through lengthy installation procedures.

With Java Web Start, users can launch a Java application by clicking on a link on a web page. The link points to a JNLP (Java Network Launch Protocol) file, which instructs Java Web Start to download, cache, and run the application.

Java Web Start provides Java developers and users with many deployment advantages:

  • With Java Web Start, you can place a single Java application on a web server for deployment to a wide variety of platforms, including Windows, Linux, and Solaris.

  • It supports multiple simultaneous versions of the Java platform. An application can request a specific version of the Java Runtime Environment (JRE) software without conflicting with the needs of other applications. Users can create a desktop shortcut to launch a Java Web Start application outside a browser.

  • Java Web Start takes advantage of the inherent security of the Java platform. By default, applications have restricted access to local disk and network resources.

  • Applications launched with Java Web Start are cached locally for improved performance.

  • Updates to a Java Web Start application are automatically downloaded when the application is run standalone from the user’s desktop.

  • Java Web Start is installed as part of the JRE software. Users do not have to install Java Web Start separately or perform additional tasks to use Java Web Start applications.

For more information about Java Web Start, see the following links:

Deploying the application for a web distribution

To deploy your JavaFX applications on to the Web, there is a very simple way using NetBeans.

NetBeans already provides three deployment types for your JavaFX application – desktop, Java Web Start, and Web-as seen in the following figure: