Vaadin 对话视窗 Dialog - day17

Vaadin 提供的众多 Components，除了前面范例实作过的 Form Inputs 外，常用到的还有Dialog。先前所写的范例无论新增或修改。都是跳页显示，实务上显示或修新增/修改资料时，不太会这麽使用，大都使用弹出视窗。

准备 Dialog

前例的学生资料，如果要使用弹出视窗修改该怎麽做？
请开新档 StudentEditDialog.kt，下列程序多半和StudentEditorComponent.kt相同。

package com.example.vok

import com.github.mvysny.karibudsl.v10.*
import com.vaadin.flow.component.dialog.Dialog

class StudentEditDialog: Dialog() {
    private val binder = beanValidationBinder<Student>()

    var student: Student? = null
        set(value) {
            field = value
            value?.let { binder.readBean(value) }
        }

    var studentId : Long? = null
        set(value){
            field = value
            student = Student.getById(studentId!!)
        }

    init {
        verticalLayout {
            isMargin = false
            textField("姓名 : "){
                bind(binder).bind(Student::name)
            }
            comboBox<Gender>("性别 : "){
                setItems(*Gender.values())
                bind(binder).bind(Student::gender)
            }
            datePicker("生日 : "){
                bind(binder).bind(Student::birthday)
            }

            horizontalLayout {
                numberField("身高"){
                    bind(binder).bind(Student::height)
                }
                numberField("体重"){
                    bind(binder).bind(com.example.vok.Student::weight)
                }
            }

            horizontalLayout {
                button("储存"){
                    onLeftClick {
                        val student = student!!
                        if (binder.validate().isOk && binder.writeBeanIfValid(student)){
                            student.save()
                            [email protected]()
                        }
                    }
                }
                button("取消") {
                    onLeftClick {
                        [email protected]()
                    }
                }
            }
        }
    }
}

呼叫 Dialog

请打开AllStudentsView.kt，修改编辑

    addButtonColumn(VaadinIcon.EDIT, "edit") {
        dialog = StudentEditDialog().apply {
            this.studentId = it.id
            isCloseOnEsc = false
            isCloseOnOutsideClick = false
            open()
        }
    }