JavaFx UI控件与代码间的绑定方法

JavaFX是一个丰富的UI平台，配备了很多可定制的控件。绑定是JavaFX UI的一个重要特性，它使UI元素始终反映它们表示的数据。可以在JavaFX应用程序中使用绑定实现代码和UI控件之间的同步更新，从而使UI设计变得更加直观明了。

以下是JavaFX UI控件与代码间的绑定方法完整攻略：

1. 实现数据模型类

JavaFX数据绑定的工作实现都逃不过数据模型类的建立。因此，我们首先需建立JavaBean风格的数据模型类，并在其中定义属性(getter/setter)。

以下提供一个Person类的示例：

public class Person {
    private StringProperty name;
    private IntegerProperty age;

    public Person(String name, int age) {
        this.name = new SimpleStringProperty(name);
        this.age = new SimpleIntegerProperty(age);
    }

    public StringProperty nameProperty() {
        return name;
    }

    public IntegerProperty ageProperty() {
        return age;
    }

    public String getName() {
        return name.get();
    }

    public void setName(String name) {
        this.name.set(name);
    }

    public int getAge() {
        return age.get();
    }

    public void setAge(int age) {
        this.age.set(age);
    }
}

Person类中包含两个属性name和age。每个属性都通过一个Property对象进行维护，这意味着一旦属性的值发生变化，就可以通过Property对象在UI元素中自动更新。

2. 在FXML中绑定到数据模型

接下来，我们需要在FXML中创建UI元素来与这些属性进行绑定。在FXML中，通过fx:id属性给UI元素命名。我们还可以为属性绑定和字面值设置ID。

示例：

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>

<GridPane hgap="10" vgap="10">
    <Label text="Name:" />
    <TextField fx:id="nameField" GridPane.columnIndex="1" />
    <Label text="Age:" GridPane.rowIndex="1" />
    <TextField fx:id="ageField" GridPane.columnIndex="1" GridPane.rowIndex="1" />
</GridPane>

3. 将UI元素绑定到数据模型

通过setCellValueFactories方法将列与数据模型属性绑定，然后将数据模型列表设置为TableView的items属性即可实现TableView与数据模型的绑定。

示例：

public class PersonEditorController implements Initializable {
    @FXML
    private TextField nameField;
    @FXML
    private TextField ageField;

    private Person person;

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        person = new Person("Tom", 18);

        // 绑定UI元素到数据模型
        nameField.textProperty().bindBidirectional(person.nameProperty());
        ageField.textProperty().bindBidirectional(person.ageProperty(), new NumberStringConverter());
    }

    @FXML
    private void handleSaveButton(ActionEvent event) {
        // 保存数据
        person.setName(nameField.getText());
        person.setAge(Integer.parseInt(ageField.getText()));
    }
}

在这个示例中，UI元素通过bindBidirectional和Person属性进行双向绑定。当UI元素的值发生变化时，Person属性的值将随之更新，反之亦然。

我们通过调用textProperty()方法获取到TextField的文本属性，并通过bindBidirectional()方法使用Person数据模型进行绑定。当文本和属性发生变化时，UI元素中的值也会自动更新。

同样，ageField通过fx:id属性设置为数字字符串的双向转换(NumberStringConverter)。这意味着它可以接受字符串并自动将其转换为int类型，并且反向转换。

这就是JavaFX UI控件与代码间的绑定方法完整攻略，使用绑定可以使代码和UI之间的交互变得更加易读和易维护。通过这种方式可以以一种简单方式实现复杂的控件联动效果。