Upload
others
View
13
Download
0
Embed Size (px)
Citation preview
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