1-8. Adding Components to a Layout
Problem
You want to create a simple form application by adding UI components to a layout similar to a grid-like display.
Solution
Use JavaFX’s javafx.scene.layout.GridPane class. This source code implements a simple UI form containing a first and last name field controls using the grid pane layout node (javafx.scene.layout.GridPane):
GridPane gridpane = new GridPane();
gridpane.setPadding(new Insets(5));
gridpane.setHgap(5);
gridpane.setVgap(5);
Label fNameLbl = new Label("First Name");
TextField fNameFld = new TextField();
Label lNameLbl = new Label("First Name");
TextField lNameFld = new TextField();
Button saveButt = new Button("Save");
// First name label
GridPane.setHalignment(fNameLbl, HPos.RIGHT);
gridpane.add(fNameLbl, 0, 0);
// Last name label
GridPane.setHalignment(lNameLbl, HPos.RIGHT);
gridpane.add(lNameLbl, 0, 1);
// First name field
GridPane.setHalignment(fNameFld, HPos.LEFT);
gridpane.add(fNameFld, 1, 0);
// Last name field
GridPane.setHalignment(lNameFld, HPos.LEFT);
gridpane.add(lNameFld, 1, 1);
// Save button
GridPane.setHalignment(saveButt, HPos.RIGHT);
gridpane.add(saveButt, 1, 2);
root.getChildren().add(gridpane);
Figure 1-15 depicts a small form containing UI controls laid out using a grid pane layout node.
Figure 1-15. Adding controls to a layout
How It Works
One of the greatest challenges in building user interfaces is the laying out of controls onto the display area. When developing GUI applications it is ideal for an application to allow the user to move and adjust the size of their viewable area while maintaining a pleasant user experience. Similar to Java Swing, JavaFX layout has stock layouts that provide the most common ways to display UI controls on the scene graph. This recipe demonstrates the GridPane class. Before we begin I want explain two common layouts provided by JavaFX 2.0. These are the horizontal box (HBox) and the vertical box (VBox) layout nodes. These two common layouts will be used in later recipes to allow the scene graph to manage child nodes. HBox will contain child nodes that take the available horizontal space as nodes are added. VBox will contain child nodes that take the available vertical space as nodes are added.
First we create an instance of a GridPane. Next, we set the padding by using an instance of an Inset object. After setting the padding, we simply set the horizontal and vertical gap. The following code snippet instantiates a grid pane (GridPane) with padding, horizontal, and vertical gaps set to 5 (pixels):
GridPane gridpane = new GridPane();
gridpane.setPadding(new Insets(5));
gridpane.setHgap(5);
gridpane.setVgap(5);
The padding is the top, right, bottom, and left spacing around the region's content in pixels. When obtaining the preferred size, the padding will be included in the calculation. Setting the horizontal and vertical gaps relate to the spacing between UI controls within the cells.
Next is simply putting each UI control into its respective cell location. All cells are zero relative. Following is a code snippet that adds a save button UI control into a grid pane layout node (GridPane) at cell (1, 2):
gridpane.add(saveButt, 1, 2);
The layout also allows you to horizontally or vertically align controls within the cell. The following code statement right-aligns the save button:
GridPane.setHalignment(saveButt, HPos.RIGHT);