How to switch between Scenes in JavaFX

In this article, we’ll discuss how to switch between between multiple scenes in JavaFX.

Once you’ve graduated from creating simple GUI’s in JavaFX and are ready to take the next step, creating multiple windows is a topic that will often come up. One way of doing so is to create a new Stage, thus having two windows with different UI elements.

However, there is an alternative. Instead of having multiple windows clutter your screen, just switch the current Scene with another. It’s much simpler than it looks and interesting to learn.

Switching between two Scenes

There isn’t really any new syntax here, just a new concept that’s interesting to learn. Typically we swap between scenes in certain conditions, like maybe a game where a new map is loading, or accessing the “settings” page from a menu etc.

Since we’re focusing more on the layout and contents of the Scene, we’ll bring out the setAlignment() method. This method takes as Parameter a Pos (position) object which determines the position of the widgets in the layout. This method isn’t for the scene though, it’s for our Layout object.

The real magic of this code is the use of the setScene() function. Using this together with the QPushButton widget we can cause our button clicks to change the scene that’s currently being displayed on our stage.

package application;

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.geometry.Pos;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.VBox;


public class Tutorial extends Application  {
	public static void main(String args[]){          
		 launch(args);     
	} 
		
	@Override     
	public void start(Stage primaryStage) throws Exception { 
		VBox layout = new VBox();
		VBox layout2 = new VBox();
		layout.setAlignment(Pos.CENTER);
		layout2.setAlignment(Pos.CENTER);
	
		Scene scene = new Scene(layout, 300, 300);
		Scene scene2 = new Scene(layout2, 300, 300);
		
		Label label1 = new Label("This is the First Scene");
		Label label2 = new Label("This is the Second Scene");
		
		Button button = new Button("Forward");
		button.setOnAction(e -> primaryStage.setScene(scene2));
		
		Button button2 = new Button("Backwards");
		button2.setOnAction(e -> primaryStage.setScene(scene));
		
		TextField text = new TextField();
		text.setMaxWidth(100);
			
		layout.getChildren().addAll(label1, button);
		layout2.getChildren().addAll(label2, button2, text);
		
		primaryStage.setTitle("CodersLegacy");
		primaryStage.setScene(scene);	
		primaryStage.show();
    }
}

It’s necessary for each Scene to have it’s own unique layout. You cannot use the same layout object for both Scenes. Similarly, only add those objects into the layout that you want to see on that specific scene.

Below is the output of the above code. Using Pos.CENTER center-aligned all the objects. You can find a complete list of alignment options here.

Notice that the contents of the TextField remain the same even after the Scene is changed. It’s just something interesting to note.

This marks the end of the Switch between Scenes in JavaFX article. Any suggestions or contributions for CodersLegacy are more than welcome. Questions regarding the article content can be asked in the comments section below.