How-To's > How do I combine JavaFX and JavaScript?

This functionality is currently available on Windows only, and you need to install Java SE 6 Update 10 at minimum. In addition, you need to install the New Java plug-in. Read the Release Notes for the Next-Generation Java Plug-In Technology for more information.

Calling From JavaScript to JavaFX Script

JavaScript code on the web page can access the JavaFX Script applet and perform many operations, such as calling JavaFX Script functions, getting and setting variables, passing data from JavaScript code to JavaFX Script code, and descending into the JavaFX Script scene graph. Note: This functionality requires Java SE 6 Update 10 at minimum. Attempting to call from JavaScript code to JavaFX Script code with earlier versions of Java Runtime Environment software will throw exceptions, which can be caught by using the JavaScript code try { ... } catch (e) { .. } syntax.

Calling From JavaFX Script to JavaScript

JavaFX Script code can interact with JavaScript code on the web page, in a similar way to how Java code can interact with JavaScript code. This interaction enables you to call JavaScript code functions defined on the web page, modify the Document Object Model (DOM) of the web page dynamically, and generally write JavaFX Script applications that integrate well within the web page.

As an example, if you want to add a media player to a web page and use JavaScript code to call the media file, you need to implement code in two places: the JavaFX Script file and the HTML page.

To modify the JavaFX Script file:

Add setVideo() to the end of the JavaFX Script file in the media player application. This function is a public function that sets the media file to be played in the media player application. JavaScript code in the HTML page can invoke this function.

public function setVideo (url : String, title: String, description: String) {
    mediaUrl = url;
    mediaTitle = title;
    mediaDescription = description;
}

To modify the JavaScript in the HTML page:

1. Add the JavaScript setVideo() function definition. This function is calling the JavaFX Script, setVideo() function from the JavaFX application named app.
   
   

   <script language="javascript">
   function setVideo(v,title, description) {
       try {
           var myApp = document.getElementById("app");
           myApp.script.setVideo(v, title, description);
       } catch (e) {
           reportException(e);
       }
   }
   </script>
   

   
   
2. Provide an applet name for the JavaFX application. Name the applet id app so that the JavaScript function will know which JavaFX Application to call in the HTML page context.

   
   <script src="http://dl.javafx.com/1.2/dftx.js"</script>
   <script>
       javafx(
           {
                 archive: "MediaBox.jar",
                 width: 640,
                 height: 360,
                 code: "com.sun.javafx.mediabox.Main",
                 name: "MediaBox",
                 id: "app"
           }
       );
   </script>
   

Examples

• JavaFX MediaBox Player for Streaming Video
  The JavaFX MediaBox Component is a visual component that provides the standard video player controls. View the source code for that page (typically View -> View Source in your browser) to see how JavaScript code is used to run the WebStart version of the MediaBox application.

Last Updated: April 2010
[Return to How-To's Home]

---