跳至主要内容

webforJ 的 Kotlin DSL

预览

用 Kotlin 编写。 继续使用 Java。

Kotlin DSL 使用简洁、类型安全的语法构建 webforJ UI。无需编写命令式调用，只需编写描述屏幕内容的声明式代码，并可与 Java 在同一项目中编译。

添加到项目使用 DSL

你熟悉的类，构建器形式呈现

  • Button变为button()
  • TextField变为textField()
  • FlexLayout变为flexLayout()
  • Break变为`break`()

按钮、字段、布局、对话框、抽屉、列表和 HTML 元素各有一个，名称采用类名的驼峰命名法。

同一屏幕，两种语言

阅读 Java 然后阅读 Kotlin。

两侧都使用相同的 webforJ 类构建相同的组件。Kotlin 侧省去了 setter 和 add() 调用：组件彼此嵌套，并在代码块中配置。

JavaHelloView.java

@Route("/hello")
public class HelloView extends Composite<FlexLayout> {
  private final FlexLayout self = getBoundComponent();
  private TextField name = new TextField("What is your name?");
  private Button greet = new Button("Say hello");

  public HelloView() {
    greet.setTheme(ButtonTheme.PRIMARY)
        .addClickListener(e ->
            Toast.show("Welcome, " + name.getValue() + "!",
                Theme.SUCCESS));
    self.add(name, greet);
  }
}

KotlinHelloView.kt

@Route("hello")
class HelloView : Composite<FlexLayout>() {
  private val self = boundComponent

  init {
    self.apply {
      val name = textField("What is your name?")
      button("Say hello") {
        theme = ButtonTheme.PRIMARY
        onClick {
          Toast.show("Welcome, ${name.text}!", Theme.SUCCESS)
        }
      }
    }
  }
}

DSL 能为你带来什么

构建器、区块 和 lambda 表达式

每个构建器函数都会创建一个组件，将其添加到父容器中，并运行配置块。DSL 的其余部分由此而来。

配置块

该区块接收组件作为 this，因此您可以直接设置其属性并调用其方法。

textField("Email") {
  placeholder = "you@example.com"   // this.placeholder
  required = true                   // this.required
  onModify { validate() }           // this.onModify(...)
}

  • 以组件命名的构建器

    每个组件都有一个以其类名命名的驼峰式函数。大多数函数会在代码块前接收最常设置的选项，例如标签或占位符。

  • 嵌套块

    包含子组件的组件可在其代码块中接受嵌套 DSL 调用，因此代码结构与屏幕布局一致。

  • 事件作为 lambda 表达式

    监听器使用以 on 为前缀且接受 lambda 的方法，例如 onClick 和 onModify。

  • 作用域安全

    子组件只能放入支持它们的组件中。误加到外层作用域将无法编译。

  • 样式和类名

    styles 属性可通过方括号访问 CSS 属性，与 Java 中的 setStyle() 相同。使用 += 添加类名。

  • 就在您的 Java 代码旁边

    Kotlin 会编译为 JVM 字节码。可在 Java 类中使用 Kotlin 复合组件，并通过 add() 将 Java 组件嵌套在 DSL 代码块中。

扩展 DSL

您自己的组件， 也可作为构建器

自定义组件和第三方库通过 HasComponents 上的扩展函数接入 DSL。init 辅助函数会将组件添加到其父级、执行代码块并返回该组件。使用 DSL 构建的组合组件也会以相同方式获得一个函数。

StarRating.kt
fun @WebforjDsl HasComponents.starRating(
  block: @WebforjDsl StarRating.() -> Unit = {}
): StarRating {
  return init(StarRating(), block)
}
在文档中扩展 DSL

如何开始

添加 Kotlin 转换为 Maven 项目

Kotlin DSL 从 webforJ 25.12 起可用。已能使用 Maven 构建的项目需要添加一个依赖项和一个插件。

  1. 1

    添加依赖项

    将 webforJ Kotlin DSL 模块和 Kotlin 标准库添加到 pom.xml。

  2. 2

    添加 Kotlin Maven 插件

    它会在一次构建中编译 Kotlin 和 Java 源代码。无需单独安装 Kotlin。

  3. 3

    让 Kotlin 与 Java 并肩使用

    Kotlin 文件可以放在独立的源文件夹中，也可以与 Java 文件放在同一文件夹中。

  4. 4

    编写视图并编译

    使用构建器编写视图。随后，Maven 会将 Kotlin 与 Java 一起编译。

设置 Kotlin DSL使用 DSL