13 24 Base interface

We continue the to-do list project. Back in the FXML created in the previous video, we give the ListView an fx:id so the controller can reach it: fx:id="todoListView". In the controller we declare a matching field annotated with @FXML:

@FXML
private ListView<TodoItem> todoListView;

The field name must match the id exactly. We can then fill the list from the seed data we already prepared, and force single-selection mode because we only display one task's details at a time on the right side of the screen:

todoListView.getItems().setAll(todoItems);
todoListView.getSelectionModel()
            .setSelectionMode(SelectionMode.SINGLE);

Showing a readable label instead of an object reference

If we run the app now, the ListView shows entries like TodoItem@1a2b3c — Java prints the default object reference. To display the short description instead, we override toString() on TodoItem and return only the short description (no field labels), so the list looks clean:

@Override
public String toString() {
  return shortDescription;
}

Now each row shows its short description, and holding Shift while clicking confirms we can only select one item at a time.

Showing details with a TextArea on selection

To display the details of the selected task, we add a TextArea at the center of the BorderPane:

<BorderPane.center>
  <TextArea/>
</BorderPane.center>

We then add an event handler on the ListView that fires when the user clicks it. In the controller:

@FXML
public void handleClickListView() {
  TodoItem item = (TodoItem) todoListView
      .getSelectionModel().getSelectedItem();
  System.out.println("Selected item: " + item);
}

We bind it from the FXML: onMouseClicked="#handleClickListView". Running the application and clicking on a row now logs the selected item's description in the console — confirming the handler is wired correctly. That is all for this video; in the next one we display the details and the deadline inside the TextArea. See you soon.

Summary

This lesson covers building a JavaFX Todo application interface using ListView and TextArea controls. It demonstrates how to populate a ListView from Java code, configure single-selection mode, and customize item display by overriding the toString() method. The lesson also covers adding event handlers to respond to ListView selection changes and retrieving selected items via the SelectionModel.

Key points

• Add fx:id attribute to ListView in FXML and declare a corresponding @FXML-annotated variable in the controller
• Populate ListView items using getItems().setAll() method to display data from Java code
• Configure single-selection mode using SelectionMode.SINGLE to prevent multiple item selection
• Override toString() method in model classes to control what text appears in the ListView display
• Create event handlers and bind them to FXML controls using onMouseClicked attribute with handler method reference
• Use SelectionModel to retrieve the currently selected item from ListView via getSelectionModel().getSelectedItem()

FAQ

Why should you override the toString() method for items in a ListView?

By default, ListView displays the object reference for each item. Overriding toString() allows you to control what information is displayed, such as showing only the description instead of the object reference.

What is SelectionMode.SINGLE and when should you use it?

SelectionMode.SINGLE restricts the ListView to allow only one item to be selected at a time. This is useful when your UI design (like displaying details on the right side) is designed to show information for a single selected item.

How do you connect an event handler method to a ListView in FXML?

Use the onMouseClicked attribute in the FXML ListView tag and reference the handler method name with a hash prefix, like onMouseClicked="#handleClickListView". Then implement the corresponding method in the controller class.