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:
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
@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
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));
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 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.
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();
}
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);
Hbox/Vbox:
K. N. Toosi University of Technology 11
Node
Node
Node
Node Node Node
spacing
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();
}
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);
}
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();
}
StackPane:
K. N. Toosi University of Technology 15
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.? );
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);
}
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);
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
@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);
. . . . .
}
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");
. . . . .
}
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();
}
FlowPane:
K. N. Toosi University of Technology 23
Node2
Node4
Node3Node1
Node2
Node4
Node3
Node1
HGap
VGap
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();
}
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));
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.
TilePane:
K. N. Toosi University of Technology 27
Node2
Node4
Node3Node1
Node2
Node4Node3
Node1
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();
}
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 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
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();
}
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
@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%
TabPane:
K. N. Toosi University of Technology 36
Tab3Tab1 Tab2
Tab Content
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();
}
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
1 of 40

Recommended

Java threading by
Java threadingJava threading
Java threadingChinh Ngo Nguyen
2.8K views57 slides
Implicit objects advance Java by
Implicit objects advance JavaImplicit objects advance Java
Implicit objects advance JavaDarshit Metaliya
1.2K views20 slides
Jdbc ppt by
Jdbc pptJdbc ppt
Jdbc pptVikas Jagtap
5K views90 slides
Java applet by
Java appletJava applet
Java appletRohan Gajre
1.1K views18 slides
Object oreinted php | OOPs by
Object oreinted php | OOPsObject oreinted php | OOPs
Object oreinted php | OOPsRavi Bhadauria
4.7K views29 slides
Thread priorities by
Thread prioritiesThread priorities
Thread prioritiesThen Murugeshwari
2.2K views17 slides

More Related Content

What's hot

002- JavaFX Tutorial - Getting Started by
002- JavaFX Tutorial - Getting Started002- JavaFX Tutorial - Getting Started
002- JavaFX Tutorial - Getting StartedMohammad Hossein Rimaz
2.9K views18 slides
Python – Object Oriented Programming by
Python – Object Oriented Programming Python – Object Oriented Programming
Python – Object Oriented Programming Raghunath A
388 views9 slides
Python OOPs by
Python OOPsPython OOPs
Python OOPsBinay Kumar Ray
1.2K views40 slides
Applets by
AppletsApplets
AppletsSanthiNivas
341 views27 slides
Object Oriented Programming with Java by
Object Oriented Programming with JavaObject Oriented Programming with Java
Object Oriented Programming with Javabackdoor
13.8K views36 slides
004 - JavaFX Tutorial - Event Handling by
004 - JavaFX Tutorial - Event Handling004 - JavaFX Tutorial - Event Handling
004 - JavaFX Tutorial - Event HandlingMohammad Hossein Rimaz
3.3K views47 slides

What's hot(20)

Python – Object Oriented Programming by Raghunath A
Python – Object Oriented Programming Python – Object Oriented Programming
Python – Object Oriented Programming
Raghunath A388 views
Object Oriented Programming with Java by backdoor
Object Oriented Programming with JavaObject Oriented Programming with Java
Object Oriented Programming with Java
backdoor13.8K views
Java Collection framework by ankitgarg_er
Java Collection frameworkJava Collection framework
Java Collection framework
ankitgarg_er14.3K views
Basic Concepts of OOPs (Object Oriented Programming in Java) by Michelle Anne Meralpis
Basic Concepts of OOPs (Object Oriented Programming in Java)Basic Concepts of OOPs (Object Oriented Programming in Java)
Basic Concepts of OOPs (Object Oriented Programming in Java)
Xpath in Selenium | Selenium Xpath Tutorial | Selenium Xpath Examples | Selen... by Edureka!
Xpath in Selenium | Selenium Xpath Tutorial | Selenium Xpath Examples | Selen...Xpath in Selenium | Selenium Xpath Tutorial | Selenium Xpath Examples | Selen...
Xpath in Selenium | Selenium Xpath Tutorial | Selenium Xpath Examples | Selen...
Edureka!984 views
JAVA GUI PART I by OXUS 20
JAVA GUI PART IJAVA GUI PART I
JAVA GUI PART I
OXUS 203.9K views
Java And Multithreading by Shraddha
Java And MultithreadingJava And Multithreading
Java And Multithreading
Shraddha7.1K views

Similar to 003 - JavaFX Tutorial - Layouts

Create a java project that - Draw a circle with three random init.pdf by
Create a java project that - Draw a circle with three random init.pdfCreate a java project that - Draw a circle with three random init.pdf
Create a java project that - Draw a circle with three random init.pdfarihantmobileselepun
2 views8 slides
Sbaw090623 by
Sbaw090623Sbaw090623
Sbaw090623Atsushi Tadokoro
868 views57 slides
The Java Fx Platform – A Java Developer’S Guide by
The Java Fx Platform – A Java Developer’S GuideThe Java Fx Platform – A Java Developer’S Guide
The Java Fx Platform – A Java Developer’S GuideStephen Chin
3.3K views88 slides
JavaFX 2.0 and Alternative Languages by
JavaFX 2.0 and Alternative LanguagesJavaFX 2.0 and Alternative Languages
JavaFX 2.0 and Alternative LanguagesStephen Chin
2.4K views82 slides
Jetpack Compose - Hands-on February 2020 by
Jetpack Compose - Hands-on February 2020Jetpack Compose - Hands-on February 2020
Jetpack Compose - Hands-on February 2020Pedro Veloso
51 views31 slides
C# v8 new features - raimundas banevicius by
C# v8 new features - raimundas baneviciusC# v8 new features - raimundas banevicius
C# v8 new features - raimundas baneviciusRaimundas Banevičius
31 views44 slides

Similar to 003 - JavaFX Tutorial - Layouts(20)

Create a java project that - Draw a circle with three random init.pdf by arihantmobileselepun
Create a java project that - Draw a circle with three random init.pdfCreate a java project that - Draw a circle with three random init.pdf
Create a java project that - Draw a circle with three random init.pdf
The Java Fx Platform – A Java Developer’S Guide by Stephen Chin
The Java Fx Platform – A Java Developer’S GuideThe Java Fx Platform – A Java Developer’S Guide
The Java Fx Platform – A Java Developer’S Guide
Stephen Chin3.3K views
JavaFX 2.0 and Alternative Languages by Stephen Chin
JavaFX 2.0 and Alternative LanguagesJavaFX 2.0 and Alternative Languages
JavaFX 2.0 and Alternative Languages
Stephen Chin2.4K views
Jetpack Compose - Hands-on February 2020 by Pedro Veloso
Jetpack Compose - Hands-on February 2020Jetpack Compose - Hands-on February 2020
Jetpack Compose - Hands-on February 2020
Pedro Veloso51 views
JavaFX 2.0 With Alternative Languages - JavaOne 2011 by Stephen Chin
JavaFX 2.0 With Alternative Languages - JavaOne 2011JavaFX 2.0 With Alternative Languages - JavaOne 2011
JavaFX 2.0 With Alternative Languages - JavaOne 2011
Stephen Chin1.7K views
JavaFX 2.0 With Alternative Languages - Groovy, Clojure, Scala, Fantom, and V... by Stephen Chin
JavaFX 2.0 With Alternative Languages - Groovy, Clojure, Scala, Fantom, and V...JavaFX 2.0 With Alternative Languages - Groovy, Clojure, Scala, Fantom, and V...
JavaFX 2.0 With Alternative Languages - Groovy, Clojure, Scala, Fantom, and V...
Stephen Chin2.6K views
Hacking JavaFX with Groovy, Clojure, Scala, and Visage by Stephen Chin
Hacking JavaFX with Groovy, Clojure, Scala, and VisageHacking JavaFX with Groovy, Clojure, Scala, and Visage
Hacking JavaFX with Groovy, Clojure, Scala, and Visage
Stephen Chin3.4K views
Coding in Style by scalaconfjp
Coding in StyleCoding in Style
Coding in Style
scalaconfjp1.4K views
M.TECH 1ST SEM COMPUTER SCIENCE ADBMS LAB PROGRAMS by Supriya Radhakrishna
M.TECH 1ST SEM COMPUTER SCIENCE ADBMS LAB PROGRAMSM.TECH 1ST SEM COMPUTER SCIENCE ADBMS LAB PROGRAMS
M.TECH 1ST SEM COMPUTER SCIENCE ADBMS LAB PROGRAMS
Exploring Canvas by Kevin Hoyt
Exploring CanvasExploring Canvas
Exploring Canvas
Kevin Hoyt1.7K views
Heaps by IIUM
HeapsHeaps
Heaps
IIUM1.3K views
JavaFX Your Way - Devoxx Version by Stephen Chin
JavaFX Your Way - Devoxx VersionJavaFX Your Way - Devoxx Version
JavaFX Your Way - Devoxx Version
Stephen Chin1.4K views
Java Performance Puzzlers by Doug Hawkins
Java Performance PuzzlersJava Performance Puzzlers
Java Performance Puzzlers
Doug Hawkins617 views
Fee managment system by fairy9912
Fee managment systemFee managment system
Fee managment system
fairy99123K views
7-13 LAB- BST validity checker- Please code this in C++- I've been hav.pdf by a2zmobiles
7-13 LAB- BST validity checker- Please code this in C++- I've been hav.pdf7-13 LAB- BST validity checker- Please code this in C++- I've been hav.pdf
7-13 LAB- BST validity checker- Please code this in C++- I've been hav.pdf
a2zmobiles103 views
Building Data Rich Interfaces with JavaFX by Stephen Chin
Building Data Rich Interfaces with JavaFXBuilding Data Rich Interfaces with JavaFX
Building Data Rich Interfaces with JavaFX
Stephen Chin2.4K views
1z0 851 exam-java standard edition 6 programmer certified professional by Isabella789
1z0 851 exam-java standard edition 6 programmer certified professional1z0 851 exam-java standard edition 6 programmer certified professional
1z0 851 exam-java standard edition 6 programmer certified professional
Isabella78980 views

Recently uploaded

.NET Deserialization Attacks by
.NET Deserialization Attacks.NET Deserialization Attacks
.NET Deserialization AttacksDharmalingam Ganesan
7 views50 slides
The Path to DevOps by
The Path to DevOpsThe Path to DevOps
The Path to DevOpsJohn Valentino
6 views6 slides
Bootstrapping vs Venture Capital.pptx by
Bootstrapping vs Venture Capital.pptxBootstrapping vs Venture Capital.pptx
Bootstrapping vs Venture Capital.pptxZeljko Svedic
16 views17 slides
Quality Engineer: A Day in the Life by
Quality Engineer: A Day in the LifeQuality Engineer: A Day in the Life
Quality Engineer: A Day in the LifeJohn Valentino
10 views18 slides
predicting-m3-devopsconMunich-2023-v2.pptx by
predicting-m3-devopsconMunich-2023-v2.pptxpredicting-m3-devopsconMunich-2023-v2.pptx
predicting-m3-devopsconMunich-2023-v2.pptxTier1 app
14 views33 slides
nintendo_64.pptx by
nintendo_64.pptxnintendo_64.pptx
nintendo_64.pptxpaiga02016
7 views7 slides

Recently uploaded(20)

Bootstrapping vs Venture Capital.pptx by Zeljko Svedic
Bootstrapping vs Venture Capital.pptxBootstrapping vs Venture Capital.pptx
Bootstrapping vs Venture Capital.pptx
Zeljko Svedic16 views
Quality Engineer: A Day in the Life by John Valentino
Quality Engineer: A Day in the LifeQuality Engineer: A Day in the Life
Quality Engineer: A Day in the Life
John Valentino10 views
predicting-m3-devopsconMunich-2023-v2.pptx by Tier1 app
predicting-m3-devopsconMunich-2023-v2.pptxpredicting-m3-devopsconMunich-2023-v2.pptx
predicting-m3-devopsconMunich-2023-v2.pptx
Tier1 app14 views
Advanced API Mocking Techniques Using Wiremock by Dimpy Adhikary
Advanced API Mocking Techniques Using WiremockAdvanced API Mocking Techniques Using Wiremock
Advanced API Mocking Techniques Using Wiremock
Dimpy Adhikary5 views
Top-5-production-devconMunich-2023.pptx by Tier1 app
Top-5-production-devconMunich-2023.pptxTop-5-production-devconMunich-2023.pptx
Top-5-production-devconMunich-2023.pptx
Tier1 app10 views
Transport Management System - Shipment & Container Tracking by Freightoscope
Transport Management System - Shipment & Container TrackingTransport Management System - Shipment & Container Tracking
Transport Management System - Shipment & Container Tracking
Freightoscope 6 views
predicting-m3-devopsconMunich-2023.pptx by Tier1 app
predicting-m3-devopsconMunich-2023.pptxpredicting-m3-devopsconMunich-2023.pptx
predicting-m3-devopsconMunich-2023.pptx
Tier1 app10 views
FOSSLight Community Day 2023-11-30 by Shane Coughlan
FOSSLight Community Day 2023-11-30FOSSLight Community Day 2023-11-30
FOSSLight Community Day 2023-11-30
Shane Coughlan8 views
How To Make Your Plans Suck Less — Maarten Dalmijn at the 57th Hands-on Agile... by Stefan Wolpers
How To Make Your Plans Suck Less — Maarten Dalmijn at the 57th Hands-on Agile...How To Make Your Plans Suck Less — Maarten Dalmijn at the 57th Hands-on Agile...
How To Make Your Plans Suck Less — Maarten Dalmijn at the 57th Hands-on Agile...
Stefan Wolpers44 views
Electronic AWB - Electronic Air Waybill by Freightoscope
Electronic AWB - Electronic Air Waybill Electronic AWB - Electronic Air Waybill
Electronic AWB - Electronic Air Waybill
Freightoscope 6 views
Streamlining Your Business Operations with Enterprise Application Integration... by Flexsin
Streamlining Your Business Operations with Enterprise Application Integration...Streamlining Your Business Operations with Enterprise Application Integration...
Streamlining Your Business Operations with Enterprise Application Integration...
Flexsin 5 views

003 - JavaFX Tutorial - Layouts

  • 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
  • 40. Brought to you by Happy Coding  40K. N. Toosi University of Technology