KVision - Object oriented Web UI framework for Kotlin/JS

Libraries
2

At a first glance it is more mature then the one presented here few days ago.
The problem I see here is the lack of kotlin-style builders. Code like that:

        val mainPanel = HPanel(wrap = FLEXWRAP.WRAP, spacing = 100)
        val buttonsPanel = VPanel(spacing = 7)
        buttonsPanel.add(Button("Default button", style = BUTTONSTYLE.DEFAULT).apply { width = 200.px() })
        buttonsPanel.add(Button("Primary button", style = BUTTONSTYLE.PRIMARY).apply { width = 200.px() })
        buttonsPanel.add(Button("Success button", style = BUTTONSTYLE.SUCCESS).apply { width = 200.px() })
        buttonsPanel.add(Button("Info button", style = BUTTONSTYLE.INFO).apply { width = 200.px() })
        buttonsPanel.add(Button("Warning button", style = BUTTONSTYLE.WARNING).apply { width = 200.px() })
        buttonsPanel.add(Button("Danger button", style = BUTTONSTYLE.DANGER).apply { width = 200.px() })
        buttonsPanel.add(Button("Link button", style = BUTTONSTYLE.LINK).apply { width = 200.px() })
        mainPanel.add(buttonsPanel)

looks ugly in kotlin. It could easily be reduced with apply block. Also with a little effort, one could add builder functions, which could make the API much more comprehensible. Like that:

class VPanel(...){
  ...

  fun button(title: String, ..., op: (Button) -> Unit){
    this.add(Button(title, ... ).apply (op))
  }
}

and then, voila:

val buttonsPanel = vpanel(spacing = 7){
  button(("Default button",...){}
  button("Primary button",...){}
  button("Success button",...){}
  ...
}

In my opinion, you should look into tornadofx implementation. Maybe even see if you could use similar syntax.

1 Like