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:



































As an Amazon Associate I earn from qualifying purchases.

My favorite quotations..


“A man should be able to change a diaper, plan an invasion, butcher a hog, conn a ship, design a building, write a sonnet, balance accounts, build a wall, set a bone, comfort the dying, take orders, give orders, cooperate, act alone, solve equations, analyze a new problem, pitch manure, program a computer, cook a tasty meal, fight efficiently, die gallantly. Specialization is for insects.”  by Robert A. Heinlein

"We are but habits and memories we chose to carry along." ~ Uki D. Lucas


Popular Recent Articles