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

The items list in aListView 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 LoggingTextArea logging;public static void main(String[] args) {Application.launch(args);}@Overridepublic void start(Stage stage) {// Create the TextArealogging = new TextArea();logging.setMaxWidth(300);logging.setMaxHeight(150);// Create the LabelsLabel seasonLbl = new Label("Select Season: ");Label fruitLbl = new Label("Select Fruit: ");// Create the Lists for the ListViewsObservableList<String> seasonList = FXCollections.<String>observableArrayList("Spring", "Summer", "Fall", "Winter");ObservableList<String> fruitList = FXCollections.<String>observableArrayList("Apple", "Banana", "Orange", "Mango");// Create the ListView for the seasonsListView<String> seasons = new ListView<>(seasonList);// Set the Orientation of the ListViewseasons.setOrientation(Orientation.VERTICAL);// Set the Size of the ListViewseasons.setPrefSize(120, 100);// Update the TextArea when the selected season changesseasons.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 fruitsListView<String> fruits = new ListView<String>();// Set the Orientation of the ListViewfruits.setOrientation(Orientation.HORIZONTAL);// Set the Size of the ListViewfruits.setPrefSize(200, 100);// Add the items to the ListViewfruits.getItems().addAll(fruitList);// Update the message Label when the selected fruit changesfruits.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 VBoxVBox seasonSelection = new VBox();// Set Spacing to 10 pixelsseasonSelection.setSpacing(10);// Add the Label and the List to the VBoxseasonSelection.getChildren().addAll(seasonLbl,seasons);// Create the Fruit VBoxVBox fruitSelection = new VBox();// Set Spacing to 10 pixelsfruitSelection.setSpacing(10);// Add the Label and the List to the VBoxfruitSelection.getChildren().addAll(fruitLbl,fruits);// Create the GridPaneGridPane pane = new GridPane();// Set the horizontal and vertical gaps between childrenpane.setHgap(10);pane.setVgap(5);// Add the Season List at position 0pane.addColumn(0, seasonSelection);// Add the Fruit List at position 1pane.addColumn(1, fruitSelection);// Add the TextArea at position 2pane.addColumn(2, logging);// Set the Style-properties of the GridPanepane.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 SceneScene scene = new Scene(pane);// Add the Scene to the Stagestage.setScene(scene);// Set the Titlestage.setTitle("A simple ListView Example");// Display the Stagestage.show();}// Method to display the Season, which has been changedpublic 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 + "\n");}// Method to display the Fruit, which has been changedpublic 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 + "\n");}}

1.2 Understanding the ListView Control

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

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

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

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

ListView sets its preferredwidth andheight, which are normally not thewidth andheight that you want for your control. It would have helped developers if the control had provided a property such asvisibleItemCount. Unfortunately, theListView 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 ListViewseasons.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 aListView may be arranged vertically in a single column (default) or horizontally in a single row. It is controlled by theorientation property, as shown in the following code:

// Set the Orientation of the ListViewseasons.setOrientation(Orientation.VERTICAL);// Set the Orientation of the ListViewfruits.setOrientation(Orientation.HORIZONTAL);

The above example shows two instances ofListView. 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 LoggingTextArea logging;public static void main(String[] args) {Application.launch(args);}@Overridepublic void start(Stage stage) {// Create the TextArealogging = new TextArea();logging.setMaxWidth(350);logging.setMaxHeight(350);// Create the LabelLabel monthsLbl = new Label("Select Month: ");// Create the ListViewfinal ListView<String> months = new ListView<>();// Add the items to the List months.getItems().addAll(createMonthList());// Set the size of the ListViewmonths.setPrefSize(120, 120);// Enable multiple selectionmonths.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);// Update the message Label when the selected item changesmonths.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 MonthsHBox monthsSelection = new HBox();// Set Spacing to 10 pixelsmonthsSelection.setSpacing(10);// Add the Label and the List to the HBoxmonthsSelection.getChildren().addAll(monthsLbl, months);// Create some buttons to assist in selectionButton 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 neededselectAllBtn.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 selectedselectAllBtn.setOnAction(new EventHandler<ActionEvent>() {            @Override public void handle(ActionEvent e)             {            months.getSelectionModel().selectAll();            }        });// Update the TextArea when the selection will be deletedclearAllBtn.setOnAction(new EventHandler<ActionEvent>() {            @Override public void handle(ActionEvent e)             {            months.getSelectionModel().clearSelection();            }        });// Update the TextArea when the first item will be selectedselectFirstBtn.setOnAction(new EventHandler<ActionEvent>() {            @Override public void handle(ActionEvent e)             {            months.getSelectionModel().selectFirst();            }        });// Update the TextArea when the last item will be selectedselectLastBtn.setOnAction(new EventHandler<ActionEvent>() {            @Override public void handle(ActionEvent e)             {            months.getSelectionModel().selectLast();            }        });// Update the TextArea when the next item will be selectedselectNextBtn.setOnAction(new EventHandler<ActionEvent>() {            @Override public void handle(ActionEvent e)             {            months.getSelectionModel().selectNext();            }        });// Update the TextArea when the previous item will be selectedselectPreviousBtn.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 VBoxbuttons.getChildren().addAll(selectFirstBtn,selectLastBtn,selectNextBtn,selectPreviousBtn,selectAllBtn,clearAllBtn);// Create the Selection HBoxHBox selection = new HBox();// Set Spacing to 10 pixelsselection.setSpacing(10);// Add the List and the Buttons to the HBoxselection.getChildren().addAll(monthsSelection,buttons);// Create the GridPaneGridPane pane = new GridPane();// Set the horizontal and vertical gaps between childrenpane.setHgap(10);pane.setVgap(5);// Add the HBox to the GridPane at position 0pane.addColumn(0, selection);// Add the Buttons to the GridPane at position 1pane.addColumn(1, buttons);// Create the VBoxVBox root = new VBox();// Set Spacing to 10 pixelsroot.setSpacing(10);// Add the GridPane and the TextArea to the VBoxroot.getChildren().addAll(pane,logging);// Set the Style-properties of the VBoxroot.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 SceneScene scene = new Scene(root);// Add the Scene to the Stagestage.setScene(scene);// Set the Titlestage.setTitle("A ListView Example with a Selection Model");// Display the Stagestage.show();}// Helper-Method to create an ArrayList of Personsprivate 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 changedpublic 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 + "\n");}}

ListView has a selection model that stores the selected state of its items. ItsselectionModel property stores the reference of the selection model. By default, it uses an instance of theMultipleSelectionModel 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, aListView 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 theListView has focus. You can use the up/down arrow in a verticalListView and the left/right arrow in a horizontalListView 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 aListView to operate in multiple selection mode, you need to set theselectionMode property of its selection model, as in the following code:

// Enable multiple selectionmonths.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);

TheMultipleSelectionModel class inherits from theSelectionModel class, which containsselectedIndex andselectedItem properties.

TheselectedIndex 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 thegetSelectedIndices() method that returns a read-onlyObservableList containing the indices of all selected items. If you are interested in listening for selection change in aListView, you can add aChangeListener to theselectedIndex property or aListChangeListener to theObservableList returned by thegetSelectedIndices() method.

TheselectedItem 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 thegetSelectedItems() method that returns a read-onlyObservableList containing all selected items. If you are interested in listening for selection change in aListView, you can add aChangeListener to theselectedItem property or aListChangeListener to theObservableList returned by thegetSelectedItems() method.

The selection model ofListView 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 aListView for making selections and listening for selection change events.

// Update the TextArea when all items will be selectedselectAllBtn.setOnAction(new EventHandler<ActionEvent>() {@Override public void handle(ActionEvent e) {months.getSelectionModel().selectAll();}});// Update the TextArea when the selection will be deletedclearAllBtn.setOnAction(new EventHandler<ActionEvent>() {@Override public void handle(ActionEvent e) {months.getSelectionModel().clearSelection();}});// Update the TextArea when the first item will be selectedselectFirstBtn.setOnAction(new EventHandler<ActionEvent>() {@Override public void handle(ActionEvent e) {months.getSelectionModel().selectFirst();}});// Update the TextArea when the last item will be selectedselectLastBtn.setOnAction(new EventHandler<ActionEvent>() {@Override public void handle(ActionEvent e) {months.getSelectionModel().selectLast();}});// Update the TextArea when the next item will be selectedselectNextBtn.setOnAction(new EventHandler<ActionEvent>() {@Override public void handle(ActionEvent e) {months.getSelectionModel().selectNext();}});// Update the TextArea when the previous item will be selectedselectPreviousBtn.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

ThePerson 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 atoString Method.

Person.java

public class Person {// Declaring the attributesprivate 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;}@Overridepublic String toString() {return firstName + " " + lastName;}}

3.2 The Person Cell Class

The following code declares aPersonCell class, which inherits from theListCell<String> class. You need to update its content in itsupdateItem() method, which is automatically called. The method receives the item, which in this case isString, 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

Want to master JavaFX ?

Subscribe to our newsletter and download theJavaFXProgramming Cookbookright now!

In order to get you prepared for your JavaFX development needs, we have compiled numerous recipes to help you kick-start your projects. Besides reading them online you may download the eBook in PDF format!

Download NOW!

Thank you!

We will contact you soon.

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

Each item in aListView is displayed in an instance ofListCell, which a Labeled control. TheListView class contains acellFactory 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>>{@Overridepublic ListCell<Person> call(ListView<Person> listview) {return new PersonCell();}}

The property type isObjectProperty<Callback<ListView<T>,ListCell<T>>>. The reference of theListView is passed to thecall() method of theCallback object and it returns an instance of theListCell 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. TheupdateItem() method of theListCell receives the reference of the new item.

By default, aListView calls thetoString() method of its items and it displays the string in its cell. In theupdateItem() method of your customListCell, 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 LoggingTextArea logging;public static void main(String[] args) {Application.launch(args);}@Overridepublic void start(Stage stage) {// Create the TextArealogging = new TextArea();logging.setMaxWidth(350);logging.setMaxHeight(350);// Create the LabelLabel personLbl = new Label("Select your Person: ");// Create the ListViewListView<Person> persons = new ListView<>();// Set the size of the ListViewpersons.setPrefSize(150, 120);// Add the Persons to the ListViewpersons.getItems().addAll(createPersonList());// Add a custom cell factory to display formatted names of personspersons.setCellFactory(new PersonCellFactory());// Update the message Label when the selected item changespersons.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 pixelsselection.setSpacing(20);// Add the Label and Persons to the HBoxselection.getChildren().addAll(personLbl, persons);// Create the VBoxVBox root = new VBox();// Set Spacing to 10 pixelsroot.setSpacing(10);// Add the HBox and the TextArea to the VBoxroot.getChildren().addAll(selection, logging);// Set the Style-properties of the VBoxroot.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 SceneScene scene = new Scene(root);// Add the Scene to the Stagestage.setScene(scene);// Set the Titlestage.setTitle("A ListView Example with a Cell Factory");// Display the Stagestage.show();}// Helper-Method to create an ArrayList of Personsprivate 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 changedpublic 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 + "\n");}}

Our program shows how to use a custom cell factory to display the formatted names ofPerson items. The following snippet of code in the program creates and sets a custom cell factory. TheupdateItem() method of theListCell formats the name of thePerson 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 aListView:

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

3.5 The GUI

The following GUI shows aListView with aCellFactory, 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 LoggingTextArea logging;public static void main(String[] args) {Application.launch(args);}@Overridepublic void start(Stage stage) {// Create the TextArealogging = new TextArea();logging.setMaxWidth(350);logging.setMaxHeight(350);// Create the LabelLabel fruitLbl = new Label("Select or Edit Fruits: ");// Create the List of FruitsObservableList<String> fruitList = FXCollections.<String>observableArrayList("Apple", "Banana", "Orange", "Mango", "Lemon");// Create the ListViewfinal ListView<String> fruits = new ListView<String>();// Add the Items to the ListViewfruits.getItems().addAll(fruitList);// Set the size of the ListViewfruits.setPrefSize(200, 120);// Make the ListView editablefruits.setEditable(true);// Add the CellFactory to the ListViewfruits.setCellFactory(TextFieldListCell.forListView());// Select the first entry in the listfruits.getSelectionModel().selectFirst();// Set editing related event handlers (OnEditStart)fruits.setOnEditStart(new EventHandler<ListView.EditEvent<String>>(){@Overridepublic void handle(EditEvent<String> event) {editStart(event);}});// Set editing related event handlers (OnEditCommit)fruits.setOnEditCommit(new EventHandler<ListView.EditEvent<String>>(){@Overridepublic 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>>(){@Overridepublic void handle(EditEvent<String> event) {editCancel(event);}});// Create the Selection BoxHBox selection = new HBox();// Set Spacing to 20 pixelsselection.setSpacing(20);// Add the Label and the ListView to the HBoxselection.getChildren().addAll(fruitLbl,fruits);// Create the VBoxVBox root = new VBox();// Set Spacing to 10 pixelsroot.setSpacing(10);// Add the HBox and the TextArea to the VBoxroot.getChildren().addAll(selection,logging);// Set the Style-properties of the VBoxroot.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 SceneScene scene = new Scene(root);// Add the Scene to the Stagestage.setScene(scene);// Set the Titlestage.setTitle("A ListView Example with Edit Events");// Display the Stagestage.show();}// Helper Methods to display the Index and Value of the Item, which will be editedpublic void editStart(ListView.EditEvent<String> e) {logging.appendText("Edit Start: Index=" + e.getIndex() + ", Item=" + e.getNewValue() + "\n");}public void editCommit(ListView.EditEvent<String> e) {logging.appendText("Edit Commit: Index=" + e.getIndex() + ", Item=" + e.getNewValue() + "\n");}public void editCancel(ListView.EditEvent<String> e) {logging.appendText("Edit Cancel: Index=" + e.getIndex() + ", Item=" + e.getNewValue() + "\n");}}

4.2 Using Editable ListView

TheListView control offers many customizations, and one of them is its ability to let users edit the items. You need to set two properties for aListView 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 aListView is editable and has an editable cell, you can also use theedit(int index) method of theListView to edit the item in the cell at the specified index.

4.2.1 Using a TextField to Edit ListView Items

An instance of theTextFieldListCell is aListCell that displays an item in aLabel when the item is not being edited and in aTextField when the item is being edited. If you want to edit a domain object to aListView, you will need to use aStringConverter to facilitate the two-way conversion. TheforListView() static method of theTextFieldListCell class returns a cell factory configured to be used withString items. The following snippet of code shows how to set aTextField as the cell editor for aListView:

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

4.3 Handling Events While Editing a ListView

An editableListView 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

TheListView class defines aListView.EditEvent<T> static inner class to represent edit-related event objects. ItsgetIndex() method returns the index of the item that is edited. ThegetNewValue() method returns the new input value. ThegetSource() method returns the reference of theListView firing the event. TheListView class providesonEditStart,onEditCommit, andonEditCancel properties to set the event handlers for these methods.

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

// Set editing related event handlers (OnEditStart)fruits.setOnEditStart(new EventHandler<ListView.EditEvent<String>>(){@Overridepublic void handle(EditEvent<String> event) {editStart(event);}});// Set editing related event handlers (OnEditCommit)fruits.setOnEditCommit(new EventHandler<ListView.EditEvent<String>>(){@Overridepublic 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>>(){@Overridepublic 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() + "\n");}public void editCommit(ListView.EditEvent<String> e) {logging.appendText("Edit Commit: Index=" + e.getIndex() + ", Item=" + e.getNewValue() + "\n");}public void editCancel(ListView.EditEvent<String> e) {logging.appendText("Edit Cancel: Index=" + e.getIndex() + ", Item=" + e.getNewValue() + "\n");}

4.4 The GUI

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

The following image shows the item after editing:

5. Download Java Source Code

This was an example ofjavafx.scene.control.ListView

Do you want to know how to develop your skillset to become aJava Rockstar?

Subscribe to our newsletter to start Rockingright now!

To get you started we give you our best selling eBooks forFREE!

1. JPA Mini Book

2. JVM Troubleshooting Guide

3. JUnit Tutorial for Unit Testing

4. Java Annotations Tutorial

5. Java Interview Questions

6. Spring Interview Questions

7. Android UI Design

and many more ....

I agree to theTerms andPrivacy Policy

Sign up

Thank you!

We will contact you soon.