How to identify the source of JavaFX Property changes? - javafx

Question

how can the source of a JavaFX property change be identified, i.e. who changed the property?
--
Example: the "selected" state of a CheckBox must be synchronized with another objects state, and the other object is not supporting Properties or Bindings. The obvious approach would be to register a ChangeHandler at the selectedProperty of the CheckBox in order to update the other objects state. In the opposite direction, another notification facility is used to call setSelected() or selectedProperty.set() of the CheckBox. This leads to a problem: the registered ChangeHandler is called not only when the user clicks the CheckBox in the UI, but also when the other object changes its state.
In the latter case, we dont want to propagate the change back to the object, of course. Surprisingly there does not seem to be anything on which the ChangeHandler could decide whether the Property was changed by the UI control itself or from outside. The first argument of the handler function only refers to the Property/Observabe which is changed, not who changed it. The oldValue and newValue arguments can be used to break an infinite notification cycle, but they are not sufficient to prevent the first unneccessary, possibly harmful notification.
--
The above description should be sufficient, but if you prefer this question in form of a minimal working example, the following code demonstrates the problem:
The "other object" with one boolean flag as "state" (a database in the real world):
package sample;
public class SomeDatabaseEntry {
private boolean someFlag = false;
public boolean getSomeFlag()
{
return someFlag;
}
public void setSomeFlag(boolean state)
{
someFlag = state;
}
public void toggleSomeFlag()
{
someFlag = !someFlag;
}
}
Main:
package sample;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
public class Main extends Application {
/*
* dummy object representing the "other side", e.g. a database
*/
public final SomeDatabaseEntry _someEntry = new SomeDatabaseEntry();
private Controller _controller;
#Override
public void start(Stage primaryStage) throws Exception{
FXMLLoader fxmlLoader = new FXMLLoader();
Parent root = fxmlLoader.load(getClass().getResource("sample.fxml").openStream());
primaryStage.setTitle("Hello World");
primaryStage.setScene(new Scene(root, 300, 275));
primaryStage.show();
_controller = fxmlLoader.getController();
_controller.init(_someEntry);
startSomeDummyDatabaseUpdater();
}
/*
* dummy logic that emulates external changes (e.g. database updates)
* in the real world there would be a function that is called by the
* database with a description of the changes that occured.
* as said: this part is not under my control
*/
public void startSomeDummyDatabaseUpdater()
{
new Thread(() -> {
while (true)
{
_someEntry.toggleSomeFlag();
_controller.updateUIFromDatabase();
try {
Thread.sleep(2000);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}).start();
}
public static void main(String[] args) {
launch(args);
}
}
The controller handling user input and the other objects state (database):
package sample;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.fxml.FXML;
import javafx.scene.control.CheckBox;
public class Controller {
private SomeDatabaseEntry _someEntry;
#FXML
private CheckBox myCheckBox;
public void init(SomeDatabaseEntry entry)
{
_someEntry = entry;
myCheckBox.selectedProperty().addListener(new ChangeListener<Boolean>() {
#Override
public void changed(ObservableValue<? extends Boolean> observable, Boolean oldValue, Boolean newValue) {
// If the user toggled the CheckBox in the UI, update the state of the database
// PROBLEM: this handler is also called in the context of a database update (function below)
// in this case the database must not be updated (e. g. because the update is expensive)
_someEntry.setSomeFlag(newValue);
System.out.println("Database was updated: " + newValue);
}
});
}
public void updateUIFromDatabase()
{
myCheckBox.selectedProperty().setValue(_someEntry.getSomeFlag());
}
}
FXML:
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.control.CheckBox?>
<GridPane fx:id="root" fx:controller="sample.Controller"
xmlns:fx="http://javafx.com/fxml" alignment="center" hgap="10" vgap="10">
<CheckBox fx:id="myCheckBox" text="someFlag"></CheckBox>
</GridPane>

Answer 1

Just introduce an additional property. Typically this would be part of the model.
public class UIModel {
private final BooleanProperty value = new SimpleBooleanProperty();
public BooleanProperty valueProperty() {
return value ;
}
public final boolean getValue() {
return valueProperty().get();
}
public final void setValue(boolean value) {
valueProperty().set(value);
}
// other properties, etc...
}
Now you create an instance of your model and share that instance with interested parties, e.g. using dependency injection, etc.
Your controller should do something like
public class Controller {
#Inject // or inject it by hand, just imagining DI here for simplicity
private UIModel model ;
#Inject
private DAO dao ;
#FXML
private CheckBox myCheckBox ;
public void initialize() {
model.valueProperty().addListener((obs, oldValue, newValue) ->
myCheckBox.setSelected(newValue));
myCheckBox.selectedProperty().addListener((obs, wasSelected, isNowSelected) -> {
if (model.getValue() != isNowSelected) {
updateDatabase(isNowSelected);
model.setValue(isNowSelected);
}
});
}
private void updateDatabase(boolean value) {
Task<Void> task = new Task<Void>() {
#Override
protected Void call() throws Exception {
dao.update(value);
return null ;
}
};
task.setOnFailed(e -> { /* handle errors */ });
new Thread(task).start() ; // IRL hand to executor, etc.
}
}
Now your "updates from database" (which I assume represent changes that have already occurred to the external database) look like
UIModel model = ... ; // from DI or wherever.
while (! Thread.currentThread().isInterrupted()) {
Platform.runLater(() -> model.setValue(! model.getValue()));
try {
Thread.sleep(2000);
} catch (InterruptedException exc) {
Thread.currentThread().interrupt();
}
}
The point here is that you update the model, bringing it into sync with the external resource. The listener on the model updates the check box, so those are now consistent. That fires the listener on the check box's selected state, but that listener doesn't update the database if the model and check box are already in sync, which is the case if the check box was changed because of a change in the model.
On the other hand, if the user checks the check box, the model will not be in sync, so the listener updates the database and then brings the model in sync with the UI and database.
In any real application, it's going to be desirable to define a UI model (which may be more than one class) anyway, as you want to separate the UI state from the views and controllers. How you manage the exact interface of model to back-end services might vary somewhat, and you may need to modify where things sit in relation to that interface, but this separation should provide the means to do what you need, as in this example.