Search code examples
kotlinjavafxtornadofx

Adding TornadoFX object removes other elements of stage


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?


Solution

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