ListView

ListView displays a list of items. The user can select one or more items, and you can add, remove, or update items from the controller.

Example: Student List Manager

This example allows the user to:

• Add a student name
• Remove the selected student
• Show the selected student
• Clear the entire list

FXML

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.ListView?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>

<VBox spacing="15"
      alignment="TOP_CENTER"
      xmlns="http://javafx.com/javafx/17"
      xmlns:fx="http://javafx.com/fxml/1"
      fx:controller="org.example.demo.HelloController">

    <padding>
        <Insets top="20" right="20" bottom="20" left="20"/>
    </padding>

    <Label text="Student List"
           style="-fx-font-size: 20px; -fx-font-weight: bold;"/>

    <HBox spacing="10" alignment="CENTER">
        <TextField fx:id="nameField"
                   promptText="Enter student name"
                   prefWidth="250"/>

        <Button text="Add"
                onAction="#addStudent"/>
    </HBox>

    <ListView fx:id="studentListView"
              prefWidth="350"
              prefHeight="220"/>

    <HBox spacing="10" alignment="CENTER">
        <Button text="Show Selected"
                onAction="#showSelectedStudent"/>

        <Button text="Remove Selected"
                onAction="#removeSelectedStudent"/>

        <Button text="Clear All"
                onAction="#clearList"/>
    </HBox>

    <Label fx:id="statusLabel"
           text="No action yet."
           wrapText="true"/>
</VBox>

Controller

package org.example.demo;

import javafx.fxml.FXML;
import javafx.scene.control.Label;
import javafx.scene.control.ListView;
import javafx.scene.control.TextField;

public class HelloController {

    @FXML
    private TextField nameField;

    @FXML
    private ListView<String> studentListView;

    @FXML
    private Label statusLabel;

    @FXML
    private void initialize() {

        studentListView.getItems().addAll(
                "Ahmed",
                "Sara",
                "Yacine",
                "Lina"
        );

        studentListView.getSelectionModel().selectedItemProperty().addListener(
                (observable, oldValue, newValue) -> {

                    if (newValue != null) {
                        statusLabel.setText("Selected: " + newValue);
                    }
                }
        );
    }

    @FXML
    private void addStudent() {

        String name = nameField.getText().trim();

        if (name.isEmpty()) {
            statusLabel.setText("Please enter a student name.");
            return;
        }

        studentListView.getItems().add(name);

        statusLabel.setText(name + " was added.");

        nameField.clear();
    }

    @FXML
    private void showSelectedStudent() {

        String selected = studentListView.getSelectionModel().getSelectedItem();

        if (selected == null) {
            statusLabel.setText("No student selected.");
        } else {
            statusLabel.setText("You selected: " + selected);
        }
    }

    @FXML
    private void removeSelectedStudent() {

        String selected = studentListView.getSelectionModel().getSelectedItem();

        if (selected == null) {
            statusLabel.setText("Select a student to remove.");
            return;
        }

        studentListView.getItems().remove(selected);

        statusLabel.setText(selected + " was removed.");
    }

    @FXML
    private void clearList() {

        studentListView.getItems().clear();

        statusLabel.setText("The list is now empty.");
    }
}

What happens?

When the application starts, the list contains:

Ahmed
Sara
Yacine
Lina

If the user enters:

Mohamed

and clicks "Add", then "Mohamed" is added to the ListView.

Selection mode example

By default, the user can select only one item.

To allow multiple selection:

studentListView.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);

Then the user can select several names using Ctrl.

Example:

var selectedStudents = studentListView.getSelectionModel().getSelectedItems();

statusLabel.setText("Selected students: " + selectedStudents);

Do not forget:

import javafx.scene.control.SelectionMode;

Example with custom objects

You can also store objects instead of strings:

ListView<Student> studentListView;

Example class:

public class Student {

    private String name;
    private int age;

    public Student(String name, int age) {
        this.name = name;
        this.age = age;
    }

    @Override
    public String toString() {
        return name + " (" + age + ")";
    }
}

Then:

studentListView.getItems().add(new Student("Ahmed", 20));

The toString() method is what appears inside the ListView.

Important methods

studentListView.getItems().add("Ali");
studentListView.getItems().remove("Ali");
studentListView.getItems().clear();

studentListView.getSelectionModel().getSelectedItem();
studentListView.getSelectionModel().getSelectedItems();
studentListView.getSelectionModel().clearSelection();