iT邦幫忙

2021 iThome 鐵人賽

DAY 6
0
Modern Web

使用 Kotlin 快速開發 Web 程式 -- Vaadin系列 第 6

CRUD的UD / ICON / confirmDialog - day06

前情提要

前幾編文章裡,大家已經知道如何利用 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
  1. 在setParameter()方法設定連結內容導致編輯頁 EditStudent
    editLink.setRoute(EditStudent::class, student.id!!)
  1. 在畫面上加入連結
    editLink = routerLink(VaadinIcon.EDIT,null)

在此使用圖形連結,Vaadin提供了許多Icon,可直接使用 enum VaadinIcon取得圖示

  1. 再加上返回連結
    routerLink(VaadinIcon.ARROW_LEFT, null, viewType = AllStudentsView::class)

執行結果如下 :
https://ithelp.ithome.com.tw/upload/images/20210921/20138680sPf4vjPIjD.png

刪除

  • 在Grid裡加一欄刪除鍵。請打開AllStudentView.kt
            addColumn(NativeButtonRenderer("Delete") {
                confirmDialog {
                    it.delete()
                    this.refresh()
                }
            })

第2行,按下Delete後,跳出確認框,預設訊息為 "Are you sure?",若欲自訂訊息,請改為 :

                confirmDialog(text = "是否確定刪除${it.name}的資料?") {
                    it.delete()
                    this.refresh()
                }

執行結果如下:
https://ithelp.ithome.com.tw/upload/images/20210921/20138680vLYCwR1vLb.png

單一資料表的 CRUD 到本日告一個段落,是不是很簡單呢?
明天要開始進入自訂可重複使用的 Component了,明天見~

本日程式已上傳 GitHub


上一篇
驗證資料/產生測試資料/表格顯示 - day05
下一篇
自訂 Vaadin 組件 / Grid 擴充功能 -- day07
系列文
使用 Kotlin 快速開發 Web 程式 -- Vaadin30

尚未有邦友留言

立即登入留言