JavaFX Binding Simple Example

Question

I am writing a simple program to bind the values of a ChoiceBox to the font value of the Label node. However, I am unable to do that.

The Application

package mybinding;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.SceneBuilder;
import javafx.scene.control.ChoiceBox;
import javafx.scene.control.ChoiceBoxBuilder;
import javafx.scene.control.Label;
import javafx.scene.control.LabelBuilder;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.GridPaneBuilder;
import javafx.stage.Stage;

public class SimpleBindingMain extends Application{

    Label simpleLabel;
    ChoiceBox availableFonts;
    GridPane gridPane;
    SimpleBindingModel model = new SimpleBindingModel();
    Scene scene;

    @Override
    public void start(Stage stage) throws Exception {
        availableFonts = ChoiceBoxBuilder
                        .create()
                        .items(model.fonts)
                        .build();
        simpleLabel = LabelBuilder
                    .create()
                    .text("Font Preview")
                    .font(model.theFont)
                    .build();

        gridPane = GridPaneBuilder.create().build();
        gridPane.add(simpleLabel,0,0);
        gridPane.add(availableFonts,0,1);

        model.fontSelectionModel = availableFonts.getSelectionModel();
        model.addFontSelectionListener();

        scene = SceneBuilder
                .create()
                .root(gridPane)
                .build();

        /**
         * ADD BINDING CODE
         */

        stage.setScene(scene);
        stage.sizeToScene();
        stage.show();

    }

    public static void main(String[] args) {
        Application.launch("mybinding.SimpleBindingMain");
    }
}  

The Model

package mybinding;

import javafx.beans.property.IntegerProperty;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.control.SingleSelectionModel;
import javafx.scene.text.Font;

public class SimpleBindingModel {
    public StringProperty string = new SimpleStringProperty(); // the actual text
    public IntegerProperty textSize = new SimpleIntegerProperty(); // the size of the text
    public ObservableList fonts = FXCollections.observableArrayList( // possible fonts
                "DejaVu Sans Mono",
                "Nimbus Sans L",
                "Ubuntu",
                "Ubuntu Condensed"
            );
    public Font theFont = Font.font("DejaVu Sans Mono",18); // default font
    public SingleSelectionModel fontSelectionModel;


    public void addFontSelectionListener(){
        fontSelectionModel.selectedIndexProperty().addListener(new ChangeListener(){
            @Override
            public void changed(ObservableValue value, Object oldValue, Object newValue) {
                int selectedFontIndex = fontSelectionModel.selectedIndexProperty().getValue();
                theFont = Font.font((String)fonts.get(selectedFontIndex),12);
            }
        });
    }
}  

Please help me out with the binding code.

Answer 1

You are almost there :-). Just some little modifications are required.

At first, change the SimpleBindingModel.theFont property type to ObjectProperty<Font>, allowing the SimpleBindingMain.simpleLabel.fontProperty to be bound to it.

In this case, the property declaration would be:

public ObjectProperty<Font> theFont = new SimpleObjectProperty<Font>(Font.font("DejaVu Sans Mono",18));

After that, you need to change the points where theFont is read/set. For example, at the font selection listener:

public void addFontSelectionListener(){
    fontSelectionModel.selectedIndexProperty().addListener(new ChangeListener(){
        @Override
        public void changed(ObservableValue value, Object oldValue, Object newValue) {
            int selectedFontIndex = fontSelectionModel.selectedIndexProperty().getValue();
            // old code: theFont = Font.font((String)fonts.get(selectedFontIndex),12);
            theFont.set(Font.font((String)fonts.get(selectedFontIndex),12));
        }
    });
} 

Finally, you can bind the simpleLabel.fontProperty to theFont:

simpleLabel.fontProperty().bind(model.theFont);