JavaFX – JavaScript Communication


There is a tutorial on JavaFX Script – JavaScript Bridge, JavaFX Sample, Plug-In Live Connect and Carl’s blog to list a few.. But still see questions about this (JavaSE Plug-In) feature. Hence just thought about writing a blog to demonstrate this..

I think the question primarily arise because, people have tried it but it doesn’t seem to work. The feature is stable only with JavaSE 6 Update 10 and above. So if you are using older JRE (as in default settings of Mac) the feature will not work as expected.

In below example, I have two user interface. One with HTML and another in JavaFX. When I click on HTML buttons it will invoke Java API and show message box using javax.swing.JOptionPane. When I click on JavaFX buttons, it will call JavaScript method such as alert, confirm, prompt to show message box.

Click on above image to launch the applet

JavaScript methods are invoked from Java or JavaFX using netscape.javascript.JSObject. An instance of JSObject can be obtained using static method JSObject.getWindow() by passing the current applet instance as argument.

Applet instance can be obtained from JavaFX as shown below:


var applet = FX.getArgument("javafx.applet"as Applet;

Next we need to get instance of JSObject. These classes are available in plugin.jar. So we need to include explicitly plugin.jar in classpath. Instead we can also use reflection to invoke these methods. I have used reflection and created a wrapper – JavaScriptUtil. This can be instantiated by passing above applet instance.

A series of method to show message box is added both JavaScript and JavaFX as shown below.

JavaScript:


function show_alert() {
    alert("JS: I am an alert box!");
}

JavaFX:


public function showAlert() : Void {
    JOptionPane.showMessageDialog(null, "FX: I am an alert box!");
}

I have prefixed the message with “FX” and “JS” so as to identify the origin of message box.

Invoke JavaFX method from JavaScript:


var applet = document.getElementById('JavaFXJavaScript');
// Invoke JavaFX method from JavaScript
applet.script.showAlert();

The applet element is obtained using its id


<script>
    javafx(
       {
           codebase: "dist",
           archive: "JavaFXJavaScript.jar",
           draggable: true,
           width: 250,
           height: 120,
           code: "javafxjavascript.Main",
           name: "JavaFXJavaScript",
           id: 'JavaFXJavaScript'
       }
    );
</script>

Invoke JavaScript method from JavaFX:


var jsObject = netscape.javascript.JSObject.getWindow(applet);
jsObject.call("show_alert"[]);

Since we have wrapped all JSObject methods in JavaScriptUtil we may invoke JavaScript method as shown below.


var applet: Applet = FX.getArgument("javafx.applet"as Applet;
var jsObject = new JavaScriptUtil(applet);
jsObject.call("show_alert"[]);

Please refer to JavaFXJavaScript.html and Main.fx for more details.

Java Plug-In LiveConnect API Documentation:

Try it out and let me know feedback

var dzone_style = ‘2’;

Advertisements

About Rakesh Menon
-

9 Responses to JavaFX – JavaScript Communication

  1. very cool & good tip, thank you very much for sharing.
    Can you share this snippet on my <a href="http://javascriptbank.com/">JavaScript library</a>?
    Awaiting your response. Thank

  2. Rakesh Menon says:

    @Free JavaScript Code Thanks! Sure!
    All source available in below repository..
    http://code.google.com/p/javafxdemos/source/browse/

  3. James Shailes says:

    thanks a million, perfect post

  4. Rakesh Menon says:

    @James Shailes Glad! Thanks!

  5. Anonymous says:

    Hi Rakesh..
    I am new to javafx. i embedded javafx script which is shown above. i.e javafx(
    {
    codebase: "dist",
    archive: "JavaFXJavaScript.jar",
    draggable: true,
    width: 250,
    height: 120,
    code: "javafxjavascript.Main",
    name: "JavaFXJavaScript",
    id: ‘JavaFXJavaScript’
    }
    );
    i placed the script in a method in a jsp.I called that method inside a <td>.I placed the <td> in a <div> and by default <div>’s display is none. on some event i made <div>’s display as block. after that i wrote something like this..
    var myApp = document.getElementById(‘JavaFXJavaScript’);
    myApp.script.height = 300;
    when i run the code i am getting an error like myApp.script is undefined .
    can u please help in this..
    thanks in advance

  6. Bharathi says:

    Hi rakesh
    I am also facing the same problem.
    Can u please help me.

  7. Rakesh Menon says:

    @122.175.85.150 "i am getting an error like myApp.script" I think the behavior is correct, there may not be any "script" attribute defined in javafxjavascript.Main

  8. Rakesh Menon says:

    @Bharathi, 122.175.85.150 I’m not clear on objective here, are you trying to update size of Applet at runtime?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: