Invoking JavaFX function from JavaScript

As we all know, JavaFX script is very friendly to Java. It's also quite friendly to JavaScript because JavaFX can be run as an applet. Here are the steps to call a JavaFX function from JavaScript side. I use NetBeans 6.7.1, JavaFX 1.2, Ubuntu and Firefox as my development environment.

First, create a JavaFX project (Foo) and set the Application Execution Model to Run in Browser. After it can run correctly, copy Foo.jar and Foo_browser.jnlp in dist/ folder. Usually there are four files in the folder, but we only need three. The other one is needed in step 3.

Second, create a web application and put the two files copied in previous step into the root of the web application.

Third, add an id attribute to the following snippet of Foo.html in dist/ folder of previous project. Copy this piece of code and paste it to the web page that uses the JavaFX applet.

 <script src=""http://dl.javafx.com/1.2/dtfx.js""></script>  
 <script>  
       javafx(  
       {  
         archive: "Foo.jar",  
         draggable: true,  
         width: 250,  
         height: 250,  
         code: "foo.Foo",  
         name: "Foo",  
         id: "Applet"  
       }  
     );  
 </script>  

Finally, use following code to invoke a JavaFX function

  var app = document.getElementById("Applet");  
  app.script.foo(...);  

If you get exception like

message = app.script is undefined

remove the codebase attribute of jnlp element in Foo_browser.jnlp and try again.