Brought to you by

Graphical User Interface in JavaUsing JavaFX

Layouts

1K. N. Toosi University of Technology

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

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

BorderPane:

K. N. Toosi University of Technology 4

LEFT RIGHTCENTER

TOP

BOTTOM

Demo 1: BorderPane

5K. N. Toosi University of Technology

Demo 1: BorderPane

6K. N. Toosi University of Technology

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.

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

Demo 2:

9K. N. Toosi University of Technology

Demo 2:

10K. N. Toosi University of Technology

Hbox/Vbox:

K. N. Toosi University of Technology 11

Node

Node

Node

Node Node Node

spacing

Demo 3:

12K. N. Toosi University of Technology

Demo 3:

13K. N. Toosi University of Technology

Demo 3:

14K. N. Toosi University of Technology

StackPane:

K. N. Toosi University of Technology 15

Demo 4:

16K. N. Toosi University of Technology

Demo 4:

17K. N. Toosi University of Technology

Demo 4:

18K. N. Toosi University of Technology

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

Demo 5 (1/3):

20K. N. Toosi University of Technology

Demo 5 (2/3):

21K. N. Toosi University of Technology

Demo 5 (3/3):

22K. N. Toosi University of Technology

FlowPane:

K. N. Toosi University of Technology 23

Node2Node4

Node3Node1Node2

Node4Node3

Node1

HGap

VGap

Demo 6:

24K. N. Toosi University of Technology

Demo 6:

25K. N. Toosi University of Technology

Demo 6:

26K. N. Toosi University of Technology

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.

TilePane:

K. N. Toosi University of Technology 27

Node2Node4

Node3Node1

Node2

Node4Node3

Node1

Demo 7:

28K. N. Toosi University of Technology

DialogPane:

• We will talk about Dialogs separately.

K. N. Toosi University of Technology 29

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

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

ScrollPane:

K. N. Toosi University of Technology 32

Some very very very very veryvery very very very very veryvery very very very very veryvery very very very very veryvery very very very very veryvery very very very very veryvery very very very very veryvery very very very very veryvery very very very very veryvery very very very very veryvery very very very very very

very very very very veryLong Text

Some very very very very veryvery very very very very veryvery very very very very veryvery very very very very veryvery very very very very veryvery very very very very veryvery very very very very very

Demo 8:

33K. N. Toosi University of Technology

SplitPane:

K. N. Toosi University of Technology 34

RIGHTBOTTOM BOTTOM

Divider

Divider Position between [0.0 – 1.0]

Demo 9:

35K. N. Toosi University of Technology

20%

80%

100%

TabPane:

K. N. Toosi University of Technology 36

Tab3Tab1 Tab2

Tab Content

Demo 10:

37K. N. Toosi University of Technology

Live Coding: UI Sketch to JavaFX

38K. N. Toosi University of Technology

Codes:

• https://github.com/mhrimaz/JavaFXLayoutsDemo

K. N. Toosi University of Technology 39

Brought to you by

Happy Coding

40K. N. Toosi University of Technology