Synchronize Data Models—Binding and Triggers - JavaFX: Developing Rich Internet Applications - page 70

Listing 4.1 A Sample UI Program Demonstrating the Use of Binding

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.image.*;
import javafx.scene.input.*;

var image1 = Image {
url: "{__DIR__}images/mouse-over.png"
}
var image2 = Image {
url: "{__DIR__}images/mouse-outside.png"
}
var currentImage : Image = image2;

Stage {
title: "Simple bind"
scene: Scene{
height: image1.height * 2
width: image1.width * 2
content: [
ImageView {
image: bind currentImage
x: image1.width / 2
y: image1.height / 2
onMouseEntered: function(e : MouseEvent)
: Void {
currentImage = image1;
}
onMouseExited: function (e : MouseEvent)
: Void {
currentImage = image2;
}
}
]
}
}

Figure 4.1 visually depicts what this program would look like when run, and its
two possible display states. The image changeover is accomplished in this way:
1. The program creates two instances of the JavaFX Image class, image1 and
image2 . Their bitmaps are read from a file represented by the url instance
variable.
2. At any point in time, the variable currentImage will either point to image1
or image2 . Its value is updated whenever the mouse pointer either enters