JavaFx FXML入门（五）

JavaFx FXML入门（五）

JavaFX 从入门入门到入土系列
JavaFx的FXML类似安卓中的视图文件，可以添加样式，添加css，添加id然后在java代码中绑定点击事件。可以使用工具编辑：SceneBuilder 下载地址：https://openjfx.cn/scene-builder/
更多介绍可以看官网文档：https://openjfx.cn/javadoc/16/javafx.fxml/javafx/fxml/doc-files/introduction_to_fxml.html
环境jdk11

编写一个FXML

我这里使用SceneBuilder编写个简单FXML，需要注意，使用SceneBuilder 最新版时需要jdk11以上，否则无法打开

将上面的fxml复制到Maven项目的 resources/fxml/fxml_demo.fxml里

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

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="209.0"
            prefWidth="250.0" xmlns="http://javafx.com/javafx/16" xmlns:fx="http://javafx.com/fxml/1"
            fx:controller="controller.FxmlController">
    <children>
        <Button fx:id="btn" layoutX="46.0" layoutY="51.0" mnemonicParsing="false" text="获取当前时间"/>
        <TextField fx:id="text" layoutX="46.0" layoutY="86.0"/>
        <Label fx:id="lab" layoutX="46.0" layoutY="129.0" text="Label"/>
    </children>
</AnchorPane>

注意上面的 fx:controller="controller.FxmlController" 我们需要创建一个FxmlController类

显示场景代码如下：

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.AnchorPane;
import javafx.stage.Stage;

import java.net.URL;

/**
 * @author lingkang
 * @date 2021/9/17 23:45
 * @description
 */
public class FxmlDemo extends Application {
    @Override
    public void start(Stage stage) throws Exception {
        // 获取 Maven 项目 resources/fxml/fxml_demo.fxml 注意，无法识别横向，例如 fxml-demo.fxml
        URL resource = getClass().getResource("/fxml/fxml_demo.fxml");
        if (resource == null) {
            throw new RuntimeException("未找到fxml资源");
        }
        // 此时需要注意， fxml里最外层标签是 AnchorPane 故使用AnchorPane对象获取变量
        AnchorPane anchorPane = FXMLLoader.load(resource);
        // 将 AnchorPane 加入到场景
        stage.setScene(new Scene(anchorPane));
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

再添加一个controller用于绑定视图，视图中的点击显示操作均在controller中执行
FxmlController

package controller;

import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;

import java.net.URL;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.ResourceBundle;

/**
 * @author lingkang
 * @date 2021/9/17 23:55
 * @description
 */
public class FxmlController implements Initializable {
    @FXML // 初始化时会自行绑定fxml里的id，注意变量命名=fxml里的id
    private Button btn;
    @FXML // 初始化时会自行绑定fxml里的id，注意变量命名=fxml里的id
    private TextField text;
    @FXML // 初始化时会自行绑定fxml里的id，注意变量命名=fxml里的id
    private Label lab;

    @Override
    public void initialize(URL url, ResourceBundle resourceBundle) {
        // 添加初始化事件
        btn.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent actionEvent) {
                SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
                String date = format.format(new Date());
                // 将值赋予标签显示
                text.setText(date);
                lab.setText(date);
            }
        });
    }
}

效果如下