This is a ListView Example. ListView is used to allow a user to select one item or multiple items from a list of items. Each item in a ListView is represented by an instance of the ListCell class, which can be customized.

The items list in a ListView may contain any type of objects. ListView is a parameterized class. The parameter type is the type of the items in the list.















The following table shows an overview of the whole tutorial:

The following examples uses Java SE 7 and JavaFX 2.2.

1. Introduction

1.1 The Code

FxListViewExample1.java

import javafx.application.Application; import javafx.beans.value.ChangeListener; import javafx.beans.value.ObservableValue; import javafx.collections.FXCollections; import javafx.collections.ObservableList; import javafx.geometry.Orientation; import javafx.scene.Scene; import javafx.scene.control.Label; import javafx.scene.control.ListView; import javafx.scene.control.TextArea; import javafx.scene.layout.GridPane; import javafx.scene.layout.VBox; import javafx.stage.Stage; public class FxListViewExample1 extends Application { // Declaring the TextArea for Logging TextArea logging; public static void main(String[] args) { Application.launch(args); } @Override public void start(Stage stage) { // Create the TextArea logging = new TextArea(); logging.setMaxWidth(300); logging.setMaxHeight(150); // Create the Labels Label seasonLbl = new Label("Select Season: "); Label fruitLbl = new Label("Select Fruit: "); // Create the Lists for the ListViews ObservableList<String> seasonList = FXCollections.<String>observableArrayList("Spring", "Summer", "Fall", "Winter"); ObservableList<String> fruitList = FXCollections.<String>observableArrayList("Apple", "Banana", "Orange", "Mango"); // Create the ListView for the seasons ListView<String> seasons = new ListView<>(seasonList); // Set the Orientation of the ListView seasons.setOrientation(Orientation.VERTICAL); // Set the Size of the ListView seasons.setPrefSize(120, 100); // Update the TextArea when the selected season changes seasons.getSelectionModel().selectedItemProperty().addListener(new ChangeListener<String>() { public void changed(ObservableValue<? extends String> ov, final String oldvalue, final String newvalue) { seasonChanged(ov, oldvalue, newvalue); }}); // Create the ListView for the fruits ListView<String> fruits = new ListView<String>(); // Set the Orientation of the ListView fruits.setOrientation(Orientation.HORIZONTAL); // Set the Size of the ListView fruits.setPrefSize(200, 100); // Add the items to the ListView fruits.getItems().addAll(fruitList); // Update the message Label when the selected fruit changes fruits.getSelectionModel().selectedItemProperty().addListener(new ChangeListener<String>() { public void changed(ObservableValue<? extends String> ov, final String oldvalue, final String newvalue) { fruitChanged(ov, oldvalue, newvalue); }}); // Create the Season VBox VBox seasonSelection = new VBox(); // Set Spacing to 10 pixels seasonSelection.setSpacing(10); // Add the Label and the List to the VBox seasonSelection.getChildren().addAll(seasonLbl,seasons); // Create the Fruit VBox VBox fruitSelection = new VBox(); // Set Spacing to 10 pixels fruitSelection.setSpacing(10); // Add the Label and the List to the VBox fruitSelection.getChildren().addAll(fruitLbl,fruits); // Create the GridPane GridPane pane = new GridPane(); // Set the horizontal and vertical gaps between children pane.setHgap(10); pane.setVgap(5); // Add the Season List at position 0 pane.addColumn(0, seasonSelection); // Add the Fruit List at position 1 pane.addColumn(1, fruitSelection); // Add the TextArea at position 2 pane.addColumn(2, logging); // Set the Style-properties of the GridPane pane.setStyle("-fx-padding: 10;" + "-fx-border-style: solid inside;" + "-fx-border-width: 2;" + "-fx-border-insets: 5;" + "-fx-border-radius: 5;" + "-fx-border-color: blue;"); // Create the Scene Scene scene = new Scene(pane); // Add the Scene to the Stage stage.setScene(scene); // Set the Title stage.setTitle("A simple ListView Example"); // Display the Stage stage.show(); } // Method to display the Season, which has been changed public void seasonChanged(ObservableValue<? extends String> observable,String oldValue,String newValue) { String oldText = oldValue == null ? "null" : oldValue.toString(); String newText = newValue == null ? "null" : newValue.toString(); logging.appendText("Season changed: old = " + oldText + ", new = " + newText + "

"); } // Method to display the Fruit, which has been changed public void fruitChanged(ObservableValue<? extends String> observable,String oldValue,String newValue) { String oldText = oldValue == null ? "null" : oldValue.toString(); String newText = newValue == null ? "null" : newValue.toString(); logging.appendText("Fruit changed: old = " + oldText + ", new = " + newText + "

"); } }

1.2 Understanding the ListView Control

You can specify the list items while creating a ListView , as in the following code:

// Create the Lists for the ListViews ObservableList<String> seasonList = FXCollections.<String>observableArrayList("Spring", "Summer", "Fall", "Winter"); // Create the ListView for the seasons ListView<String> seasons = new ListView<>(seasonList);

After you create a ListView , you can add items to its list of items using the items property, which is of the ObjectProperty<ObservableList<T>> type in which T is the type parameter for the ListView , as in the following code:

// Create the Lists for the ListViews ObservableList<String> fruitList = FXCollections.<String>observableArrayList("Apple", "Banana", "Orange", "Mango"); // Create the ListView for the fruits ListView<String> fruits = new ListView<String>(); fruits.getItems().addAll(fruitList);

ListView sets its preferred width and height , which are normally not the width and height that you want for your control. It would have helped developers if the control had provided a property such as visibleItemCount . Unfortunately, the ListView API does not support such a property. You need to set them to reasonable values in your code, as follows:

// Set the Size of the ListView seasons.setPrefSize(120, 100);

If the space needed to display items is larger than what is available, a vertical, a horizontal, or both scrollbars are automatically added.

1.3 Orientation of a ListView

The items in a ListView may be arranged vertically in a single column (default) or horizontally in a single row. It is controlled by the orientation property, as shown in the following code:

// Set the Orientation of the ListView seasons.setOrientation(Orientation.VERTICAL); // Set the Orientation of the ListView fruits.setOrientation(Orientation.HORIZONTAL);

The above example shows two instances of ListView . One uses vertical orientation and the other horizontal orientation.

1.4 The GUI

The following GUI shows an example of two Listiews with two different Orientations:

2. Selection Model in ListView

2.1 The Code

FxListViewExample2.java

import java.util.ArrayList; import javafx.application.Application; import javafx.beans.value.ChangeListener; import javafx.beans.value.ObservableValue; import javafx.event.ActionEvent; import javafx.event.EventHandler; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.control.Label; import javafx.scene.control.ListView; import javafx.scene.control.SelectionMode; import javafx.scene.control.TextArea; import javafx.scene.layout.GridPane; import javafx.scene.layout.HBox; import javafx.scene.layout.VBox; import javafx.stage.Stage; public class FxListViewExample2 extends Application { // Declaring the TextArea for Logging TextArea logging; public static void main(String[] args) { Application.launch(args); } @Override public void start(Stage stage) { // Create the TextArea logging = new TextArea(); logging.setMaxWidth(350); logging.setMaxHeight(350); // Create the Label Label monthsLbl = new Label("Select Month: "); // Create the ListView final ListView<String> months = new ListView<>(); // Add the items to the List months.getItems().addAll(createMonthList()); // Set the size of the ListView months.setPrefSize(120, 120); // Enable multiple selection months.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE); // Update the message Label when the selected item changes months.getSelectionModel().selectedItemProperty().addListener(new ChangeListener<String>() { public void changed(ObservableValue<? extends String> ov, final String oldvalue, final String newvalue) { monthChanged(ov, oldvalue, newvalue); }}); // Create the HBox for the Months HBox monthsSelection = new HBox(); // Set Spacing to 10 pixels monthsSelection.setSpacing(10); // Add the Label and the List to the HBox monthsSelection.getChildren().addAll(monthsLbl, months); // Create some buttons to assist in selection Button selectAllBtn = new Button("Select All"); Button clearAllBtn = new Button("Clear All"); Button selectFirstBtn = new Button("Select First"); Button selectLastBtn = new Button("Select Last"); Button selectNextBtn = new Button("Select Next"); Button selectPreviousBtn = new Button("Select Previous"); // Let all buttons expand as needed selectAllBtn.setMaxWidth(Double.MAX_VALUE); clearAllBtn.setMaxWidth(Double.MAX_VALUE); selectFirstBtn.setMaxWidth(Double.MAX_VALUE); selectLastBtn.setMaxWidth(Double.MAX_VALUE); selectNextBtn.setMaxWidth(Double.MAX_VALUE); selectPreviousBtn.setMaxWidth(Double.MAX_VALUE); // Update the TextArea when all items will be selected selectAllBtn.setOnAction(new EventHandler<ActionEvent>() { @Override public void handle(ActionEvent e) { months.getSelectionModel().selectAll(); } }); // Update the TextArea when the selection will be deleted clearAllBtn.setOnAction(new EventHandler<ActionEvent>() { @Override public void handle(ActionEvent e) { months.getSelectionModel().clearSelection(); } }); // Update the TextArea when the first item will be selected selectFirstBtn.setOnAction(new EventHandler<ActionEvent>() { @Override public void handle(ActionEvent e) { months.getSelectionModel().selectFirst(); } }); // Update the TextArea when the last item will be selected selectLastBtn.setOnAction(new EventHandler<ActionEvent>() { @Override public void handle(ActionEvent e) { months.getSelectionModel().selectLast(); } }); // Update the TextArea when the next item will be selected selectNextBtn.setOnAction(new EventHandler<ActionEvent>() { @Override public void handle(ActionEvent e) { months.getSelectionModel().selectNext(); } }); // Update the TextArea when the previous item will be selected selectPreviousBtn.setOnAction(new EventHandler<ActionEvent>() { @Override public void handle(ActionEvent e) { months.getSelectionModel().selectPrevious(); } }); // Create the VBox for the Buttons VBox buttons = new VBox(); // Add the Buttons to the VBox buttons.getChildren().addAll(selectFirstBtn,selectLastBtn,selectNextBtn, selectPreviousBtn,selectAllBtn,clearAllBtn); // Create the Selection HBox HBox selection = new HBox(); // Set Spacing to 10 pixels selection.setSpacing(10); // Add the List and the Buttons to the HBox selection.getChildren().addAll(monthsSelection,buttons); // Create the GridPane GridPane pane = new GridPane(); // Set the horizontal and vertical gaps between children pane.setHgap(10); pane.setVgap(5); // Add the HBox to the GridPane at position 0 pane.addColumn(0, selection); // Add the Buttons to the GridPane at position 1 pane.addColumn(1, buttons); // Create the VBox VBox root = new VBox(); // Set Spacing to 10 pixels root.setSpacing(10); // Add the GridPane and the TextArea to the VBox root.getChildren().addAll(pane,logging); // Set the Style-properties of the VBox root.setStyle("-fx-padding: 10;" + "-fx-border-style: solid inside;" + "-fx-border-width: 2;" + "-fx-border-insets: 5;" + "-fx-border-radius: 5;" + "-fx-border-color: blue;"); // Create the Scene Scene scene = new Scene(root); // Add the Scene to the Stage stage.setScene(scene); // Set the Title stage.setTitle("A ListView Example with a Selection Model"); // Display the Stage stage.show(); } // Helper-Method to create an ArrayList of Persons private ArrayList<String> createMonthList() { ArrayList<String> months = new ArrayList<String>(); months.add("January"); months.add("February"); months.add("March"); months.add("April"); months.add("May"); months.add("June"); months.add("July"); months.add("August"); months.add("September"); months.add("October"); months.add("November"); months.add("December"); return months; } // Method to display the Data, which has been changed public void monthChanged(ObservableValue<? extends String> observable,String oldValue,String newValue) { String oldText = oldValue == null ? "null" : oldValue.toString(); String newText = newValue == null ? "null" : newValue.toString(); logging.appendText("Itemchanged: old = " + oldText + ", new = " + newText + "

"); } }

ListView has a selection model that stores the selected state of its items. Its selectionModel property stores the reference of the selection model. By default, it uses an instance of the MultipleSelectionModel class. You can use a custom selection model, however, that is rarely needed. The selection model can be configured to work in two modes:

Single selection mode

Multiple selection mode

In single selection mode, only one item can be selected at a time. If an item is selected, the previously selected item is deselected. By default, a ListView supports single selection mode. An item can be selected using a mouse or a keyboard. You can select an item using a mouse-click. Using a keyboard to select an item requires that the ListView has focus. You can use the up/down arrow in a vertical ListView and the left/right arrow in a horizontal ListView to select items.

In multiple selection mode, multiple items can be selected at a time. Using only a mouse lets you select only one item at a time. Clicking an item selects the item. Clicking an item with the Shift key pressed selects all contiguous items. Clicking an item with the Ctrl key pressed selects a deselected item. You can use the up/down or left/right arrow key to navigate and the Ctrl key with the spacebar or Shift key with the spacebar to select multiple items. If you want a ListView to operate in multiple selection mode, you need to set the selectionMode property of its selection model, as in the following code:

// Enable multiple selection months.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);

The MultipleSelectionModel class inherits from the SelectionModel class, which contains selectedIndex and selectedItem properties.

The selectedIndex property is -1 if there is no selection. In single selection mode, it is the index of the currently selected item. In multiple selection mode, it is the index of the last selected item. In multiple selection mode, use the getSelectedIndices() method that returns a read-only ObservableList containing the indices of all selected items. If you are interested in listening for selection change in a ListView , you can add a ChangeListener to the selectedIndex property or a ListChangeListener to the ObservableList returned by the getSelectedIndices() method.

The selectedItem property is null if there is no selection. In single selection mode, it is the currently selected item. In multiple selection mode, it is the last selected item. In multiple selection mode, use the getSelectedItems() method that returns a read-only ObservableList containing all selected items. If you are interested in listening for selection change in a ListView , you can add a ChangeListener to the selectedItem property or a ListChangeListener to the ObservableList returned by the getSelectedItems() method.

The selection model of ListView contains several methods to select items in different ways:

The selectAll() method selects all items.

The selectFirst() and selectLast() methods select the first item and the last item, respectively.

The selectIndices(int index, int… indices) method selects items at the specified indices. Indices outside the valid range are ignored.

The selectRange(int start, int end) method selects all indices from the start index (inclusive) to the end index (exclusive).

The clearSelection() and clearSelection(int index) methods clear all selection and the selection at the specified index, respectively.

The folowing code snippet demonstrates how to use the selection model of a ListView for making selections and listening for selection change events.

// Update the TextArea when all items will be selected selectAllBtn.setOnAction(new EventHandler<ActionEvent>() { @Override public void handle(ActionEvent e) { months.getSelectionModel().selectAll(); } }); // Update the TextArea when the selection will be deleted clearAllBtn.setOnAction(new EventHandler<ActionEvent>() { @Override public void handle(ActionEvent e) { months.getSelectionModel().clearSelection(); } }); // Update the TextArea when the first item will be selected selectFirstBtn.setOnAction(new EventHandler<ActionEvent>() { @Override public void handle(ActionEvent e) { months.getSelectionModel().selectFirst(); } }); // Update the TextArea when the last item will be selected selectLastBtn.setOnAction(new EventHandler<ActionEvent>() { @Override public void handle(ActionEvent e) { months.getSelectionModel().selectLast(); } }); // Update the TextArea when the next item will be selected selectNextBtn.setOnAction(new EventHandler<ActionEvent>() { @Override public void handle(ActionEvent e) { months.getSelectionModel().selectNext(); } }); // Update the TextArea when the previous item will be selected selectPreviousBtn.setOnAction(new EventHandler<ActionEvent>() { @Override public void handle(ActionEvent e) { months.getSelectionModel().selectPrevious(); } });

2.2 The GUI

After starting the “SelectFirst”, “SelectNext” and other buttons were pressed:

The following Image shows the GUI after pressing the button “ClearAll”

3. Using Cell Factory in ListView

3.1 The Person Class

The Person class contains only the attributes first name and last name of a person. The class also supports a Constructor, Getters and Setters for each attribute and a toString Method.

Person.java

public class Person { // Declaring the attributes private String firstName; private String lastName; public Person(String firstName, String lastName) { this.firstName = firstName; this.lastName = lastName; } public String getFirstName() { return firstName; } public void setFirstName(String firstName) { this.firstName = firstName; } public String getLastName() { return lastName; } public void setLastName(String lastName) { this.lastName = lastName; } @Override public String toString() { return firstName + " " + lastName; } }

3.2 The Person Cell Class

The following code declares a PersonCell class, which inherits from the ListCell<String> class. You need to update its content in its updateItem() method, which is automatically called. The method receives the item, which in this case is String , and a boolean argument indicating whether the cell is empty. Inside the method, you call the method in the superclass first. You derive a person from the string argument and set the text in the cell.

PersonCell.java

import javafx.scene.control.ListCell; public class PersonCell extends ListCell<Person> { @Override public void updateItem(Person item, boolean empty) { super.updateItem(item, empty); int index = this.getIndex(); String name = null; // Format name if (item == null || empty) { } else { name = (index + 1) + ". " + item.getLastName() + ", " + item.getFirstName(); } this.setText(name); setGraphic(null); } }

Each item in a ListView is displayed in an instance of ListCell , which a Labeled control. The ListView class contains a cellFactory property that lets you use custom cells for its items.

3.3 The PersonCellFactory Class

PersonCellFactory.java

import javafx.scene.control.ListCell; import javafx.scene.control.ListView; import javafx.util.Callback; public class PersonCellFactory implements Callback<ListView<Person>, ListCell<Person>> { @Override public ListCell<Person> call(ListView<Person> listview) { return new PersonCell(); } }

The property type is ObjectProperty<Callback<ListView<T>,ListCell<T>>> . The reference of the ListView is passed to the call() method of the Callback object and it returns an instance of the ListCell class. The control needs to create only the number of cells that are visible. Upon scrolling, it may reuse the cells that went out of the view to display newly visible items. The updateItem() method of the ListCell receives the reference of the new item.

By default, a ListView calls the toString() method of its items and it displays the string in its cell. In the updateItem() method of your custom ListCell , you can populate the text and graphic for the cell to display anything you want in the cell based on the item in that cell.

3.4 The Code

FxListViewExample3.java

import java.util.ArrayList; import javafx.application.Application; import javafx.beans.value.ChangeListener; import javafx.beans.value.ObservableValue; import javafx.scene.Scene; import javafx.scene.control.Label; import javafx.scene.control.ListView; import javafx.scene.control.TextArea; import javafx.scene.layout.HBox; import javafx.scene.layout.VBox; import javafx.stage.Stage; public class FxListViewExample3 extends Application { // Declaring the TextArea for Logging TextArea logging; public static void main(String[] args) { Application.launch(args); } @Override public void start(Stage stage) { // Create the TextArea logging = new TextArea(); logging.setMaxWidth(350); logging.setMaxHeight(350); // Create the Label Label personLbl = new Label("Select your Person: "); // Create the ListView ListView<Person> persons = new ListView<>(); // Set the size of the ListView persons.setPrefSize(150, 120); // Add the Persons to the ListView persons.getItems().addAll(createPersonList()); // Add a custom cell factory to display formatted names of persons persons.setCellFactory(new PersonCellFactory()); // Update the message Label when the selected item changes persons.getSelectionModel().selectedItemProperty().addListener(new ChangeListener<Person>() { public void changed(ObservableValue<? extends Person> ov, final Person oldvalue, final Person newvalue) { personChanged(ov, oldvalue, newvalue); } }); // Create the Selection HBox HBox selection = new HBox(); // Set Spacing to 20 pixels selection.setSpacing(20); // Add the Label and Persons to the HBox selection.getChildren().addAll(personLbl, persons); // Create the VBox VBox root = new VBox(); // Set Spacing to 10 pixels root.setSpacing(10); // Add the HBox and the TextArea to the VBox root.getChildren().addAll(selection, logging); // Set the Style-properties of the VBox root.setStyle("-fx-padding: 10;" + "-fx-border-style: solid inside;" + "-fx-border-width: 2;" + "-fx-border-insets: 5;" + "-fx-border-radius: 5;" + "-fx-border-color: blue;"); // Create the Scene Scene scene = new Scene(root); // Add the Scene to the Stage stage.setScene(scene); // Set the Title stage.setTitle("A ListView Example with a Cell Factory"); // Display the Stage stage.show(); } // Helper-Method to create an ArrayList of Persons private ArrayList<Person> createPersonList() { ArrayList<Person> persons = new ArrayList<Person>(); persons.add(new Person("Donna", "Duncan")); persons.add(new Person("Layne", "Estes")); persons.add(new Person("John", "Jacobs")); persons.add(new Person("Mason", "Boyd")); persons.add(new Person("Harry", "Eastwood")); return persons; } // Method to display the Person, which has been changed public void personChanged(ObservableValue<? extends Person> ov,Person oldValue,Person newValue) { String oldText = oldValue == null ? "null" : oldValue.toString(); String newText = newValue == null ? "null" : newValue.toString(); logging.appendText("Change: old = " + oldText + ", new = " + newText + "

"); } }

Our program shows how to use a custom cell factory to display the formatted names of Person items. The following snippet of code in the program creates and sets a custom cell factory. The updateItem() method of the ListCell formats the name of the Person object and adds a serial number that is the index of the cell plus one.

The following code snippet shows how to add a custom cell factory to a ListView :

// Add a custom cell factory to display formatted names of persons persons.setCellFactory(new PersonCellFactory());

3.5 The GUI

The following GUI shows a ListView with a CellFactory , which display the id first name and last name of a person:

4. Handling Events While Editing a ListView

4.1 The Code

FxListViewExample4.java

import javafx.application.Application; import javafx.collections.FXCollections; import javafx.collections.ObservableList; import javafx.event.EventHandler; import javafx.scene.Scene; import javafx.scene.control.Label; import javafx.scene.control.ListView; import javafx.scene.control.ListView.EditEvent; import javafx.scene.control.TextArea; import javafx.scene.control.cell.TextFieldListCell; import javafx.scene.layout.HBox; import javafx.scene.layout.VBox; import javafx.stage.Stage; public class FxListViewExample4 extends Application { // Declaring the TextArea for Logging TextArea logging; public static void main(String[] args) { Application.launch(args); } @Override public void start(Stage stage) { // Create the TextArea logging = new TextArea(); logging.setMaxWidth(350); logging.setMaxHeight(350); // Create the Label Label fruitLbl = new Label("Select or Edit Fruits: "); // Create the List of Fruits ObservableList<String> fruitList = FXCollections.<String>observableArrayList("Apple", "Banana", "Orange", "Mango", "Lemon"); // Create the ListView final ListView<String> fruits = new ListView<String>(); // Add the Items to the ListView fruits.getItems().addAll(fruitList); // Set the size of the ListView fruits.setPrefSize(200, 120); // Make the ListView editable fruits.setEditable(true); // Add the CellFactory to the ListView fruits.setCellFactory(TextFieldListCell.forListView()); // Select the first entry in the list fruits.getSelectionModel().selectFirst(); // Set editing related event handlers (OnEditStart) fruits.setOnEditStart(new EventHandler<ListView.EditEvent<String>>() { @Override public void handle(EditEvent<String> event) { editStart(event); } }); // Set editing related event handlers (OnEditCommit) fruits.setOnEditCommit(new EventHandler<ListView.EditEvent<String>>() { @Override public void handle(EditEvent<String> event) { fruits.getItems().set(event.getIndex(), event.getNewValue()); editCommit(event); } }); // Set editing related event handlers (OnEditCancel) fruits.setOnEditCancel(new EventHandler<ListView.EditEvent<String>>() { @Override public void handle(EditEvent<String> event) { editCancel(event); } }); // Create the Selection Box HBox selection = new HBox(); // Set Spacing to 20 pixels selection.setSpacing(20); // Add the Label and the ListView to the HBox selection.getChildren().addAll(fruitLbl,fruits); // Create the VBox VBox root = new VBox(); // Set Spacing to 10 pixels root.setSpacing(10); // Add the HBox and the TextArea to the VBox root.getChildren().addAll(selection,logging); // Set the Style-properties of the VBox root.setStyle("-fx-padding: 10;" + "-fx-border-style: solid inside;" + "-fx-border-width: 2;" + "-fx-border-insets: 5;" + "-fx-border-radius: 5;" + "-fx-border-color: blue;"); // Create the Scene Scene scene = new Scene(root); // Add the Scene to the Stage stage.setScene(scene); // Set the Title stage.setTitle("A ListView Example with Edit Events"); // Display the Stage stage.show(); } // Helper Methods to display the Index and Value of the Item, which will be edited public void editStart(ListView.EditEvent<String> e) { logging.appendText("Edit Start: Index=" + e.getIndex() + ", Item=" + e.getNewValue() + "

"); } public void editCommit(ListView.EditEvent<String> e) { logging.appendText("Edit Commit: Index=" + e.getIndex() + ", Item=" + e.getNewValue() + "

"); } public void editCancel(ListView.EditEvent<String> e) { logging.appendText("Edit Cancel: Index=" + e.getIndex() + ", Item=" + e.getNewValue() + "

"); } }

4.2 Using Editable ListView

The ListView control offers many customizations, and one of them is its ability to let users edit the items. You need to set two properties for a ListView before it can be edited:

Set the editable property of the ListView to true.

Set the cellFactory property of the ListView to a cell factory that produces an editable ListCell.

Select a cell and click to start editing. Alternatively, press the spacebar when a cell has focus to start editing. If a ListView is editable and has an editable cell, you can also use the edit(int index) method of the ListView to edit the item in the cell at the specified index.

4.2.1 Using a TextField to Edit ListView Items

An instance of the TextFieldListCell is a ListCell that displays an item in a Label when the item is not being edited and in a TextField when the item is being edited. If you want to edit a domain object to a ListView , you will need to use a StringConverter to facilitate the two-way conversion. The forListView() static method of the TextFieldListCell class returns a cell factory configured to be used with String items. The following snippet of code shows how to set a TextField as the cell editor for a ListView :

// Create the List of Fruits ObservableList<String> fruitList = FXCollections.<String>observableArrayList("Apple", "Banana", "Orange", "Mango", "Lemon"); // Create the ListView final ListView<String> fruits = new ListView<String>(); // Add the Items to the ListView fruits.getItems().addAll(fruitList); // Make the ListView editable fruits.setEditable(true); // Add the CellFactory to the ListView fruits.setCellFactory(TextFieldListCell.forListView()); // Select the first entry in the list fruits.getSelectionModel().selectFirst();

4.3 Handling Events While Editing a ListView

An editable ListView fires three kinds of events:

An editStart event when the editing starts

An editCommit event when the edited value is committed

An editcancel event when the editing is cancelled

The ListView class defines a ListView.EditEvent<T> static inner class to represent edit-related event objects. Its getIndex() method returns the index of the item that is edited. The getNewValue() method returns the new input value. The getSource() method returns the reference of the ListView firing the event. The ListView class provides onEditStart , onEditCommit , and onEditCancel properties to set the event handlers for these methods.

The following snippet of code adds the necessary event handers to a ListView :

// Set editing related event handlers (OnEditStart) fruits.setOnEditStart(new EventHandler<ListView.EditEvent<String>>() { @Override public void handle(EditEvent<String> event) { editStart(event); } }); // Set editing related event handlers (OnEditCommit) fruits.setOnEditCommit(new EventHandler<ListView.EditEvent<String>>() { @Override public void handle(EditEvent<String> event) { fruits.getItems().set(event.getIndex(), event.getNewValue()); editCommit(event); } }); // Set editing related event handlers (OnEditCancel) fruits.setOnEditCancel(new EventHandler<ListView.EditEvent<String>>() { @Override public void handle(EditEvent<String> event) { editCancel(event); } });

The handlers prints the index and the value of the edited item:

public void editStart(ListView.EditEvent<String> e) { logging.appendText("Edit Start: Index=" + e.getIndex() + ", Item=" + e.getNewValue() + "

"); } public void editCommit(ListView.EditEvent<String> e) { logging.appendText("Edit Commit: Index=" + e.getIndex() + ", Item=" + e.getNewValue() + "

"); } public void editCancel(ListView.EditEvent<String> e) { logging.appendText("Edit Cancel: Index=" + e.getIndex() + ", Item=" + e.getNewValue() + "

"); }

4.4 The GUI

The following image shows the ListCell after double clicking in the edit mode:

The following image shows the item after editing:

5. Download Java Source Code

This was an example of javafx.scene.control.ListView