13 26 Add Change

So far, when the user clicks a task in the ListView, we display its information inside a TextArea. The TextArea only supports plain text, so the due date ends up mixed with the details. The cleaner option is to show the deadline in its own area, outside the TextArea.

To do that, we wrap the TextArea inside a VBox placed in the center region of the BorderPane. The VBox will host the TextArea plus two Labels — one for the details title and one for the due date — which gives us much better control over the layout.

Adding two Labels in the VBox

In the FXML, we add the VBox at the center of the BorderPane, with the TextArea inside it and a Label just above it. We duplicate that Label, so we end up with two: one for the details title (the section above the TextArea) and one for the due date, which sits below. To distinguish them and to identify the one we will update from the controller, we give the deadline label a stable id:

<Label fx:id="deadlineLabel"/>

On the controller side, we declare the matching field annotated with @FXML:

@FXML
private Label deadlineLabel;

Updating the labels in the click handler

Since we no longer need to build a multi-line string, we can drop the StringBuilder from the previous lesson. Inside handleClickListView, we simply set the text of the TextArea to the task details, and the text of the deadline Label to the date string:

TodoItem item = todoListView
    .getSelectionModel().getSelectedItem();

detailTextArea.setText(item.getDetails());
deadlineLabel.setText(item.getDeadline().toString());

We call toString() on the LocalDate to get a clean text representation. Running the app and clicking on a task shows the details in the central area and the deadline at the bottom right of the screen, in their own slots. Both regions update automatically each time we select a different task.

That is it for this video — see you in the next one to keep polishing the design and the styling of the to-do list.