13.32 loading and saving TodoItems part 2

Now that the data is being loaded from the file we can clean up the controller. The hard-coded TodoItems and the temporary line we used to bootstrap the file can be commented out. We still want to populate the ListView, but instead of using a local todoItems reference we call TodoData.getInstance().getTodoItems(). The rest of the initialization stays the same, so the ListView now displays whatever was loaded from disk.

Back in TodoData the temporary setTodoItems method that helped us seed the file is no longer used and can be removed. Running the app at this point should behave exactly as before, except the data really comes from the file.

Adding a File menu to the main window

With persistence working, we go back to the UI. We give the user a way to add a new to-do by attaching a menu bar to the top region of the BorderPane. In the FXML we add a <top> tag containing a <MenuBar>. An empty menu bar looks the same on screen, so we add a <Menu text="File"> inside it. Now clicking File still does nothing because we have not defined any items yet.

  • Inside the Menu, add an <items> tag.
  • Add a <MenuItem text="New"/>.
  • Add a <SeparatorMenuItem/>.
  • Add a second <MenuItem text="Exit"/>.

Running the program now shows a File menu with New, a separator and Exit. Clicking the entries does nothing because we have not wired any event handlers, which is exactly what the next video focuses on so we can pop the new-item dialog.

Summary

In this continuation lesson on loading and saving TodoItems, the instructor refactors the controller to load todo items from a file via the TodoData singleton instance instead of hardcoded data, and begins building the user interface by adding a menu bar with File menu options. The focus shifts from data persistence to UI development, preparing the foundation for user-driven item creation through menu interactions.

Key points

  • Replace hardcoded TodoItems with data loaded from file using TodoData.getInstance().getTodoItems()
  • Remove temporary setTodoItems() method from TodoData class after verifying file-based loading works correctly
  • Add a MenuBar to the top of the BorderPane FXML structure for application menu controls
  • Create a File menu with "new" and "exit" menu items separated by a Separator element
  • Understand that menu items require event handlers to perform actions when clicked
  • Set the foundation for implementing a dialog box that allows users to create new todo items

FAQ

Why was the setTodoItems() method removed from the TodoData class?

The setTodoItems() method was a temporary placeholder used for testing with hardcoded data. Once the application was refactored to load TodoItems from a file using getInstance().getTodoItems(), this method was no longer needed and could be safely commented out or removed.

How do you add a menu bar to a JavaFX application in FXML?

Use the <top> tag within the BorderPane to position content at the top, then add a <MenuBar> element. Inside the MenuBar, define <Menu> elements with a text attribute (like "File"), and within each Menu add <MenuItem> and <SeparatorMenuItem> elements to create the menu structure.

Why don't the menu items respond when clicked in this lesson?

Menu items require event handlers to be implemented before they can perform actions. The lesson shows how to build the menu structure, but the functional event handling for the "new" and "exit" menu items will be implemented in the next video.