13 27 Add Change 2

At this stage the TextArea is too small because the details only take one line of information, and the deadline label and other text look squeezed. The right side has a white background, while the left side keeps a grey area. To balance the layout, we tell the VBox to give the TextArea as much space as possible by setting the vgrow hint to ALWAYS on the TextArea inside the VBox. The VBox keeps just enough room for the labels above and below, and gives all the remaining space to the TextArea.

White background on labels and VBox

Then we work on the background colors. On the first Label we add an inline style:

style="-fx-background-color: white;"

We copy that style to the second Label and also to the parent VBox so the whole right pane stays white, even when nothing is selected.

Auto-selecting the first item

It would be nicer if the first task was already selected when the application starts. In the initialize() method of the controller, we add at the bottom:

todoListView.getSelectionModel().selectFirst();

The first item appears highlighted on launch, but the details panel still does not update because the selection was changed programmatically and not by a mouse click. To fix that, we add a ChangeListener on the ListView's selection model inside initialize(), which reacts to every change of the selected item:

todoListView.getSelectionModel()
    .selectedItemProperty()
    .addListener((obs, oldValue, newValue) -> {
        if (newValue != null) {
            TodoItem item = todoListView
                .getSelectionModel().getSelectedItem();
            detailTextArea.setText(item.getDetails());
        }
    });

This is essentially a generic event handler that runs every time the selection changes — whether the user clicks, presses arrow keys or whether we change the selection from code. With this in place, the first task is selected automatically on launch and its details appear on the right.

That is all for this video. In the next one we will format the deadline nicely so the displayed date is more readable. See you soon.