Getting a Jump Start in JavaFX - JavaFX 8: A Definitive Guide to Building Desktop, Mobile, and Embedded Java Clients - page 23

textDb.textProperty().bind(acModel.selectedDBs.asString().concat(" dB"));
slider.valueProperty().bindBidirectional(acModel.selectedDBs);
slider.disableProperty().bind(acModel.muting);
mutingCheckBox.selectedProperty().bindBidirectional(acModel.muting);
acModel.genreSelectionModel = genreChoiceBox.getSelectionModel();
acModel.addListenerToGenreSelectionModel();
acModel.genreSelectionModel.selectFirst();
stage.setScene(scene);
stage.setTitle("Audio Configuration");
stage.show();
}
}
Take a look at the AudioConfigMain.java source code in Listing 1-3, after which we examine it together, focusing
on concepts not covered in the previous example.
Now that you've seen the main class in this application, let's walk through the new concepts.
The Magic of Binding
One of the most powerful aspects of JavaFX is binding, which enables the application's UI to easily stay in sync with
the state, or model, of the application. The model for a JavaFX application is typically held in one or more classes,
in this case the AudioConfigModel class. Look at the following snippet, taken from Listing 1-3, in which we create an
instance of this model class.
AudioConfigModel acModel = new AudioConfigModel();
There are several graphical node instances in the scene of this UI (recall that a scene consists of a sequence of
nodes). Skipping past several of them, we come to the graphical nodes shown in the following snippet that have a
property bound to the selectedDBs property in the model.
textDb = new Text();
... code omitted
slider = new Slider();
...code omitted...
textDb.textProperty().bind(acModel.selectedDBs.asString().concat(" dB"));
slider.valueProperty().bindBidirectional(acModel.selectedDBs);
As shown in this code, the text property of the Text object is bound to an expression. The bind function contains
an expression (that includes the selectedDBs property), which is evaluated and becomes the value of the text
property. Look at Figure 1-9 (or check the running application) to see the content value of the Text node displayed to
the left of the slider.
Notice also in the code that the value property of the Slider node is bound to the selectedDBs property in the
model as well, but that it uses the bindBidirectional() method. This causes the bind to be bidirectional, so in this
case when the slider is moved, the selectedDBs property in the model changes. Conversely, when the selectedDBs
property changes (as a result of changing the genre), the slider moves.
Go ahead and move the slider to demonstrate the effects of the bind expressions in the snippet. The number of
decibels displayed at the left of the slider should change as the slider is adjusted.
There are other bound properties in Listing 1-3 that we point out when we walk through the model class. Before
leaving the UI, we point out some color-related concepts in this example.