JavaFx学习总结（一）UI和Controller的交互

1. 基本概念

1.1 UI组件层级划分

• Stage（窗口）
  • Scene（场景）
    • Pane（布局）
      • 各种控件

1.2 常见UI组件

• Pane（布局）
  • BorderPane：边界布局，将整个控件分为5块，分为左、右、上、下、中。
  • AnchorPane：锚点布局，通过x，y轴等坐标指定其中各种控件的位置。
  • SplitPane：分割布局，用于将页面一分为二，常见水平分割或者垂直分割。
  • GridPane：网格布局，常用于对齐展示批量的控件。
• 控件
  • MenuBar：菜单栏，常用于窗口顶部。
    • Menu：菜单栏中的每个菜单。
      • MenuItem：每个菜单中的下拉选项
  • TableView：表格，用于展示表格数据，对应Java中的List。
    • TableColumn：表格中的一列，用于指定表中的列信息。
  • Label：标签，用于展示数据，用户无法编辑。
  • TextField：文本框，用于展示、编辑数据。
  • HBox：水平格子，常用于水平对齐一组控件。
  • Button：按钮控件，常用于触发事件的场景。
  • BarChart：柱状图，常用于展示数据。

2. UI界面（fxml）和对应的Controller（java）的交互方式

2.1 在Controller中填充数据

• 在代码中定义控件名称，并填充要展示的数据，例如：

  // 定义控件名称
  @FXML
  private Label titleLabel;
  // 填充数据
  titleLabel.setText("距离考研还有" + days + "天");
  
  // 定义控件名称
  // 定义TableView控件名称
  @FXML
  private TableView<TodayTask> taskTable;
  // 定义TableColumn名称
  @FXML
  private TableColumn<TodayTask, Number> taskIdColumn;
  @FXML
  private TableColumn<TodayTask, String> taskNameColumn;
  @FXML
  private TableColumn<TodayTask, Number> targetValueColumn;
  @FXML
  private TableColumn<TodayTask, Number> currentValueColumn;
  @FXML
  private TableColumn<TodayTask, String> unit;
  // 定义Column和对象中的属性的对应关系
  taskIdColumn.setCellValueFactory(cellData -> cellData.getValue().taskIdProperty());
  taskNameColumn.setCellValueFactory(cellData -> cellData.getValue().taskNameProperty());
  targetValueColumn.setCellValueFactory(cellData -> cellData.getValue().targetValueProperty());
  currentValueColumn.setCellValueFactory(cellData -> cellData.getValue().currentValueProperty());
  unit.setCellValueFactory(cellData -> cellData.getValue().unitProperty());
  // 填充数据
  taskTable.setItems(tempList);
  

• 在SceneBuilder中，右侧Code模块下，fx:id 中选择对应的控件名称，例如：

  

2.2 在Controller中定义事件响应处理方法

• 在Controller中定义事件响应处理方法，例如：

  @FXML
  private void handleOk() {
      task.setCurrentValue(Integer.parseInt(currentValueField.getText()));
      main.saveTodayTaskDataToFile();
      okClicked = true;
      updateTaskCurrentValueStage.close();
  }
  

• 在SceneBuilder中，右侧Code模块下，On Action 中选择对应的控件名称，例如：

  

2.3 在Controller中定义监听事件

// 注册 task table view 鼠标双击事件监听，双击时，弹出修改task的弹窗
taskTable.setOnMousePressed(new EventHandler<MouseEvent>() {
    @Override
    public void handle(MouseEvent event) {
        if (event.isPrimaryButtonDown() && event.getClickCount() == 2) {
            TodayTask selectedTask = taskTable.getSelectionModel().getSelectedItem();
            if (selectedTask != null) {
                boolean okClicked = main.showUpdateTaskCurrentValueDialog(selectedTask);
            }
        }
    }
});

注：此种方法，无须在SceneBuilder中对应配置。