Javafx Open New Scene On Button Click – JavaFX switch scenes

Javafx Open New Scene On Button Click – JavaFX switch scenes

Here’s an example of how you can open a new scene and close the current one in JavaFX:

  1. First, create a new JavaFX project and add the necessary FXML and CSS files.
  2. In the FXML file for the first scene (let’s call it “Scene1.fxml”), add a Button element and give it an fx:id attribute. This will allow you to access the Button in the controller class for Scene1.
<Button fx:id="btnOpenScene2" text="Open Scene 2" onAction="#openScene2"/>
  1. In the controller class for Scene1 (let’s call it “Scene1Controller”), create a method that will be called when the Button is clicked. This method should load the FXML file for the second scene (Scene2.fxml) and create a new Scene object with the root element from the FXML file.
public void openScene2(ActionEvent event) throws IOException {
    // Load the FXML file for the second scene
    FXMLLoader loader = new FXMLLoader(getClass().getResource("Scene2.fxml"));
    // Create a new stage for the second scene
    Stage stage = new Stage();
    stage.setScene(new Scene(loader.load()));
    // Set the title for the second scene
    stage.setTitle("Scene 2");
    // Show the second scene
    stage.show();
}
  1. In the FXML file for the second scene (Scene2.fxml), add a Button element and give it an fx:id attribute. This will allow you to access the Button in the controller class for Scene2.
<Button fx:id="btnCloseScene2" text="Close Scene 2" onAction="#closeScene2"/>
  1. In the controller class for Scene2 (let’s call it “Scene2Controller”), create a method that will be called when the Button is clicked. This method should close the current Stage (which corresponds to Scene2) and return to the first scene.
public void closeScene2(ActionEvent event) {
    // Get the current stage
    Stage stage = (Stage) btnCloseScene2.getScene().getWindow();
    // Close the current stage
    stage.close();
}
  1. In the main class for the application (let’s call it “Main”), add code to show the first scene when the application is launched.
public void start(Stage primaryStage) throws Exception {
    // Load the FXML file for the first scene
    FXMLLoader loader = new FXMLLoader(getClass().getResource("Scene1.fxml"));
    // Set the title for the first scene
    primaryStage.setTitle("Scene 1");
    // Set the scene for the primary stage
    primaryStage.setScene(new Scene(loader.load()));
    // Show the primary stage
    primaryStage.show();
}

That’s it! When you run the application, the first scene will be displayed. If you click the “Open Scene 2” button, the second scene will be displayed. If you click the “Close Scene 2” button, the second scene will be closed and you will be returned to the first scene.

Here is the complete source code for a JavaFX application that opens a new scene on button click and closes the current scene when the “Close” button is clicked. The application has two scenes, labeled “Scene 1” and “Scene 2”, and switches between them using the methods described above.

First, here is the FXML code for Scene1.fxml:




<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.StackPane?>

<StackPane fx:id="rootPane" xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml"
           fx:controller="Scene1Controller">
    <Button fx:id="btnOpenScene2" text="Open Scene 2" onAction="#openScene2"/>
</StackPane>

Next, here is the code for the controller class for Scene1 (Scene1Controller.java):




import javafx.event.ActionEvent;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;

import java.io.IOException;

public class Scene1Controller {

    public void openScene2(ActionEvent event) throws IOException {
        // Load the FXML file for the second scene
        FXMLLoader loader = new FXMLLoader(getClass().getResource("Scene2.fxml"));
        // Create a new stage for the second scene
        Stage stage = new Stage();
        stage.setScene(new Scene(loader.load()));
        // Set the title for the second scene
        stage.setTitle("Scene 2");
        // Show the second scene
        stage.show();
    }

}



Here is the FXML code for Scene2.fxml:




<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.StackPane?>

<StackPane fx:id="rootPane" xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml"
           fx:controller="Scene2Controller">
    <Button fx:id="btnCloseScene2" text="Close Scene 2" onAction="#closeScene2"/>
</StackPane>

And here is the code for the controller class for Scene2 (Scene2Controller.java):




import javafx.event.ActionEvent;
import javafx.scene.control.Button;
import javafx.stage.Stage;

public class Scene2Controller {

    public Button btnCloseScene2;

    public void closeScene2(ActionEvent event) {
        // Get the current stage
        Stage stage = (Stage) btnCloseScene2.getScene().getWindow();
        // Close the current stage
        stage.close();
    }

}

Here is the continuation of the main class for the application (Main.java):

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Main extends Application {

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) throws Exception {
        // Load the FXML file for the first scene
        FXMLLoader loader = new FXMLLoader(getClass().getResource("Scene1.fxml"));
        // Set the title for the first scene
        primaryStage.setTitle("Scene 1");
        // Set the scene for the primary stage
        primaryStage.setScene(new Scene(loader.load()));
        // Show the primary stage
        primaryStage.show();
    }

}

To set the width and height of Scene 2, you can simply set the prefWidth and prefHeight properties of the root element in Scene2.fxml. For example:




<StackPane fx:id="rootPane" xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml"
           fx:controller="Scene2Controller" prefWidth="600" prefHeight="400">
    <Button fx:id="btnCloseScene2" text="Close Scene 2" onAction="#closeScene2"/>
</StackPane>

This will set the preferred width of Scene 2 to 600 pixels and the preferred height to 400 pixels.

Alternatively, you can set the width and height properties of the Scene object when you create it in the openScene2 method in Scene1Controller. For example:

public void openScene2(ActionEvent event) throws IOException {
    // Load the FXML file for the second scene
    FXMLLoader loader = new FXMLLoader(getClass().getResource("Scene2.fxml"));
    // Create a new stage for the second scene
    Stage stage = new Stage();
    // Create a new Scene with the root element from the FXML file, and set the width and height
    Scene scene = new Scene(loader.load(), 600, 400);
    stage.setScene(scene);
    // Set the title for the second scene
    stage.setTitle("Scene 2");
    // Show the second scene
    stage.show();
}

This will set the width of Scene 2 to 600 pixels and the height to 400 pixels.

To set the width and height of Scene 1, you can set the prefWidth and prefHeight properties of the root element in Scene1.fxml. For example:




<StackPane fx:id="rootPane" xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml"
           fx:controller="Scene1Controller" prefWidth="800" prefHeight="600">
    <Button fx:id="btnOpenScene2" text="Open Scene 2" onAction="#openScene2"/>
</StackPane>

This will set the preferred width of Scene 1 to 800 pixels and the preferred height to 600 pixels.

Alternatively, you can set the width and height properties of the Scene object when you create it in the start method of the main class (Main.java). For example:

public void start(Stage primaryStage) throws Exception {
    // Load the FXML file for the first scene
    FXMLLoader loader = new FXMLLoader(getClass().getResource("Scene1.fxml"));
    // Set the title for the first scene
    primaryStage.setTitle("Scene 1");
    // Create a new Scene with the root element from the FXML file, and set the width and height
    Scene scene = new Scene(loader.load(), 800, 600);
    // Set the scene for the primary stage
    primaryStage.setScene(scene);
    // Show the primary stage
    primaryStage.show();
}

This will set the width of Scene 1 to 800 pixels and the height to 600 pixels.

You can Clone The Code From This Github Repository Link – https://github.com/mauricemuteti/Javafx-Open-New-Scene-On-Button-Click—JavaFX-switch-scenes

Leave a Reply

Your email address will not be published. Required fields are marked *