###
JavaFX
使用 FXML 创建用户界面教程
#### 一、
简介
JavaFX 是一个用于构建富客户端应用程序的
Java 框架。该框架提供了一系列丰富的图形化用户界面（GUI）组件和强大的布局管理器，使得开发者可以轻松创建多样化的用户界面[^1]。
#### 二、FXML概述
FXML 是一种基于 XML 的标记语言，专门设计用来描述
JavaFX 应用程序的用户界面结构。通过 FXML 文件，开发者可以用声明式的语法定义 UI 组件及其属性，而无需编写大量的
Java 代码来初始化这些对象。在 FXML 中，每一个标签通常对应于特定类型的
Java 类实例或其成员变量/方法调用[^2]。
#### 三、加载 FXML 文档
为了将 FXML 定义的内容呈现给最终用户，在运行时需要借助 `FXMLLoader` 工具类完成这一过程。具体来说，可以通过调用 `FXMLLoader.load()` 方法并将目标 FXML 文件的位置作为参数传递进去实现这一点；此函数接收 URL 对象形式表示的目标资源路径[^3]。
```
java
// 加载指定位置上的 fxml 文件并返回根节点
URL location = getClass().getResource("/path/to/search_demo.fxml");
Parent root = FXMLLoader.load(location);
```
#### 四、控制器关联与事件处理机制
当涉及到动态交互逻辑时，则需引入 Controller 来负责监听来自视图层的操作请求以及执行相应的业务操作。可以在 FXML 文件头部设置 `fx:controller` 属性指明对应的控制类名称，并确保两者之间存在映射关系以便正确绑定控件元素至相应字段上[^4]。
```xml
<!-- 设置 GridPane 布局容器为主面板 -->
<GridPane xmlns="http://
javafx.com/
javafx"
xmlns:fx="http://
javafx.com/fxml"
fx:controller="com.example.MyAppController">
<!-- ...其他子项配置... -->
</GridPane>
```
```
java
public class MyAppController {
}
```
#### 五、完整示例：登录表单页面
下面给出一段完整的例子展示如何利用上述知识点快速搭建起一个简单的登录对话框：
##### login_form.fxml (UI 设计部分)
```xml
<?import
javafx.geometry.Insets?>
<?import
javafx.scene.control.Button?>
<?import
javafx.scene.control.Label?>
<?import
javafx.scene.control.PasswordField?>
<?import
javafx.scene.control.TextField?>
<?import
javafx.scene.layout.GridPane?>
<GridPane xmlns="http://
javafx.com/
javafx"
xmlns:fx="http://
javafx.com/fxml"
fx:controller="com.example.LoginFormController"
alignment="CENTER" hgap="10" vgap="10">
<Label text="Username:" GridPane.columnIndex="0" GridPane.rowIndex="0"/>
<TextField fx:id="usernameInput" promptText="Enter your username..." GridPane.columnIndex="1" GridPane.rowIndex="0"/>
<Label text="Password:" GridPane.columnIndex="0" GridPane.rowIndex="1"/>
<PasswordField fx:id="passwordInput" promptText="Enter your password..." GridPane.columnIndex="1" GridPane.rowIndex="1"/>
<Button onAction="#handleLoginButtonClick" text="Sign In" GridPane.columnSpan="2" GridPane.rowIndex="2"/>
<padding><Insets top="25" bottom="25" right="25" left="25"/></padding>
</GridPane>
```
##### LoginFormController.
java (行为逻辑部分)
```
java
package com.example;
import
javafx.event.ActionEvent;
import
javafx.fxml.FXML;
import
javafx.scene.control.Alert;
import
javafx.scene.control.PasswordField;
import
javafx.scene.control.TextField;
public class LoginFormController {
@FXML private TextField usernameInput;
@FXML private PasswordField passwordInput;
public void handleLoginButtonClick(ActionEvent event){
String name = this.usernameInput.getText();
char[] pwdChars = this.passwordInput.getText().toCharArray();
// 这里只是简单模拟验证流程...
boolean isValidUser = "admin".equals(name) && Arrays.equals(pwdChars, "secret".toCharArray());
Alert alertBox = new Alert(isValidUser ? Alert.AlertType.INFORMATION : Alert.AlertType.ERROR);
if (!isValidUser){
alertBox.setTitle("Authentication Failed!");
alertBox.setHeaderText(null);
alertBox.setContentText("Invalid credentials provided.");
}else{
alertBox.setTitle("Welcome Back!");
alertBox.setHeaderText(String.format("%s has successfully logged in.", name));
alertBox.setContentText("");
}
alertBox.showAndWait();
}
}
```
扫一扫
7571
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
