JavaFX UI controls

 The UI elements are the one which are actually shown to

the user for interaction or information exchange.
 The JavaFX UI controls available through the JavaFX API
are built by using nodes in the scene graph.
 They can take full advantage of the visually rich features of
the JavaFX platform and are portable across different
platforms.
 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.
 These controls reside in the javafx.scene.control package.

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
1
JavaFX UI controls …
JavaFX UI Controls Sample

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
2
 Label Class
 Label is a non-editable text control.
 useful for displaying text that is required to fit
within a specific space.
 also useful in that they can have mnemonics.
 Label class hierarchy:

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
3
…
◦ Label is the simplest control, it just used to displays
message.
◦ The JavaFX label is an instance of the Label class, which
is packaged in javafx.scene.control.

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
4
…
 Creating Label
◦ Label defines three constructors.
 public Label() Parameters:
 Creates an empty label • text - null text is treated as the
empty string
 Label label1 = new Label(); • graphic - a null graphic is
 public Label (String text) acceptable

 Creates a label with the text element

 Label label2 = new Label("Search");
 public Label(String text, Node graphic)
 Creates a label with supplied text and graphic
 Image image = new
Image(getClass().getResourceAsStream("labels.jpg"));
 Label label3 = new Label("Search", new ImageView(image));
AU/Computer Sc. Dept/Java
Programming(CoSc3053) lecture slides
5
…
 Once you have created a label, you can add
textual and graphical content to it by using the
following methods of the Labeled class.
◦ The setText(String text) method – specifies the text
caption for the label
◦ setGraphic(Node graphic)– specifies the graphical icon
◦ The setTextFill method specifies the color to paint the
text element of the label.
 label1.setTextFill(Color.web("#0076a3"));
◦ You can use the setGraphicTextGap method to set the
gap between text and graphic component of label.

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
6
…
◦ The setTextAlignment method, vary the position of the
label content within its layout area.
◦ You can also define the position of the graphic relative
to the text by applying the setContentDisplay method
and specifying one of the following ContentDisplay
constant: LFFT, RIGHT, CENTER, TOP, BOTTOM.
◦ setFont method provide a font text size other than the
default.
 Use a constructor of the Font class
label1.setFont(new Font("Arial", 30));
 Use the font method of the Font class
label2.setFont(Font.font("Cambria", 32));

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
7
…
 Wrapping Text
• To break up (wrap) the text so that is can fit into the
layout area, set the true value for the setWrapText
method.
Label label3 = new Label("A label that needs to be wrapped");
label3.setWrapText(true);
 Applying Effects
• you can apply visual effects or transformations to it.
• Example:

Rotates label2 270 degrees and translates its position vertically.

AU/Computer Sc. Dept/Java
Programming(CoSc3053) lecture slides
8
…
 Additionally, you can set up an effect that zooms
(magnifies) the label when a user hovers the mouse
cursor over it.

◦ When the MOUSE_ENTERED event is fired on the label by factor of 1.5

◦ When a user moves the mouse cursor off of the label and the
MOUSE_EXITED event occurs by factor of 1.
AU/Computer Sc. Dept/Java
Programming(CoSc3053) lecture slides
9
…
◦ Once you have created a label (or any other
control), it must be added to the scene’s content.
◦ To add controls to scene graph, you will first call
getChildren( ) method.
 It returns a list of the child nodes in the form of an
ObservableList<Node>.
 ObservableList is packaged in javafx.collections, and it
inherits java.util.List,
 which means that it supports all of the features available to
a list as defined by the Collections Framework.
 Using the returned list of child nodes, you can add the
label to the list by calling add( ) , passing in a reference to
the label.
AU/Computer Sc. Dept/Java
Programming(CoSc3053) lecture slides
10
 Button Class
 Button is a Clickable Component (Control)
 The Button class available through the JavaFX API.
 The Button class is an extension of the Labeled class.
 The button control can contain text and/or a graphic.
Hierarchy of Button class

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
11
…
 A button control has three different modes:
◦ Normal: A normal push button.
◦ Default: A default Button is the button that receives a
keyboard VK_ENTER press, if no other node in the scene
consumes it.
◦ The behavior of the default button differs depending on the
platform in which it is presented.
◦ Cancel: A Cancel Button is the button that receives a
keyboard VK_ESC press, if no other node in the scene
consumes it.
 When a button is pressed and released a ActionEvent
is sent.
 Mnemonic Parsing is enabled by default for Button.

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
12
…
 Creating Button:
◦ Button can be created with one of its constructors:
◦ public Button()
 Creates a button with an empty text caption.
Button button1 = new Button();
◦ public Button(String text)
 Creates a button with the specified text caption.
Button button2 = new Button(“Accept");
◦ Button(String text, Node graphic)
 Creates a button with the specified text caption and icon.
Image imageOk = new Image(getClass().getResourceAsStream("ok.png"));
Button button3 = new Button("Accept", new ImageView(imageOk));
see for detail
Parameters:
• text - A text string for its label.
• graphic - the icon for its label.
AU/Computer Sc. Dept/Java
Programming(CoSc3053) lecture slides
13
…
 Because the Button class extends the Labeled class, you
can use the following methods to specify content for a
button that does not have an icon or text caption:
◦ The setText(String text) method – specifies the text caption for
the button.

◦ The setGraphic(Node graphic) method – specifies the graphical

icon.
Image imageDecline = new Image(getClass().getResourceAsStream("not.png"));

Button button5 = new Button();

button5.setGraphic(new ImageView(imageDecline));

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
14
…
 Assigning an Action
◦ The primary function of each button is to produce an
action when it is clicked.

◦ The setOnAction method used to define what will

happen when a user clicks the button.

Example:

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
15
…
 Applying Effects
• Because the Button class extends the Node class, you
can apply any of the effects in the javafx.scene.effect.
DropShadow shadow = new DropShadow();

//Adding the shadow when the mouse cursor is on

button3.addEventHandler(MouseEvent.MOUSE_ENTERED, (MouseEvent e) -> {

button3.setEffect(shadow);

});

//Removing the shadow when the mouse cursor is off

button3.addEventHandler(MouseEvent.MOUSE_EXITED, (MouseEvent e) -> {

button3.setEffect(null);

});

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
16
…
 Styling a Button
• To enhance the visual appearance of a button is to apply
CSS styles defined by the Skin class.
• Using CSS in JavaFX applications is similar to using CSS
in HTML.
• You can define styles in a separate CSS file and enable
them in the application by using the getStyleClass
method.

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
17
Radio Button
 RadioButtons create a series of items where only one item can be

selected.

 RadioButtons are a specialized ToggleButton.

 When a RadioButton is pressed and released a ActionEvent is sent.

 Typically, radio buttons are combined into a group where only one

button at a time can be selected.

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
18
…

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
19
…
 A radio button control can be either selected or deselected.

 This behavior distinguishes them from toggle buttons, because all

toggle buttons in a group can be in a deselected state.

 Clicking on a selected RadioButton will have no effect.

 A RadioButton that is not in a ToggleGroup can be selected and

unselected.

 By default a RadioButton is not in a ToggleGroup.

 Calling ToggleGroup.getSelectedToggle() will return you the

RadioButton that has been selected.

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
20
…
 Creating a Radio Button
◦ we use RadioButton constructors to create the
controls.
◦ public RadioButton()
 Creates a radio button with an empty string for its label.
RadioButton button1 = new RadioButton( );
◦ public RadioButton(String text)
Creates a radio button with the specified text as its label.
RadioButton button1 = new RadioButton("select first");

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
21
…
 Because the RadioButton class is an extension of the
Labeled class, you can specify an image.
 Use the setGraphic method to specify an image.
Image image = new Image(getClass().getResourceAsStream("ok.jpg"));
RadioButton rb = new RadioButton("Agree");
rb.setGraphic(new ImageView(image));
 Adding Radio Buttons to Groups
final ToggleGroup group = new ToggleGroup();
RadioButton rb1 = new RadioButton("Home");
rb1.setToggleGroup(group);
rb1.setSelected(true);
RadioButton rb2 = new RadioButton("Calendar");
rb2.setToggleGroup(group);
RadioButton rb3 = new RadioButton("Contacts");
rb3.setToggleGroup(group);

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
22
…
 Processing Events for Radio Buttons
• The application performs an action when one of the radio buttons
in the group is selected.
ImageView image = new ImageView();
rb1.setUserData("Home")
rb2.setUserData("Calendar");
rb3.setUserData("Contacts");
final ToggleGroup group = new ToggleGroup();
group.selectedToggleProperty().addListener(
(ObservableValue<? extends Toggle> ov, Toggle old_toggle,
Toggle new_toggle) -> {
if (group.getSelectedToggle() != null) {
final Image image = new Image( getClass().getResourceAsStream(
group.getSelectedToggle().getUserData().toString() + ".jpg"));
icon.setImage(image);
}
});

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
23
…
 Requesting Focus for a Radio Button
 In the group of radio buttons, the first button initially has the focus
by default.

 The second radio button is selected, and the first button remains in
focus.
 To change the default focus use the following method:
rb2.setSelected(true);
rb2.requestFocus();

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
24
 ToggleButton
 A ToggleButton is a specialized control which
has the ability to be selected.
 Typically a ToggleButton is rendered similarly to
a Button.
 However, they are two different types of
Controls.
◦ A Button is a "command" button which invokes a
function when clicked.
◦ A ToggleButton on the other hand is simply a control
with a Boolean indicating whether it has been selected.

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
25
…

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
26
…
◦ ToggleButton can also be placed in groups.
◦ By default, a ToggleButton is not in a group.
◦ When in groups, only one ToggleButton at a time within
that group can be selected.
◦ To put two ToggleButtons in the same group, simply
assign them both the same value for ToggleGroup.
◦ Unlike RadioButtons, ToggleButtons in a ToggleGroup
do not attempt to force at least one selected
ToggleButton in the group.
AU/Computer Sc. Dept/Java
Programming(CoSc3053) lecture slides
27
…
◦ A toggle button looks just like a push button, but it acts
differently because it has two states: pushed and
released.
◦ That is, when you press a toggle button, it stays pressed
rather than popping back up as a regular push button
does.
◦ When you press the toggle button a second time, it
releases (pops up).
◦ Therefore, each time a toggle button is pushed, it
toggles between these two states.

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
28
…
 Creating a Toggle Button
◦ ToggleButton Create using the following 3 constructors:
 public ToggleButton()
Creates a toggle button with an empty string for its label.
ToggleButton tb1 = new ToggleButton();
 public ToggleButton(String text)
 Creates a toggle button with the specified text as its label.
ToggleButton tb2 = new ToggleButton("Press me");
 public ToggleButton(String text, Node graphic)
 Creates a toggle button with the specified text and icon for its label.
Image image = new
Image(getClass().getResourceAsStream("icon.png"));
ToggleButton tb3 = new ToggleButton ("Press me", new
ImageView(image));

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
29
…
 Adding Toggle Buttons to a Group
• The implementation of the ToggleButton class is very
similar to the implementation the RadioButton class.
• However, unlike radio buttons, toggle buttons in a
toggle group do not attempt to force the selection at
least one button in the group.
• That is, clicking the selected toggle button causes it to
become deselected, clicking the selected radio button in
the group has no effect.

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
30
…

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
31
…
 Setting the Behavior ToggleButton
• The setUserData method inherited by the
ToggleButton class from the Node class helps you to
associate any selected option with a particular value.

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
32
…
 Like other buttons, a ToggleButton generates an
action event when it is pressed.
 Because ToggleButton defines a two-state control, it is
commonly used to let the user select an option.
◦ When the button is pressed, the option is selected.
◦ When the button is released, the option is deselected.
 For this reason, a program usually needs to
determine the toggle button’s state.
 To do this, use the isSelected( ) method, shown here:
◦ final boolean isSelected( )
◦ It returns true if the button is pressed and false otherwise.
AU/Computer Sc. Dept/Java
Programming(CoSc3053) lecture slides
33
…
 Implementing Event handling for ToggleButton

◦ The ChangeListener<Toggle> object checks a selected toggle in the

group.
◦ If none of the toggle buttons is selected, the rectangle is painted
with the white color.
◦ If one of the toggle button is selected, consecutive calls of the
getSelectedToggle and getUserData methods return a color to
paint the rectangle.

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
34
…
 Styling Toggle Buttons
• You can enhance this application by applying CSS styles to
the toggle buttons.
• Using CSS in JavaFX applications is similar to using CSS in
HTML, because each case is based on the same CSS
specification.
.toggle-button1{
-fx-base: lightgreen;
}
.toggle-button2{
-fx-base: lightblue;
}
.toggle-button3{
-fx-base: salmon;
}
AU/Computer Sc. Dept/Java
Programming(CoSc3053) lecture slides
35
…
 enable the styles in the ToggleButton application.
scene.getStylesheets().add("togglebuttonsample/ControlStyle.css");
tb1.getStyleClass().add("toggle-button1");
tb2.getStyleClass().add("toggle-button2");
tb3.getStyleClass().add("toggle-button3");

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
36
 Checkbox
◦ A tri-state selection Control typically skinned
as a box with a checkmark or tick mark when
checked.
◦ similar to radio buttons, but they cannot be
combined into toggle groups to enable the
selection of many options at one time.

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
37
…
 Defining a State of CheckBox
◦ A CheckBox control can be in one of three states:
 checked: indeterminate == false, checked == true
 unchecked: indeterminate == false, checked == false
 undefined: indeterminate == true
◦ The checkbox can be either defined or undefined.
◦ When it is defined, you can select or deselect it.
◦ However, when the checkbox is undefined, it cannot be
selected or deselected.
◦ Use a combination of the setSelected and
setIndeterminate methods of the CheckBox class to
specify the state of the checkbox.

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
38
…

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
39
…
 If a CheckBox is checked, then it is also by definition
defined.
◦ When checked the CheckBox is typically rendered with a "check"
or "tick" mark.
◦ A CheckBox is in this state if selected is true and indeterminate is
false.
 A CheckBox is unchecked if selected is false and
indeterminate is false.
 A CheckBox is undefined if indeterminate is true,
regardless of the state of selected.

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
40
…
 Creating Checkboxes
o public CheckBox()
• Creates a check box with an empty string for its label.
CheckBox cb1 = new CheckBox();
◦ public CheckBox(String text)
 Creates a check box with the specified text as its label.
CheckBox cb2 = new CheckBox("Second");
 Once you have created a checkbox, you can modify it by
using methods available through the JavaFX APIs.
cb1.setText("First");
cb1.setSelected(true);

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
41
…
 Setting the Behavior

 The names array uses a for loop to create an array of checkboxes and
a corresponding array of icons.

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
42
 Choice Box
 The ChoiceBox is used for presenting the user
with a relatively small set of predefined choices
from which they may choose.
 The ChoiceBox, when "showing", will display to
the user these choices and allow them to pick
exactly one choice.

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
43
…
 By default, the ChoiceBox has no item selected
unless otherwise specified.
 ChoiceBox will only allow a user to select from the
predefined list.
 This is required for several important use cases.
 ChoiceBox item selection is handled by
SelectionModel As with ListView and ComboBox, it is
possible to modify the SelectionModel that is used,
although this is likely to be rarely changed.
 ChoiceBox supports only a single selection model,
hence the default used is a SingleSelectionModel.

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
44
…
 Creating a Choice Box
◦ public ChoiceBox()
 Create a new ChoiceBox which has an empty list of items.
ChoiceBox cb = new ChoiceBox();
cb.setItems(FXCollections.observableArrayList(
"New Document", "Open ",
new Separator(), "Save", "Save as"));
◦ public ChoiceBox(ObservableList<T> items)
 Create a new ChoiceBox with the given set of items.
 Since it is observable, the content of this list may change
over time and the ChoiceBox will be updated accordingly.
ChoiceBox cb = new
ChoiceBox(FXCollections.observableArrayList(
"First", "Second", "Third"));
In real-life applications, the choice boxes are used to build multiple-choice lists.
AU/Computer Sc. Dept/Java
Programming(CoSc3053) lecture slides
45
…
 Setting the Behavior for a Choice Box

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
46
…
 A ChangeListener<Number> object detects the
index of the currently selected item by
consecutive calls of the getSelectionModel and
selectedIndexProperty methods.
 The getSelectionModel method returns the
selected item, and the selectedIndexProperty
method returns the SELECTED_INDEX property
of the cb choice box.
 As a result, the integer value as an index defines
an element of the greetings array and specifies a
String text value for the label.
AU/Computer Sc. Dept/Java
Programming(CoSc3053) lecture slides
47
…
 You can make the ChoiceBox control more
informative by assigning a tooltip to it.
 A tooltip is a UI control that is available in the
javafx.scene.control package.
 A tooltip can be applied to any of the JavaFX UI
controls.
 The Tooltip class provides a prefabricated tooltip
that can be easily applied to a choice box (or any
other control) by calling the setTooltip method.
E.g: cb.setTooltip(new Tooltip("Select the language"));
AU/Computer Sc. Dept/Java
Programming(CoSc3053) lecture slides
48
 Text Field
 TextField is a text input component that allows
a user to enter a single line of unformatted text.
 TextField supports the notion of showing prompt
text to the user when there is no text already in
the TextField.
◦ This is a useful way of informing the user as to what is
expected in the text field, without having to resort to
tooltips or on-screen labels.

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
49
…
 Creating TextField
◦ public TextField()
 Creates a TextField with empty text content.
TextField textField = new TextField ();
◦ public TextField(String text)
 Creates a TextField with initial text content.
TextField textField = new TextField (“Text”);
Example:

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
50
 …
 Building the UI with Text Fields

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
51
 …

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
52
…

The name, lastName, and comment text fields are created by

using empty constructors of the TextField class.

The setPromptText method

defines the string that appears
in the text field when the
application is started.

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
53
…
 The difference between the prompt text and the
text entered in the text field is that the prompt
text cannot be obtained through the getText
method.
 In real-life applications, data entered into the text
fields is processed according to an application’s
logic as required by a specific task.
 The following Slide shows how to process
TextField Data.

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
54
…
 Processing Text Field Data
• The text data entered by a user into the text fields can
be obtained by the getText method of the TextInput
class.
• Example:

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
55
…

• The Label control added to the GridPane container renders an application’s response to
users.
• When a user clicks the Submit button, the setOnAction method checks the comment
text field.
• If it contains a nonempty string, a thank-you message is rendered.
56
…
 Some help full methods used with TextField:
◦ copy()– transfers the currently selected range in the
text to the clipboard, leaving the current selection.

◦ cut() – transfers the currently selected range in the

text to the clipboard, removing the current selection.

◦ selectAll() - selects all text in the text input.

◦ paste() – transfers the contents in the clipboard into

this text, replacing the current selection.

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
57
 Password Field
 The PasswordField class implements a specialized
text field.
 The characters typed by a user are hidden by
displaying an echo string.

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
58
…
 Creating a Password Field
• public PasswordField()
Creates a default PasswordField instance.
PasswordField passwordField = new PasswordField();
passwordField.setPromptText("Your password");
◦ You can accompany the password field with a prompt
message or you can add a notifying label.
◦ As with the TextField class, the PasswordField class
provides the setText method to render a text string in
the control when the application is started.
◦ However, the string specified in the setText method is
hidden by the echo characters in the password field.
◦ By default, the echo character is a dot.

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
59
…
 Evaluating the Password
◦ The value typed in the password field can be obtained
through the getText method.
◦ You can process this value in your application and set
the authentication logic as appropriate.
 Example:

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
60
 …

• The authentication logic of the password field is defined by using the

setOnAction method.
• This method is called when a password is committed and it processes
the typed value.
• If the typed value is different from the required password, the
corresponding message appears in red. 61
 Scroll Bar
 The ScrollBar class enables you to create
scrollable panes.
 It is Either a horizontal or vertical bar with
increment and decrement buttons and a "thumb"
with which the user can interact.
 Typically ScrollBar not used alone but used for
building up more complicated controls such as
the ScrollPane and ListView.

62
…
 Creating a Scroll Bar
◦ public ScrollBar()
 Creates a new horizontal ScrollBar (i.e: getOrientation() ==
Orientation.HORIZONTAL).
ScrollBar sc = new ScrollBar();
sc.setMin(0);
sc.setMax(100);
sc.setValue(50);
◦ The setMin and setMax methods define the
minimum and maximum values represented by the
scroll bar.
◦ When a user moves the thumb, the value of the
scroll bar changes.

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
63
…
 By default, the scroll bar is oriented horizontally.
 However, you can set the vertical orientation by
using the setOrientation method.
 The user can click the left or right button (down
or up button for the vertical orientation) to scroll by
a unit increment.

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
64
 Scroll Pane
 Scroll panes provide a scrollable view of UI
elements.
 It allows the user to scroll the content around
either directly (panning) or by using scroll bars.

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
65
…
 The ScrollPane allows specification of the scroll bar policy,
which determines when scroll bars are displayed: always,
never, or only when they are needed.
 The scroll bar policy can be specified independently for
the horizontal and vertical scroll bars.
 The ScrollPane allows the application to set the current,
minimum, and maximum values for positioning the
contents in the horizontal and vertical directions.
 These values are mapped proportionally onto the
layoutBounds of the contained node.

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
66
…
 ScrollPane layout calculations are based on the
layoutBounds rather than the boundsInParent (visual
bounds) of the scroll node.
 If an application wants the scrolling to be based on the
visual bounds of the node (for scaled content etc.), they
need to wrap the scroll node in a Group.
 Creating a Scroll Pane

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
67
…
 The setContent method defines the node that is
used as the content of this scroll pane.
 You can specify only one node.
 To create a scroll view with more than one
component, use layout containers or the Group
class.
 You can also specify the true value for the
setPannable method to preview the image by
clicking it and moving the mouse cursor.
 The position of the scroll bars changes
accordingly.
AU/Computer Sc. Dept/Java
Programming(CoSc3053) lecture slides
68
…
 Setting the Scroll Bar Policy for a Scroll Pane
◦ The ScrollPane class provides a policy to determine
when to display scroll bars: always, never, or only when
they are needed.
◦ Use the setHbarPolicy and setVbarPolicy methods to
specify the scroll bar policy for the horizontal and
vertical scroll bars respectively.

◦ Set either the setFitToWidth or setFitToHeight method to true to

match a particular dimension, so that the component match the
width or height of the scroll pane.

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
69
 List View
 A ListView displays a horizontal or vertical list of items
from which the user may select, or with which the user
may interact.
 A ListView is able to have its generic type set to
represent the type of data in the backing model.
◦ Doing this has the benefit of making various methods in the
ListView, as well as the supporting classes, type-safe.
 The ListView class represents a scrollable list of items.

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
70
…
 You can populate the list by defining its items
with the setItems method.
 You can also create a view for the items in the list
by applying the setCellFactory method.
 Creating a List View

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
71
…
 To alter the size and height of the list view
control, use the setPrefHeight and setPrefWidth
methods.
 Example:
list.setPrefWidth(100);
list.setPrefHeight(70);

◦ You can orient a ListView object horizontally by setting the

orientation property to Orientation.HORIZONTAL.
◦ This can be done as follows:
list.setOrientation(Orientation.HORIZONTAL)

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
72
…
 At any time, you can track the selection and focus of the
ListView object with the SelectionModel and FocusModel
classes.
 To obtain the current state of each item, use a
combination of the following methods:
◦ getSelectionModel().getSelectedIndex() – Returns the index
of the currently selected items in a single-selection mode
◦ getSelectionModel().getSelectedItem() – Returns the
currently selected item
◦ getFocusModel().getFocusedIndex() – Returns the index of
the currently focused item
◦ getFocusModel().getFocusedItem() – Returns the currently
focused item

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
73
…
 The default SelectionModel used when instantiating a
ListView is an implementation of the
MultipleSelectionModel abstract class.
 However, the default value of the selectionMode property
is SelectionMode.SINGLE.
 To enable multiple selection in a default ListView instance,
use the following sequence of calls:
listView.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);

Note :
• MultipleSelectionModel has the selectedItems and
selectedIndices properties, which are both observable
lists that can be monitored to detect any multiple selections.

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
74
…
 Populating a List View with Data
◦ To enhance your list, you can add data of various types by using the
specific extensions of the ListCell class, such as CheckBoxListCell,
ChoiceBoxListCell, ComboBoxListCell, and TextFieldListCell.
◦ The content of a list cell is not editable by default.
◦ However, the ComboBoxListCell class draws a combo box inside
the list cell.
◦ This modification enables users to build a list of names by selecting
them from a combobox.

75
…
 Processing the List Item Selection

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
76
…

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
77
…

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
78
…
 The addListener method called for the
selectedItemProperty creates a new listener to handle
changes of the selected item.
 If, for instance, the dark orchid item is selected, the label
receives the "darkorchid" caption and is filled with the
corresponding color.

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
79
Table View(Assignment)

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
80
Tree View(Assignment)

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
81
 Tree Table View(Assignment)
 TreeTableView is auser interface component
which is designed to help you to visualize an
unlimited hierarchy of data, presented in columns.

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
82
 Combo Box(Assignment)
 A combo box is a typical element of a user
interface that enables users to choose one of
several options.

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
83
 Separator(Assignment)
 Separator is used to represents a horizontal or
vertical separator line. It serves to divide
elements of the application user interface and
does not produce any action.

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
84
 Slider(Assignment)
 The Slider control consists of a track and a
draggable thumb.
 It can also include tick marks and tick labels that
indicate numeric values of the range.

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
85
Progress Bar and Progress Indicator(Ass )

 ProgressBar provide the capabilities to indicate

that a particular task is processing and to detect
how much of this work has been already done.
 While the ProgressBar class visualizes the
progress as a completion bar, the Progress
Indicator class visualizes the progress in the form
of a dynamically changing pie chart.

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
86
Hyperlink (Assignment)
 The Hyperlink class represents another type of
Labeled control.

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
87
Titled Pane and Accordion(Ass)
 A titled pane is a panel with a title.
 It can be opened and closed, and it can
encapsulate any Node such as UI controls or
images, and groups of elements added to a layout
container.
 Titled panes can be grouped by using the
accordion control, which enables you to create
multiple panes and display them one at a time.

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
88
 Menu(Assignment)
 A menu is a list of actionable items that can be
displayed upon a user’s request.
 When a menu is visible, users can select one
menu item at time.
 After a user clicks an item, the menu returns to
the hidden mode.

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
89
Color Picker and Date Picker (Ass)
Color Picker
Date Picker

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
90
Pagination(Assignment)
 The pagination control that is used to navigate
through multiple pages of content that are
divided into smaller parts.

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
91
 File Chooser(Assignment)
 A file chooser can be used to invoke an open
dialog window for selecting either a single file or
multiple files, and to enable a file save dialog
window.

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
92
Assignment description
 Form a group containing not more than five
members.
 Write a Detail Explanation about JavaFX control
Given to your group
◦ Introduction
◦ Syntax how to create control
◦ Properties of each control
◦ Event handler methods for each control
◦ Provide Example for each control by writing java code
 Write the source code by using your favorite IDE
 Prepare a power point presentation

AU/Computer Sc. Dept/Java

Programming(CoSc3053) lecture slides
93
End of Chapter 3
Next: Streams and File I/O

49