Ch- 16

UI Controls and multimedia

Rahul Talreja
 2

Agenda
 GUI Controls
 Label
 Button
 CheckBox
 RadioButton
 TextField and TextArea
 PasswordField
 ComboBox and ListView
 ScrollBar and Slider

Rahul Talreja
 3
Frequently Used UI Controls

Throughout this book, 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.
Rahul Talreja
 Labeled 4

✖ 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.

Rahul Talreja
 Label 5

The Label class defines labels.

LabelWithGraphic

Rahul Talreja
 ButtonBase and Button 6

✖ 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.

Rahul Talreja
 Button Example 7

ButtonDemo

Rahul Talreja
 CheckBox 8

✖ 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.

Rahul Talreja
 CheckBox Example 9

CheckBoxDemo

Rahul Talreja
 RadioButton 10

✖ Radio buttons, also known as option buttons, enable you to choose a single item from a
group of choices.

Rahul Talreja
 RadioButton Example 11

RadioButtonDemo

Rahul Talreja
 TextField 12

A text field can be used to enter or display a string. TextField is a subclass of

TextInputControl.

Rahul Talreja
 TextField Example 13

TextFieldDemo

Rahul Talreja
 TextArea 14

A TextArea enables the user to enter multiple lines of text.

Rahul Talreja
 TextArea Example 15

DescriptionPane

TextAreaDemo

Rahul Talreja
 ComboBox 16

A combo box, also known as a choice list or drop-down list, contains a list of
items from which the user can choose.

Rahul Talreja
 ComboBox Example 17

This example lets users view an image and a

description of a country's flag by selecting the
country from a combo box.

ComboBoxDemo

Rahul Talreja
 18

ListView
A list view is a component that performs basically the same function as a
combo box, but it enables the user to choose a single value or multiple
values.

Rahul Talreja
 19

Example: Using ListView

This example gives a
program that lets users
select countries in a list and
display the flags of the
selected countries in the
labels.

ListViewDemo

Rahul Talreja
 20

ScrollBar
A scroll bar is a control that enables the user to select from a range of values. The
scrollbar appears in two styles: horizontal and vertical.

Rahul Talreja
 21

Scroll Bar Properties

Rahul Talreja
 22

Example: Using Scrollbars

This example uses
horizontal and vertical
scrollbars to control a
message displayed on a
panel. The horizontal
scrollbar is used to move
the message to the left or
the right, and the vertical
scrollbar to move it up and
down.

ScrollBarDemo Run
Rahul Talreja
 23

Slider
Slider is similar to ScrollBar, but Slider has more
properties and can appear in many forms.

Rahul Talreja
 24

Example: Using Sliders

Rewrite the preceding
program using the sliders
to control a message
displayed on a panel
instead of using scroll
bars.

SliderDemo Run
Rahul Talreja
 25

Case Study: Bounce Ball

Listing 15.17 gives a program that displays a bouncing
ball. You can add a slider to control the speed of the ball
movement.

Slider Demo Run

Rahul Talreja
 26
Case Study: TicTacToe

javafx.scene.layout.Pane

-char token

+getToken Cell
+setToken
-token: char Token used in the cell (default: ' ').
+paintComponet
+mouseClicked
+getToken(): char Returns the token in the cell.
+setToken(token: char): void Sets a new token in the cell.
-handleMouseClick(): void Handles a mouse click event.

Rahul Talreja
 Case Study: TicTacToe,
27
cont.

TicTacToe

Rahul Talreja
 28

Media
You can use the Media class to obtain the source of the media, the MediaPlayer
class to play and control the media, and the MediaView class to display the video.

Rahul Talreja
 29

MediaPlayer
The MediaPlayer class playes and controls the media with properties such as
autoPlay, currentCount, cycleCount, mute, volume, and totalDuration.

Rahul Talreja
 30

MediaView
The MediaView class is a subclass of Node that provides a view of the Media
being played by a MediaPlayer. The MediaView class provides the properties
for viewing the media.

Rahul Talreja
 31

Example: Using Media

This example displays a
video in a view. You can
use the play/pause button to
play or pause the video and
use the rewind button to
restart the video, and use
the slider to control the
volume of the audio.

MediaDemo

Rahul Talreja
 32
Case Study: National Flags
and Anthems
This case study presents a program that displays a
nation’s flag and plays its anthem.

FlagAnthem

Rahul Talreja
 33

Thanks!
Any questions?
You can find me at:
Wechat
Dingtalk

Rahul Talreja