How to add a button to the view dynamically? - kotlin

Question

I'm new to Kotlin and TorandoFX. Maybe I'm missing something very basic in TornadoFX. I want to create from a list (which shoulde be mutable) buttons in the view. If the user clicks on the add button the list should get a new item and this should result in a new button in the view.
Thank you for your help.
I was thinking it should look like this:
import tornadofx.*
fun main(args: Array<String>) {
launch<MyApp>(args)
}
class MyApp: App(MainView::class)
class MainView: View("MainView") {
val values = ArrayList<Int>(listOf(1,2,3)).asObservable()
var count = 4
override val root = vbox {
values.forEach { x ->
button(x.toString())
}
button("add") {
action {
values.add(count)
println(values.toString())
count++
}
}
}
}
this code result in this view, but if I click the button the view doesnt refresh.
This code result in this view, but if I click the button the view doesnt refresh. I think I'm missing something about binding.

Answer 1

We figured out, I was right with the binding part. I just had to use bindChildren() function and give the function an observableArray and a function to for the conversion of the elements of the array as a parameter.
Thank you for the help.
import javafx.collections.FXCollections
import tornadofx.*
fun main(args: Array<String>) {
launch<MyApp>(args)
}
class MyApp: App(MainView::class)
class MainView: View("MainView") {
val values = FXCollections.observableArrayList<Int>(listOf(1,2,3))
var count = 4
override val root = vbox {
vbox {
bindChildren(values) { x ->
button(x.toString())
}
}
vbox() {
button("add") {
action {
values.add(count)
count++
}
}
}
}
}