Skip to main content

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"

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

Popular posts from this blog

Git Reset in Eclipse

Using Git and the Eclipse IDE, you have a series of commits in your branch history, but need to back up to an earlier version. The Git Reset feature is a powerful tool with just a whiff of danger, and is accessible with just a couple clicks in Eclipse.

In Eclipse, switch to the History view. In my example it shows a series of 3 changes, 3 separate committed versions of the Person file. After commit 6d5ef3e, the HEAD (shown), Index, and Working Directory all have the same version, Person 3.0.

How to do Git Rebase in Eclipse

This is an abbreviated version of a fuller post about Git Rebase in Eclipse. See the longer one here:
One side-effect of merging Git branches is that it leaves a Merge commit. This can create a history view something like:
The clutter of parallel lines shows the life spans of those local branches, and extra commits (nine in the above screen-shot, marked by the green arrows icon).
Check out this extreme-case history:
Merge Commits show all the gory details of how the code base evolved. For some teams, that’s what they want or need, all the time.

Others may find it unnecessarily long and cluttered. They prefer the history to tell the bigger story, and not dwell on tiny details like every trivial Merge-commit.

Git Rebase offers us 2 benefits over Git Merge: First, Rebase allows us to clean up a set of local commits before pushing them to the shared, central repository. For this, the Eclipse EGit Rebase Interact…

Scala Collections: A Group of groupBy() Examples

Scala provides a rich Collections API. Let's look at the useful groupBy() function.

What does groupBy() do? It takes a collection, assesses each item in that collection against a discriminator function, and returns a Map data structure. Each key in the returned map is a distinct result of the discriminator function, and the key's corresponding value is another collection which contains all elements of the original one that evaluate the same way against the discriminator function.

So, for example, here is a collection of Strings:
val sports = Seq("baseball", "ice hockey", "football", "basketball", "110m hurdles", "field hockey")

Running it through the Scala interpreter produces this output showing our value's definition:
sports: Seq[String] = List(baseball, ice hockey, football, basketball, 110m hurdles, field hockey)

We can group those sports names by, say, their first letter. To do so, we need a discriminator funct…