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.

Summary

This lesson covers building a practical TodoList application in JavaFX from scratch. Students learn to set up a project structure, work with FXML (XML-based UI layouts), and integrate UI controls like ListView to display items. The lesson emphasizes creating a real-world application by introducing the data model and class structure, with the complete implementation continuing in the next video.

Key points

  • JavaFX projects use FXML—an XML-based markup language for defining user interfaces in a declarative way
  • ListView control is used to display collections of items dynamically within the application interface
  • Proper project structure requires separate packages for models, UI, and application logic following clean architecture principles
  • UI layout modifications (changing titles, adjusting dimensions, repositioning elements) are made directly in the FXML XML files
  • Building a real-world application requires planning the data model before implementing UI functionality

FAQ

What is FXML and why does JavaFX use it?

FXML is an XML-based markup language specifically designed for JavaFX that allows developers to define user interfaces declaratively. It separates UI structure from code logic and makes it easier to manage complex layouts.

What control is used to display multiple todo items in a list?

The ListView control is introduced in this lesson as the primary component for displaying a collection of items. It automatically handles rendering and management of list elements.

How should the project be organized for a TodoList application?

The lesson demonstrates creating separate packages for the data model (containing todo item classes) and keeping the main application files organized with a dedicated main window file, following proper software architecture practices.