ScalaFX: Button positioning with HBox

I'm working on an application, as an excuse to practice my Scala and learn ScalaFX in the process. The application will have several input forms. Most will have action buttons, such as Save and Cancel.
While the mobile world is going more and more vertical in its layout, the program I am working on is targeting Windows and Mac platforms. In them, buttons are usually laid out side by side.
The ScalaFX HBox layout does exactly that: draws its components in a horizontal sequence.

As I work through the different aspects of HBox, I will use this Scala object structure:

import scalafx.Includes._
import scalafx.application.JFXApp
import scalafx.scene.layout._
import scalafx.geometry._
import scalafx.scene._
import scalafx.scene.control._

object Sfx2 extends JFXApp {

  val buttonSave = new Button {
    text = "Save"
    tooltip = "Click me to save your changes."
  }

  val buttonCancel = new Button {
    text = "Cancel"
    tooltip = "Click me to close without saving your changes."
  }

  val myLayout = new HBox {
    children = List(buttonSave, buttonCancel)
  }

  val myScene = new Scene(myLayout, 300, 200)
  
  stage = new JFXApp.PrimaryStage {
    scene = myScene
    title = "HBox Exploring"
  }
  stage.show
}

This code builds two Button objects, a Save button and a Cancel button, and gives them appropriate display text and hover text.
Next, it adds them as children to an HBox object. For this simple purpose of exploring buttons and layouts, I add the HBox as the root of my Scene graph, and define the scene's dimensions to 300 x 200 pixels.
Finally, it sets the stage for the JFXApp and displays it with the call to stage.show.
This is the result:

A good start. I have my 2 buttons, in the order that I added them. But this is not a very attractive layout.
For one thing, users of the form will be more error-prone with the two buttons shoved up against each other. Let's use some of the HBox layout properties to improve the layout.
At the very least, we want some space between the buttons, by setting the spacing property, and around the buttons by setting the padding:

  val myLayout = new HBox {
    spacing = 8
    padding = Insets(10)
    children = List(buttonSave, buttonCancel)
  }

This change gives us the following:

That is looking better. A little white space around the buttons is a less crowded and more functional and attractive layout.
A common practice is to have the action buttons at the bottom of the input form, either in the bottom center or the bottom right corner.
That is also easy to achieve with the HBox, using the alignment property. I want them in the bottom right, so:

  val myLayout = new HBox {
    alignment = Pos.BottomRight
    spacing = 8
    padding = Insets(10)
    children = List(buttonSave, buttonCancel)
  }

This change gives the following:

So, with my buttons where I want them, am I ready to start filling in the rest of the controls for my input form?
Well, yes. But I will likely want a different layout than HBox for the other controls. The alignment setting moved the buttons to the bottom right corner of the HBox, but the HBox fills the entire 300 x 200 scene.
And HBox lays out all of its children in a horizontal row. Meaning if I add a TextArea or a Label or some other controls, they will also be in the bottom right corner.
To fill in the rest of the form, I will have to combine my HBox with some other layouts and panes. I will explore them another day.

This post explores the HBox scene layout in ScalaFX, and it barely scratches the surface of its capabilities. Check out the class API for more details and possibilities.
And if you discover some interesting ideas and tips, share them in the comments.

key words: scala scalafx HBox scene layout example