VISUAL

PROGRAMMING
Layout Panes and Groups

MUSBAH J. MOUSA
IYAS A. I. ESHAIKHKHALIL

1
OUTLINES
• Groups
• Layout Panes
• StackPane
• FlowPane
• GridPane
• BorderPane
• HBox
• Vbox
• Anchor

2
GROUP CLASS
• The Group class is often used to group nodes and to
perform transformation and scale as a group.

Groups

3
LAYOUT PANES
• A JavaFX application can manually lay out the UI by
setting the position and size properties for each UI
element.
• An easier option is to make use of layout panes.
• The JavaFX SDK provides several layout panes for the
easy setup and management of classic layouts such as
rows, columns, stacks, tiles, and others.
• As a window is resized, the layout pane automatically
repositions and resizes the nodes that it contains
according to their preferred size range preferences.

4
LAYOUT PANES
• Important Notes:
• Panes and UI control objects are resizable.
• Group, Shape, and Text objects are not resizable.

5
LAYOUT PANES
• UI controls have three values for it’s size:
• Preferred size
• Min size
• Max size
• By default, UI controls compute default values for their
preferred size that is based on the content of the control.
• For example, the computed size of a Button object is
determined by the length of the text and the size of the font
used for the label, plus the size of any image.
• The computed size is just big enough for the control and
the label to be fully visible.

6
BUILT-IN LAYOUT PANES

Class Description

Pane Base class for layout panes. It contains the getChildren() method
for returning a list of nodes in the pane.
StackPane Places the nodes on top of each other in the center of the pane.

FlowPane Places the nodes row-by-row horizontally or column-by-column

vertically.
GridPane Places the nodes in the cells in a two-dimensional grid.

BorderPane Places the nodes in the top, right, bottom, left, and center regions.

HBox Places the nodes in a single row.

VBox Places the nodes in a single column.

Anchor Enables you to anchor nodes to the top, bottom, left side, right side,
or center of the pane.

7
STACK PANE
• Places the nodes on top of each other in the center of the
pane.

StackPane

8
FLOW PANE
• FlowPane arranges the nodes in the pane horizontally
from left to right, or vertically from top to bottom, in the
order in which they were added.
• When one row or one column is filled, a new row or
column is started.
• You can specify the way the nodes are placed horizontally
or vertically using one of two constants:
Orientation.HORIZONTAL or Orientation.VERTICAL.
• You can also specify the gap between the nodes in pixels.

9
FLOW PANE

hgap
vgap

Horizontal Orientation

Vertical Orientation

10
FLOW PANE

ShowFlowPane

11
FLOW PANE
• Data fields alignment, orientation, hgap, and vgap are
binding properties.
• For a data field of ObjectProperty<T> type, the value getter
method returns a value of type T, and the property getter
method returns a property value of type
ObjectProperty<T>.

12
FLOW PANE
• Each FlowPane contains an object of
ObservableList for holding the nodes.
• This list can be obtained using the FlowPane
getChildren() method.
nodes: ObservableList
• To add a node into a FlowPane is to add
it to this list using the following Node Node Node
methods:
• add(node) Node Node Node
• addAll(node1, node2, ...)
Node

• Important Note:
• Adding a node to a pane multiple times
or to different panes will cause a
runtime error.

13
FLOW PANE
• You can set the FlowPane padding property with an Insets
object.
• An Insets object specifies the size of the border of a pane.
• The constructor Insets(11, 12, 13, 14) creates an Insets
with the border sizes for top (11), right (12), bottom (13),
and left (14) in pixels.

FlowPane without Padding FlowPane with Padding

(11,12,13,14)

14
FLOW PANE
ShowFlowPane
// Create a pane and set its properties
FlowPane pane = new FlowPane();
pane.setPadding(new Insets(11, 12, 13, 14));
pane.setHgap(5);
pane.setVgap(5);

// Place nodes in the pane

pane.getChildren().addAll(new Label("First Name:"),
new TextField(), new Label("MI:"));
TextField tfMi = new TextField();
tfMi.setPrefColumnCount(1);
pane.getChildren().addAll(tfMi, new Label("Last Name:"),
new TextField());

15
FLOW PANE EXAMPLE

16
GRID PANE
• A GridPane arranges nodes in a grid (matrix) formation.
• The nodes are placed in the specified column and row
indices.
• To remove a node from a GridPane, use:
pane.getChildren().remove(node)
• To remove all nodes, use:
pane.getChildren().removeAll()

17
GRID PANE

18
GRID PANE

19
GRID PANE
• By default, the grid pane will resize rows and columns to
the preferred sizes of its contents, even if the grid pane is
resized larger than its preferred size.
• You may purposely set a large value for the preferred
width and height of its contents by invoking the
setPrefWidth and setPrefHeight methods, so the contents
will be automatically stretched to fill in the grid pane when
the grid pane is enlarged.

ShowGridPane

20
GRID PANE
ShowGridPane
// Create a pane and set its properties pane.add(new TextField(), 1, 2);
GridPane pane = new GridPane(); Button btAdd = new Button("Add Name");
pane.setAlignment(Pos.CENTER); pane.add(btAdd, 1, 3);
pane.setPadding(new Insets(11.5, 12.5, 13.5, 14.5));
GridPane.setHalignment(btAdd, HPos.RIGHT);
pane.setHgap(5.5);
pane.setVgap(5.5);

// Place nodes in the pane

pane.add(new Label("First Name:"), 0, 0);
pane.add(new TextField(), 1, 0);
pane.add(new Label("MI:"), 0, 1);
pane.add(new TextField(), 1, 1);
pane.add(new Label("Last Name:"), 0, 2);

1 2

21
GRID PANE EXAMPLE

22
BORDER PANE
• Places the nodes in the top, right, bottom, left, and center
regions.

23
BORDER PANE

24
BORDER PANE
• Important Notes:
• To remove a node from the top region, invoke
setTop(null).
• If a region is not occupied, no space will be allocated
for this region.

ShowBorderPane

25
BORDER PANE
ShowBorderPane

// Create a border pane

BorderPane pane = new BorderPane();

// Place nodes in the pane

pane.setTop(new CustomPane("Top"));
pane.setRight(new CustomPane("Right"));
pane.setBottom(new CustomPane("Bottom"));
pane.setLeft(new CustomPane("Left"));
pane.setCenter(new CustomPane("Center"));

26
BORDER PANE
CustomPane

// Define a custom pane to hold a label in the center of the pane

class CustomPane extends StackPane {
public CustomPane(String title) {
getChildren().add(new Label(title));
setStyle("-fx-border-color: red");
setPadding(new Insets(11.5, 12.5, 13.5, 14.5));
}
}

27
HBOX PANE
• Places the nodes in a single row.

Node Node Node Node Node Node

28
VBOX PANE
• Places the nodes in a single column. Node

Node

Node

Node

ShowHBoxVBox

29
VBOX PANE
ShowHBoxVBox
// Create a border pane
BorderPane pane = new BorderPane();

// Place nodes in the pane

pane.setTop(getHBox());
pane.setLeft(getVBox());

30
VBOX PANE
getHBox
private HBox getHBox() {
HBox hBox = new HBox(15);
hBox.setPadding(new Insets(15, 15, 15, 15));
hBox.setStyle("-fx-background-color: gold");
hBox.getChildren().add(new Button("Computer Science"));
hBox.getChildren().add(new Button("Chemistry"));
ImageView imageView = new ImageView(new Image("image/us.gif"));
hBox.getChildren().add(imageView);
return hBox;
}

31
VBOX PANE
getVBox
private VBox getVBox() {
VBox vBox = new VBox(15);
vBox.setPadding(new Insets(15, 5, 5, 5));
vBox.getChildren().add(new Label("Courses"));

Label[] courses = {new Label("CSCI 1301"), new Label("CSCI 1302"),

new Label("CSCI 2410"), new Label("CSCI 3720")};

for (Label course: courses) {

VBox.setMargin(course, new Insets(0, 0, 0, 15));
vBox.getChildren().add(course);
}

return vBox;
}

32
HBOX & VBOX PANE EXAMPLE

33
 What is the Difference Between
The HBOX/VBOX and the FlowPane?

34
THE DIFFERENCE
• An HBox lays out its children in a single horizontal row.
• A VBox lays out its children in a single vertical column.
• Recall that a FlowPane can lay out its children in multiple
rows or multiple columns, but an HBox or a VBox can lay
out children only in one row or one column.

35
ANCHOR PANE
• The AnchorPane layout pane enables you to anchor nodes
to the top, bottom, left side, right side, or center of the
pane.
• As the window is resized, the nodes maintain their
position relative to their anchor point.
• Nodes can be anchored to more than one position and
more than one node can be anchored to the same
position.
AnchorPane

The button is anchored to

the right side and the
Button
bottom side at the same
time.

36
ANY QUESTION?

37