JavaFX：FXML 中的双向绑定

Question

I'm working with JavaFX, and am investigating data binding. I've found that I can define a one-way binding in my FXML, like this:

<TextField fx:id="usernameTextField" text="${controller.userName}" GridPane.columnIndex="1" />

This means, that the text of the usernameTextField is 'observing' the controller.userName property.

But this creates a one-way binding. If the controller.userName property changes, I see the updated text in the text field, that part works. But I can no longer insert text into the text field, because I've made the one-way binding.

All I can find about this are posts which are now more than four years old, but I can't figure out, if JavaFX has been updated to support more elaborate bindings.

Answer 1

The way to do that is:

<TextField fx:id="usernameTextField" text="#{controller.userName}"/>

But this feature is not enabled yet (last checked on OpenJFX 13) and using it will cause FXMLLoader to throw an UnsupportedOperationException("This feature is not currently enabled.") .

Answer 2

As was already said there's no simple way to make a bidirectional binding from FXML. However it can be done from FXML, but not using FXML per se, so to say. And here are my findings.

An <fx:script> block

The first and the most obvious way is to use <fx:script> to make whatever bindings are needed via JavaScript. For example one can use the following snippet to make a bidirectional binding:

<?language javascript?>
<!-- ... -->
<TextField fx:id="aControl"/>
<fx:script>
javafx.beans.binding.Bindings.bindBidirectional(
    controller.someProperty(),
    aControl.textProperty()
);
</fx:script>

Here someProperty() is a controller method for a property named some .

A custom helper class

The second option is to create a helper class and then use it in an <fx:define> block (using the conventions from above):

<?import u7n.examples.BidiBind?>
<!-- ... -->
<TextField fx:id="aControl"/>
<fx:define>
<BidiBind o1="$controller" p1="some" o2="$aControl" p2="text"/>
</fx:define>

And here is an example implementation of such a class:

package u7n.examples;
import javafx.beans.binding.Bindings;
import javafx.beans.property.Property;
public class BidiBind {
    private Object o1;
    private String p1;
    public Object getO1() { return o1; }
    public void setO1(Object o1) { this.o1 = o1; bind(); }
    public String getP1() { return p1; }
    public void setP1(String p1) { this.p1 = p1; bind(); }

    private Object o2;
    private String p2;
    public Object getO2() { return o2; }
    public void setO2(Object o2) { this.o2 = o2; bind(); }
    public String getP2() { return p2; }
    public void setP2(String p2) { this.p2 = p2; bind(); }

    private <T> void bind() {
        if (o1 == null || p1 == null || o2 == null || p2 == null) return;
        try {
            @SuppressWarnings("unchecked")
            Property<T> property1 = (Property<T>)o1.getClass().getMethod(p1 + "Property").invoke(o1);
            @SuppressWarnings("unchecked")
            Property<T> property2 = (Property<T>)o2.getClass().getMethod(p2 + "Property").invoke(o2);
            Bindings.bindBidirectional(property1, property2);
        }
        catch (Exception e) {
            e.printStackTrace();
        }
        o1 = o2 = null;
        p1 = p2 = null;
    }
}

It uses reflection to access properties because I haven't found a way to make FXMLLoader pass a property instead of its value to a setter.

To sum it up

Neither way is ideal, but a bidirectional binding can be done from FXML, although not in a convenient way. Of course, something like

<TextField fx:id="aControl" text="#{controller.some}"/>

would be even better, but alas. Also I have no idea how well both proposed methods will work with Scene Builder as I don't use it.

Answer 3

This code works perfectly :

<TextField fx:id="usernameTextField" text="${controller.userName}"/>

To operate, the controller must contain a getter :

public String getUserName() { return "mystringvalue"; }