13 22 TodoList

Now that we have explored layouts, controls and event handlers in JavaFX, we will put everything together and build a real interactive application: a small to-do list. To keep things focused on the JavaFX concepts we are learning, we deliberately keep the scope minimal: no real validation of user input, no exception handling on edge cases, no commercial-grade polish — just the structure we need to learn how to wire a more realistic UI together.

We start by creating a new project. The FXML file for the main window is renamed MainWindow.fxml, and the IDE is smart enough to rename the related references when we refactor. We change the top-level layout to a BorderPane, which is more flexible than a VBox for splitting the window into regions. We also update the title of the application to "TodoList" and adjust the initial dimensions (for example 900 by 500) so we have enough room to see what we build. A first run confirms that the empty window opens correctly.

Adding a ListView and a data model

The next thing we add is a ListView, the JavaFX control used to display a list of items. Back in the FXML, we add a <left> section to the BorderPane and place the ListView inside it:

<BorderPane.left>
  <ListView/>
</BorderPane.left>

Running the program again, we now see an empty list view on the left side of the window — this will hold our to-do items.

Before going further, we think about the data model. We right-click on the source package, create a new package called datamodel, and inside it we create a new Java class named TodoItem. This class will hold the information for one to-do (description, details, due date, etc.). We will stop here for this video — in the next one we will finish the to-do list application by filling the model and connecting it to the ListView. See you soon.