GUI with JavaFX (3 Hrs.

)
BSc. CSIT 7th Semester
Chapter - 6

Er. Jeewan Rai

Computer Engineering (Bachelor)
Master in Information System Engineering (Master)
 Contents
JavaFX
6.1. Introduction, JavaFX vs Swing, JavaFX Layouts: FlowPane, BorderPane,
Hbox, VBox, GridPane
Chapter – 6 : GUI with JavaFX (3 Hrs.)

6.2. JavaFX UI Controls: Label, TextField, Button, RadioButton, CheckBox,

Advanced JAVA Programming

Hyperlink, Menu, Tooltip, FileChooser.

10/11/2023 Er. Jeewan Rai 2

 JavaFX
JavaFX
• JavaFX is a Java library that is used to develop Desktop applications as well as Rich
Internet Applications (RIA).
• The applications built in JavaFX, can run on multiple platforms including Web,
Chapter – 6 : GUI with JavaFX (3 Hrs.)

Mobile and Desktops.

Advanced JAVA Programming

• JavaFX library such as Fundamentals, 2D Shapes, 3D Shapes, Effects, Animation,

Text, Layouts, UI Controls, Transformations, Charts, JavaFX with CSS, JavaFX with
Media etc.
• JavaFX is intended to replace swing in Java applications as a GUI framework.
However, It provides more functionalities than swing.
• Like Swing, JavaFX also provides its own components
• It is lightweight and hardware accelerated.
• It supports various operating systems including Windows, Linux and Mac OS.
10/11/2023 Er. Jeewan Rai 3
 Advanced JAVA Programming
Chapter – 6 : GUI with JavaFX (3 Hrs.)
JavaFX

10/11/2023
Er. Jeewan Rai
4
 package application;

Window in JavaFX import javafx.application.Application;

import javafx.scene.Scene;
JavaFX import javafx.scene.control.Button;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;
public class FlowPaneTest extends Application {
Override
Chapter – 6 : GUI with JavaFX (3 Hrs.)

public void start(Stage primaryStage) {

primaryStage.setTitle(“Login Page");
Advanced JAVA Programming

FlowPane root = new FlowPane();

root.setVgap(6);
root.setHgap(5);
root.setPrefWrapLength(250);
root.getChildren().add(new Button(“Login"));
Scene scene = new Scene(root, 300, 200);

primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
10/11/2023 Er. Jeewan Rai 5
 JavaFX Layouts
JavaFX • Layouts are the top level container classes that define the UI styles for scene graph objects.
• Layout can be seen as the parent node to all the other nodes.
• All these classes belong to javafx.scene.layout package. javafx.scene.layout.Pane class is the base class for all the
Chapter – 6 : GUI with JavaFX (3 Hrs.)

built-in layout classes in JavaFX.

Advanced JAVA Programming

Class Description

BorderPane Organizes nodes in top, left, right, centre and the bottom of the screen.

FlowPane Organizes the nodes in the horizontal rows according to the available horizontal spaces. Wraps the nodes to
the next line if the horizontal space is less than the total width of the nodes

GridPane Organizes the nodes in the form of rows and columns.

HBox Organizes the nodes in a single row.

Pane It is the base class for all the layout classes.

StackPane Organizes nodes in the form of a stack i.e. one onto another

VBox Organizes nodes in a vertical column.

10/11/2023 Er. Jeewan Rai 6

 JavaFX Layouts
JavaFX
Chapter – 6 : GUI with JavaFX (3 Hrs.)
Advanced JAVA Programming

GridPane FlowPane BorderPane

HBox VBox
10/11/2023 Er. Jeewan Rai 7
 Steps to create layout
JavaFX
• Instantiate the respective layout class.

HBox root = new HBox();

Chapter – 6 : GUI with JavaFX (3 Hrs.)

• Setting the properties for the layout.

Advanced JAVA Programming

root.setSpacing(20);

• Adding nodes to the layout object.

root.getChildren().addAll(<NodeObjects>);

10/11/2023 Er. Jeewan Rai 8

 JavaFX Layouts: FlowPane
JavaFX
• FlowPane layout pane organizes the nodes in a flow that are wrapped at
the flowpane's boundary.
• The horizontal flowpane arranges the nodes in a row and wrap them
Chapter – 6 : GUI with JavaFX (3 Hrs.)

according to the flowpane's width.

Advanced JAVA Programming

• The vertical flowpane arranges the nodes in a column and wrap them
according to the flowpane's height.
• FlowPane layout is represented by javafx.scene.layout.FlowPane class.
• We just need to instantiate this class to create the flowpane layout.

10/11/2023 Er. Jeewan Rai 9

 Property
JavaFX
Property Description Setter Methods
alignment The overall alignment of the flowpane's content. setAlignment(Pos value)

columnHalignment The horizontal alignment of nodes within the columns. setColumnHalignment(HPos Value)
Chapter – 6 : GUI with JavaFX (3 Hrs.)

hgap Horizontal gap between the columns. setHgap(Double value)

Advanced JAVA Programming

orientation Orientation of the flowpane setOrientation(Orientation value)

prefWrapLength The preferred height or width where content should setPrefWrapLength(double value)
wrap in the horizontal or vertical flowpane.

rowValignment The vertical alignment of the nodes within the rows. setRowValignment(VPos value)

vgap The vertical gap among the rows setVgap(Double value)

10/11/2023 https://www.javatpoint.com/javafx-flowpane
Er. Jeewan Rai 10
 package application;
import javafx.application.Application;
import javafx.scene.Scene;
Example: FlowPane
JavaFX
import javafx.scene.control.Button;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;
Chapter – 6 : GUI with JavaFX (3 Hrs.)

public class FlowPaneTest extends Application {

Override
Advanced JAVA Programming

public void start(Stage primaryStage) {

primaryStage.setTitle("FlowPane Example");
FlowPane root = new FlowPane();
root.setVgap(6);
root.setHgap(5);
root.setPrefWrapLength(250);
root.getChildren().add(new Button("Start"));
root.getChildren().add(new Button("Stop"));
root.getChildren().add(new Button("Reset"));
Scene scene = new Scene(root,300,200);

primaryStage.setScene(scene);
primaryStage.show();
}
10/11/2023 Er. Jeewan Rai 11
 JavaFX : BorderPane
JavaFX
• BorderPane arranges the nodes at the left, right, centre, top and bottom of
the screen.
• It is represented by javafx.scene.layout.BorderPane class.
Chapter – 6 : GUI with JavaFX (3 Hrs.)

• This class provides various methods like setRight(), setLeft(), setCenter(),

Advanced JAVA Programming

setBottom() and setTop() which are used to set the position for the
specified nodes.
• We need to instantiate BorderPane class to create the BorderPane layout.

10/11/2023 Er. Jeewan Rai 12

 Properties
JavaFX
Type Property Setter Methods Description

Node Bottom setBottom() Add the node to the bottom of the screen
Node Centre setCentre() Add the node to the centre of the screen
Chapter – 6 : GUI with JavaFX (3 Hrs.)

Node Left setLeft() Add the node to the left of the screen
Advanced JAVA Programming

Node Right setRight() Add the node to the right of the screen
Node Top setTop() Add the node to the top of the screen

10/11/2023 Er. Jeewan Rai 13

 Example: BorderPane
package application;
JavaFX
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.*;
Chapter – 6 : GUI with JavaFX (3 Hrs.)

import javafx.stage.Stage;
public class Label_Test extends Application {
Advanced JAVA Programming

Override
public void start(Stage primaryStage) throws Exception {
BorderPane BPane = new BorderPane();
BPane.setTop(new Label("This will be at the top"));
BPane.setLeft(new Label("This will be at the left"));
BPane.setRight(new Label("This will be at the Right"));
BPane.setCenter(new Label("This will be at the Centre"));
BPane.setBottom(new Label("This will be at the bottom"));
Scene scene = new Scene(BPane,600,400);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
10/11/2023 Er. Jeewan Rai 14
}
 JavaFX Layouts: HBox, VBox
JavaFX
• HBox layout pane arranges the nodes in a single row. It is represented
by javafx.scene.layout.HBox class. We just need to instantiate HBox class in
Chapter – 6 : GUI with JavaFX (3 Hrs.)

order to create HBox layout.

Advanced JAVA Programming

• VBox: Instead of arranging the nodes in horizontal row, Vbox Layout Pane
arranges the nodes in a single vertical column. It is represented
by javafx.scene.layout.VBox class which provides all the methods to deal
with the styling and the distance among the nodes. This class needs to be
instantiated in order to implement VBox layout in our application.

10/11/2023 Er. Jeewan Rai 15

 HBox and VBox
JavaFX
Chapter – 6 : GUI with JavaFX (3 Hrs.)
Advanced JAVA Programming

HBox VBox

10/11/2023 https://www.javatpoint.com/javafx-hbox
Er. Jeewan Rai 16
 JavaFX Layouts: GridPane
JavaFX
• GridPane Layout pane allows us to add the multiple nodes in multiple rows
and columns.
• It is seen as a flexible grid of rows and columns where nodes can be placed
Chapter – 6 : GUI with JavaFX (3 Hrs.)

in any cell of the grid.

Advanced JAVA Programming

• It is represented by javafx.scence.layout.GridPane class.

• We just need to instantiate this class to implement GridPane.
Property Description Setter Methods

alignment Represents the alignment of the grid within the setAlignment(Pos value)
GridPane.
gridLinesVisible This property is intended for debugging. Lines can be setGridLinesVisible(Boolean value)
displayed to show the gidpane's rows and columns by
setting this property to true.

hgap Horizontal gaps among the columns setHgap(Double value)

vgap Vertical gaps among the rows setVgap(Double value)

10/11/2023 Er. Jeewan Rai 17
 Example: GridPane
JavaFX package application;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
Chapter – 6 : GUI with JavaFX (3 Hrs.)

import javafx.scene.layout.GridPane;
import javafx.stage.Stage;
public class Label_Test extends Application {
Advanced JAVA Programming

Override
public void start(Stage primaryStage) throws Exception {
Label first_name=new Label("First Name");
Label last_name=new Label("Last Name");
TextField tf1new TextField();
TextField tf2new TextField();
Button Submit=new Button ("Submit");
GridPane root=new GridPane();
Scene scene = new Scene(root,400,200);
root.addRow(0, first_name,tf1;
root.addRow(1, last_name,tf2;
root.addRow(2, Submit);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
https://www.javatpoint.com/javafx-gridpane
10/11/2023 18
 Label
JavaFX
• Label first_name=new Label("First Name");
Chapter – 6 : GUI with JavaFX (3 Hrs.)
Advanced JAVA Programming

10/11/2023 Er. Jeewan Rai 19

 TextField
JavaFX
• TextField tf1new TextField();
Chapter – 6 : GUI with JavaFX (3 Hrs.)
Advanced JAVA Programming

10/11/2023 Er. Jeewan Rai 20

 Button
JavaFX
• Button Submit=new Button ("Submit");
Chapter – 6 : GUI with JavaFX (3 Hrs.)
Advanced JAVA Programming

10/11/2023 Er. Jeewan Rai 21

 RadioButton
JavaFX
public void start(Stage primaryStage) throws Exception {
// TODO Auto-generated method stub
ToggleGroup group = new ToggleGroup();
RadioButton button1 = new RadioButton("option 1");
Chapter – 6 : GUI with JavaFX (3 Hrs.)

RadioButton button2 = new RadioButton("option 2");

RadioButton button3 = new RadioButton("option 3");
RadioButton button4 = new RadioButton("option 4");
Advanced JAVA Programming

button1.setToggleGroup(group);
button2.setToggleGroup(group);
button3.setToggleGroup(group);
button4.setToggleGroup(group);
VBox root=new VBox();
root.setSpacing(10);
root.getChildren().addAll(button1,button2,button3,button4;
Scene scene=new Scene(root,400,300);
primaryStage.setScene(scene);
primaryStage.setTitle("Radio Button Example");
primaryStage.show();
}

10/11/2023 Er. Jeewan Rai 22

 CheckBox
JavaFX
public void start(Stage primaryStage) throws Exception {
// TODO Auto-generated method stub
Label l = new Label("What do you listen: ");
Chapter – 6 : GUI with JavaFX (3 Hrs.)

CheckBox c1 = new CheckBox("Radio one");

CheckBox c2 = new CheckBox("Radio Mirchi");
CheckBox c3 = new CheckBox("Red FM");
Advanced JAVA Programming

CheckBox c4 = new CheckBox("FM GOLD");

HBox root = new HBox();
root.getChildren().addAll(l,c1,c2,c3,c4;
root.setSpacing(5);
Scene scene=new Scene(root,800,200);
primaryStage.setScene(scene);
primaryStage.setTitle("CheckBox Example");
primaryStage.show();
}

10/11/2023 Er. Jeewan Rai 23

 HyperLink
JavaFX

public void start(Stage primaryStage) throws Exception {

// TODO Auto-generated method stub
Hyperlink hp = new Hyperlink("http://www.javatpoint.com");
Chapter – 6 : GUI with JavaFX (3 Hrs.)

StackPane root = new StackPane();

hp.setOnAction(e → System.out.println("Link Clicked"));
Advanced JAVA Programming

root.getChildren().add(hp);
Scene scene=new Scene(root,400,300);
primaryStage.setScene(scene);
primaryStage.setTitle("Hyperlink Example");
primaryStage.show();
}

10/11/2023 Er. Jeewan Rai 24

 public void start(Stage primaryStage) throws Exception {

Menu // TODO Auto-generated method stub

BorderPane root = new BorderPane();
JavaFX Scene scene = new Scene(root,200,300);
MenuBar menubar = new MenuBar();

Menu FileMenu = new Menu("File");

MenuItem filemenu1new MenuItem("new");
Chapter – 6 : GUI with JavaFX (3 Hrs.)

MenuItem filemenu2new MenuItem("Save");

MenuItem filemenu3new MenuItem("Exit");
Advanced JAVA Programming

FileMenu.getItems().addAll(filemenu1, filemenu2, filemenu3;

Menu EditMenu=new Menu("Edit");

MenuItem EditMenu1new MenuItem("Cut");
MenuItem EditMenu2new MenuItem("Copy");
MenuItem EditMenu3new MenuItem("Paste");
EditMenu.getItems().addAll(EditMenu1, EditMenu2, EditMenu3;

root.setTop(menubar);
menubar.getMenus().addAll(FileMenu, EditMenu);

primaryStage.setScene(scene);
primaryStage.show();
}
10/11/2023 Er. Jeewan Rai 25
 ToolTip
JavaFX
public void start(Stage primaryStage) throws Exception {
// TODO Auto-generated method stub
PasswordField pf = new PasswordField();
Tooltip tool=new Tooltip();
Chapter – 6 : GUI with JavaFX (3 Hrs.)

tool.setText("Information");
pf.setTooltip(tool);
Advanced JAVA Programming

StackPane root = new StackPane();

root.getChildren().add(pf);

Scene scene = new Scene(root,300,200);

primaryStage.setScene(scene);
primaryStage.setTitle("ToolTip Example");
primaryStage.show();

10/11/2023 Er. Jeewan Rai 26

 FileChooser
JavaFX
public void start(Stage primaryStage) throws Exception {
// TODO Auto-generated method stub

FileChooser file = new FileChooser();

Chapter – 6 : GUI with JavaFX (3 Hrs.)

file.setTitle("Open File");
file.showOpenDialog(primaryStage);
Advanced JAVA Programming

HBox root = new HBox();

root.setSpacing(20);

Scene scene = new Scene(root,350,100);

primaryStage.setScene(scene);
primaryStage.setTitle("FileChooser Example");
primaryStage.show();

}
10/11/2023 Er. Jeewan Rai 27
 Advanced JAVA Programming
Chapter – 6 : GUI with JavaFX (3 Hrs.)
JavaFX

10/11/2023
JavaFX UI Controls

Er. Jeewan Rai

28
 GridPane: LoginPage.java
import javafx.application.Application;
JavaFX import static javafx.application.Application.launch; //Setting the vertical and horizontal gaps between the columns
import javafx.geometry.Insets; gridPane.setVgap(5);
import javafx.geometry.Pos; gridPane.setHgap(5);

import javafx.scene.Scene; //Setting the Grid alignment

import javafx.scene.control.Button; gridPane.setAlignment(Pos.CENTER);
import javafx.scene.control.PasswordField;
import javafx.scene.layout.GridPane; //Arranging all the nodes in the grid
Chapter – 6 : GUI with JavaFX (3 Hrs.)

import javafx.scene.text.Text; gridPane.add(text1, 0, 0);

import javafx.scene.control.TextField; gridPane.add(textField1, 1, 0);
import javafx.stage.Stage; gridPane.add(text2, 0, 1);
gridPane.add(textField2, 1, 1);
public class LoginPage extends Application {
Advanced JAVA Programming

gridPane.add(button1, 0, 2);
@Override gridPane.add(button2, 1, 2);
public void start(Stage stage) {
//creating label //Styling nodes
Text text1 = new Text("Email"); button1.setStyle("-fx-background-color: darkslateblue; -fx-text-fill: white;");
Text text2 = new Text("Password"); button2.setStyle("-fx-background-color: darkslateblue; -fx-text-fill: white;");

//Creating Text Filed for email text1.setStyle("-fx-font: normal bold 20px 'serif' ");
TextField textField1 = new TextField(); text2.setStyle("-fx-font: normal bold 20px 'serif' ");
PasswordField textField2 = new PasswordField(); gridPane.setStyle("-fx-background-color: BEIGE;");

//Creating Buttons //Creating a scene object

Button button1 = new Button("Submit"); Scene scene = new Scene(gridPane);
Button button2 = new Button("Clear");
//Setting title to the Stage
//Creating a Grid Pane stage.setTitle("CSS Example");
GridPane gridPane = new GridPane();
//Adding scene to the stage
//Setting size for the pane stage.setScene(scene);
gridPane.setMinSize(400, 200);
//Displaying the contents of the stage
//Setting the padding stage.show();
gridPane.setPadding(new Insets(10, 10, 10, 10)); }
public static void main(String args[]){
launch(args);
10/11/2023 } Er. Jeewan Rai 29
}
 JavaFX Event Handling
JavaFX
▪ Mouse Event − This is an input event that occurs when a mouse is clicked. It is represented by the class
named MouseEvent. It includes actions like mouse clicked, mouse pressed, mouse released, mouse
moved, mouse entered target, mouse exited target, etc.
Chapter – 6 : GUI with JavaFX (3 Hrs.)

▪ Key Event − This is an input event that indicates the key stroke occurred on a node. It is represented by
the class named KeyEvent. This event includes actions like key pressed, key released and key typed.
Advanced JAVA Programming

▪ Drag Event − This is an input event which occurs when the mouse is dragged. It is represented by the
class named DragEvent. It includes actions like drag entered, drag dropped, drag entered target, drag
exited target, drag over, etc.
▪ Window Event − This is an event related to window showing/hiding actions. It is represented by the
class named WindowEvent. It includes actions like window hiding, window shown, window hidden,
window showing

10/11/2023 Er. Jeewan Rai 30

 Example
JavaFX
Import packages Set action
import javafx.event.ActionEvent; Button b = new Button("Add");
import javafx.event.EventHandler; b.setOnAction(new Handler());
Chapter – 6 : GUI with JavaFX (3 Hrs.)

Event handling
Advanced JAVA Programming

class Handler implements EventHandler<ActionEvent>{

@Override
public void handle(ActionEvent ae){
int n1 = Integer.parseInt(t1.getText());
int n2 = Integer.parseInt(t2.getText());

lr.setText("Sum="+(n1+n2));
}
}

10/11/2023 Er. Jeewan Rai 31

 Registration
JavaFX
Chapter – 6 : GUI with JavaFX (3 Hrs.)
Advanced JAVA Programming

10/11/2023 https://www.tutorialspoint.com/javafx/javafx_ui_controls.htm
Er. Jeewan Rai 32
 Advanced JAVA Programming
Chapter – 6 : GUI with JavaFX (3 Hrs.)
JavaFX

10/11/2023
Er. Jeewan Rai
The End

33