[SOLVED] How to dynamically add Nodes to VBox in ScalaFX

How to dynamically add Nodes to VBox in ScalaFX

My ScalaFX app has a Button that adds a GridPane to a VBox. I tried directly updating the VBox children in Button.onAction but that causes the Button to become non-responsive after rendering the first added GridPane. I am now trying the following code:


import scalafx.scene.{Node, Scene}
import scalafx.application.JFXApp
import scalafx.geometry.Insets
import scalafx.scene.control.{Button, Label}
import scalafx.scene.layout.{GridPane, VBox}
import scalafx.Includes._
import scalafx.collections.ObservableBuffer

object Gui extends JFXApp {

  stage = new JFXApp.PrimaryStage {
    title = "DSP Lab"
    scene = new Scene(320, 300) {

      val bufferOfNodes = new ObservableBuffer[Node]

      val vBox = new VBox {
        children = bufferOfNodes // assign ObservableBuffer to children
      }

      val addGridPaneButton = new Button {
        text = "Add GridPane to VBox"
        onAction = _ => {
          bufferOfNodes += getNewGridPane // update the ObservableBuffer
        }
      }

      content = List(addGridPaneButton, vBox)
    }
  }

  stage.setX(100)
  stage.setY(100)

  def getNewGridPane: GridPane = new GridPane {
    vgap = 5
    hgap = 10
    padding = Insets(20)

    val sampleFrequencyLabel = new Label("Sample Frequency:")
    val sampleFrequencyField = new DoubleField
    val amplitudeLabel = new Label("Amplitude:")
    val amplitudeField = new DoubleField
    add(sampleFrequencyLabel, 0, 0)
    add(sampleFrequencyField, 1, 0)
    add(amplitudeLabel, 0, 1)
    add(amplitudeField, 1, 1)
  }
}

By assigning VBox.children to the ObservableBuffer[Node] the Button stays responsive and onAction adds the GridPane to bufferOfNodes but the GridPanes seem to never get added to the VBox and they are never rendered.

Is there a way to do this?

Solution