iT邦幫忙

2021 iThome 鐵人賽

DAY 29
0
Modern Web

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

Vaadin Pro Components - CRUD - day29

目的

本系列文一開始有好幾篇文章都圍繞著CRUD轉,Vaadin 訂閱制提供了 CRUD component,今天要試試需要多少時間能寫完CRUD。資料使用 day23 下載的立委名單資料庫。
https://ithelp.ithome.com.tw/upload/images/20211014/20138680Fs4Pkie1vH.png

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 確實大大減少開發時間。


上一篇
Vaadin login with Facebook - day28
下一篇
Vaadin 工具 / 後記 - day30
系列文
使用 Kotlin 快速開發 Web 程式 -- Vaadin30

尚未有邦友留言

立即登入留言