JavaFX开发教程——前后端交互(Controller)

先创建个JavaFX界面

项目结构
login.fxml和LoginController为新增文件

login.fxml
界面图

样式代码

<AnchorPane prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/18" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.example.demo.controller.LoginController">
   <children>
      <GridPane layoutX="112.0" layoutY="91.0" prefHeight="163.0" prefWidth="347.0">
        <columnConstraints>
          <ColumnConstraints hgrow="SOMETIMES" maxWidth="169.0" minWidth="10.0" prefWidth="63.0" />
          <ColumnConstraints hgrow="SOMETIMES" maxWidth="299.0" minWidth="10.0" prefWidth="284.0" />
        columnConstraints>
        <rowConstraints>
          <RowConstraints maxHeight="57.0" minHeight="2.0" prefHeight="54.0" vgrow="SOMETIMES" />
          <RowConstraints maxHeight="107.0" minHeight="10.0" prefHeight="55.0" vgrow="SOMETIMES" />
          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        rowConstraints>
         <children>
            <TextField GridPane.columnIndex="1" />
            <HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0" GridPane.columnIndex="1" GridPane.rowIndex="2">
               <children>
                  <Button mnemonicParsing="false" prefHeight="23.0" prefWidth="115.0" text="登录" />
               children>
            HBox>
            <Label text="用户名" />
            <Label text="密码" GridPane.rowIndex="1" />
            <PasswordField GridPane.columnIndex="1" GridPane.rowIndex="1" />
         children>
      GridPane>
   children>
AnchorPane>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

再初始化创建LoginController.java

package com.example.demo.controller;

public class LoginController {
}

1
2
3
4
5

接下来就是前后端的交互控制
在login.fxml文件里面有一段代码

<AnchorPane prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/18" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.example.demo.controller.LoginController">
1

fx:controller
这个标签为配置前端和后端代码进行对应

配置好对应入口后，在给前端的控件配置id
fx:id 为配置id
这一步也可以在可视化界面进行配置(只配置用户名和密码框)

<children>
            <TextField fx:id="username" GridPane.columnIndex="1" />
            <HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0" GridPane.columnIndex="1" GridPane.rowIndex="2">
               <children>
                  <Button mnemonicParsing="false" prefHeight="23.0" prefWidth="115.0" text="登录" />
               children>
            HBox>
            <Label text="用户名" />
            <Label text="密码" GridPane.rowIndex="1" />
            <PasswordField fx:id="password" GridPane.columnIndex="1" GridPane.rowIndex="1" />
         children>
1
2
3
4
5
6
7
8
9
10
11

回到代码，在controller里面配置这个对应的id

import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;

public class LoginController {

    @FXML
    public TextField username;

    @FXML
    public PasswordField password;

   
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

@FXML：映射代码和控件
这里最好用public，如果用private会报错

接着给这个类加入一个功能，用于按钮提交

public void submit(){
        System.out.println("用户名：" + username.getText() + "，密码：" + password.getText());
    }
1
2
3

并将这个方法部署到按钮上

完整的controller代码

import javafx.fxml.FXML;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;

public class LoginController {

    @FXML
    public TextField username;

    @FXML
    public PasswordField password;

    public void submit(){
        System.out.println("用户名：" + username.getText() + "，密码：" + password.getText());
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

然后运行项目看看效果