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