JAVAFX BASICS - Introduction to Java Programming: Comprehensive Version - page 542

14.5

✓ ✓

How do you create a Scene object? How do you set a scene in a stage? How do you
place a circle into a scene?

Check

Point

14.6

What is a pane? What is a node? How do you place a node in a pane? Can you directly
place a Shape or an ImageView into a Scene ? Can you directly place a Control or
a Pane into a Scene ?

14.7

How do you create a Circle ? How do you set its center location and radius? How
do you set its stroke color and fill color?

14.5 Property Binding
You can bind a target object to a source object. A change in the source object will be
automatically reflected in the target object.

Key
Point

JavaFX introduces a new concept called property binding that enables a target object to be
bound to a source object . If the value in the source object changes, the target object is also
changed automatically. The target object is called a binding object or a binding property and
the source object is called a bindable object or observable object . As discussed in the preced-
ing listing, the circle is not centered after the window is resized. In order to display the circle
centered as the window resizes, the x - and y -coordinates of the circle center need to be reset
to the center of the pane. This can be done by binding the centerX with pane's width/2 and
centerY with pane's height/2 , as shown in Listing 14.5.

target object
source object
binding object
binding property
bindable object
observable object

L ISTING 14.5

ShowCircleCentered.java
1 import javafx.application.Application;
2 import javafx.scene.Scene;
3 import javafx.scene.layout.Pane;
4 import javafx.scene.paint.Color;
5 import javafx.scene.shape.Circle;
6 import javafx.stage.Stage;
7
8 public class ShowCircleCentered extends Application {
9 @Override // Override the start method in the Application class
10

VideoNote
Understand property binding

public void start(Stage primaryStage) {

11 // Create a pane to hold the circle

12 Pane pane = new Pane();

create a pane

13
14 // Create a circle and set its properties
15 Circle circle = new Circle();
16 circle.centerXProperty().bind(pane.widthProperty().divide( 2 ));
17 circle.centerYProperty().bind(pane.heightProperty().divide( 2 ));
18 circle.setRadius( 50 );
19 circle.setStroke(Color.BLACK);
20 circle.setFill(Color.WHITE);
21

create a circle
bind properties

pane.getChildren().add(circle); // Add circle to the pane add circle to pane

22
23 // Create a scene and place it in the stage
24 Scene scene = new Scene(pane, 200 , 200 );
25 primaryStage.setTitle( " ShowCircleCentered " ); // Set the stage title
26 primaryStage.setScene(scene); // Place the scene in the stage
27

add pane to scene

primaryStage.show(); // Display the stage

display stage

28 }
29 }

The Circle class has the centerX property for representing the x -coordinate of the circle
center. This property like many properties in JavaFX classes can be used both as target and
source in a property binding. A target listens to the changes in the source and automatically