JavaFX Basics

Prepared by: Abdirizak Warsame Abdulle 1

 JavaFX vs Swing and AWT
Swing and AWT are replaced by the JavaFX platform for
developing rich Internet applications (RIA).

When Java was introduced, the GUI classes were bundled in a

library known as the Abstract Windows Toolkit (AWT). AWT is
fine for developing simple graphical user interfaces, but not for
developing comprehensive GUI projects. In addition, AWT is
prone to platform-specific bugs. The AWT user-interface
components were replaced by a more robust, versatile, and
flexible library known as Swing components. Swing components
are painted directly on canvases using Java code. Swing
components depend less on the target platform and use less of the
native GUI resource. With the release of Java 8, Swing is replaced
by a completely new GUI platform known as JavaFX.

Prepared by: Abdirizak Warsame Abdulle 2

 What is JavaFX
 A media/graphics framework for creating GUIs in Java
applications
 FavaFX is intended to replace Swing as the standard GUI
library for Java SE
 More powerful
 Used to create both desktop and web applications
 Like Swing, it draws its own components, less communication
with OS

Prepared by: Abdirizak Warsame Abdulle 3

What is JavaFX

Prepared by: Abdirizak Warsame Abdulle 4

 Scene Builder
 Visual UI design tool
 Uses drag-and-drop features to create components in
your application
 GUIs are created a lot faster
 Ability to apply CSS on the components of the UI
 Makes use of FXML - new XML-based markup language for
defining UIs
 Can setup link to JavaFX Controller class

Prepared by: Abdirizak Warsame Abdulle 5

Scene Builder

Prepared by: Abdirizak Warsame Abdulle 6

 Basic Structure of JavaFX
 Application
 Override the start(Stage) method
 Stage, Scene, and Nodes

Stage
Scene

Button

Prepared by: Abdirizak Warsame Abdulle 7

 JavaFX Program Structure
JavaFX Main Class
Extends JavaFX Application
Contains main() and launch() methods
launch() method will initialize and call start()
method

Prepared by: Abdirizak Warsame Abdulle 8

JavaFX Program Structure

Prepared by: Abdirizak Warsame Abdulle 9

 JavaFX Program Structure
FXML
xml based language
Describes UI appearance
Controlled by Scene Builder

Prepared by: Abdirizak Warsame Abdulle 10

 JavaFX Classes
 Stage
– Represents the main container and window
 Scene
– Adds features to Stage, representing FXML
layouts
 FXMLLoader
– Handles parsing of FXML files into Java Class
– @FXML keyword links private Java variables to
corresponding FXML components
– ex: @FXML private Label lblMessage;

Prepared by: Abdirizak Warsame Abdulle 11

Common JavaFX controls and
their most common methods /
properties

Prepared by: Abdirizak Warsame Abdulle 12

Common methods and properties
 Label and TextField
– getText()
– setText()
– setPromptText(value) – for TextField
– isFocused(), requestFocus – for TextField
 Button
– Default Button
– Cancel Button

Prepared by: Abdirizak Warsame Abdulle 13

Common methods and properties
 CheckBox and RadioButton
– isSelected()
– setSelected()
– toggleGroup (property for RadioButton)
 TextArea
– setText()
– appendText()

Prepared by: Abdirizak Warsame Abdulle 14

Common methods and properties
ComboBox and ChoiceBox and ListView
Adding Items:
– getItems().add("Ali");
– getItems().addAll("Abdi", "Ayan");
– getItems().addAll(names); //Array
setPromptText() – for ComboBox

Prepared by: Abdirizak Warsame Abdulle 15

Common methods and properties
ComboBox and ChoiceBox and ListView
Removing Items:
– getItems().remove(index);
– getItems().remove("Ali");
– getItems().removeAll("Abdi", "Ayan");
– getItems().removeAll(names); //Array

Prepared by: Abdirizak Warsame Abdulle 16

Common methods and properties
ComboBox and ChoiceBox and ListView
Clearing All Items:
– getItems().clear();
Reading Data:
– getSelectionModel().getSelectedIndex()
– getSelectionModel().getSelectedItem()
– getSelectionModel().getSelectedItems()

Prepared by: Abdirizak Warsame Abdulle 17

Common methods and properties
ComboBox and ChoiceBox and ListView
Checking if nothing is selected:
– getSelectionModel().isEmpty() will return true
or false.
Change Selection Mode of a ListView:
– getSelectionModel().setSelectionMode(Selectio
nMode.MULTIPLE);

Prepared by: Abdirizak Warsame Abdulle 18

Common methods and properties
 Getting all the items in the ListView:
– lv.getItems();
 Count the number of elements in a
ListView:
– lv.getItems().size();

Prepared by: Abdirizak Warsame Abdulle 19

Displaying Images

Prepared by: Abdirizak Warsame Abdulle 20

 Using Multiple Stages
 Create 2 files:
– fxml file & Java class (controller file)
 The load the FXML document using
FXMLLoader
 Create a Scene using the FXML root node
 Create Stage and set the Scene into the
Stage, then show the stage.
 Finally, hide the previous Stage

Prepared by: Abdirizak Warsame Abdulle 21

Using Multiple Stages

Prepared by: Abdirizak Warsame Abdulle 22

 JavaFX Dialogs
 JavaFX uses Alert class to create dialogs
Alert a = new Alert(Alert.AlertType.TYPE);
 AlertTypes:
– INFORMATION
– WARNING
– ERROR
– CONFIRMATION

Prepared by: Abdirizak Warsame Abdulle 23

 JavaFX Dialogs
 setTitle(string)
 setContentText(string)
 setHeaderText(string) -or- setHeaderText(null)
 getDialogPane().setContent(node)
 getDialogPane().setExpandableContent(node)
 show() and showAndWait()

Prepared by: Abdirizak Warsame Abdulle 24