Layout

Layout is how items are arranged on the screen. Layout classes are branch nodes that have built-in layout behaviour. Your choice of parent class to hold the nodes determines how its children will be laid out.

Layout Class	Behaviour
HBox	Layout children horizontally in-order
VBox	Layout children vertically in-order
FlowPane	Layout left-right, top-bottom in-order
BorderPane	Layout across sides, centre in-order
GridPane	2D grid, with cells the same size

Example: Java Version

Here’s the Java Version example from above, annotated. The sequence to setup a window is:

Define the nodes (lines 4-11)
Create a layout as the root of the scene graph (line 14), which will hold the nodes.
Add the root node to the scene (line 18)
Add the scene to the stage (line 19)
Show the stage (line 23)

class App: Application() {
  override fun start(stage:Stage?) { 
    // imageView is our first node
    val image = Image("java.png", 175.0, 175.0) 
    val imageView = ImageView(image)

    // label is our second node
    val label = Label( 
      System.getProperty("java.vendor")
      + System.getProperty("java.version") + "\n"
        + System.getProperty("javafx.version"))

    // box is our layout that will manage the position of our nodes
    val box = VBox(imageView, label) 
    VBox.setMargin(label, Insets(10.0)) 

    // create a scene from the layout class, and attach to the stage
    val scene = Scene(box, 175.0, 225.0) 
    stage.setScene(scene) 

	  // set window properties and show it
    stage.setResizable(false) 
    stage.show() 
  }
}