JavaFx 21 项目Markdown 预览、编辑、新建、文件树、删除、重命名

在这里插入图片描述

项目文件结构

项目的源代码和资源文件存放在以下路径：

源代码：
- src/main/java/com/kong/markdown/ 包含多个 Java 文件，主要实现了应用的功能：
  - App.java：主类，可能包含应用的启动逻辑。
  - FileService.java：可能与文件操作相关的服务类。
  - MainController.java：控制器类，可能负责与 UI 的交互。
  - MarkdownProcessor.java：处理 Markdown 解析和预览的类。
  - UIHelper.java：辅助类，可能用于界面上的一些常见功能。
资源文件：
- src/main/resources/ 包含应用的静态资源文件：
  - .css 文件：样式表，如 dark.css、light.css、styles.css。
  - .fxml 文件：JavaFX 的 FXML 文件，用于定义 UI 布局。
  - icons/：图标文件，用于界面显示的图标。
  - markdown.exe：可能是 Markdown 相关的可执行文件，或用于编辑的工具。
  - info.md：Markdown 格式的文本，可能作为应用的一部分或示例内容。
  - META-INF/MANIFEST.MF：包含 JAR 文件元数据的清单文件。

重点文件

1. `pom.xml` 配置文件

pom.xml 文件已经配置了 JavaFX 依赖，并且包含 javafx-maven-plugin 来处理 JavaFX 应用的构建。

2. `App.java`

这是应用的主类。它通常是 javafx.application.Application 的子类，并重写了 start() 方法，作为应用的入口。

3. FXML 文件

main-view.fxml：用于定义应用的用户界面布局，是 JavaFX 的界面描述文件。

4. CSS 文件

dark.css、light.css：定义了两种主题的样式表，分别用于深色和浅色模式的 UI。

`App.java` 代码

这是应用的主类，它继承自 javafx.application.Application，并且重写了 start() 方法，这是 JavaFX 应用的入口。以下是该类的关键完整代码：

package com.kong.markdown;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.stage.Stage;

import java.io.InputStream;

public class App extends Application {
   

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

    @Override
    public void start(Stage stage) throws Exception {
   
        // 加载 FXML 文件，设置主界面
        FXMLLoader fxmlLoader = new FXMLLoader(App.class.getResource("/main-view.fxml"));
        Scene scene = new Scene(fxmlLoader.load(), 1200, 600);

        // 设置窗口标题和图标
        stage.setTitle("Markdown Editor - 更优雅的Markdown编辑器");
        InputStream iconStream = getClass().getResourceAsStream("/icons/icon.png");
        if (iconStream == null) {
   
            throw new IllegalStateException("Icon resource not found!");
        }
        stage.getIcons().add(new Image(iconStream));

        // 设置窗口大小及最小限制
        stage.setWidth(1200);
        stage.setHeight(600);
        stage.setMinWidth(800);
        stage.setMinHeight(400);

        // 显示窗口
        stage.setScene(scene);
        stage.show();
    }
}

主要功能：

主类 App：继承 Application 类，是 JavaFX 应用的入口。
start() 方法：设置应用的主窗口，包括：
- 加载 FXML 布局文件：main-view.fxml。
- 设置窗口的标题、图标以及大小。
- 使用 FXMLLoader 加载界面布局，设置窗口大小和最小限制。
- 显示窗口。

该代码简洁地启动了 JavaFX 应用，并且设置了应用窗口的界面和样式。

`main-view.fxml` 布局文件

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

<?import javafx.scene.control.*?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.web.WebView?>
<BorderPane xmlns:fx="http://javafx.com/fxml" xmlns="http://javafx.com/javafx"
            fx:controller="com.kong.markdown.MainController">
    <top>
        <MenuBar fx:id="menuBar">
            <Menu text="文件">
                <MenuItem text="打开"/>
                <MenuItem text="保存" onAction="#onSaveFile"/>
                <SeparatorMenuItem/>
                <MenuItem text="退出" onAction="#onExitApp"/>
            </Menu>
            <Menu text="视图">
                <CheckMenuItem text="显示预览" selected="true" onAction="#onTogglePreview"
                               fx:id="togglePreviewMenuItem"/>
            </Menu>
        </MenuBar>
    </top>
    <center>
        <SplitPane dividerPositions="0.2, 0.6" fx:id="splitPane">
            <!-- 左侧的文件树 -->
            <TreeView fx:id="fileTreeView"/>
            <!-- 左侧的 Markdown 编辑器 -->
            <TextArea fx:id="markdownEditor" prefWidth="200"/>
            <!-- 右侧的 HTML 预览 -->
            <WebView fx:id="markdownPreview" prefWidth="200"/>
        </SplitPane>
    </center>

    <!-- 在底部添加状态栏 -->
    <bottom>
        <Label fx:id="statusLabel" text="状态栏：" style="-fx-padding: 5px;"/>
    </bottom>
</BorderPane>

这是 JavaFX 应用的界面布局文件，使用了 FXML 格式。该文件定义了一个 BorderPane 布局，主要分为几个区域：

顶部菜单栏 (top)：
- 包含一个 MenuBar，包括两个菜单：
  - 文件菜单：包含 “打开”、“保存” 和 “退出” 功能项。 “保存” 和 “退出” 菜单项绑定了对应的动作（onSaveFile 和 onExitApp）。
  - 视图菜单：包含一个复选框菜单项 “显示预览”，其绑定了 onTogglePreview 动作。
中心区域 (center)：
- 使用 SplitPane 布局将中心区域分为两个部分：
  - 左侧区域：一个 TreeView 控件，用于显示文件树。
  - 右侧区域：一个 Markdown 编辑器（具体控件未完全显示，可能是 TextArea 或其他控件）。
SplitPane 控制分隔条的位置，以便用户调整左侧和右侧的区域大小，dividerPositions="0.2, 0.6" 表示初始的比例。

主要控件：

MenuBar：包含文件操作和视图设置的菜单。
SplitPane：用于分割左右区域，适合实现 Markdown 编辑器和预览分屏效果。
TreeView：左侧的文件浏览树，用户可以在其中浏览和选择文件。

`MainController.java` 控制器类

package com.kong.markdown;

import javafx.fxml.FXML;
import javafx.scene.control.*;
import javafx.scene.web.WebView;
import javafx.stage.FileChooser;
import org.apache.commons.lang3.StringUtils;

import java.io.File;
import java.io.IOException;
import java.nio.file.Path;
import java.nio.file.Paths;

/**
 * @author kong
 */
public class MainController {
   
    private final MarkdownProcessor markdownProcessor = new MarkdownProcessor();
    private final FileService fileService = new FileService();
    private File currentFile;
    private boolean isPreviewVisible = true;
    @FXML
    private TreeView<String> fileTreeView;
    @FXML
    private TextArea markdownEditor;
    @FXML
    private WebView markdownPreview;
    @FXML
    private Label statusLabel;
    @FXML
    private SplitPane splitPane;
    @FXML
    private MenuBar menuBar;
    @FXML
    private MenuItem togglePreviewMenuItem;

    @FXML
    private