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

作为一名优秀的CRUD工程师, 不仅要会 查询 和 删除, 还得会 新增 和 修改

1. 新增/编码页面

使用ScenceBuilder创建页面布局PersonEditView.fxml

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

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.RowConstraints?>

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/16" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.leon.controller.PersonEditController">
   <children>
      <GridPane alignment="CENTER" nodeOrientation="LEFT_TO_RIGHT" prefHeight="195.0" prefWidth="600.0" AnchorPane.bottomAnchor="205.0" AnchorPane.leftAnchor="20.0" AnchorPane.rightAnchor="20.0" AnchorPane.topAnchor="0.0">
        <columnConstraints>
          <ColumnConstraints hgrow="SOMETIMES" maxWidth="289.0" minWidth="10.0" prefWidth="155.0" />
          <ColumnConstraints hgrow="SOMETIMES" maxWidth="445.0" minWidth="10.0" prefWidth="445.0" />
        </columnConstraints>
        <rowConstraints>
          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
            <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
            <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        </rowConstraints>
         <children>
            <Label text="Firstname" />
            <Label text="Lastname" GridPane.rowIndex="1" />
            <Label text="Age" GridPane.rowIndex="2" />
            <Label text="Gender" GridPane.rowIndex="3" />
            <Label text="Address" GridPane.rowIndex="4" />
            <TextField fx:id="firstNameField" GridPane.columnIndex="1" />
            <TextField fx:id="lastNameField" GridPane.columnIndex="1" GridPane.rowIndex="1" />
            <TextField fx:id="ageField" GridPane.columnIndex="1" GridPane.rowIndex="2" />
            <TextField fx:id="genderField" GridPane.columnIndex="1" GridPane.rowIndex="3" />
            <TextField fx:id="addressField" GridPane.columnIndex="1" GridPane.rowIndex="4" />
         </children>
         <opaqueInsets>
            <Insets />
         </opaqueInsets>
      </GridPane>
      <HBox alignment="CENTER_RIGHT" layoutX="2.0" layoutY="328.0" prefHeight="29.0" prefWidth="600.0" spacing="10.0" AnchorPane.bottomAnchor="43.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="328.0">
         <children>
            <Button fx:id="okButton" mnemonicParsing="false" onAction="#clickOK" prefHeight="5.0" prefWidth="55.0" text="OK" />
            <Button fx:id="cancelButton" mnemonicParsing="false" onAction="#clickCancel" text="Cancel" />
         </children>
         <padding>
            <Insets right="50.0" />
         </padding>
      </HBox>
   </children>
</AnchorPane>

2. 封装页面弹出功能

在点击Add和Edit按钮时, 弹出PersonEditView.fxml页面

App.class文件中新增showPersonInfoDialog方法

    public boolean showPersonInfoDialog(Person person) {
        try {
            FXMLLoader loader = new FXMLLoader();
            loader.setLocation(App.class.getClassLoader().getResource("view/PersonEditView.fxml"));
            AnchorPane pane = loader.load();

            Stage dialog = new Stage();
            dialog.setTitle("Person INFO");
            dialog.initModality(Modality.WINDOW_MODAL);
            dialog.initOwner(primaryStage);

            Scene scene = new Scene(pane);
            dialog.setScene(scene);

            PersonEditController personEditController = loader.getController();
            personEditController.setDialogStage(dialog);
            personEditController.setPerson(person);

            dialog.showAndWait();
            return true;

        } catch (IOException e) {
            e.printStackTrace();
            return false;
        }
    }

3. 绑定按钮事件

PersonController.class新增addPerson, editPerson事件

    @FXML
    private void addPerson() {
        Person newPerson = new Person();
        boolean addFlag = app.showPersonInfoDialog(newPerson);
        if (addFlag) {
            personDB.getPersonList().add(newPerson);
        }

    }

    @FXML
    private void editPerson() {
        Person person = personTableView.getSelectionModel().getSelectedItem();
        if (person != null ) {
            app.showPersonInfoDialog(person);
        }
    }

4. 页面数据回显

填充数据后, 如何将新数据推送给程序, 从而完成编辑和新增操作

新增PersonEditController.class, 将传入的person对象属性回显

import com.leon.model.Person;
import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.stage.Stage;

public class PersonEditController {

    @FXML
    private TextField firstNameField;

    @FXML
    private TextField lastNameField;

    @FXML
    private TextField ageField;

    @FXML
    private TextField genderField;

    @FXML
    private TextField addressField;

    @FXML
    private Button okButton;

    @FXML
    private Button cancelButton;

    private Person person;
    private Stage dialog;

    public void setDialogStage(Stage stage) {
        this.dialog = stage;
    }

    public void setPerson(Person person) {
        this.person = person;

        firstNameField.setText(person.getFirstname());
        lastNameField.setText(person.getLastname());
        ageField.setText(String.valueOf(person.getAge()));
        genderField.setText(person.getGender());
        addressField.setText(person.getAddress());
    }

    @FXML
    private void clickOK() {
        person.setFirstname(firstNameField.getText());
        person.setLastname(lastNameField.getText());
        person.setAge(Integer.valueOf(ageField.getText()));
        person.setGender(genderField.getText());
        person.setAddress(addressField.getText());

        dialog.close();
    }

    @FXML
    private void clickCancel() {
        dialog.close();
    }
}