How to add a button to the view dynamically?

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++
                }
            }
        }
    }
}