JavaFX: switching UI content

In this tutorial we will learn how to switch the UI content of JavaFX Stage using multiple Scenes.
We will crate a simple app that has 3 buttons which change the UI content with the Image shown.

Project Structure

We will start by creating out main Application class which will have member variables which will be references elsewhere:

• app width
• app height
• 3 Scene classes - separate pages we want to show
• common navigation Pane

The navigation in this project is a simple 3 button VBox Pane, since you will want to improve on it and create a more fancy IMPLEMENTATION of this navigation, let's agree to an interface:

And now the simple implementation of our navigation Pane.

When we are asking for the navigation Pane we pass in some identifier of our own choice:

Next we will create couple of Scene classes, but since they will all adhere to the same pattern let's define a common UI interface:

Now we can implement 3 of our Scenes, they are very simple thanks to refactoring of the common code.

Since the pattern of adding Image is the same in all Scenes we created a utility class for that: