当前位置: 首页 > 面试题库 >

JavaFX双向绑定不适用于无法编辑的控件

曾骁
2023-03-14
问题内容

给一个非常基础的类(将导入解析为javafx包):

public class T07 extends Application implements Initializable{

某些字段表示在.fxml文件中定义的控件:

@FXML TextField text01;

以及最基本使用属性包装器的数据模型:

public static class DataModel {

    StringProperty first = new SimpleStringProperty();
    //getter
    public String getFirst() {return first.get();}
    //setter
    public void setFirst(String first) {this.first.set(first);}
    //new "property" accessor
    public StringProperty firstProperty() {return first;}

}

我尝试将ui控件与Initialize中的数据模型绑定:

@Override
public void initialize(URL arg0, ResourceBundle arg1) {

   Bindings.bindBidirectional(text01.textProperty(), dm.firstProperty());

}

但是这样做, 我得到了不可编辑的控件
。注释掉Bindings.bindBidirectional行后,该控件通常可以编辑,并且可以通过text01字段访问其值。

此装订单中缺少的成分是什么?


问题答案:

双向绑定示例:

import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

public class JavaFXApplication10 extends Application {

    private Model model = new Model();

    @Override
    public void start(Stage primaryStage) {

        final TextField textField = new TextField();

        Bindings.bindBidirectional(textField.textProperty(), model.firstProperty());

        // Track the changes
        model.firstProperty().addListener(new ChangeListener<String>() {
            @Override
            public void changed(ObservableValue<? extends String> arg0, String arg1, String arg2) {
                System.out.println("model old val: " + arg1);
                System.out.println("model new val: " + arg2);
                System.out.println();
            }
        });

        textField.textProperty().addListener(new ChangeListener<String>() {
            @Override
            public void changed(ObservableValue<? extends String> arg0, String arg1, String arg2) {
                System.out.println("textField old val: " + arg1);
                System.out.println("textField new val: " + arg2);
                System.out.println();
            }
        });

        Button btn = new Button();
        btn.setText("Change the model's text");
        btn.setOnAction(new EventHandler<ActionEvent>() {

            @Override
            public void handle(ActionEvent event) {
                model.setFirst("changed from button action");
                System.out.println("Done.");
            }
        });

        BorderPane root = new BorderPane();
        root.setTop(textField);
        root.setBottom(btn);
        primaryStage.setScene(new Scene(root, 300, 250));
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }

    // Data Model
    public static class Model {

        StringProperty first = new SimpleStringProperty();
        //getter

        public String getFirst() {
            return first.get();
        }
        //setter

        public void setFirst(String first) {
            this.first.set(first);
        }
        //new "property" accessor

        public StringProperty firstProperty() {
            return first;
        }
    }
}

双向绑定:
1种方式-输入到textField中的文本将反映到模型的第一个stringProperty。
相反的第二种方式-单击按钮,您会注意到,设置了模型的第一个stringProperty时,文本字段的文本值也会更改。



 类似资料:
  • 问题内容: 我有一个简单的Bean,它具有彼此相关的某些属性。例如,此bean具有一个名为 discountRate 的属性和另一个名为 DiscountValue 的属性。DiscountRate是应用于销售的折扣百分比(%)。discountValue是应用于销售的折扣值($)。由于用户可以告知百分比或值,而且我需要将两个值存储在数据库中,因此JavaFX双向绑定可以解决此问题,但是,正如您可

  • 问题内容: 我正在使用contenteditable属性更新电话列表中的电话名称。我曾尝试使用ng-change,但多数民众赞成在没有被解雇。有什么办法可以做到吗? 我有一个清单 因此,现在编辑电话名称时,需要在列表中进行更新。 我已经尝试过使用指向元素的模型进行类似的操作。这是行不通的。 也 但在这种情况下,该方法不会被触发。 问题答案: 编辑 这是一个基于Angular文档中示例的示例,该示例

  • Mpx针对表单组件提供了wx:model双向绑定指令,类似于v-model,该指令是一个语法糖指令,监听了组件抛出的输入事件并对绑定的数据进行更新,默认情况下会监听表单组件的input事件,并将event.detail.value中的数据更新到组件的value属性上。 简单实用示例如下: <view> <input type="text" wx:model="{{message}}"> <

  • 双向绑定这个概念在angular出现的时候,就作为王牌概念. 现在几乎是个js前端框架,就有这个功能. 它的概念是: 某个变量, 如果展现在页面上的话: 如果在代码层面进行修改, 那么页面的值就会发生变化 如果在页面进行修改(例如在input标签中), 那么代码的值就会发生变化. 一个演示例子. 在我们的项目中,增加一个 vue页面: src/components/TwoWayBinding.vu

  • 单向绑定非常简单,就是把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新。 有单向绑定,就有双向绑定。如果用户更新了View,Model的数据也自动被更新了,这种情况就是双向绑定。 什么情况下用户可以更新View呢?填写表单就是一个最直接的例子。当用户填写表单时,View的状态就被更新了,如果此时MVVM框架可以自动更新Model的状态,那就相当于我

  • 如果我不使用双向数据绑定,将替换为则一切正常。那么正确的方式是什么呢?