Deployment and Integration - JavaFX 1.2 Application Development - page 244

Controlling JavaFX applets from JavaScript
Part of the appeal of JavaFX as a browser-based deployment platform is its complete
integration support between the browser and your JavaFX applets. When you deploy an
applet, the new Java Plugin (see Packaging your app as an Applet ) provides full two-way
programmatic integration between your applet and JavaScript. In this recipe, we will see how
you can use JavaScript to update attributes and invoke functions from an embedded applet.
Getting ready
Before you embark on the techniques presented in this recipe, you should be familiar with the
deployment of your JavaFX applications as browser-embedded applets. If you are not, review
the recipe Packaging your app as an Applet, presented earlier in this chapter. Secondly, since
applets are embedded in HTML pages, you will need to have working knowledge of basic
HTML and JavaScript. If you are not familiar with either, there are numerous resources online,
includi ng http://www.w3schools.com/htm l/ for HTML a nd http://www.w3schools.
com/j s/ for JavaScript.
To demonstrate how you can use JavaScript to control and interact with an embedded JavaFX
applet programmatically, this recipe presents an application that allows users to use an HTML
form to control the attributes and appearance of a text message displayed in a JavaFX applet.
How to do it...
To accomplish this recipe, we need to break down the solution into several steps as shown
next. For the sake of saving space and keeping this chapter to a manageable length, the code
is abbreviated, highlighting the more interesting portions. You can get the full listing for all
recipe resources at location ch07/source-code/src/js2jfx/ .
1. The JavaFX code —this is a simple JavaFX application that uses a Text node to display
a text message on the stage. The code also exposes several script-level attributes
and a script-level function designed to be accessed by JavaScript. The following
snippet is an abbreviated version of the JavaFX code; you can get the full code from
the file ch07/src/source-code/js2jfx/JavaScript2JavaFXDemo.fx .
// public script-level properties
public var textContent = "Text Commander";
public var textColor = "blue";
public var textColorEnd = "blue";
public var textStrokeColor = "blue";
public var textStrokeWidth = "1";
public var textFont = "Helvetica";
var w=800;