UI Controls

UI Controls are the graphical elements that allow users to interact with an
application or a website.
The graphical user interface of every desktop application mainly considers UI
elements, layouts and behaviour.

The UI elements are the one which are actually shown to the user for interaction
or information exchange. Layout defines the organization of the UI elements on
the screen. Behaviour is the reaction of the UI element when some event is
occurred on it.

However, the package javafx.scene.control provides all the necessary classes

for the UI components like Button, Label, etc. Every class represents a specific
UI control and defines some methods for their styling.

S.N
Control & Description
o

Label
1
A Label object is a component for placing text.

Button
2
This class creates a labeled button.

ColorPicker
3 A ColorPicker provides a pane of controls designed to allow a user to manipulate
and select a color.

CheckBox
4 A CheckBox is a graphical component that can be in either an on(true) or off
(false) state.

RadioButton
5 The RadioButton class is a graphical component, which can either be in a ON
(true) or OFF (false) state in a group.

ListView
6
A ListView component presents the user with a scrolling list of text items.

TextField
7 A TextField object is a text component that allows for the editing of a single line
of text.
 PasswordField
8
A PasswordField object is a text component specialized for password entry.

Scrollbar
9 A Scrollbar control represents a scroll bar component in order to enable user to
select from range of values.

FileChooser
10 A FileChooser control represents a dialog window from which the user can select
a file.

ProgressBar
11 As the task progresses towards completion, the progress bar displays the task's
percentage of completion.

Slider
12 A Slider lets the user graphically select a value by sliding a knob within a
bounded interval.

JavaFX Label
javafx.scene.control.Label class represents label control. As the name
suggests, the label is the component that is used to place any text information
on the screen. It is mainly used to describe the purpose of the other components
to the user. You can not set a focus on the label using the Tab key.
Package: javafx.scene.control

Constructors:
1. Label(): creates an empty Label
2. Label(String text): creates Label with the supplied text
3. Label(String text, Node graphics): creates Label with the supplied text and grap
hics

Ex_3_lbl.java

JavaFX Button
JavaFX button control is represented by javafx.scene.control.Button class. A
button is a component that can control the behaviour of the Application. An
event is generated whenever the button gets clicked.

How to create a Button?

 Button can be created by instantiating Button class. Use the following line to create button
object.

1. Button btn = new Button("My Button");

Ex_4_btl

RadioButton
The Radio Button is used to provide various options to the user. The user can
only choose one option among all. A radio button is either selected or
deselected. It can be used in a scenario of multiple choice questions in the quiz
where only one option needs to be chosen by the student.

Ex_5_radio

JavaFX CheckBox
The Check Box is used to provide more than one choices to the user. It can be
used in a scenario where the user is prompted to select more than one option or
the user wants to select multiple options.

It is different from the radiobutton in the sense that, we can select more than
one checkboxes in a scenerio.

Instantiate javafx.scene.control.CheckBox class to implement CheckBox.

1. CheckBox checkbox = new CheckBox();

Use the following line to attach a label with the checkbox.

CheckBox checkbox = new CheckBox("Label Name");

We can change the CheckBox Label at any time by calling an instance

method setText("text"). We can make it selected by calling setSelected("true")

Ex_6_checkbox

JavaFX TextField
Text Field is basically used to get the input from the user in the form of
text. javafx.scene.control.TextField represents TextField. It provides various
methods to deal with textfields in JavaFX. TextField can be created by
instantiating TextField class.

Ex_7_textfield

Explanation of the lambda expression:

(e->System.out.println("You entered: User_ID: "+tf.getText()+""+"Password:

"+pf.getText()));

o This is a lambda expression that implements the

EventHandler<ActionEvent> interface.
o e is the event object, which you can use for more complex event
handling.
o tf.getText() retrieves the text from the TextField.
o System.out.println(...) prints the text to the console.

JavaFX PasswordField
However, typing a password in a text field is not secure for the user. The
Application must use a specific component to get the password from the user.

Passwordfield can be created by

instantiating javafx.scene.control.PasswordField class. PasswordField class
contains a method named as setPromptText() for showing a prompt text to the
user in password field. The data written in the passwordfield is retrieved
by getText() method.

Ex_7_textfield and password

X JavaFX HyperLink
In JavaFx, we can use hyper-links to refer the web pages. It is similar to anchor
links in HTML. javafx.scene.control.HyperLink class provides all the
necessary methods to deal with JavaFX hyper-links.

ex_8_hyperlink

JavaFX Slider
JavaFX slider is used to provide a pane of option to the user in a graphical form
where the user needs to move a slider over the range of values to select one of
them. Slider can be created by
instantiating javafx.scene.control.Slider class.
 The constructor accepts three arguments: the minimum value, the maximum
value, and the initial value of the slider.

ex_9_slider

x JavaFX ProgressBar
Progress Bar is used to show the work progress to the user. It is represented
by javafx.scene.control.ProgressBar. The following code implements
progrss bar into our application.

ex_10_progressbar

JavaFX ScrollBar
JavaFX Scroll Bar is used to provide a scroll bar to the user so that the user can
scroll down the application pages. It can be created by
instantiating javafx.scene.control.ScrollBar class.

ex_11_scrollbar

TextArea
The TextArea control is a graphical user interface component that allow users
to enter and display multiple lines of plain text. It is mostly used to collect
information like comments, feedbacks and descriptions.

Creating TextArea in JavaFX

In JavaFX, the text area is represented by a class named TextArea which is a
part of javafx.scene.control package. By instantiating this class, we can create a
text area in JavaFX. Its constructors are listed below −
 TextArea() − It is the default constructor that constructs a text area without any
texts.
 TextArea(String str) − It constructs a new text area with the predefined text.

Properties of JavaFX TextArea

Once the TextArea is created, it can be customized to enhance its appearance
and behavior using its properties. For instance, we can set the preferred number
of rows and columns using the prefRowCount and prefColumnCount properties
respectively. Additionally, we can also enable or disable text wrapping using
the wrapText property.
The TextArea also supports showing prompt text when there is no text in the
component. This is a useful way of informing the user what is expected in the
 text area, without using tooltips or labels. The prompt text can be set using
the setPromptText() method or the promptText property.
ex_12_textarea

ComboBox
A combo box is similar to a choice box it holds multiple items and, allows you to
select one of them. It can be formed by adding scrolling to a drop-down list. You
can create a combo box by instantiating the javafx.scene.control.ComboBox
class.

Constructors of ComboBox:
1. ComboBox(): creates a default empty combo box
2. ComboBox(ObservableList i): creates a combo box with the given items

ex_13_combobox

The ListView is a graphical user interface component used for displaying a list
of items from which a user can select desired items. Generally, a list refers to a
group or collection of items. It helps in organizing, structuring and presenting
information in more user-friendly and readable way.

In JavaFX, the list view is represented by a class named ListView which is a part
of javafx.scene.control package. We can create a list view component by
instantiating this class. Additionally, we have the option to select its orientation,
allowing it to be displayed either vertically or horizontally. List of constructors of
the ListView class is as follows −

 ListView() − It is the default constructor that constructs a vertical list view.

 ListView(ObservableList<type> listItems) − It constructs a new vertical list
view with the specified list items.

ex_14list view

Playing Audio
We can load the audio files with extensions like .mp3,.wav and .aifff by using
JavaFX Media API. We can also play the audio in HTTP live streaming format. It is
the new feature introduced in JavaFX 8 which is also known as HLS.

Playing audio files in JavaFX is simple. For this purpose, we need to

instantiate javafx.scene.media.Media class by passing the audio file path in
its constructor. The steps required to be followed in order to play audio files are
described below.
 1. Instantiate the javafx.scene.media.Media class by passing the location
of the audio file in its constructor. Use the following line of code for this
purpose.

Media media = new Media("http://path/file_name.mp3");

2. Pass the Media class object to the new instance

of javafx.scene.media.MediaPlayer object.

Mediaplayer mediaPlayer = new MediaPlayer(media);

3. Invoke the MediaPlayer object's play() method when onReady event is

triggered.

MediaPlayer.setAutoPlay(true);

The Media File can be located on a web server or on the local file system.
SetAutoPlay() method is the short-cut for setting the setOnReady() event
handler with the lambda expression to handle the event.

Example
Ex_15_audio1

Playing Video
Playing video in JavaFX is quite simple. We need to use the same API as we have
used in the case of playing Audio files. In the case of playing video, we need to
use the MediaView node to display the video onto the scene.

For this purpose, we need to instantiate the MediaView class by passing the
Mediaplayer object into its constructor. Due to the fact that, MediaView is a
JavaFX node, we will be able to apply effects to it.

Steps to play video files in JavaFX

1. Instantiate the javafx.scene.media.Media class by passing the location

of the audio file in its constructor. Use the following line of code for this
purpose.

Media media = new Media("http://path/file_name.mp3");

2. Pass the Media class object to the new instance

of javafx.scene.media.MediaPlayer object.

Mediaplayer mediaPlayer = new MediaPlayer(media);

 3. Instantiate MediaView class and pass Mediaplayer object into its
constructor

MediaView mediaView = new MediaView (mediaPlayer)

4. Invoke the MediaPlayer object's play() method when onReady event is

triggered.

mediaPlayer.setAutoPlay(true);

5. Add the MediaView Node to the Group and configure Scene.

Group root = new Group();

root.getChildren().add(mediaView)
Scene scene = new Scene(root,600,400);
primaryStage.setTitle("Playing Video");
primaryStage.show();

Ex_16_video