003 - JavaFX Tutorial - Layouts

Brought to you by
Graphical User Interface in Java
Using 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:
Region
Control
SplitPane ScrollPane
Accordion TabPane
Pane
AnchorPane BorderPane
DialogPane FlowPane
VBox HBox
GridPane StackPane
TilePane

BorderPane:
LEFT RIGHTCENTER
TOP
BOTTOM

Demo 1: BorderPane
@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();
}

Demo 1: BorderPane
@Override
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);
//Alignments
//Margin
}
Rectangle bottom = new Rectangle(400, 100,
Color.RED);
//Alignments
//Margin

AcnchorPane:
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 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.
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:
@Override
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);
}

Demo 2:
@Override
AnchorPane root = new AnchorPane();
Button button = new Button("You Can Click Me");
root.getChildren().add(button);
}
import javafx.scene.control.Button;
import javafx.scene.layout.AnchorPane;
…
Button button = new Button("You Can Click
Me");

Hbox/Vbox:
Node
Node
Node
Node Node Node
spacing

Demo 3:
@Override
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);
Circle circle = new Circle(20);
hbox.getChildren().add(circle);
}
}

Demo 3:
@Override
root.setLeft(vbox);
}
root.setTop(hbox);
}
}
root.setLeft(vbox);
}
root.setTop(hbox);
}

Demo 3:
@Override
root.setLeft(vbox);
}
hbox.setAlignment(Pos.CENTER);
root.setTop(hbox);
}
}

StackPane:

Demo 4:
@Override
StackPane root = new StackPane();
for (int i = 0; i < 90; i += 10) {
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);
}
You can set the alignment of components
with: root.setAlignment( Pos.? );

Demo 4:
@Override
for (int i = 0; i < 90; i += 10) {
}
}
for (int i = 0; i < 90; i += 10) {
}

Demo 4:
@Override
for (int i = 0; i < 90; i += 10) {
}
}

GridPane:
(0,0) (1,0) (2,0)
(0,1) (1,1)
(0,2) (1,2) (2,3)
padding
hgap
vgap

Demo 5 (1/3):
@Override
GridPane root = new GridPane();
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);
. . . . .
}

Demo 5 (2/3):
@Override
. . . . .
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");
. . . . .
}

Demo 5 (3/3):
@Override
. . . . .
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);
}

FlowPane:
Node2
Node4
Node3Node1
Node2
Node4
Node3
Node1
HGap
VGap

Demo 6:
@Override
FlowPane root = new FlowPane();
root.setHgap(10);
root.setVgap(30);
Button button1 = new Button("Button1");
root.getChildren().add(button1);
button2.setPrefSize(100, 100);
TextField textField = new TextField("Text Field");
textField.setPrefWidth(110);
root.getChildren().add(textField);
}

Demo 6:
@Override
root.setHgap(10);
root.setVgap(30);
}
root.setHgap(10);
root.setVgap(30);

Demo 6:
@Override
FlowPane root = new FlowPane(Orientation.VERTICAL);
root.setHgap(10);
root.setVgap(30);
}
FlowPane root = new
FlowPane(Orientation.VERTICAL);
root.setHgap(10);
root.setVgap(30);
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:
Node2
Node4
Node3Node1
Node2
Node4Node3
Node1

Demo 7:
@Override
TilePane root = new TilePane(Orientation.HORIZONTAL);
root.setHgap(10);
root.setVgap(30);
root.setTileAlignment(Pos.TOP_CENTER);
}

DialogPane:
• We will talk about Dialogs separately.

JavaFX Containers Hierarchy:
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.

ScrollPane:
Some very very very very very
very very very very very very
very very very very very
Long Text
Some very very very very very

Demo 8:
@Override
StackPane stackPane = new StackPane();
ScrollPane root = new ScrollPane();
root.setPannable(true);
root.setFitToHeight(true);
root.setFitToWidth(true);
stackPane.getChildren().add(rectangle);
root.setContent(stackPane);
}

SplitPane:
RIGHTBOTTOM BOTTOM
Divider
Divider Position
between [0.0 – 1.0]

Demo 9:
@Override
SplitPane root = new SplitPane();
Button button21 = new Button("Click Me21");
VBox vBox1 = new VBox(button21,button22);
BorderPane borderPane = new BorderPane(null, button12,
null, button11, null);
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);
}
20%
80%
100%

TabPane:
Tab3Tab1 Tab2
Tab Content

Demo 10:
@Override
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);
}

Live Coding: UI Sketch to JavaFX

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

Brought to you by
Happy Coding 

003 - JavaFX Tutorial - Layouts

More Related Content

What's hot (20)

Similar to 003 - JavaFX Tutorial - Layouts (20)

More from Mohammad Hossein Rimaz (7)

Recently uploaded (20)

003 - JavaFX Tutorial - Layouts