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.

<script src="http://dl.javafx.com/1.2/dtfx.js"></script> <script src="/rakeshmenonp/resource/JavaFXJavaScript/JavaFXJavaScript.js"></script>

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


<script type="text/javascript">var dzone_style = '2';</script> <script language="javascript" src="/rakeshmenonp/resource/JavaFXJavaScript/zoneit.js"></script>

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 01: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 02:17 AM IST #

nice

Posted by Vaibhav Choudhary on July 31, 2009 at 05:15 AM IST #

thanks a million, perfect post

Posted by James Shailes on November 22, 2009 at 10:45 PM IST #

@James Shailes Glad! Thanks!

Posted by Rakesh Menon on November 23, 2009 at 09:22 AM IST #

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

Posted by guest on December 09, 2009 at 09:01 AM IST #

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

Posted by Bharathi on December 09, 2009 at 09:28 AM IST #

@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

Posted by Rakesh Menon on December 15, 2009 at 05:45 AM IST #

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

Posted by Rakesh Menon on December 15, 2009 at 05:46 AM IST #

<app_id>.script is way to access the Javafx from javascript using a bridge which is only available with JREs 1.6.0_10 and above. This is not going to work with the older versions of JRE.
Right now this bridge does not work on Mac

Posted by Jitender Singh on February 12, 2010 at 06:08 PM IST #

Hi Rakesh..
Do you know how to pass value of Slider to JS.
var slider = Slider {
min: 1
max: 100
vertical: false
onMouseDragged: function (e: MouseEvent): Void {
function () {
jsObject.call("ChangeWatDruk", [slider.value / slider.max]);
}
}
}

Posted by Alex on February 25, 2010 at 03:17 PM IST #

@Alex You may try passing the value as string, as in http://javafx.com/samples/RSSViewer/

Also its better to use bind for listening to slider value change compared to onMouseDragged

var slider = Slider {
min: 1
max: 100
vertical: false
};
def sliderValue = bind slider.value on replace {
println(sliderValue);
jsObject.call("ChangeWatDruk", ["{sliderValue/slider.max}"]);
}

Posted by Rakesh Menon on February 26, 2010 at 06:28 AM IST #

Hi Rakesh...
That works well. Thanks.

Posted by Alex on February 26, 2010 at 02:36 PM IST #

Post a Comment:
Comments are closed for this entry.
About


The views expressed on this blog are my own and do not necessarily reflect that of my organization

Search

Categories
Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today