Add JavaFX to Web Pages with Applets - JavaFX: Developing Rich Internet Applications - page 252

Listing 9.9 JavaFX Script - AppletStageExtension

var stage:Stage = Stage {
title: "NASA Image Viewer"
width: 1000
height: 1000
extensions: [
applet = AppletStageExtension {
...
...

When the HTML page is first loaded and the JavaFX applet starts, this number
rapidly updates as the applet processes the returned XML from the NASA site.
Let's add another HTML input field that displays the current picture index.
Besides showing the current picture index as set by the JavaFX applet, this field
also allows the user to enter an arbitrary index and then click the Set Current but-
ton to send the index to the JavaFX applet. We will be discussing this feature
when we talk about JavaScript communicating with JavaFX.

The HTML code is in Listing 9.10.

Listing 9.10 HTML - currentIndex Input Field

<p>Current Picture Index:
<input type="text" name="currentIndex"
id="currentIndex" value="0" size="10">

The JavaFX applet code is in Listing 9.11.

Listing 9.11 JavaFX Script - Access HTML Field currentIndex

public var currentIndex: Integer = bind imageList.currentIndex on
replace {
thumbnailViewer.currentIndex = currentIndex;
// tell the web page
applet.eval(
"document.getElementById(' currentIndex ').value =
{currentIndex}");
};

Figure 9.7 shows the new HTML page, with the two fields numPics and
currentIndex . The JavaFX applet has already updated the Number of Pictures
and the Current Picture Index.