上一篇介绍了项目的基本布局
单纯的静态展示无法满足日常需求, 还需增加数据的联动, 让项目活起来

1. 创建model

与java bean类似, 数据类型上有些许差异 -- StringProperty, IntegerProperty等

package com.leon.model;

import javafx.beans.property.IntegerProperty;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;

public class Person {

    private StringProperty firstname;
    private StringProperty lastname;
    private IntegerProperty age;
    private StringProperty gender;
    private StringProperty address;

    public Person(String firstname, String lastname) {
        this.firstname = new SimpleStringProperty(firstname);
        this.lastname = new SimpleStringProperty(lastname);

        this.age = new SimpleIntegerProperty(18);
        this.gender = new SimpleStringProperty("");
        this.address = new SimpleStringProperty("");
    }

    public String getFirstname() {
        return firstname.get();
    }

    public StringProperty firstnameProperty() {
        return firstname;
    }

    public void setFirstname(String firstname) {
        this.firstname.set(firstname);
    }

    public String getLastname() {
        return lastname.get();
    }

    public StringProperty lastnameProperty() {
        return lastname;
    }

    public void setLastname(String lastname) {
        this.lastname.set(lastname);
    }

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

    public IntegerProperty ageProperty() {
        return age;
    }

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

    public String getGender() {
        return gender.get();
    }

    public StringProperty genderProperty() {
        return gender;
    }

    public void setGender(String gender) {
        this.gender.set(gender);
    }

    public String getAddress() {
        return address.get();
    }

    public StringProperty addressProperty() {
        return address;
    }

    public void setAddress(String address) {
        this.address.set(address);
    }
}

2. 控制层

view用于显示, model用于数据流转, controller则是关联view和model

• @FXML标注的对象用于与视图层元素关联
• model属性赋值给对象, 最终在视图层展示
• initialize方法在fxml文件完成载入时被自动调用

package com.leon.controller;

import com.leon.model.Person;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;

public class PersonController {

    @FXML
    private TableView<Person> personTableView;
    @FXML
    private TableColumn<Person, String> firstnameColumn;
    @FXML
    private TableColumn<Person, String> lastnameColumn;

    @FXML
    private Label firstnameLabel;
    @FXML
    private Label lastnameLabel;
    @FXML
    private Label ageLabel;
    @FXML
    private Label genderLabel;
    @FXML
    private Label addressLabel;

    @FXML
    private Button deleteButton;
    @FXML
    private Button editButton;
    @FXML
    private Button addButton;

    private ObservableList personList = personList = FXCollections.observableArrayList();

    private void initPersonData() {
        personList.add(new Person("Mark", "Williams"));
        personList.add(new Person("Swift", "Taylor"));
        personList.add(new Person("Jack", "Brown"));
        personList.add(new Person("Peter", "Davies"));
        personList.add(new Person("Anna", "Wilson"));
    }

    @FXML
    private void initialize() {
        firstnameColumn.setCellValueFactory(cell -> cell.getValue().firstnameProperty());
        lastnameColumn.setCellValueFactory(cell -> cell.getValue().lastnameProperty());

        initPersonData();
        personTableView.setItems(personList);
    }
}

2.1. controller与view

视图层的元素 (按钮, 标签, 表格, 文本框等) 需要映射到控制层的对象

在SceneBuilder上, 先将整个容器关联上controller, 再分别对容器中的元素指定对象

• PersonView.fxml 关联 com.leon.controller.PersonController
• TableView元素关联 personTableView

personTableView来自于com.leon.controller.PersonController类中的对象, 见上方代码

image.png

2.2. controller与model

控制层从数据库, 文件等途径获取模型数据, 再将模型属性赋予各个对象
因为对象已与视图层关联, 所以对象属性的变化最终表现为视图元素内容的变化

TableView填充数据后的效果如下

image.png