SlideShare a Scribd company logo
1 of 40
Download to read offline
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

More Related Content

What's hot

What's hot (20)

6.applet programming in java
6.applet programming in java6.applet programming in java
6.applet programming in java
 
JAVA PROGRAMMING- GUI Programming with Swing - The Swing Buttons
JAVA PROGRAMMING- GUI Programming with Swing - The Swing ButtonsJAVA PROGRAMMING- GUI Programming with Swing - The Swing Buttons
JAVA PROGRAMMING- GUI Programming with Swing - The Swing Buttons
 
Java Networking
Java NetworkingJava Networking
Java Networking
 
Java awt (abstract window toolkit)
Java awt (abstract window toolkit)Java awt (abstract window toolkit)
Java awt (abstract window toolkit)
 
Java I/O
Java I/OJava I/O
Java I/O
 
Java I/o streams
Java I/o streamsJava I/o streams
Java I/o streams
 
Files in java
Files in javaFiles in java
Files in java
 
Java Input Output and File Handling
Java Input Output and File HandlingJava Input Output and File Handling
Java Input Output and File Handling
 
Java Beans
Java BeansJava Beans
Java Beans
 
Type casting in java
Type casting in javaType casting in java
Type casting in java
 
Java Input Output (java.io.*)
Java Input Output (java.io.*)Java Input Output (java.io.*)
Java Input Output (java.io.*)
 
Applets in java
Applets in javaApplets in java
Applets in java
 
[OOP - Lec 18] Static Data Member
[OOP - Lec 18] Static Data Member[OOP - Lec 18] Static Data Member
[OOP - Lec 18] Static Data Member
 
JAVA AWT
JAVA AWTJAVA AWT
JAVA AWT
 
Inter threadcommunication.38
Inter threadcommunication.38Inter threadcommunication.38
Inter threadcommunication.38
 
JDBC ppt
JDBC pptJDBC ppt
JDBC ppt
 
Java Threads and Concurrency
Java Threads and ConcurrencyJava Threads and Concurrency
Java Threads and Concurrency
 
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)
Basic Concepts of OOPs (Object Oriented Programming in Java)
 
This pointer
This pointerThis pointer
This pointer
 
Collections Framework
Collections FrameworkCollections Framework
Collections Framework
 

Similar to 003 - JavaFX Tutorial - Layouts

Create a java project that - Draw a circle with three random init.pdf
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
 
The Java Fx Platform – A Java Developer’S Guide
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
 
JavaFX 2.0 and Alternative Languages
JavaFX 2.0 and Alternative LanguagesJavaFX 2.0 and Alternative Languages
JavaFX 2.0 and Alternative LanguagesStephen Chin
 
Jetpack Compose - Hands-on February 2020
Jetpack Compose - Hands-on February 2020Jetpack Compose - Hands-on February 2020
Jetpack Compose - Hands-on February 2020Pedro Veloso
 
C# v8 new features - raimundas banevicius
C# v8 new features - raimundas baneviciusC# v8 new features - raimundas banevicius
C# v8 new features - raimundas baneviciusRaimundas Banevičius
 
JavaFX 2.0 With Alternative Languages - JavaOne 2011
JavaFX 2.0 With Alternative Languages - JavaOne 2011JavaFX 2.0 With Alternative Languages - JavaOne 2011
JavaFX 2.0 With Alternative Languages - JavaOne 2011Stephen 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...
JavaFX 2.0 With Alternative Languages - Groovy, Clojure, Scala, Fantom, and V...Stephen Chin
 
Hacking JavaFX with Groovy, Clojure, Scala, and Visage
Hacking JavaFX with Groovy, Clojure, Scala, and VisageHacking JavaFX with Groovy, Clojure, Scala, and Visage
Hacking JavaFX with Groovy, Clojure, Scala, and VisageStephen Chin
 
M.TECH 1ST SEM COMPUTER SCIENCE ADBMS LAB PROGRAMS
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 PROGRAMSSupriya Radhakrishna
 
Exploring Canvas
Exploring CanvasExploring Canvas
Exploring CanvasKevin Hoyt
 
Heaps
HeapsHeaps
HeapsIIUM
 
JavaFX Your Way - Devoxx Version
JavaFX Your Way - Devoxx VersionJavaFX Your Way - Devoxx Version
JavaFX Your Way - Devoxx VersionStephen Chin
 
Java Performance Puzzlers
Java Performance PuzzlersJava Performance Puzzlers
Java Performance PuzzlersDoug Hawkins
 
Fee managment system
Fee managment systemFee managment system
Fee managment systemfairy9912
 
7-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.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.pdfa2zmobiles
 
Building Data Rich Interfaces with JavaFX
Building Data Rich Interfaces with JavaFXBuilding Data Rich Interfaces with JavaFX
Building Data Rich Interfaces with JavaFXStephen Chin
 
1z0 851 exam-java standard edition 6 programmer certified professional
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 professionalIsabella789
 

Similar to 003 - JavaFX Tutorial - Layouts (20)

Create a java project that - Draw a circle with three random init.pdf
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
 
Sbaw090623
Sbaw090623Sbaw090623
Sbaw090623
 
The Java Fx Platform – A Java Developer’S Guide
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
 
JavaFX 2.0 and Alternative Languages
JavaFX 2.0 and Alternative LanguagesJavaFX 2.0 and Alternative Languages
JavaFX 2.0 and Alternative Languages
 
Jetpack Compose - Hands-on February 2020
Jetpack Compose - Hands-on February 2020Jetpack Compose - Hands-on February 2020
Jetpack Compose - Hands-on February 2020
 
C# v8 new features - raimundas banevicius
C# v8 new features - raimundas baneviciusC# v8 new features - raimundas banevicius
C# v8 new features - raimundas banevicius
 
JavaFX 2.0 With Alternative Languages - JavaOne 2011
JavaFX 2.0 With Alternative Languages - JavaOne 2011JavaFX 2.0 With Alternative Languages - JavaOne 2011
JavaFX 2.0 With Alternative Languages - JavaOne 2011
 
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...
JavaFX 2.0 With Alternative Languages - Groovy, Clojure, Scala, Fantom, and V...
 
Hacking JavaFX with Groovy, Clojure, Scala, and Visage
Hacking JavaFX with Groovy, Clojure, Scala, and VisageHacking JavaFX with Groovy, Clojure, Scala, and Visage
Hacking JavaFX with Groovy, Clojure, Scala, and Visage
 
Coding in Style
Coding in StyleCoding in Style
Coding in Style
 
M.TECH 1ST SEM COMPUTER SCIENCE ADBMS LAB PROGRAMS
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
Exploring CanvasExploring Canvas
Exploring Canvas
 
Heaps
HeapsHeaps
Heaps
 
JavaFX Your Way - Devoxx Version
JavaFX Your Way - Devoxx VersionJavaFX Your Way - Devoxx Version
JavaFX Your Way - Devoxx Version
 
Java Performance Puzzlers
Java Performance PuzzlersJava Performance Puzzlers
Java Performance Puzzlers
 
JavaFX introduction
JavaFX introductionJavaFX introduction
JavaFX introduction
 
Fee managment system
Fee managment systemFee managment system
Fee managment system
 
7-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.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
 
Building Data Rich Interfaces with JavaFX
Building Data Rich Interfaces with JavaFXBuilding Data Rich Interfaces with JavaFX
Building Data Rich Interfaces with JavaFX
 
1z0 851 exam-java standard edition 6 programmer certified professional
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
 

More from Mohammad Hossein Rimaz

More from Mohammad Hossein Rimaz (6)

002- JavaFX Tutorial - Getting Started
002- JavaFX Tutorial - Getting Started002- JavaFX Tutorial - Getting Started
002- JavaFX Tutorial - Getting Started
 
Java 9, JShell, and Modularity
Java 9, JShell, and ModularityJava 9, JShell, and Modularity
Java 9, JShell, and Modularity
 
Quick introduction to scala
Quick introduction to scalaQuick introduction to scala
Quick introduction to scala
 
Continuous integration with Jenkins
Continuous integration with JenkinsContinuous integration with Jenkins
Continuous integration with Jenkins
 
Introduction to Scala
Introduction to ScalaIntroduction to Scala
Introduction to Scala
 
JavaFX in Action Part I
JavaFX in Action Part IJavaFX in Action Part I
JavaFX in Action Part I
 

Recently uploaded

About .NET 8 and a first glimpse into .NET9
About .NET 8 and a first glimpse into .NET9About .NET 8 and a first glimpse into .NET9
About .NET 8 and a first glimpse into .NET9Jürgen Gutsch
 
JS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIJS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIIvo Andreev
 
Growing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesGrowing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesSoftwareMill
 
Kawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in TrivandrumKawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in TrivandrumKawika Technologies
 
online pdf editor software solutions.pdf
online pdf editor software solutions.pdfonline pdf editor software solutions.pdf
online pdf editor software solutions.pdfMeon Technology
 
Generative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilGenerative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilVICTOR MAESTRE RAMIREZ
 
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfTobias Schneck
 
20240330_고급진 코드를 위한 exception 다루기
20240330_고급진 코드를 위한 exception 다루기20240330_고급진 코드를 위한 exception 다루기
20240330_고급진 코드를 위한 exception 다루기Chiwon Song
 
Why Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfWhy Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfBrain Inventory
 
Top Software Development Trends in 2024
Top Software Development Trends in  2024Top Software Development Trends in  2024
Top Software Development Trends in 2024Mind IT Systems
 
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLBig Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLAlluxio, Inc.
 
Introduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptxIntroduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptxIntelliSource Technologies
 
Watermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesWatermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesShyamsundar Das
 
ERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxAutus Cyber Tech
 
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine HarmonyLeveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmonyelliciumsolutionspun
 
Deep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - DatacampDeep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - DatacampVICTOR MAESTRE RAMIREZ
 
Cybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadCybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadIvo Andreev
 
Webinar - IA generativa e grafi Neo4j: RAG time!
Webinar - IA generativa e grafi Neo4j: RAG time!Webinar - IA generativa e grafi Neo4j: RAG time!
Webinar - IA generativa e grafi Neo4j: RAG time!Neo4j
 
AI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyAI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyRaymond Okyere-Forson
 
Mastering Kubernetes - Basics and Advanced Concepts using Example Project
Mastering Kubernetes - Basics and Advanced Concepts using Example ProjectMastering Kubernetes - Basics and Advanced Concepts using Example Project
Mastering Kubernetes - Basics and Advanced Concepts using Example Projectwajrcs
 

Recently uploaded (20)

About .NET 8 and a first glimpse into .NET9
About .NET 8 and a first glimpse into .NET9About .NET 8 and a first glimpse into .NET9
About .NET 8 and a first glimpse into .NET9
 
JS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIJS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AI
 
Growing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesGrowing Oxen: channel operators and retries
Growing Oxen: channel operators and retries
 
Kawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in TrivandrumKawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in Trivandrum
 
online pdf editor software solutions.pdf
online pdf editor software solutions.pdfonline pdf editor software solutions.pdf
online pdf editor software solutions.pdf
 
Generative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilGenerative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-Council
 
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
 
20240330_고급진 코드를 위한 exception 다루기
20240330_고급진 코드를 위한 exception 다루기20240330_고급진 코드를 위한 exception 다루기
20240330_고급진 코드를 위한 exception 다루기
 
Why Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfWhy Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdf
 
Top Software Development Trends in 2024
Top Software Development Trends in  2024Top Software Development Trends in  2024
Top Software Development Trends in 2024
 
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLBig Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
 
Introduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptxIntroduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptx
 
Watermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesWatermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security Challenges
 
ERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptx
 
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine HarmonyLeveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
 
Deep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - DatacampDeep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - Datacamp
 
Cybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadCybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and Bad
 
Webinar - IA generativa e grafi Neo4j: RAG time!
Webinar - IA generativa e grafi Neo4j: RAG time!Webinar - IA generativa e grafi Neo4j: RAG time!
Webinar - IA generativa e grafi Neo4j: RAG time!
 
AI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyAI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human Beauty
 
Mastering Kubernetes - Basics and Advanced Concepts using Example Project
Mastering Kubernetes - Basics and Advanced Concepts using Example ProjectMastering Kubernetes - Basics and Advanced Concepts using Example Project
Mastering Kubernetes - Basics and Advanced Concepts using Example Project
 

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