Kotlin编写JavaFX的顺滑

Kotlin+JavaFX系列

  1. 使用Kotlin开发JavaFX
  2. Windows下的JavaFX桌面应用程序打包ABC
  3. Kotlin编写JavaFX的顺滑
  4. JavaFX动画:有趣的AnimationTimer
  5. JavaFX应用程序图标
  6. JavaFX专业开发者与业余开发者之间就差一个一个Icon packs
  7. JavaFX七巧板游戏:布局窗格Panes
  8. JavaFX七巧板游戏:布局控件
  9. JavaFX+Kotlin游戏从入门到放弃:拯救蛇蛇大作战又名454行实现几何数独游戏
  10. Kotlin编写JavaFX的顺滑之数据控件(一)列表视图ListView
  11. Kotlin编写JavaFX的顺滑之数据控件(二)表视图TableView基础应用
  12. Kotlin编写JavaFX的顺滑之数据控件(二)表视图TableView基础深入浅出

项目代码库

项目代码

前言

谁会读这篇文章

  1. 致力于成为Kotlin桌面程序员的新手
  2. Kotlin爱好者想开发点桌面GUI来炫耀或者练习
  3. JavaFX爱好者

写作目的

  1. 把自己最近学习的心得记录下来,置于外部存储器
  2. 对初学者有一点点帮助
  3. 能够启发社区来投入JavaFX桌面开发

Kotlin桌面开发

Kotlin主要是为解决Android而开发的JVM编程语言,但是Kotlin的生命力使其迅速突破移动端。也有人说Kotlin四处出击,又是JVM又是Javascript,又是Native,没一个足够成熟,除提供语法糖之外并没有什么意义。但是我们作为用户,不需要去考虑那么多复杂的玩意。简单地说,试一试,好用就用。毕竟Talk is cheap, just show the code.

JavaFx

JavaFX 官方网站:JavaFX

“JavaFX是一个开源的下一代客户端应用平台,用于桌面、移动和嵌入式系统,建立在Java之上。它是由许多个人和公司合作完成的,目标是为开发丰富的客户端应用程序制作一个现代、高效和功能齐全的工具包。”

Kotlin开发工具

目前用于开发Java的IDE普遍提供插件进行Kotlin开发。当然,最为方便的应该试试Jetbrains公司的Intelli IDEA,因为Kotlin就是他们公司的崽。

免费的社区版也就够用。

Kotlin最顺滑的地方就是Kotlin调用Java库非常简单,无缝调用加上语法糖,简直比Java自己调用还简单。

Kotlin+JavaFX的形状

HelloFXKt

还是拿26行的JavaFX程序,HelloFX.java,作为开始。

package hellofx

import javafx.application.Application
import javafx.scene.Scene
import javafx.scene.control.Label
import javafx.scene.layout.StackPane
import javafx.stage.Stage

class HelloFX : Application() {
    override fun start(stage: Stage) {
        val javaVersion = System.getProperty("java.version")
        val javafxVersion = System.getProperty("javafx.version")
        val l = Label("Hello, JavaFX $javafxVersion, running on Java $javaVersion.")
        val scene = Scene(StackPane(l), 640.0, 480.0)
        stage.scene = scene
        stage.show()
    }
}

fun main(args: Array<String>) {
    Application.launch(HelloFX::class.java, *args)
}

程序大同小异,并没啥不同的。main函数从类里面拿出来,launch的调用也有一点点改变。去掉publicnewextends,增加overrideset方法变成属性赋值。还有字符串模板,写+${}也没有很大区别。能看懂Java的基本上也能看懂Kotlin。

而且,上面的代码是用Jetbrains Intelli IDEA自动转化Java代码得到的,改动非常少(只有main方法的部分)。

MVVM

但是有Kotlin之后,我们可以用干净利索点的方式来写。

微软帮助

MVVM模式有三个核心组件:模型、视图和视图模型。每一个都有不同的作用。下图显示了这三个组件之间的关系。微软官方MVVM解释
除了了解每个组件的职责外,了解它们如何相互作用也很重要。在高层次上,视图 "知道 "视图模型,而视图模型 "知道 "模型,但模型不知道视图模型,而视图模型也不知道视图。因此,视图模型将视图与模型隔离开来,并允许模型独立于视图来发展。

使用MVVM模式的好处有以下几点:

  • 如果有一个现有的模型实现封装了现有的业务逻辑,那么改变它可能会很困难或有风险。在这种情况下,视图模型作为模型类的适配器,使你能够避免对模型代码做出任何重大的改变。
  • 开发人员可以为视图模型和模型创建单元测试,而不使用视图。视图模型的单元测试可以行使与视图所使用的完全相同的功能。
  • 应用程序的UI可以不修改业务代码的情况下被重新设计。
  • 在开发过程中,设计师和开发人员可以独立地、同时地在他们的组件上工作。设计师可以专注于视图,而开发人员可以在视图模型和模型组件上工作。

有效使用MVVM的关键在于理解如何将应用代码纳入正确的类中,以及理解这些类是如何互动的。

JavaFX例子

我们把Hellofx程序做一点点小改动,增加一个按钮。
在这里插入图片描述
点击这个按钮,原来的文本标签变成显示JavaFX和Java的版本。
在这里插入图片描述

程序设计

JavaFX的主程序为Application类不变。这个类显示View作为GUI用户界面,数据存储在Model中,ViewModel作为数据和界面解耦的部分存在。在这里插入图片描述

主程序

主程序维持JavaFX应用的通用结构。继承Application,实现start方法,在这个方法中创建Model对象,ViewModel对象,Scene对象,显示在屏幕上。

import javafx.application.Application
import javafx.scene.Scene
import javafx.stage.Stage

class HelloFX : Application() {
    override fun start(stage: Stage) {

        val m = Model()
        val vm = ViewModel(m)

        val root = getRoot(vm.versionText, vm::updateVersionText)
        val scene = Scene(root, 640.0, 480.0)
        stage.scene = scene

        stage.show()
    }
}


fun main(args: Array<String>) {
    Application.launch(HelloFX::class.java, *args)
}

程序中,界面的元素为Scene对象构造函数中的root,从这里看到,root为一个函数的范围值,这个函数的参数包括一个文本属性,一个函数。

下面就是界面设计,实际上也就是View多对应的那个函数的实现。

界面设计

界面包括一个Label和一个Button。View中处理界面的组合方式,处理界面的对齐方式,处理一切与数据不相关的部分。

fun textLabel(t: SimpleStringProperty): Node{
    return Label(t.value).apply {
        textProperty().bind(t)
    }
}
fun updateButton(clickAction: () -> Unit): Node = Button("Check").apply {
    setOnAction {
        clickAction()
    }
}

fun getRoot(text: SimpleStringProperty, clickAction: () -> Unit): Parent = VBox(10.0).apply {
    children.add(textLabel(text))
    children.add(updateButton(clickAction))
    alignment = Pos.CENTER
}

可以看到,getRoot调用两个函数来产生文本标签和按钮,这两个参数,一个绑定(下次把这个翻译出来)到标签的文本属性,一个函数绑定到按钮的事件。

这样的方式,在JetPack Compose中称为声明式界面设计。完全没有假设别的东西。View部分只对一个文本属性SimpleStringProperty和一个() -> Unit的函数提出要求。这就是MVVM中核心的要素,分割责任。这个部分可以任意更改,任意变更,只需要满足设计条件:

  • 界面跟踪一个文本的变化;
  • 界面出发一个函数调用。

这种方式保证了充分的内聚性。

Model设计

这里的数据模型非常简单。考虑到目前的交互是单向的,Model只需要提供数据,并没有反馈数据。

data class Model(
    val javaVersion: String = System.getProperty("java.version"),
    val javafxVersion: String = System.getProperty("javafx.version")
)

ViewModel

ViewModel沟通Model和Application,因此其构造函数包含Model的实例作为参数。

import javafx.beans.property.SimpleStringProperty

class ViewModel(private val m: Model) {
    val versionText = SimpleStringProperty("Hello!")

    fun updateVersionText() {
        versionText.value = "Hello, JavaFX ${m.javafxVersion}, running on Java ${m.javaVersion}."
    }
}

结论

通过一个特别简单的例子,可以看到JavaFX+Kotlin之后,界面的开发是多么的顺滑。

上面的程序有几个特点:

  • 界面不需要知道任何ViewModel或者Model的细节,也不需要维护相应的对象引用;
  • 界面用函数调用的形式来实现,通过绑定来明确其交互的效果,语义和语法都非常清晰;
  • 界面的设计可以单独完成,并且自由更改;
  • Model的部分不需要考虑任何可视化和人机交互,只需要单独考虑业务逻辑;
  • Model可以单独开发,自由更改;
  • 交互的业务逻辑在ViewModel中实现;
  • ViewModel持有Model对象的引用;
  • 当Model的接口改变时,需要修改ViewModel的代码,因此Model和ViewModel是紧耦合;
  • View和其他部分是松耦合,只与Application耦合,不依赖于程序的任何其他部分;
  • Model和其他部分是松耦合,不依赖于程序中的任何部分。
  • 最终的界面交互逻辑和业务交互逻辑的关联由Application来维护。
  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大福是小强

除非你钱多烧得慌……

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值