JavaFX, GUI库 - 用户交互(1)

最新推荐文章于 2024-12-26 11:21:36 发布

Lion...

最新推荐文章于 2024-12-26 11:21:36 发布

阅读量330

点赞数

分类专栏： java 文章标签： java 开发语言

本文链接：https://blog.youkuaiyun.com/weixin_44129801/article/details/122423687

版权

java 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一个使用JavaFX创建的应用程序案例，展示了如何通过监听表格视图的选择变化来更新详细信息面板，实现数据展示、详情查看、删除操作等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面数据展示出来后, 用户如何与工具互动呢?

1. 抽取数据

正常情况下, 数据来自于文本, 或者直接读取数据库, 这里单独抽取成一个类PersonDB, 以模拟相同的效果

import com.leon.model.Person;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;

public class PersonDB {
    private volatile static PersonDB instance = null;

    private PersonDB() {}

    public static PersonDB getInstance() {
        if (instance == null) {
            synchronized (PersonDB.class) {
                if (instance == null) {
                    instance = new PersonDB();
                    instance.init();
                }
            }
        }
        return instance;
    }

    private ObservableList<Person> personList;

    private void init() {
        personList = FXCollections.observableArrayList();
        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"));
    }

    public ObservableList<Person> getPersonList() {
        return this.personList;
    }
}

2. 展示详情

选中左侧人物, 右侧展示人物详情, 如何实现呢?
重点: personTableView.getSelectionModel().selectedItemProperty().addListener, 给tableview添加监听事件, 当用户选择时, 触发后续动作 (先清空label数据, 再根据选择的人物属性填充label)
show person info.gif

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

        PersonDB personDB = PersonDB.getInstance();
        personTableView.setItems(personDB.getPersonList());
        // 清空人员信息
        showPersonInfo(null);

        // 添加监听, 当选择tableview中的用户时触发
        personTableView.getSelectionModel().selectedItemProperty().addListener(
                ((observable, oldValue, newValue) -> showPersonInfo(newValue))
        );
    }

    private void emptyPersonInfo() {
        firstnameLabel.setText("");
        lastnameLabel.setText("");
        ageLabel.setText("");
        genderLabel.setText("");
        addressLabel.setText("");
    }

    private void showPersonInfo(Person person) {
        if (person != null) {
            firstnameLabel.setText(person.getFirstname());
            lastnameLabel.setText(person.getLastname());
            ageLabel.setText(String.valueOf(person.getAge()));
            genderLabel.setText(person.getGender());
            addressLabel.setText(person.getAddress());
        } else {
            emptyPersonInfo();
        }
    }

3. 删除对象

接下来, 我们实现如何删除对象

获取选中的人物对象所在索引
根据索引, 删除tableview中的数据

注意: 此处只是删除内存数据, 如果数据来自数据库, 需要执行delete sql

    @FXML
    public void deletePerson() {
        int personIndex = personTableView.getSelectionModel().getSelectedIndex();
        if (personIndex >= 0) {
            personTableView.getItems().remove(personIndex);
        }
    }

3.1. 删除按钮绑定事件

将deletePerson方法绑定到delete按钮上, 点击delete按钮时, 触发事件

4. 附件

完整代码

import com.leon.model.Person;
import com.leon.util.PersonDB;
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;

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

        PersonDB personDB = PersonDB.getInstance();
        personTableView.setItems(personDB.getPersonList());
        // 清空人员信息
        showPersonInfo(null);

        // 添加监听, 当选择tableview中的用户时触发
        personTableView.getSelectionModel().selectedItemProperty().addListener(
                ((observable, oldValue, newValue) -> showPersonInfo(newValue))
        );
    }

    private void emptyPersonInfo() {
        firstnameLabel.setText("");
        lastnameLabel.setText("");
        ageLabel.setText("");
        genderLabel.setText("");
        addressLabel.setText("");
    }

    private void showPersonInfo(Person person) {
        if (person != null) {
            firstnameLabel.setText(person.getFirstname());
            lastnameLabel.setText(person.getLastname());
            ageLabel.setText(String.valueOf(person.getAge()));
            genderLabel.setText(person.getGender());
            addressLabel.setText(person.getAddress());
        } else {
            emptyPersonInfo();
        }
    }

    @FXML
    public void deletePerson() {
        int personIndex = personTableView.getSelectionModel().getSelectedIndex();
        if (personIndex >= 0) {
            personTableView.getItems().remove(personIndex);
        }
    }
}