FX

Learn best practices for deploying JavaFX applications as applets in a browser.

Chances are that you'll be distributing your JavaFX application by deploying it as an applet in a Web page, to be viewed in a browser.

Here's a very simple applet whose deployment features will be used as an example for the following sections.

Files for Applet Deployment

When you deploy an applet, you need two files: the application JAR file and a file named <application-name>_browser.jnlp, or, in the case of the applet here, AppletShow_browser.jnlp.

You can create these files manually, or you can generate them in one of two ways:

• Use the JavaFX Packager utility included with the JavaFX SDK
• Use the NetBeans IDE with the Run in Browser setting. The NetBeans IDE incorporates the JavaFX Packager utility, so these files are generated every time you run the application.

In both cases, the JAR and JNLP files are automatically generated into a /dist directory. An HTML stub file is also generated, which contains the JavaScript that you will need to embed the applet in your HTML page, as described in the following section. You can open that HTML file in a text editor and copy and past the JavaScript code into your own HTML page.

If you use the NetBeans IDE, set the Run properties for the application to Run in Browser. The deployment files are created every time you build and run the application,

If you use the JavaFX Packager utility, here is a typical command to generate the deployment files:

javafxpackager -src <rootpath> -appClass Main -appWidth 480 -appHeight 120

The -src parameter specifies the path to the root directory of the source tree holding the application. The -appClass parameter specifies the main class of the application. The default width and height are 200 pixels. See the documentation included with the SDK for more parameters, or see Section 7.6 of Sergey Malenkov's blog, Weather on SunTechDays.

If you click the Download Source Code button in the left sidebar and download and unzip the AppletShow application, you will find the deployment files in the dist folder.

Set the codebase and homepage Pointers

Once you generate the files, you need to open <application-name>_browser.jnlp and modify the URLs for the code base and home page to point to the URL where these two files can be accessed when the applet is deployed. Here is an example:

<?xml version="1.0" encoding="UTF-8"?>
<jnlp spec="1.0+"  codebase="http://example.sun.com/JavaFX/AppletDeploy/dist/" 
    href="AppletShow_browser.jnlp">
    <information>
        <title>AppletShow</title>
        <vendor>nancyhildebrandt</vendor>
         <homepage href="http://example.sun.com/JavaFX/AppletDeploy/dist/"/>
        <description>AppletShow</description>
        <offline-allowed/>
        <shortcut>
            <desktop/>
        </shortcut>
    </information>
    <resources>
        <j2se version="1.5+"/>
        <extension name="JavaFX Runtime" href="http://dl.javafx.com/1.2/javafx-rt.jnlp"/>
        <jar href="AppletShow.jar" main="true"/>
    </resources>
    <applet-desc name="AppletShow" main-class="com.sun.javafx.runtime.adapter.Applet" 
        width="480" height="120">
        <param name="MainJavaFXScript" value="appletshow.Main">
    </applet-desc>
    <update check="background">
</jnlp>

Embed the Applet in Your Web Page

Copying the JavaScript code generated in the HTML stub file and using it in your own web page is a better way to embed your JavaFX applet in the browser than using the <applet> tag. The following example shows the JavaScript code in the HTML stub file for the AppletShow application:

<script src="http://dl.javafx.com/1.2/dtfx.js">
<script>
    javafx(
        {
              archive: "AppletShow.jar",
              draggable: true,
              width: 480,
              height: 120,
              code: "appletshow.Main",
              name: "AppletShow"
        }
    );
</script>

The values will change in the HTML stub file generated for your own application. The dtfx.js script on dl.javafx.com generates the <applet> tag for you and properly autodetects the user's copy of Java, installing an update if necessary.

You may need to change the values somewhat after you copy the script into your HTML page. If the AppletShow_browser.jnlp and AppletShow.jar files are in a different directory from your HTML page, add the path to the archive element. For example:

archive: "AppletShow/dist/AppletShow.jar",

If the src directory in your application has embedded folders beyond the package, the code line should include this information when it is generated. For example:

code: "javafx.tools.fxd.demos.puzzle15.Main"

Set the Size of the Applet

Applet size overrides the height and width specified in the Stage instance in your application. The default applet size is 200 by 200 pixels. If your JavaFX application is larger than the default applet size, then you must override to make the application look more natural in the web page. In the previous JavaScript example the applet size is set to 480 by 120 pixels, the same size as the dimensions in the Stage instance in the JavaFX application.

Applet size is specified in two different places:

• In the JavaScript code embedded in your web page.
• In the <applet-desc> element in the <application-name>_browser.jnlp file. For an example, see the AppletShow_browser.jnlp file contents.

You can specify applet size before you generate your deployment files. If you use the NetBeans IDE, you can set the applet size to match the width and height of the Stage instance in your JavaFX application by going to the Properties window, selecting Application in the left menu, and entering the width and height values in the Applet Specific Properties section. If you use the JavaFX Packager utility, use the -appWidth and -appHeight parameters. In both cases, the applet size is written to both the HTML stub file and the <application-name>_browser.jnlp file.

If you manually change the width and height values in the JavaScript code, don't forget to change the width and height values in <application-name>_browser.jnlp.

Where's the Window Title Bar?

Applets displayed in a browser do not have window title bars, regardless of how the style variable is set in the Stage object instance. Users cannot maximize, minimize, close, or move the applet around in the browser window.

Tip: To avoid the possibility of white space appearing at the bottom of the applet, in the Stage instance in your application, set the style variable StageStyle.TRANSPARENT or style:StageStyle.UNDECORATED. For a description of the TRANSPARENT, DECORATED, and UNDECORATED fields, see the StageStyle class.

Note: On the Linux and OpenSolaris platforms, StageStyle.TRANSPARENT is not supported and will default to StageStyle.UNDECORATED.

Try It

Here are some variations that you can try to increase your understanding.

• Embed the AppletShow or ShouldDrag application in your own web page.
• Modify the AppletShow application to use the default close button instead of the custom close button.
• In the ShouldDrag application, make the draggable region the circle instead of the top bar.

Related Links

• Article: Embedding Media Into the Web Page
• Tutorial: Deploy A Rich Internet Application Developed With JavaFX Technology
• Blog: Deploying An Applet In Under 10 Minutes
• Blog: JavaFX - Where is the Applet Tag?
• Tech tip:: How to Develop and Run JavaFX Applications Offline

We welcome your participation in our community. Please keep your comments civil and on point. You may optionally provide your email address to be notified of replies—your information is not used for any other purpose. By submitting a comment, you agree to these Terms of Use.