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(< applet >) 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


Posted on: Jul 28, 2009

Posted by: Rakesh Menon

Category: JavaFX

Permanent link to this entry

Comments:

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

Posted by Free JavaScript Code on July 29, 2009 at 08:52 AM IST #

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

Posted by Rakesh Menon on July 29, 2009 at 09:17 AM IST #

nice

Posted by Vaibhav Choudhary on July 31, 2009 at 12:15 PM IST #

thanks a million, perfect post

Posted by James Shailes on November 23, 2009 at 06:45 AM IST #

@James Shailes Glad! Thanks!

Posted by Rakesh Menon on November 23, 2009 at 05:22 PM IST #

Post a Comment:
  • HTML Syntax: NOT allowed

This blog copyright 2009 by Rakesh Menon