Adding TornadoFX object removes other elements of stage

Question

I was playing around with TornadoFX and wanted to add a horizontal line to my screen, to see how it works. I added it to my code as follows:

    private val menuView: MenuView by inject()
    private val controller: MainController by inject()

    override val root = borderpane {

        top = menuView.root

        style {
            backgroundColor += Color.WHITE
        }

        val data = controller.getData()


        center {

            for (i in 0 until data.count()) {
                val values = data[i]
                datagrid(values) {
                    if (data.count() > 0) {
                        cellWidth = (8.0 * (values.maxBy { it.root.count() }!!.root.count()))
                    }
                    cellHeight = 20.0

                    horizontalCellSpacing = 0.0

                    maxCellsInRow = controller.maxNum
                }
            }
            
            line {
                startY = 3000.0
                endY = 3000.0
                startX = 500.0
                endX = 5000.0
            }

        }
    }

It seems that adding the line inside the center component leads to it being the only thing rendered. The desired result is achieved by replacing the borderpane with a stackpane , as follows:

    private val menuView: MenuView by inject()
    private val controller: MainController by inject()

    override val root = stackpane {

        style {
            backgroundColor += Color.WHITE
        }

        val data = controller.getData()


        for (i in 0 until data.count()) {
            val values = data[i]
            datagrid(values) {
                if (data.count() > 0) {
                    cellWidth = (8.0 * (values.maxBy { it.root.count() }!!.root.count()))
                }
                cellHeight = 20.0

                horizontalCellSpacing = 0.0

                maxCellsInRow = controller.maxNum
            }
        }

        line {
            startY = 3000.0
            endY = 3000.0
            startX = 500.0
            endX = 5000.0
        }
    }

However, this removes the menu bar from the top, which I also wanted to keep. Is there a way to have both?

Answer 1

Thanks to @Slaw for helping me with this. The solution was actually quite simple. In the center part of the solution, instead of just building all the nodes there, I had to embed them within a StackPane . This is because center can only take a single node.

Therefore, the solution looks like this:

    private val menuView: MenuView by inject()
    private val controller: MainController by inject()

    override val root = borderpane {

        top = menuView.root

        style {
            backgroundColor += Color.WHITE
        }

        val data = controller.getData()


        center {

            stackpane {
                for (i in 0 until data.count()) {
                    val values = data[i]
                    datagrid(values) {
                        if (data.count() > 0) {
                            cellWidth = (8.0 * (values.maxBy { it.root.count() }!!.root.count()))
                        }
                        cellHeight = 20.0

                        horizontalCellSpacing = 0.0

                        maxCellsInRow = controller.maxNum
                    }
                }
            
                line {
                    startY = 3000.0
                    endY = 3000.0
                    startX = 500.0
                    endX = 5000.0
                }
            }

        }
    }