HBox and VBox – 2 Handy Layout Containers in JavaFX

Screen Shot 2015-01-11 at 8.54.44 AM     Like any developer, when I plan the layout of my application I often need to line things up in a row or column. JavaFX has 2 very handy layout containers for just this purpose – the HBox and the VBox (yes that’s horizontal and vertical boxes). On their own they can easily line up a group of controls, but then they can be placed into larger containers like Grid / Flow / Border panels to build the overall layout.  As with all examples I will look at how to do this with both JavaFX and JavaFXML – read this if you need to get a better understanding of the differences.

Learn to Code!

Simple Example Using JavaFX

Starting with a new JavaFX Project, I will create 6 buttons and a label.  I will put 3 buttons in an HBox and 3 in a VBox.  To keep life simple I will use a FlowPane to contain the 2 boxes along with a label.

1 – Declare Controls

We need 6 buttons and a label.  I like to declare these at the top of the class so I can use them in all methods

 Screen Shot 2015-01-11 at 8.57.40 AM
 2 – Create Controls

Using the key word “new” we create each button along with its text, and a blank label.

 Screen Shot 2015-01-11 at 8.57.48 AM
 3 – Attach buttons to Action Method

Attaching a method to a button is easy in Java 8 as you can see.  All 6 buttons will run the same method

 Screen Shot 2015-01-11 at 8.51.49 AM
 4 – Put buttons in HBox

Here is the main event – we can construct an HBox by passing in the controls we want to ‘box in’.  We can also set the spacing (gap between the buttons) and padding (gap outside the box)

 Screen Shot 2015-01-11 at 8.53.47 AM
 5 – Put buttons in VBox

Main event part 2.  It works the same way as the HBox

 Screen Shot 2015-01-11 at 8.53.53 AM
6 – Add Boxes and Label to FlowPane

A FlowPane is just a frame that displays (flows) things from left to right and top-down.  Objects will lay themselves out depending on the size of the frame.  When we add the 2 boxes, the buttons get added with them

 Screen Shot 2015-01-11 at 8.54.00 AM
 7 – Modify Title of Stage

This code is given to you by NetBeans already.  It adds the frame to the Scene and the Scene to the stage.  I just changed the title.  If you need more background on how this works read this.

 Screen Shot 2015-01-11 at 8.54.07 AM
 8 – Write code for buttons to follow when clicked

Just to give the buttons something to do, each one will identify itself in the label.  The “event” parameter being passed in holds the identity of the button that was clicked – very important for larger applications

 Screen Shot 2015-01-11 at 8.54.15 AM


Simple Example Using JavaFXML

Starting with a new JavaFXML Project, double-click the FXMLDocument.fxml to load scene builder.  If you are not familiar with FXML read this article I posted here.

1 – Delete Starting Controls

You always get these when you start a new FXML document.  We don’t want them.

 Screen Shot 2015-01-05 at 9.12.50 AM
2 – Drag out 3 Buttons

From Controls area on top-left toolbar

 Screen Shot 2015-01-11 at 5.55.17 PM
3 – Arrange -> Wrap in HBox

Select all three buttons (shift-click each one in Windows or command-click on Mac).

Use menu item Arrange -> Wrap in -> HBox

Screen Shot 2015-01-11 at 5.56.04 PM
4 – Set Padding and Spacing

I like how SceneBuilder shows you the 20 padding AROUND the HBox and the 10 spacing BETWEEN each button.

5 – Repeat for the VBOX

Use the same steps to bring out 3 MORE buttons and wrap them into a VBox, setting the same properties for padding and spacing.

 Screen Shot 2015-01-11 at 5.57.15 PMScreen Shot 2015-01-11 at 5.57.05 PM
5 – Set Text Properties

Top-Right corner is the properties.  Just label each button “Button 1” to “Button 6”

 Screen Shot 2015-01-11 at 5.57.42 PM
7 – Declare FXML Control Variables in Controller

In the Controller class, declare each component as a variable. You need to put the @FXML above each one so it can be found later by Scene Builder in step 9.

Screen Shot 2015-01-11 at 5.58.33 PM
8 – Complete code for handle-Button-Action

While we are here, let’s put some simple code in for each button to follow.  Note – it is IDENTICAL to the other version of this program, except it has @FXML on top so it can be found by SceneBuilder.

Screen Shot 2015-01-11 at 5.58.44 PM
9 – Back to Scenebuilder – Connect fx:id’s and On Action

Now that we have declared all the @FXML control variables and defined the @FXML method, we need to go BACK to scene builder and match each control with its FXML ID.  This is done in “Code” section, bottom-right panel.

Screen Shot 2015-01-11 at 5.59.28 PM

 That’s All Folks!

Just save everything and you are done.  If you want you can also go to the “Runnable” class (the one with the main method that launches the program) and set the Title (See step 7 in the other version).

The Video

The Source Code

Both programs are here, with the FXML version at the bottom – just the coed for the controller is here, the rest is generated by NetBeans