Java FX: Advanced Controls (Part _02)
Lecture 05
Slider Controls (1 of 6)
• A Slider allows the user to graphically
adjust a number within a range.
• Sliders are created from the Slider
class (in the [Link]
package)
• They display an image of a “slider knob”
that can be dragged along a track.
Slider Controls (2 of 6)
• A Slider is designed to represent a range of numeric values.
• As the user moves the knob along the track, the numeric value is adjusted
accordingly.
• Between the minimum and maximum values, major tick marks are displayed with a
label indicating the value at that tick mark.
• Between the major tick marks are minor tick marks.
Slider Controls (3 of 6)
• The Slider class has two constructors. No-arg:
Slider slider = new Slider();
• Creates a Slider with a minimum value of 0, and a maximum value of 100.
• The Slider’s initial value will be set to 0, and no tick marks will be displayed.
Slider Controls (4 of 6)
• The second constructor accepts three double arguments:
• the minimum value
• the maximum value
• the initial value
Slider slider = new Slider(0.0, 50.0, 25.0);
Slider Controls (5 of 6)
•By default, Slider in JavaFX is Horizontal. To explicitly set orientation:
• Horizontal:
[Link]([Link]);
• Vertical:
[Link]([Link]);
Slider Controls (6 of 6)
Listening to Slider Value Changes
• When a Slider's value changes, a change event occurs.
• To perform an action when the Slider's value changes, write an event handler
that responds to the change event:
[Link]().addListener((observeable, oldvalue, newvalue) −>
{
// Write event handling code here...
});
Or create an anonymous inner class:
[Link]().addListener(new ChangeListener() {
@Override
public void changed(ObservableValue observable, Number oldValue, Number
newValue)
{
[Link]("Slider changed from " + oldValue + " to " + newValue);
}
});
Slider Demo
ListView Controls (1 of 15)
• The ListView control displays a list of items and allows
the user to select one or more items from the list.
ListView Controls (2 of 15)
• The ListView class is in the [Link]
package.
ListView<String> dogListView = new ListView<>();
• Adding items to the ListView:
[Link]().addAll(
"Poodle", "Great Dane", "Labrador", "Terrier");
• Every ListView has an ObservableList for its items
• ObservableList<T> is a special type of list that JavaFX can watch
(observe). Whenever the list changes (items are added, removed, or updated), the UI
(ListView) is automatically updated.
• The <T> means it’s generic; you decide what type of data it holds (e.g., String,
Integer, Student).
ListView Controls (3 of 15)
• Creating a ListView with a preferred size:
ListView<String> catListView = new ListView<>();
[Link](120,100);
[Link]().addAll(“Siamese”,”Persian”,”Bobtail”,
“Burmese”,”Tabby”);
Also..
setTranslateY(double value)//set the position x of the control
setTranslateY(double value)//set the position y of the control
setDisable(boolean value)
ListView Controls (4 of 15)
• Use the ListView class’s
getSelectionModel().getSelectedItem()method
get the item that is currently selected.
String selected = [Link]().getSelectedItem();
• If no item is selected in the ListView, the method
will return null.
ListView Controls (5 of 15)
• Each item in a ListView control is assigned an index.
• The first item (at the top of the list) has the index 0, the
second item has the index 1, and so forth.
• Use the ListView class’s
getSelectionModel().getSelectedIndex() method
get the index of the item that is currently selected:
int index = [Link]().getSelectedIndex();
• If no item is selected in the ListView, the method will return −1.
ListView Controls (6 of 15)
• When the user selects an item in a ListView, a change
event occurs.
• To immediately perform an action when the user selects
an item in a ListView, write an event handler that
responds to the change event:
[Link]().selectedItemProperty().addListener(event −>
{
// Write event handling code here …
String selected = [Link]().getSelectedItem(); // Get the selected name.
[Link](selected); // Display the selected name in the Label.
});
ListView Controls (7 of 15)
• The ListView control’s getItems().addAll()
method adds items to the ListView.
• If the ListView already contains items, the
getItems().addAll() method will not erase the
existing items but will add the new items to the existing
list.
ListView Controls (8 of 15)
• To initialize a ListView control with the contents of an
array or an ArrayList:
– The ListView is just a visual component that shows the data. This makes your
program more organized and flexible. You can easily modify, sort, or
reuse your data without touching the UI.
– Convert the array or ArrayList to an ObservableList. (This
requires the FXCollections class, in the
[Link] package)
– Pass the ObservableList as an argument to the ListView
class’s constructor.
• Using an ObservableList is recommended in most
cases because it simplifies the process of updating and
synchronizing the data displayed in the ListView.
ListView Controls (9 of 15)
• Example: initializing a ListView control with the
contents of an array:
// Create a String array.
String[] strArray = {“Monday”,“Tuesday”,“Wednesday”};
// Convert the String array to an ObservableList.
ObservableList<String> strlist =
[Link](strArray);
// Create a ListView control.
ListView<String> listView = new ListView<>(strList);
• When you use a standard List or other collection types with
ListView, you won't get the automatic updates and synchronization
features that come with an ObservableList. This means that if
you add, remove, or modify items in the underlying List, you'll need to
manually update the ListView to reflect these changes.
ListView Controls (10 of 15)
• Example: initializing a ListView control with the
contents of an ArrayList:
// Create an ArrayList of Strings.
ArrayList<String> strArrayList = new ArrayList<>();
[Link]("Monday");
[Link]("Tuesday") ;
[Link]("Wednesday") ;
// Convert the ArrayList to an ObservableList.
ObservableList<String> strList =
[Link](strArrayList);
// Create a ListView control.
ListView<String> listView = new ListView<>(strList) ;
ListView Controls (11 of 15)
[Link]().selectedItemProperty().addListener
(
(ObservableValue<? extends String> ov, String old_val, String
new_val) -> {
[Link]("Selected color: " + new_val);
});
[Link]().select(0);
• ObservableValue interface inherits from the Observable interface. An
ObservableValue wraps a value, which can be observed for changes. It has a
getValue() method that returns the value it wraps
• You can register a ChangeListener to an ObservableValue. The changed() method
of the ChangeListener is called every time the value of its value changes. The
changed() method receives three arguments: the reference of the ObservableValue,
the old value, and the new value.
ListView Controls (12 of 15)
• The ListView control can operate in either of the
following selection modes:
– Single Selection Mode – The default mode. Only
one item can be selected at a time.
– Multiple Interval Selection Mode – Multiple items
may be selected.
• You change the selection mode with the control’s
getSelectionModel().setSelectionMode()
method.
ListView Controls (13 of 15)
• To change to multiple interval selection mode:
[Link]().setSelectionMode(
[Link]);
• To change back to single selection mode:
[Link]().setSelectionMode(
[Link]);
ListView Controls (14 of 15)
• When a ListView control is in multiple selection mode,
the user can select more than one item.
• To get all of the selected items and their indexes, use the
following methods:
– getSelectionModel().getSelectedItems() —
returns a read-only ObservableList of the selected
items
– getSelectionModel().getSelectedIndices()
— returns a read-only ObservableList of the
integer indices of the selected items
ListView Controls (15 of 15)
• By default, ListView controls are vertically oriented.
• You can set the orientation to either vertical or horizontal with the ListView class’s
setOrientation method.
• When you call the method, you pass one of the following enum constants:
– [Link]
– [Link]
– (The Orientation enum is in the [Link] package.)
ListView<String> listView = new ListView<>();
[Link]().addAll("Monday","Tuesday","Wednesday",
"Thursday","Friday","Saturday",
"Sunday");
[Link]([Link]);
[Link](200, 50);
Demo
ComboBox Controls (1 of 7)
• A ComboBox presents a drop-down list of items that the
user may select from.
• Use the ComboBox class (in the [Link]
package) to create a ComboBox control:
ComboBox<String> nameComboBox = new ComboBox<>();
• Once you have created a ComboBox control, you are
ready to add items to it:
[Link]().addAll(
"Will", "Megan", "Amanda", "Tyler");
ComboBox Controls (2 of 7)
ComboBox Controls (3 of 7)
Some of the ComboBox Methods
Method Description
getValue() Returns the item that is currently selected in the ComboBox.
setValue(value) Selects value in the ComboBox.
setVisibleRowCount(count) The count argument is an int. Sets the number of rows, or items,
to display in the drop-down list.
setEditable(value) The value argument is a boolean. If value is true, the
ComboBox will be editable. If value is false, the ComboBox will
be uneditable.
show() Displays the drop-down list of items.
hide() Hides the drop-down list of items.
isShowing( ) Returns true or false to indicate whether the dropdown list is
visible.
ComboBox Controls (4 of 7)
• You can use the ComboBox class’s getValue() method
get the item that is currently selected:
String selected = [Link]();
• If no item is selected in the ComboBox, the method will
return null.
ComboBox Controls (5 of 7)
• When the user selects an item in a comboBox, an
ActionEvent occurs.
• To immediately perform an action when the user selects
an item in a comboBox, write an event handler that
responds to the ActionEvent:
[Link](event −>
{
// Write event handling code here...
});
ComboBox Controls (6 of 7)
• By default, ComboBox controls are uneditable
– The user cannot type input into the control; he or she can only
select items from a drop-down list.
• An editable ComboBox allows the user to select an item, or type
input into a field that is similar to a TextField.
• Use the setEditable method to make a ComboBox editable:
ComboBox<String> comboBox = new ComboBox<>();
[Link](true);
[Link]().addAll(“England”,”Scotland”,
“Ireland”,“Wales”);
ComboBox Controls (7 of 7)