Vaadin Pro Components - CRUD - day29

目的

本系列文一开始有好几篇文章都围绕着CRUD转，Vaadin 订阅制提供了 CRUD component，今天要试试需要多少时间能写完CRUD。资料使用 day23 下载的立委名单资料库。

CRUD

Vaadin 官方网站提供了 CRUD Component 详细说明和范例程序，目前提供的版本为 21.0.3 (上周看还是21.0.2，Vaadin 版本更新速度算快)，但本专案使用的是 Vaadin on Kotlin 框架，以 Vaadin 14 LTS 为基础，故写法和官网有点不太一样。倘若您使用的是最新版本的 Vaadin，请参考官网范例。

gradle 导入套件

如上所述，本专案使用 Vaadin 14.6.7(LTS) 版

vaadin_version=14.6.7

implementation("com.vaadin:vaadin-bom:${properties["vaadin_version"]}
implementation("com.vaadin:vaadin-crud-flow:${properties["vaadin_version"]}")

Grid画面

@Route("crud-legislator", layout = MainLayout::class)
@AllowAll
class LegislatorCrudView: KComposite() {
    private val root = ui {
        verticalLayout {
            setSizeFull()
            val grid = Grid(Legislator::class.java)
            val crud = Crud(Legislator::class.java, grid, createCrud())
            with(crud){
                setSizeFull()
                dataProvider = Legislator.dataLoader.asDataProvider()
                addSaveListener { it.item.save() }
                addDeleteListener { it.item.delete() }
                Crud.addEditColumn(grid)
                grid.removeColumnByKey("id")
                addThemeVariants(CrudVariant.NO_BORDER)
            }
            add(crud)
        }
    }
}

此画面未设定哪些栏位要显示，哪些不显示，仅移除栏位 id，在此可使用addColumn限定栏位，如下所示 :

grid.addColumn(Legislator::name).setHeader("委员姓名")
grid.addColumn(Legislator::party).setHeader("党籍")

编辑画面

绑定画面和栏位使用 binder.bind(field, getter, setter)，因Kotlin简化setter/getter，为符合规格，使用Legislator::party.setter

fun createCrud(): CrudEditor<Legislator>{
    val txtName = TextField("委员姓名")
    val txtParty = TextField("党籍")
    val formLayout = FormLayout(txtName, txtParty)

    val binder = Binder(Legislator::class.java)
    binder.bind(txtName, Legislator::name, Legislator::name.setter)
    binder.bind(txtParty, Legislator::party, Legislator::party.setter)

    return BinderCrudEditor(binder, formLayout)
}

为能使用.setter，须在gradle加上 :

implementation(kotlin("reflect"))

心得

因版本用法差异，花了点时间debug，前後大约一个半小时左右。update 後立即同步到grid上，无须再执行任何更新。可以看到，程序码非常的少，对於纯文字的crud相当容易，相信加入 combobox、datepicker、...等components 应该也不是难事。pro component 确实大大减少开发时间。