Kotlin桌面应用开发与TornadoFX

Kotlin 与 TornadoFX 简介

Kotlin 是一种现代编程语言，由 JetBrains 开发，旨在与 Java 兼容，同时提供更简洁、安全和表达力强的语法。它在 Android 开发领域取得了巨大成功，不仅如此，在服务器端和桌面应用开发方面也展现出强大的潜力。

TornadoFX 是一个基于 JavaFX 的 Kotlin 框架，专门用于构建桌面应用程序。它利用 Kotlin 的特性，如扩展函数、委托和 DSL（领域特定语言），使得 JavaFX 开发更加简洁和高效。TornadoFX 为开发者提供了一种声明式的方式来构建用户界面，大大减少了样板代码，提升了开发速度。

环境搭建

在开始 Kotlin 桌面应用开发与 TornadoFX 之前，确保你已经安装了以下工具：

1. JDK（Java Development Kit）：TornadoFX 基于 JavaFX，所以需要安装 JDK。建议安装 JDK 11 或更高版本。
2. IntelliJ IDEA：作为 JetBrains 开发的 IDE，IntelliJ IDEA 对 Kotlin 和 TornadoFX 有良好的支持。你可以从 JetBrains 官网下载社区版或旗舰版。
3. Kotlin 插件：在 IntelliJ IDEA 中，确保已经安装了 Kotlin 插件。你可以通过 Settings -> Plugins，搜索 Kotlin 并安装。
4. 创建 TornadoFX 项目：打开 IntelliJ IDEA，选择 Create New Project。在左侧选择 Kotlin，然后在右侧选择 TornadoFX Application。填写项目名称和路径，点击 Create。

第一个 TornadoFX 应用

创建好项目后，你会看到项目结构如下：

src/
├── main/
│   ├── kotlin/
│   │   └── com/
│   │       └── example/
│   │           └── myapp/
│   │               ├── App.kt
│   │               └── views/
│   │                   └── MainView.kt
└── test/
    └── kotlin/
        └── com/
            └── example/
                └── myapp/
                    └── MyAppTest.kt

1. App.kt：这个文件定义了应用的入口点。默认内容如下：

package com.example.myapp

import tornadofx.*

class MyApp : App(MainView::class)

这里 MyApp 继承自 App，并指定了应用的主视图为 MainView。 2. MainView.kt：主视图文件，用于定义应用的用户界面。默认内容如下：

package com.example.myapp.views

import tornadofx.*

class MainView : View("My TornadoFX App") {
    override val root = vbox {
        label("Hello, TornadoFX!")
    }
}

MainView 继承自 View，构造函数中设置了视图的标题。root 属性定义了视图的根节点，这里使用 vbox（垂直布局容器），并在其中添加了一个 label。

TornadoFX 的布局管理

TornadoFX 支持多种布局容器，常见的有 vbox（垂直布局）、hbox（水平布局）、gridpane（网格布局）等。

VBox 布局

vbox 会将子节点垂直排列。例如，我们可以添加多个按钮：

class MainView : View("My TornadoFX App") {
    override val root = vbox {
        button("Button 1")
        button("Button 2")
        button("Button 3")
    }
}

每个 button 会依次垂直排列在 vbox 中。

HBox 布局

hbox 则是将子节点水平排列。示例如下：

class MainView : View("My TornadoFX App") {
    override val root = hbox {
        button("Left Button")
        button("Middle Button")
        button("Right Button")
    }
}

按钮会从左到右水平排列。

GridPane 布局

gridpane 允许你将节点放置在一个网格中。例如：

class MainView : View("My TornadoFX App") {
    override val root = gridpane {
        button("Button at (0, 0)").grid(0, 0)
        button("Button at (1, 1)").grid(1, 1)
        button("Button at (2, 0)").grid(2, 0)
    }
}

这里 grid(x, y) 函数用于指定按钮在网格中的位置，x 是列索引，y 是行索引。

处理用户输入

1. 文本输入：可以使用 textfield 组件获取用户输入的文本。例如：

class MainView : View("My TornadoFX App") {
    val inputText = bind { SimpleStringProperty() }
    override val root = vbox {
        textfield(inputText).prefWidth(200.0)
        button("Submit") {
            action {
                alert(AlertType.INFORMATION, "You entered: ${inputText.value}")
            }
        }
    }
}

这里定义了一个 SimpleStringProperty 类型的 inputText，并将其绑定到 textfield。当用户点击按钮时，会弹出一个提示框显示输入的文本。 2. 复选框和单选按钮： - 复选框：

class MainView : View("My TornadoFX App") {
    val isChecked = bind { SimpleBooleanProperty() }
    override val root = vbox {
        checkbox("Check me", isChecked)
        button("Show Status") {
            action {
                if (isChecked.value) {
                    alert(AlertType.INFORMATION, "Checkbox is checked")
                } else {
                    alert(AlertType.INFORMATION, "Checkbox is not checked")
                }
            }
        }
    }
}

- **单选按钮**：

class MainView : View("My TornadoFX App") {
    val selectedOption = bind { SimpleStringProperty() }
    override val root = vbox {
        radiobutton("Option 1", selectedOption, "Option 1")
        radiobutton("Option 2", selectedOption, "Option 2")
        button("Show Selection") {
            action {
                alert(AlertType.INFORMATION, "You selected: ${selectedOption.value}")
            }
        }
    }
}

这里 radiobutton 的第一个参数是显示文本，第二个参数是绑定的属性，第三个参数是该单选按钮对应的值。

数据绑定与响应式编程

TornadoFX 利用 Kotlin 的属性委托和 JavaFX 的属性绑定机制，实现了强大的数据绑定和响应式编程。

1. 双向数据绑定：例如，我们有一个 Person 类，并在视图中显示和编辑其属性：

data class Person(val name: String, val age: Int)

class MainView : View("My TornadoFX App") {
    val person = Person("John", 30)
    override val root = vbox {
        hbox {
            label("Name: ")
            textfield(person::name).prefWidth(200.0)
        }
        hbox {
            label("Age: ")
            textfield(person::age).prefWidth(100.0)
        }
    }
}

这里 textfield(person::name) 和 textfield(person::age) 实现了双向数据绑定，用户在文本框中输入的内容会直接更新 person 对象的属性，反之亦然。

2. 响应式 UI：当数据发生变化时，UI 会自动更新。例如，我们有一个计数器：

class MainView : View("My TornadoFX App") {
    val count = bind { SimpleIntegerProperty(0) }
    override val root = vbox {
        label(count) {
            style {
                fontSize = 24.px
            }
        }
        button("Increment") {
            action {
                count.value++
            }
        }
    }
}

每次点击 Increment 按钮，count 的值会增加，并且 label 会自动更新显示新的值。

导航与多视图应用

在复杂的桌面应用中，通常需要多个视图并进行导航。TornadoFX 提供了方便的导航机制。

1. 定义多个视图：假设我们有两个视图，FirstView 和 SecondView：

class FirstView : View("First View") {
    override val root = vbox {
        label("This is the first view")
        button("Go to Second View") {
            action {
                find<SecondView>().openModal()
            }
        }
    }
}

class SecondView : View("Second View") {
    override val root = vbox {
        label("This is the second view")
        button("Close") {
            action {
                close()
            }
        }
    }
}

在 FirstView 中，点击按钮会打开 SecondView 的模态窗口。SecondView 中的按钮可以关闭该窗口。

2. 使用 Navigator：对于更复杂的导航场景，可以使用 Navigator。首先定义一个 Navigator 类：

class MyNavigator : Navigator() {
    override val views = listOf(
        ::FirstView,
        ::SecondView
    )
}

然后在 App 中使用这个 Navigator：

class MyApp : App(MyNavigator::class)

在视图中可以通过 navigateTo 函数进行导航：

class FirstView : View("First View") {
    override val root = vbox {
        label("This is the first view")
        button("Go to Second View") {
            action {
                navigateTo<SecondView>()
            }
        }
    }
}

这样可以在不同视图之间进行切换，而不是打开模态窗口。

与外部库集成

TornadoFX 应用可以很方便地与其他 Java 和 Kotlin 库集成。例如，如果你想在应用中使用数据库，可以集成 JDBC 相关的库。

1. 添加依赖：在 build.gradle.kts 文件中添加数据库相关的依赖。例如，使用 H2 数据库：

dependencies {
    implementation("com.h2database:h2:1.4.200")
}

2. 使用数据库：在 Kotlin 代码中使用 JDBC 操作数据库：

import java.sql.DriverManager

class DatabaseUtil {
    companion object {
        fun connect() {
            val url = "jdbc:h2:mem:test"
            val user = "sa"
            val password = ""
            DriverManager.getConnection(url, user, password).use { connection ->
                // 执行 SQL 语句，例如创建表
                val createTableSql = "CREATE TABLE IF NOT EXISTS users (id INT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(255))"
                connection.prepareStatement(createTableSql).executeUpdate()
            }
        }
    }
}

然后可以在视图或其他逻辑中调用 DatabaseUtil.connect() 方法来操作数据库。

样式与主题

TornadoFX 基于 JavaFX，所以可以使用 CSS 来样式化应用。

1. 创建 CSS 文件：在 src/main/resources 目录下创建一个 CSS 文件，例如 styles.css。

.root {
    -fx-background-color: lightblue;
}

.label {
    -fx-font-size: 16px;
    -fx-text-fill: darkblue;
}

.button {
    -fx-background-color: white;
    -fx-text-fill: black;
    -fx-border-color: gray;
    -fx-border-width: 1px;
    -fx-padding: 5px 10px;
}

2. 应用 CSS：在视图中应用这个 CSS 文件：

class MainView : View("My TornadoFX App") {
    override val root = vbox {
        addClass("root")
        label("Hello, TornadoFX!").addClass("label")
        button("Click me").addClass("button")
    }

    override fun onDock() {
        super.onDock()
        style {
            add("styles.css")
        }
    }
}

这里通过 addClass 方法为节点添加 CSS 类，在 onDock 方法中加载 CSS 文件。

3. 主题切换：可以通过动态加载不同的 CSS 文件来实现主题切换。例如，创建一个 dark.css 文件：

.root {
    -fx-background-color: darkgray;
}

.label {
    -fx-font-size: 16px;
    -fx-text-fill: white;
}

.button {
    -fx-background-color: gray;
    -fx-text-fill: white;
    -fx-border-color: white;
    -fx-border-width: 1px;
    -fx-padding: 5px 10px;
}

然后在视图中添加主题切换按钮：

class MainView : View("My TornadoFX App") {
    var isDarkTheme = false
    override val root = vbox {
        addClass("root")
        label("Hello, TornadoFX!").addClass("label")
        button("Toggle Theme") {
            action {
                isDarkTheme =!isDarkTheme
                if (isDarkTheme) {
                    style {
                        remove("styles.css")
                        add("dark.css")
                    }
                } else {
                    style {
                        remove("dark.css")
                        add("styles.css")
                    }
                }
            }
        }
    }

    override fun onDock() {
        super.onDock()
        style {
            add("styles.css")
        }
    }
}

这样用户点击按钮就可以在不同主题之间切换。

部署桌面应用

1. 打包成 JAR 文件：在 IntelliJ IDEA 中，选择 Build -> Build Artifacts，然后选择你的项目，点击 Build。生成的 JAR 文件会在 out/artifacts 目录下。
2. 创建可执行文件：对于 Windows、Mac 和 Linux 等不同平台，可以使用工具如 Launch4j（Windows）、AppImage（Linux）和 DMG（Mac）来创建可执行文件。例如，使用 Launch4j 为 Windows 创建可执行文件：
   • 下载并安装 Launch4j。
   • 打开 Launch4j，配置 Main class 为你的应用入口类（如 com.example.myapp.MyApp），设置 Jar 文件路径，以及其他相关选项，如应用图标等。
   • 点击 Build 生成可执行文件。

通过以上步骤，你就可以将 TornadoFX 应用部署到不同平台，供用户使用。

通过以上对 Kotlin 桌面应用开发与 TornadoFX 的详细介绍，你可以看到 TornadoFX 为 Kotlin 桌面应用开发提供了便捷、高效的方式，结合 Kotlin 的强大特性，能够快速构建出功能丰富、界面美观的桌面应用程序。无论是小型工具还是大型企业级应用，都能在 TornadoFX 中找到合适的解决方案。