前情提要

前几编文章里，大家已经知道如何利用 Vaadin-on-Kotlin 简单快速的新增、查询资料库并使用Grid显示，也知道了如何验证输入资料的正确性。先祝大家中秋节愉快，今天轻松写，来完成单一资料表的CRUD吧!

修改

• 写完C、R，接着进入U，开新档 EditStudents.kt

package com.example.vok

import com.github.mvysny.karibudsl.v10.*
import com.vaadin.flow.router.BeforeEvent
import com.vaadin.flow.router.HasUrlParameter
import com.vaadin.flow.router.Route

@Route("edit-student", layout = MainLayout::class)
class EditStudent : KComposite(), HasUrlParameter<Long> {
    private val binder = beanValidationBinder<Student>()
    private var student: Student? = null
    private val root = ui {
        verticalLayout {
            h1("学生资料修改")
            textField("姓名 : "){
                bind(binder).bind(Student::name)
            }
            comboBox<Gender>("性别 : "){
                setItems(*Gender.values())
                bind(binder).bind(Student::gender)
            }
            datePicker("生日 : "){
                bind(binder).bind(Student::birthday)
            }
            numberField("身高"){
                bind(binder).bind(Student::height)
            }
            numberField("体重"){
                bind(binder).bind(Student::weight)
            }
            button("储存"){
                onLeftClick {
                    val student = student!!
                    if (binder.validate().isOk && binder.writeBeanIfValid(student)){
                        student.save()
                        StudentView.navigateTo(student.id!!)
                    }
                }
            }
            routerLink(null, "返回", AllStudentsView::class)
        }
    }

    override fun setParameter(event: BeforeEvent?, studentId: Long?) {
        binder.readBean(Student.getById(studentId!!))
    }
    
    companion object{
        fun navigateTo(studentId: Long) = navigateToView(EditStudent::class, studentId)
    }
}

HasUrlParameter说明请参考d04
binder和栏位绑定後，只要使用readBean() 方法读取bean，画面立即自动更新。
而在companion object navigateTo()方法则是提供外部快速跳转本页的"入口"。

JavaBeans是Java中一种特殊的类，可以将多个物件封装到一个物件（bean）中。特点是可序列化，提供无参建构元，提供getter方法和setter方法存取物件的属性。名称中的「Bean」是用於Java的可重用软件组件的惯用叫法。 -- 维基百科

• 现在要在Grid里加上两栏，分别导到单笔显示页(student)和编辑页(edit-student)。请打开AllStudentView.kt

        addColumn(NativeButtonRenderer("Show", {StudentView.navigateTo(it.id!!)}))
        addColumn(NativeButtonRenderer("Edit", {EditStudent.navigateTo(it.id!!)}))

NativeButtonRenderer()方法有2个参数，第一个是button显示文字，第二个参数则是 clickListener

• 在单笔学生资料显示页加入修改连结。请打开StudentView.kt

  1. 定义连结

    private lateinit var editLink: RouterLink

2. 在setParameter()方法设定连结内容导致编辑页 EditStudent

    editLink.setRoute(EditStudent::class, student.id!!)

3. 在画面上加入连结

    editLink = routerLink(VaadinIcon.EDIT,null)

在此使用图形连结，Vaadin提供了许多Icon，可直接使用 enum VaadinIcon取得图示

4. 再加上返回连结

    routerLink(VaadinIcon.ARROW_LEFT, null, viewType = AllStudentsView::class)

执行结果如下 :

删除

• 在Grid里加一栏删除键。请打开AllStudentView.kt

            addColumn(NativeButtonRenderer("Delete") {
                confirmDialog {
                    it.delete()
                    this.refresh()
                }
            })

第2行，按下Delete後，跳出确认框，预设讯息为 "Are you sure?"，若欲自订讯息，请改为 :

                confirmDialog(text = "是否确定删除${it.name}的资料？") {
                    it.delete()
                    this.refresh()
                }

执行结果如下:

单一资料表的 CRUD 到本日告一个段落，是不是很简单呢？
明天要开始进入自订可重复使用的 Component了，明天见~

本日程序已上传 GitHub