CHAPTER

15
Creating GUI
Applications
with JavaFX
and Scene
Builder

Copyright © 2016 Pearson Education, Inc., Hoboken NJ

 Topics
– Introduction
– Scene Graphs
– Using Scene Builder to Create JavaFX Applications
– Writing the Application Code
– RadioButtons and CheckBoxes
– Displaying Images

©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-2
 Introduction
• JavaFX is a Java library for developing rich
applications that employ graphics.
• You can use it to create:
– GUI applications, as well as applications that
display 2D and 3D graphics
– standalone graphics applications that run on your
local computer
– applications that run from a remote server
– applications that are embedded in a Web page
©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-3
 Introduction
• A GUI (pronounced “gooey”) is a graphical
window or a system of graphical windows
presented by an application for interaction with
the user.
• In addition to accepting input from the
keyboard, GUIs typically accept input from a
mouse, or a touch screen.

©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-4
 Introduction
• A window in a GUI commonly consists of
several components that present data to the user
and/or allow interaction with the application.
• Some of the common GUI components are
buttons, labels, text fields, check boxes, and
radio buttons.

©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-5
 Various GUI Components

©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-6
 Some GUI Components

©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-7
 Event-Driven Programming
• Programs that operate in a GUI environment must be
event-driven.
• An event is an action that takes place within a
program, such as the clicking of a button.
• Part of writing a GUI application is creating event
listeners.
• An event listener is a method that automatically
executes when a specific event occurs.

©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-8
 Scene Graphs
• In JavaFX, the components that are in a GUI are organized as a
scene graph.
• A scene graph is a tree-like, hierarchical data structure that
contains nodes.
Root Node

Branch Node

Leaf Node

Leaf Node
Leaf Node
©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-9
 Scene Graphs
• A scene graph can have three types of nodes:
– Root Node:
• The scene graph can have only one root node.
• It is the parent of all the other nodes in the scene graph.
• It is the first node in the structure.
– Branch Node:
• A branch node can have other nodes as children.
– Leaf Node:
• A leaf node cannot have children.
In a nutshell, the root node and branch nodes can have children, but
leaf nodes cannot.
©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-10
 Scene Graphs
• In JavaFX, a node that can have children is a
container.
• A container is a component that can hold other
components inside of it.
• The JavaFX library provides several different
types of containers.

©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-11
 Scene Graphs
• The AnchorPane container is commonly used as a GUI’s root
node.
• A branch node is a container that is placed inside the root node
or inside another branch node.
– For example, you might have a Pane (one of the simplest
JavaFX containers) inside of an AnchorPane.
• A leaf node is a component that is not a container.
– For example, Button components and Label components
are leaf nodes.

©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-12
 Example GUI and Scene Graph
The Anchor
Pane is the The Pane is a
root node branch node

The Button, Label,

and Radio button
components are leaf
nodes

Root Node
Branch Node

Leaf Nodes

©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-13
 A More Complex GUI and Scene Graph

• The AnchorPane is the root node

– The TitledPane is a child of the AnchorPane
– it is contained inside the AnchorPane
• Another AnchorPane is a child of the TitledPane
• it is contained inside the TitledPane
• The Three RadioButtons are children of the innermost AnchorPane
– The Button is a child of the root node AnchorPane.

©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-14
 Using Scene Builder to Create JavaFX
Applications
• Scene Builder is a free design tool from Oracle for visually creating GUIs.

• It works like this:

– Use Scene Builder to construct a GUI by dragging and dropping the
components that you need onto a blank window.
– Visually arrange the components on the window and set various
component properties to create the appearance that you want for the
GUI.
– Save the GUI to an FXML file.

• FXML is a markup language that describes the components in a JavaFX

scene graph.
• FXML uses tags to organize data, in a manner similar to the way that HTML
uses tags to format text in a Web browser.

©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-15
 Using Scene Builder to Create JavaFX
Applications
• Visually creating a GUI with Scene Builder is only
part of the process.

• Once you save a GUI’s scene graph to an FXML file,

the next step is to write Java code that reads the FXML
file and displays the GUI on the screen and handles
any events that occur while the application is running.

©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-16
 Starting Scene Builder
• You can download Scene Builder from the following location:

www.oracle.com/technetwork/java/javafx/downloads/
• When you install Scene Builder in Windows, a shortcut is automatically
created on the desktop.
• You can launch Scene Builder either by double-clicking the shortcut, or by
going to All Programs > JavaFX Scene Builder and clicking JavaFX Scene
Builder x.x
– where x.x will be a version number such as 2.0

• If you installed Scene Builder on a Mac, go to the Applications folder and

double-click the shortcut for JavaFX Scene Builder x.x
– where x.x will be a version number such as 2.0

©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-17
 The Scene Builder Main Window

©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-18
 The Scene Builder Main Window
• Here is a brief summary of each part of the
main window:

• Menu Bar
– Scene Builder’s commands are located on the
menus that access the menu bar at the top of the
main window.

©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-19
 The Scene Builder Main Window
• Library Panel
– The Library Panel provides a list of JavaFX
components that you can use in an application.
– To place a component in a GUI, you simply drag it
from the Library Panel, and drop it into the Content
Panel.

©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-20
 The Scene Builder Main Window
• Content Panel
– The Content Panel is where you visually design an
application’s GUI.
– You create components in the GUI by dragging
them from the Library Panel and dropping them
into the Content Panel

©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-21
 The Scene Builder Main Window
• Document Panel
– Has two sections:
• Hierarchy
• Controller
– Hierarchy shows the GUI’s scene graph as you
build it.
– Controller allows you to connect the GUI to a Java
class containing the application’s event listeners.

©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-22
 The Scene Builder Main Window
• Selection Bar
– This area of the screen shows the hierarchical path
of the currently selected node in the scene graph.

©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-23
 The Scene Builder Main Window
• Inspector Panel
– The Inspector Panel is divided into three
sections:
• Properties
• Layout
• Code

©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-24
 The Scene Builder Main Window
• The Properties section
– allows you to view and edit the values of the selected component’s
properties, which are values that determine the component’s appearance.
• The Layout section
– lets you specify values that control the way the component is displayed
when the GUI’s window is resized.
• The Code section
– allows you to assign an fx:id to a component, which is similar to
assigning a variable name to the component.
– also allows you to designate event handlers to execute when specific
events happen to the selected component.

©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-25
 Using Scene Builder to Create the
Kilometer Converter GUI

• An AnchorPane, as the root node

• A Label to display the prompt Enter a distance in kilometers:
• A TextField in which the user will enter a distance
• A Label to display a message showing the distance converted to miles
• A Button that performs the conversion

©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-26
 Writing the Application Code
• Once you have saved an application’s GUI to
an FXML file, you can write the Java code that
runs the application.

• A simple JavaFX application uses:

– a main application class
– a controller class

©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-27
 The Main Application Class
• Once you have created a GUI with Scene
Builder, and saved it to an FXML file, you need
to write a Java class that performs the
following:
– Loads the FXML file
– Builds the scene graph in memory
– Displays the GUI

Example: KilometerCoverter.java
©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-28
 The Controller Class
• The controller class is responsible for handling events that occur
while the application is running.
• The controller class contains the following items:
– The necessary import statements
– Private variables to reference the components that have a fx:id
in the scene graph
– An optional initialize method that is automatically called after
the FXML file is loaded
– Event listener methods

Example: KilometerCoverterController.java
©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-29
 Using the Sample Controller Skeleton
• An alternative for manually typing the code for the controller class, Scene
Builder can provide a sample "skeleton" for the controller class.
• To see the sample controller skeleton, click the View menu, then click Show
Sample Controller Skeleton
• You can click the Copy button to copy the sample code to the clipboard, and
then paste it into an editing window in your IDE.
• The obvious benefit of using the sample skeleton controller is that a lot of
the code is written for you.
• The skeleton has all of the necessary import statements, and the class
already has private field declarations for all of the components that have an
fx:id.
• You just need to change the name of the class, and write the code for the
event listener methods.

©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-30
 Summary of Creating a JavaFX
Application
• Use Scene Builder to design the GUI. Be sure to give an fx:id to all of the
components that you plan to access in your Java code. Save the GUI as an
FXML file.
• Write the code for the main application class, which loads the FXML file
and launches the application. Save and compile the code in the same
location as the FXML file.
• Write the code for the controller class, which contains the event handler
methods for the GUI. Save and compile the code in the same location as the
FXML file.
• In Scene Builder, register the controller class, then register an event handler
method for each component that needs to respond to events. Save the FXML
file again.

©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-31
 RadioButtons and CheckBoxes
• RadioButtons normally appear in groups of two
or more and allow the user to select one of
several possible options.

• CheckBoxes, which may appear alone or in

groups, allow the user to make yes/no or on/off
selections.

©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-32
 RadioButtons
• RadioButtons are useful when you want the
user to select one choice from several possible
options.
• A radio button may be selected or deselected.
• Each radio button has a small circle that
appears filled-in when the radio button is
selected and appears empty when the radio
button is deselected.

©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-33
 Creating a RadioButton
• To create a RadioButton, you simply drag it from the
Library panel and drop it onto the Content panel.
• (The RadioButton component is found in the Controls
section of the Library panel.)
• RadioButtons have a Text property that determines the
text they display.
• RadioButtons normally are in a toggle group.

©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-34
 Adding RadioButtons to a Toggle Group
• Here are the steps for adding RadioButtons to a toggle group:
– Create the first RadioButton component in the Content panel.
– Open the Properties section of the Inspector Panel, and find the Toggle
Group property.
– Enter the name you wish to give the toggle group.
– Create the next RadioButton.
– For its Toggle Group property, you should be able to click the down-
arrow and select the toggle group that you created for the first
RadioButton.
– Repeat this for each subsequent RadioButton that you want in the same
toggle group.

©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-35
 Determining in Code Whether a
RadioButton Is Selected
• In the controller class, you can use the RadioButton's isSelected method
to determine whether the RadioButton is selected or not.
• The isSelected method returns a boolean value.
– If the RadioButton is selected, the method returns true . Otherwise, it
returns false .

if (radio.isSelected())
{
// Code here executes if the
radio
// button is selected.
}
Example: RadioButtonDemo.java, RadioButtonDemoController.java

©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-36
 Responding to RadioButton Events
• In many situations you want an action to take place at
the time the user clicks a RadioButton.
– you must write an event listener method in the
controller class for each RadioButton
– and then select the appropriate method as the event
listener in Scene Builder.

Example: RadioButtonEvent.java, RadioButtonEventController.java

©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-37
 CheckBoxes
• A CheckBox is a small box with text appearing next to
it.
• Like RadioButtons, CheckBoxes may be selected or
deselected at run time.
• When a CheckBox is selected, a small check mark
appears inside the box.
• Although CheckBoxes are often displayed in groups,
they are not usually grouped in a toggle group like
RadioButtons are.

©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-38
 Creating a CheckBox
• To create a CheckBox, you simply drag it from the
Library panel and drop it onto the Content panel.
• (The CheckBox component is found in the Controls
section of the Library panel.)
• CheckBoxes have a Text property that determines the
text they display.

©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-39
 Determining in Code Whether a
CheckBox Is Selected
• In the controller class, you can use the CheckBox’s isSelected method
to determine whether the CheckBox is selected or not.
• The isSelected method returns a boolean value.
– If the CheckBox is selected, the method returns true . Otherwise, it
returns false .

if (checkbox.isSelected())
{
// Code here executes if the
// CheckBox is selected.
}
Example: CheckBoxDemo.java, CheckBoxDemoController.java

©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-40
 Responding to CheckBox Events
• Sometimes you want an action to take place at the time
the user clicks a CheckBox.
– you must write an event listener method in the
controller class for the CheckBox
– and then select the method as the event listener in
Scene Builder.

Example: CheckBoxEvent.java, CheckBoxEventController.java

©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-41
 Displaying Images
• You can use the ImageView component to display images in an
application's GUI.
• You simply drag the component from the Library panel (you
will find it in the Controls section) and drop it onto the Content
Panel
• Once you have created a ImageView component, you use its
Image property to specify the image that it will display.

©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-42
 Displaying an Image with Code
• Sometimes you might need to write code that
will change the image being displayed in an
ImageView component, as the application is
running.
• In your controller class, you can call the
ImageView component's setImage method to
do this.

©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-43
 Displaying an Image with Code
• First, you must create an instance of the Image class, which can
read the contents of an image file.
• The Image class is in the javafx.scene.image package.
• The Image class constructor accepts a String argument that is
the name of an image file.
• Here is an example:
Image myImage = new Image("Dog.jpg");
 

• Here is an example that uses a path.

Image myImage = new Image("C:\\Chapter14" +
"\\Images\\Dog.jpg");

©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-44
 Displaying an Image with Code
• Once you have created an Image object, you pass a reference
to that object to the ImageView component's setImage
method.
• The following is an example:
– Assume that myImageView references an ImageView component, and
myImage references an Image object.

myImageView.setImage(myImage);

Example: ImageViewDemo.java, ImageViewDemoController.java

©2016 Pearson Education, Inc. Upper Saddle River, NJ. All Rights Reserved. 15-45