Java fx做出来的界面是什么样的

原创

mob64ca12e8d855 2024-07-31 07:04:31 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12e8d855的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用JavaFX创建用户界面入门指南

JavaFX是Java平台上的一种用于构建富客户端应用程序的框架。通过JavaFX，开发者可以创建现代的用户界面，支持动画、媒体、Web内容等。对于初学者来说，掌握JavaFX的基本流程是很重要的。本文将介绍如何使用JavaFX构建一个简单的用户界面。

开发流程

在开始之前，我们先来看一下构建JavaFX应用程序的基本步骤：

步骤	描述
1	创建JavaFX项目
2	创建主应用类
3	创建用户界面（UI）组件
4	添加事件处理器
5	运行应用程序

各步骤详细说明

1. 创建JavaFX项目

首先，你需要在IDE（例如IntelliJ IDEA或Eclipse）中创建一个新的Java项目，并确保你的项目中包含JavaFX库。如果你使用Maven，可以在pom.xml中添加JavaFX依赖：

<dependency>
    <groupId>org.openjfx</groupId>
    <artifactId>javafx-controls</artifactId>
    <version>17.0.0</version>
</dependency>

2. 创建主应用类

每个JavaFX应用程序都需要一个主类，并且这个类需要扩展Application类。以下是主类的基本代码：

import javafx.application.Application; // 导入Application类
import javafx.scene.Scene;           // 导入Scene类
import javafx.scene.layout.StackPane; // 导入布局类
import javafx.stage.Stage;            // 导入Stage类

public class MainApp extends Application { // 定义主类，继承Application
    
    @Override
    public void start(Stage primaryStage) { // 重写start方法
        primaryStage.setTitle("Hello JavaFX");    // 设置窗口标题

        StackPane root = new StackPane();          // 创建根节点
        Scene scene = new Scene(root, 300, 250);   // 创建场景，设置宽300高250
      
        primaryStage.setScene(scene);               // 将场景添加到舞台
        primaryStage.show();                         // 显示舞台
    }

    public static void main(String[] args) { // 主方法
        launch(args);                            // 启动应用
    }
}

3. 创建用户界面（UI）组件

我们可以在根节点中添加更多的UI组件，例如按钮和标签。下面是如何添加一个按钮和标签的示例：

import javafx.scene.control.Button; // 导入Button类
import javafx.scene.control.Label;  // 导入Label类

// ...

@Override
public void start(Stage primaryStage) {
    primaryStage.setTitle("Hello JavaFX");

    StackPane root = new StackPane(); 

    Label label = new Label("Welcome to JavaFX!"); // 创建标签
    Button button = new Button("Click Me!"); // 创建按钮

    button.setOnAction(e -> { // 为按钮添加事件处理器
        label.setText("Button Clicked!"); // 更改标签文本
    });

    root.getChildren().addAll(label, button); // 将标签和按钮添加到根节点
    Scene scene = new Scene(root, 300, 250);
    
    primaryStage.setScene(scene);
    primaryStage.show();
}

4. 添加事件处理器

事件处理器的添加已经在上述代码中展示。通过setOnAction方法，我们为按钮添加了一个简单的事件处理器。当按钮被点击时，它会更改标签的文本。

5. 运行应用程序

至此，我们已经构建了一个基本的JavaFX应用程序。你可以直接在IDE中运行MainApp类，查看你的JavaFX界面。

关系图

为了帮助你更好地理解JavaFX的结构，我们将使用mermaid语法展示一个简单的关系图。

erDiagram
    USER ||--o{ BUTTON : clicks
    USER ||--o{ LABEL : sees
    BUTTON ||--o{ SCENE : contained_in
    SCENE ||--o{ STAGE : displayed_on

序列图

在交互过程中，用户与界面的交互可以通过序列图来表示，以下是按钮点击事件的序列图。

sequenceDiagram
    participant User
    participant Button
    participant Label
    User->>Button: clicks
    Button->>Label: setText("Button Clicked!")