JavaFX Tutorial Slides. Watch the video series here: https://www.youtube.com/watch?v=kKKtgstZ5qM&list=PLje_ti-y5EoL6PDfH3x5d8FMOpEHgHYVF K. N. Toosi University of Technology

1. Brought to you by
Graphical User Interface in Java
Using JavaFX
Layouts
1K. N. Toosi University of Technology

2. What are Layouts?
• Until now, we only worked with the simplest Node container which
was Pane.
• It’s the simplest one, because we specified the location of our
elements by hand in pixel format.
• Now days, with a great needs of responsive UIs no one is going to
hard code the location of UI elements.
• So we need smarter node container.
• A smart container decides about the location of an element
automatically based on a specified behavior.
K. N. Toosi University of Technology 2

3. JavaFX Containers Hierarchy:
3K. N. Toosi University of Technology
Region
Control
SplitPane ScrollPane
Accordion TabPane
Pane
AnchorPane BorderPane
DialogPane FlowPane
VBox HBox
GridPane StackPane
TilePane

4. BorderPane:
K. N. Toosi University of Technology 4
LEFT RIGHTCENTER
TOP
BOTTOM

5. Demo 1: BorderPane
5K. N. Toosi University of Technology
@Override
public void start(Stage primaryStage) throws Exception {
BorderPane root = new BorderPane();
Rectangle left = new Rectangle(100, 400, Color.BLUEVIOLET);
root.setLeft(left);
Rectangle right = new Rectangle(100, 400, Color.BLUEVIOLET);
root.setRight(right);
Rectangle center = new Rectangle(200, 200, Color.GREEN);
root.setCenter(center);
Rectangle top = new Rectangle(400, 100, Color.RED);
root.setTop(top);
Rectangle bottom = new Rectangle(400, 100, Color.RED);
root.setBottom(bottom);
//Alignments
BorderPane.setAlignment(bottom, Pos.CENTER);
//Margin
BorderPane.setMargin(left, new Insets(12,12,12,12));
Scene scene = new Scene(root);
primaryStage.setScene(scene);
primaryStage.show();
}

6. Demo 1: BorderPane
6K. N. Toosi University of Technology
@Override
public void start(Stage primaryStage) throws Exception {
BorderPane root = new BorderPane();
Rectangle left = new Rectangle(100, 400, Color.BLUEVIOLET);
root.setLeft(left);
Rectangle right = new Rectangle(100, 400, Color.BLUEVIOLET);
root.setRight(right);
Rectangle center = new Rectangle(200, 200, Color.GREEN);
root.setCenter(center);
Rectangle top = new Rectangle(400, 100, Color.RED);
root.setTop(top);
Rectangle bottom = new Rectangle(400, 100, Color.RED);
root.setBottom(bottom);
//Alignments
BorderPane.setAlignment(bottom, Pos.CENTER);
//Margin
BorderPane.setMargin(left, new Insets(12,12,12,12));
Scene scene = new Scene(root);
primaryStage.setScene(scene);
primaryStage.show();
}
Rectangle bottom = new Rectangle(400, 100,
Color.RED);
root.setBottom(bottom);
//Alignments
BorderPane.setAlignment(bottom, Pos.CENTER);
//Margin
BorderPane.setMargin(left, new Insets(12,12,12,12));

7. AcnchorPane:
K. N. Toosi University of Technology 7
Node Node
30px
AnchorPane allows the edges of child nodes to be anchored to an offset from the anchor pane's edges.

8. AcnchorPane:
Constraint Type Description
topAnchor double distance from the anchor pane's top insets to the child's top edge.
leftAnchor double distance from the anchor pane's left insets to the child's left edge.
bottomAnchor double
distance from the anchor pane's bottom insets to the child's bottom
edge.
rightAnchor double distance from the anchor pane's right insets to the child's right edge.
K. N. Toosi University of Technology 8
static void setBottomAnchor(Node child, Double value)
Sets the bottom anchor for the child when contained by an anchor pane.
static void setLeftAnchor(Node child, Double value)
Sets the left anchor for the child when contained by an anchor pane.
static void setRightAnchor(Node child, Double value)
Sets the right anchor for the child when contained by an anchor pane.
static void setTopAnchor(Node child, Double value)
Sets the top anchor for the child when contained by an anchor pane.

9. Demo 2:
9K. N. Toosi University of Technology
@Override
public void start(Stage primaryStage) throws Exception {
AnchorPane root = new AnchorPane();
Button button = new Button("You Can Click Me");
AnchorPane.setLeftAnchor(button, 30D);
AnchorPane.setRightAnchor(button, 30D);
AnchorPane.setTopAnchor(button, 30D);
root.getChildren().add(button);
Scene scene = new Scene(root);
primaryStage.setScene(scene);
primaryStage.show();
}

10. Demo 2:
10K. N. Toosi University of Technology
@Override
public void start(Stage primaryStage) throws Exception {
AnchorPane root = new AnchorPane();
Button button = new Button("You Can Click Me");
AnchorPane.setLeftAnchor(button, 30D);
AnchorPane.setRightAnchor(button, 30D);
AnchorPane.setTopAnchor(button, 30D);
root.getChildren().add(button);
Scene scene = new Scene(root);
primaryStage.setScene(scene);
primaryStage.show();
}
import javafx.scene.control.Button;
import javafx.scene.layout.AnchorPane;
…
Button button = new Button("You Can Click
Me");
AnchorPane.setLeftAnchor(button, 30D);
AnchorPane.setRightAnchor(button, 30D);
AnchorPane.setTopAnchor(button, 30D);

11. Hbox/Vbox:
K. N. Toosi University of Technology 11
Node
Node
Node
Node Node Node
spacing

12. Demo 3:
12K. N. Toosi University of Technology
@Override
public void start(Stage primaryStage) throws Exception {
BorderPane root = new BorderPane();
VBox vbox = new VBox(10);
root.setLeft(vbox);
for(int i=0;i<5;i++){
Rectangle rectangle = new Rectangle(40, 40);
vbox.getChildren().add(rectangle);
}
HBox hbox = new HBox(40);
root.setTop(hbox);
for(int i=0;i<5;i++){
Circle circle = new Circle(20);
hbox.getChildren().add(circle);
}
Scene scene = new Scene(root);
primaryStage.setScene(scene);
primaryStage.show();
}

13. Demo 3:
13K. N. Toosi University of Technology
@Override
public void start(Stage primaryStage) throws Exception {
BorderPane root = new BorderPane();
VBox vbox = new VBox(10);
root.setLeft(vbox);
for(int i=0;i<5;i++){
Rectangle rectangle = new Rectangle(40, 40);
vbox.getChildren().add(rectangle);
}
HBox hbox = new HBox(40);
root.setTop(hbox);
for(int i=0;i<5;i++){
Circle circle = new Circle(20);
hbox.getChildren().add(circle);
}
Scene scene = new Scene(root);
primaryStage.setScene(scene);
primaryStage.show();
}
VBox vbox = new VBox(10);
root.setLeft(vbox);
for(int i=0;i<5;i++){
Rectangle rectangle = new Rectangle(40, 40);
vbox.getChildren().add(rectangle);
}
HBox hbox = new HBox(40);
root.setTop(hbox);
for(int i=0;i<5;i++){
Circle circle = new Circle(20);
hbox.getChildren().add(circle);
}

14. Demo 3:
14K. N. Toosi University of Technology
@Override
public void start(Stage primaryStage) throws Exception {
BorderPane root = new BorderPane();
VBox vbox = new VBox(10);
root.setLeft(vbox);
for(int i=0;i<5;i++){
Rectangle rectangle = new Rectangle(40, 40);
vbox.getChildren().add(rectangle);
}
HBox hbox = new HBox(40);
hbox.setAlignment(Pos.CENTER);
root.setTop(hbox);
for(int i=0;i<5;i++){
Circle circle = new Circle(20);
hbox.getChildren().add(circle);
}
Scene scene = new Scene(root);
primaryStage.setScene(scene);
primaryStage.show();
}

15. StackPane:
K. N. Toosi University of Technology 15

16. Demo 4:
16K. N. Toosi University of Technology
@Override
public void start(Stage primaryStage) throws Exception {
StackPane root = new StackPane();
for (int i = 0; i < 90; i += 10) {
Rectangle rectangle = new Rectangle(300, 300);
rectangle.setRotate(i);
rectangle.setFill(Color.rgb(i+90, i / 20, i / 30));
root.getChildren().add(rectangle);
}
Label label = new Label("JavaFX is Awesome");
label.setFont(Font.font(24));
label.setTextFill(Color.WHITE);
root.getChildren().add(label);
Scene scene = new Scene(root, 600, 600);
primaryStage.setScene(scene);
primaryStage.show();
}
You can set the alignment of components
with: root.setAlignment( Pos.? );

17. Demo 4:
17K. N. Toosi University of Technology
@Override
public void start(Stage primaryStage) throws Exception {
StackPane root = new StackPane();
for (int i = 0; i < 90; i += 10) {
Rectangle rectangle = new Rectangle(300, 300);
rectangle.setRotate(i);
rectangle.setFill(Color.rgb(i+90, i / 20, i / 30));
root.getChildren().add(rectangle);
}
Label label = new Label("JavaFX is Awesome");
label.setFont(Font.font(24));
label.setTextFill(Color.WHITE);
root.getChildren().add(label);
Scene scene = new Scene(root, 600, 600);
primaryStage.setScene(scene);
primaryStage.show();
}
for (int i = 0; i < 90; i += 10) {
Rectangle rectangle = new Rectangle(300, 300);
rectangle.setRotate(i);
rectangle.setFill(Color.rgb(i+90, i / 20, i / 30));
root.getChildren().add(rectangle);
}

18. Demo 4:
18K. N. Toosi University of Technology
@Override
public void start(Stage primaryStage) throws Exception {
StackPane root = new StackPane();
for (int i = 0; i < 90; i += 10) {
Rectangle rectangle = new Rectangle(300, 300);
rectangle.setRotate(i);
rectangle.setFill(Color.rgb(i+90, i / 20, i / 30));
root.getChildren().add(rectangle);
}
Label label = new Label("JavaFX is Awesome");
label.setFont(Font.font(24));
label.setTextFill(Color.WHITE);
root.getChildren().add(label);
Scene scene = new Scene(root, 600, 600);
primaryStage.setScene(scene);
primaryStage.show();
}
Label label = new Label("JavaFX is Awesome");
label.setFont(Font.font(24));
label.setTextFill(Color.WHITE);
root.getChildren().add(label);

19. GridPane:
K. N. Toosi University of Technology 19
(0,0) (1,0) (2,0)
(0,1) (1,1)
(0,2) (1,2) (2,3)
padding
hgap
vgap

20. Demo 5 (1/3):
20K. N. Toosi University of Technology
@Override
public void start(Stage primaryStage) throws Exception {
GridPane root = new GridPane();
Scene scene = new Scene(root);
root.setPadding(new Insets(10));
root.setHgap(20);
root.setVgap(5);
ColumnConstraints column1 = new ColumnConstraints(100);
ColumnConstraints column2 = new ColumnConstraints(90, 150, Double.MAX_VALUE);
column2.setHgrow(Priority.ALWAYS);
root.getColumnConstraints().addAll(column1, column2);
. . . . .
}

21. Demo 5 (2/3):
21K. N. Toosi University of Technology
@Override
public void start(Stage primaryStage) throws Exception {
. . . . .
Label formLbl = new Label("Enter your First name and last name");
Label fNameLbl = new Label("First Name");
TextField fNameFld = new TextField();
Label lNameLbl = new Label("Last Name");
TextField lNameFld = new TextField();
Button saveButton = new Button("Save");
. . . . .
}

22. Demo 5 (3/3):
22K. N. Toosi University of Technology
@Override
public void start(Stage primaryStage) throws Exception {
. . . . .
GridPane.setHalignment(formLbl, HPos.LEFT);
root.add(formLbl, 0, 0,2,1);
GridPane.setHalignment(fNameLbl, HPos.LEFT);
root.add(fNameLbl, 0, 1);
GridPane.setHalignment(lNameLbl, HPos.LEFT);
root.add(lNameLbl, 0, 2);
GridPane.setHalignment(fNameFld, HPos.LEFT);
root.add(fNameFld, 1, 1);
GridPane.setHalignment(lNameFld, HPos.LEFT);
root.add(lNameFld, 1, 2);
GridPane.setHalignment(saveButton, HPos.RIGHT);
root.add(saveButton, 2, 3);
primaryStage.setScene(scene);
primaryStage.show();
}

23. FlowPane:
K. N. Toosi University of Technology 23
Node2
Node4
Node3Node1
Node2
Node4
Node3
Node1
HGap
VGap

24. Demo 6:
24K. N. Toosi University of Technology
@Override
public void start(Stage primaryStage) throws Exception {
FlowPane root = new FlowPane();
root.setHgap(10);
root.setVgap(30);
root.setPadding(new Insets(15));
Button button1 = new Button("Button1");
root.getChildren().add(button1);
Button button2 = new Button("Button2");
button2.setPrefSize(100, 100);
root.getChildren().add(button2);
TextField textField = new TextField("Text Field");
textField.setPrefWidth(110);
root.getChildren().add(textField);
Rectangle rectangle = new Rectangle(300, 200);
root.getChildren().add(rectangle);
Scene scene = new Scene(root, 550, 250);
primaryStage.setScene(scene);
primaryStage.show();
}

25. Demo 6:
25K. N. Toosi University of Technology
@Override
public void start(Stage primaryStage) throws Exception {
FlowPane root = new FlowPane();
root.setHgap(10);
root.setVgap(30);
root.setPadding(new Insets(15));
Button button1 = new Button("Button1");
root.getChildren().add(button1);
Button button2 = new Button("Button2");
button2.setPrefSize(100, 100);
root.getChildren().add(button2);
TextField textField = new TextField("Text Field");
textField.setPrefWidth(110);
root.getChildren().add(textField);
Rectangle rectangle = new Rectangle(300, 200);
root.getChildren().add(rectangle);
Scene scene = new Scene(root, 550, 250);
primaryStage.setScene(scene);
primaryStage.show();
}
FlowPane root = new FlowPane();
root.setHgap(10);
root.setVgap(30);
root.setPadding(new Insets(15));

26. Demo 6:
26K. N. Toosi University of Technology
@Override
public void start(Stage primaryStage) throws Exception {
FlowPane root = new FlowPane(Orientation.VERTICAL);
root.setHgap(10);
root.setVgap(30);
root.setPadding(new Insets(15));
Button button1 = new Button("Button1");
root.getChildren().add(button1);
Button button2 = new Button("Button2");
button2.setPrefSize(100, 100);
root.getChildren().add(button2);
TextField textField = new TextField("Text Field");
textField.setPrefWidth(110);
root.getChildren().add(textField);
Rectangle rectangle = new Rectangle(300, 200);
root.getChildren().add(rectangle);
Scene scene = new Scene(root, 550, 250);
primaryStage.setScene(scene);
primaryStage.show();
}
FlowPane root = new
FlowPane(Orientation.VERTICAL);
root.setHgap(10);
root.setVgap(30);
root.setPadding(new Insets(15));
A horizontal flowpane (the default) will layout nodes in rows,
wrapping at the flowpane's width.
A vertical flowpane lays out nodes in columns, wrapping at the
flowpane's height.

27. TilePane:
K. N. Toosi University of Technology 27
Node2
Node4
Node3Node1
Node2
Node4Node3
Node1

28. Demo 7:
28K. N. Toosi University of Technology
@Override
public void start(Stage primaryStage) throws Exception {
TilePane root = new TilePane(Orientation.HORIZONTAL);
root.setHgap(10);
root.setVgap(30);
root.setPadding(new Insets(15));
root.setTileAlignment(Pos.TOP_CENTER);
Button button1 = new Button("Button1");
root.getChildren().add(button1);
Button button2 = new Button("Button2");
button2.setPrefSize(100, 100);
root.getChildren().add(button2);
TextField textField = new TextField("Text Field");
textField.setPrefWidth(110);
root.getChildren().add(textField);
Rectangle rectangle = new Rectangle(200, 200);
root.getChildren().add(rectangle);
Scene scene = new Scene(root, 550, 250);
primaryStage.setScene(scene);
primaryStage.show();
}

29. DialogPane:
• We will talk about Dialogs separately.
K. N. Toosi University of Technology 29

30. JavaFX Containers Hierarchy:
30K. N. Toosi University of Technology
Region
Control
SplitPane ScrollPane
Accordion TabPane
Pane
AnchorPane BorderPane
DialogPane FlowPane
VBox HBox
GridPane StackPane
TilePane

31. Control versus Pane:
• A "Control" is a node in the scene graph which can be manipulated
by the user. Controls provide additional variables and behaviors
beyond those of Node to support common user interactions in a
manner which is consistent and predictable for the user.
• Pane is the base class for layout panes which need to expose the
children list as public so that users of the subclass can freely
add/remove children.
K. N. Toosi University of Technology 31

32. ScrollPane:
K. N. Toosi University of Technology 32
Some very very very very very
very very very very very very
very very very very very very
very very very very very very
very very very very very very
very very very very very very
very very very very very very
very very very very very very
very very very very very very
very very very very very very
very very very very very very
very very very very very
Long Text
Some very very very very very
very very very very very very
very very very very very very
very very very very very very
very very very very very very
very very very very very very
very very very very very very

33. Demo 8:
33K. N. Toosi University of Technology
@Override
public void start(Stage primaryStage) throws Exception {
StackPane stackPane = new StackPane();
ScrollPane root = new ScrollPane();
root.setPannable(true);
root.setFitToHeight(true);
root.setFitToWidth(true);
Rectangle rectangle = new Rectangle(900, 400);
stackPane.getChildren().add(rectangle);
root.setContent(stackPane);
Scene scene = new Scene(root, 600, 600);
primaryStage.setScene(scene);
primaryStage.show();
}

34. SplitPane:
K. N. Toosi University of Technology 34
RIGHTBOTTOM BOTTOM
Divider
Divider Position
between [0.0 – 1.0]

35. Demo 9:
35K. N. Toosi University of Technology
@Override
public void start(Stage primaryStage) throws Exception {
SplitPane root = new SplitPane();
Button button21 = new Button("Click Me21");
Button button22 = new Button("Click Me22");
VBox vBox1 = new VBox(button21,button22);
Button button11 = new Button("Click Me11");
Button button12 = new Button("Click Me12");
BorderPane borderPane = new BorderPane(null, button12,
null, button11, null);
Button button31 = new Button("Click Me31");
Button button32 = new Button("Click Me32");
VBox vBox2 = new VBox(button31,button32);
root.setDividerPositions(0.2f,0.8f);
root.getItems().addAll(vBox1,borderPane,vBox2);
Scene scene = new Scene(root,500,400);
primaryStage.setScene(scene);
primaryStage.show();
}
20%
80%
100%

36. TabPane:
K. N. Toosi University of Technology 36
Tab3Tab1 Tab2
Tab Content

37. Demo 10:
37K. N. Toosi University of Technology
@Override
public void start(Stage primaryStage) throws Exception {
TabPane root = new TabPane();
Tab tab1 = new Tab("First Tab");
tab1.setContent(new Button("Hello"));
Tab tab2 = new Tab("Second Tab");
tab2.setContent(new Button("World"));
root.getTabs().addAll(tab1,tab2);
Scene scene = new Scene(root);
primaryStage.setScene(scene);
primaryStage.show();
}

38. Live Coding: UI Sketch to JavaFX
38K. N. Toosi University of Technology

39. Codes:
• https://github.com/mhrimaz/JavaFXLayoutsDemo
K. N. Toosi University of Technology 39

40. Brought to you by
Happy Coding 
40K. N. Toosi University of Technology