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.

Summary

This lesson demonstrates configuring a user interface to display task details when clicking on items. The tutorial covers adding labels and text fields in XML layout to show task descriptions and due dates, using VBox containers to organize elements vertically, and populating these UI components from Java controller code with task data.

Key points

  • Configure layout to display task information (text and due date) upon element interaction
  • Create labels and text fields in XML layout file to show task details separately
  • Use VBox (vertical box) containers to organize and position UI elements vertically
  • Reference XML layout elements in Java controller to update label text with task data
  • Display due date in a separate label since text areas only support plain text content
  • Retrieve task details from data objects and format them as strings for display

FAQ

Why is the due date displayed in a separate label rather than in the text area?

The text area field only supports plain text content and has limited space. The due date is placed in a separate label outside the text area to ensure it is visible and properly formatted on screen.

How do you populate the labels with task information in the Java code?

In the Java controller, reference the label elements by their ID (defined in XML), then use setter methods to update their text with task details retrieved from the data objects.

What is the purpose of using VBox in the layout structure?

VBox is a vertical layout container that arranges UI elements (labels, text fields) in a vertical sequence, providing organized spacing and positioning of task information on the screen.