13 25 Base interface 2

Now we want to change the ListView click handler so that, instead of logging to the console, it fills a TextArea with the details and deadline of the selected task. We start by declaring the TextArea in the controller as an @FXML field whose name matches the FXML fx:id:

@FXML
private TextArea detailTextArea;

In the FXML, we set the same id on the TextArea we placed at the center of the BorderPane.

Removing a cast with a typed ListView

Back in the click handler, we used to cast the selected item to TodoItem. If we remove the cast, the project no longer compiles because the IDE infers Object. The cleanest fix is to specify the generic type on the ListView when we declare it, so we type the items correctly:

@FXML
private ListView<TodoItem> todoListView;

Now getSelectionModel().getSelectedItem() directly returns a TodoItem and we can just call its getters: getDetails(), getDeadline(), etc. Setting the text of the area becomes a simple call:

detailTextArea.setText(item.getDetails());

Clicking a task now shows its detailed description in the central area, which already feels much better than the console output.

Adding the deadline with a StringBuilder

We are not done yet: we also want to show the deadline below the details, separated by some blank lines. We build the text with a StringBuilder:

StringBuilder sb = new StringBuilder(item.getDetails());
sb.append("\n\n\n\n");
sb.append("Due: ").append(item.getDeadline().toString());
detailTextArea.setText(sb.toString());

Calling toString() on the LocalDate gives us a clean ISO representation that we can append to the text. Selecting different tasks now shows the description, a few empty lines, then the due date, all inside the TextArea.

That is enough for this video. In the next one we will improve the layout a bit by introducing a VBox with a label for the deadline so the date sits in its own area instead of being mixed inside the TextArea. See you in the next lesson.