Lab05: GUI Programming with JavaFX

In this lab, you will practice with:

● Use SceneBuilder to design a graphical user interface
● JavaFX containers: AnchorPane, BorderPane, GridPane, HBox, VBox, …
● JavaFX data-driven UI: TableView, ListView, …
● JavaFX property binding
● Switch scenes in JavaFX application
1st period ● JavaFX

(12h30-1h15)

2nd period ● Exception

(1h15 - 2h00)

Deadline: 23:59 - 23/05/2025

Introduction to JavaFX
● Written in Java − The JavaFX library is written in Java and is available for the languages that can be
executed on a JVM.
● FXML − JavaFX features a language known as FXML, which is a HTML like declarative markup
language. The sole purpose of this language is to define a user Interface.
● Scene Builder − JavaFX provides an application named Scene Builder. The users can access a drag
and drop design interface, which is used to develop FXML applications
● Swing Interoperability − In a JavaFX application, you can embed Swing content using the Swing
Node class
● Built-in UI controls − JavaFX library caters UI controls using which we can develop a full-featured
application.
● CSS like Styling − JavaFX provides a CSS like styling. By using this, you can improve the design of
your application with a simple knowledge of CSS.
● Tutorial: https://jenkov.com/tutorials/javafx/overview.html
Install JavaFX
Eclipse:
Video: https://youtu.be/nz8P528uGjk?feature=shared
Docs: https://www.tutorialspoint.com/javafx/javafx_installation_using_eclipse.htm
IntelliJ:
Video: https://youtu.be/IZCwawKILsk?feature=shared
Docs: https://www.jetbrains.com/help/idea/javafx.html#create-project
Visual Studio Code:
Video: https://youtu.be/YtXtwar4v9U?feature=shared
Docs: https://www.tutorialspoint.com/javafx/javafx_installation_using_visual_studio_code.htm
Example 1: Hello World
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class JavaFXHello extends Application {

private Button btnHello; // Declare a "Button" control

@Override
public void start(Stage primaryStage) {
// Construct the "Button" and attach an "EventHandler"
btnHello = new Button();
btnHello.setText("Say Hello");
// Using JDK 8 Lambda Expression to construct an EventHandler<ActionEvent>
btnHello.setOnAction(evt -> System.out.println("Hello World!"));

// Construct a scene graph of nodes

StackPane root = new StackPane(); // The root of scene graph is a layout node
root.getChildren().add(btnHello); // The root node adds Button as a child

Scene scene = new Scene(root, 300, 100); // Construct a scene given the root of scene graph
primaryStage.setScene(scene); // The stage sets scene
primaryStage.setTitle("Hello"); // Set window's title
primaryStage.show(); // Set visible (show it)
}

public static void main(String[] args) {

launch(args);
}
}
JavaFX application architecture (GUI)
JavaFX uses the metaphor of a theater to model
the graphics application.

A stage (defined by the javafx.stage.Stage

class) represents the top-level container
(window).

The individual controls (or components) are

contained in a scene (defined by the
javafx.scene.Scene class).

An application can have more than one scenes,

but only one of the scenes can be displayed on
the stage at any given time.

The contents of a scene is represented in a

hierarchical scene graph of nodes (defined by
javafx.scene.Node).
Lifecycle of JavaFX application
● JavaFX Application class has three life cycle methods: start(),
stop(), init()
● They do nothing by default. You can override to implement something
● Whenever a JavaFX application is launched, the following actions will be
carried out:
○ An instance of the application class is created.
○ init() method is called.
○ The start() method is called.
○ The launcher waits for the application to finish and calls the stop()
method
● When the last window of the application is closed, the JavaFX application is
terminated implicitly
● You can terminate a JavaFX application explicitly using the methods
Platform.exit() or System.exit(int)
Creating a JavaFX application
● To create a JavaFX application, you need to instantiate the Application class and implement its abstract
method start().
● In the main method, you have to launch the application using the launch() method. This method
internally calls the start() method of the Application class

public class JavafxSample extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
/*
Code for JavaFX application.
(Stage, scene, scene graph)
*/
}
public static void main(String args[]){
launch(args);
}
}
JavaFX application template
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.stage.Stage;
......

public class JavaFXTemplate extends Application {

// Private variables
......

@Override
public void start(Stage primaryStage) {
......

// Construct a scene graph of nodes

Xxx root = ...... // Construct the root of the scene graph
root.getChildren().add(......); // Root node add child node
root.getChildren().addAll(..., ...); // Root node add child nodes

// Construct a scene with the root of the scene graph, width and height
Scene scene = new Scene(root, 300, 100);
// Set the scene of the stage
primaryStage.setScene(scene);
// Set the window title
primaryStage.setTitle("Hello");
// Show the stage
primaryStage.show();
}

public static void main(String[] args) {

// Launch the application by invoking start()
launch(args);
}
}
Exception
What is exception ?

An exception is an event that occurs in the execution of a program and it breaks the expected flow of the
program.

Some scenarios where an exception occurs

● A user has entered an invalid data.

● A file that needs to be opened cannot be found.
● A network connection has been lost in the middle of communications or the JVM has run out of
memory.

Tutorial: https://dev.java/learn/exceptions/