Chapter 16
JavaFX UI Controls
Dr. Asem Kitana
Dr. Abdallah Karakra
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
1
Frequently Used UI Controls
Throughout this chapter, the prefixes lbl, bt, chk, rb, tf, pf, ta, cbo,
lv, scb, sld, and mp are used to name reference variables for Label,
Button, CheckBox, RadioButton, TextField, PasswordField,
TextArea, ComboBox, ListView, ScrollBar, Slider, and
MediaPlayer.
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
2
Introduction
Labels – just a piece of
text on the UI to show
the user what the control
NEXT to it is for
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
Introduction
Buttons with a label to
tell us what clicking on
the button should do
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
Introduction
Buttons with both a
label and an image
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
Introduction
CheckBox with a square
box to the left of its label
that lets us turn on or off
some Boolean value
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
Introduction
RadioButtons,
arranged in groups.
Only one button in a
group can be selected
(marked) at any one time
– selecting one deselects
the others in the group
Each RadioButton has
a round “selected”
indicator and a label
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
Introduction
TextField, into which
the user may type text.
If the text is inherently
numeric in nature, we
will have to parse the
TextField’s contents
from S t r i n g to a
numeric type before we
can use it in a
calculation
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
Introduction
ComboBox, which lets
the user drop-down a list
of options from which to
select
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
Introduction
S l i d e r s are similar to
ScrollBars (whichthis
UI doesn’t happen to
have, but which you are,
no doubt, already
familiar with for
scrolling the screen).
S l i d e r s differ from
ScrollBars, though,in
that a S l i d e r lets us
select a value from a
range, whereas a
Sc r o l l Ba r is usually
used to let us scroll
content that doesn’t fit
into its container
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
Introduction
The ImageView can be
used to either provide
static information, or the
image it displays can
change depending on
what the user does while
in the interface
In this example, the
image displayed is the
one that corresponds to
the page selected by the
S l i d e r below the
ImageView
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
Introduction
UI elements can be
either enabled (allowing
the user to interact with
them), or disabled, in
which case they’re
present and visible, but
“deactivated” or
(“grayed out”)
In this example, the page
range TextBox is
disabled when the
“Pages” RadioButton
is not selected – the
TextBox is there, but
we can’t type in it
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
Introduction
It’s usually easier to
navigate a GUI with the
mouse, but it’s typically
much faster to do so it
with the keyboard, and
there are many keyboard
shortcuts available.
First, controls with an
underlined letter in their
label can be selected by
using ALT and the
underlined letter
(ALT+P from the
keyboard is the same as
clicking on the
“Properties” Button)
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
Introduction
What about the controls
that we can’t select with
ALT?
The Tab key shifts the
focus from control to
control in a pre-set order
When a Button or a
CheckBox has the
focus, pressing the
Space Bar generates a
click event
When a RadioButton
or a ComboBox has the
focus, UP / DOWN
selects a different item
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
Introduction
When a horizontal
S l i d e r has the focus,
the LEFT / RIGHT
arrow keys change its
value.
When ComboBoxhas
the focus, the F4 key
will make the box
alternate between its
dropped-down and
collapsed views
The more you can rely
on the keyboard (and
less on the mouse), the
more productive you
will be on the computer!
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
Labeled
A label is a display area for a short text, a node, or both. It is often
used to label other controls (usually text fields). Labels and buttons
share many common properties. These common properties are
defined in the Labeled class.
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
16
Label
The Label class defines labels.
17
18
ButtonBase and Button
A button is a control that triggers an action event when clicked.
JavaFX provides regular buttons, toggle buttons, check box
buttons, and radio buttons. The common features of these buttons
are defined in ButtonBase and Labeled classes.
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
19
Button Example
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
20
CheckBox
A CheckBox is used for the user to make a selection. Like Button,
CheckBox inherits all the properties such as onAction, text,
graphic, alignment, graphicTextGap, textFill, contentDisplay
from ButtonBase and Labeled.
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
21
CheckBox Example
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
22
RadioButton
Radio buttons, also known as option buttons, enable you to
choose a single item from a group of choices. In appearance radio
buttons resemble check boxes, but check boxes display a square
that is either checked or blank, whereas radio buttons display a
circle that is either filled (if selected) or blank (if not selected).
26
RadioButton
RadioButton Example
RadioButton rbRed = new RadioButton("Red");
RadioButton rbGreen = new RadioButton("Green");
RadioButton rbBlue = new RadioButton("Blue");
pane.getChildren().addAll(rbRed, rbGreen, rbBlue);
ToggleGroup group = new ToggleGroup();
rbRed.setToggleGroup(group);
rbGreen.setToggleGroup(group);
rbBlue.setToggleGroup(group);
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
28
TextField
A text field can be used to enter or display a string. TextField is a
subclass of TextInputControl.
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
29
TextField
TextField
If a text field is used for entering a
password, use PasswordField to replace
TextField. PasswordField extends
TextField and hides the input text with
echo characters ******.
TextField Example
TextFieldDemo Run
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
32
TextArea
A TextArea enables the user to enter multiple lines of text.
If you want to let the user enter multiple lines of text, you may create
several instances of TextField. A better alternative,is to use TextArea
33
TextArea
TextArea Example
DescriptionPane TextAreaDemo Run
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
35
ComboBox
A combo box, also known as a choice list or drop-down list,
contains a list of items from which the user can choose.
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
36
ComboBox
ComboBox is defined as a generic class like the ArrayList class. The generic
type T specifies the element type for the elements stored in a combo box.
ComboBox Example
This example lets users view an image and a
description of a country's flag by selecting the
country from a combo box.
ComboBoxDemo Run
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
38
