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:
- First, create a new JavaFX project and add the necessary FXML and CSS files.
- In the FXML file for the first scene (let’s call it “Scene1.fxml”), add a Button element and give it an
fx:idattribute. This will allow you to access the Button in the controller class for Scene1.
<Button fx:id="btnOpenScene2" text="Open Scene 2" onAction="#openScene2"/>
- 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();
}
- In the FXML file for the second scene (Scene2.fxml), add a Button element and give it an
fx:idattribute. This will allow you to access the Button in the controller class for Scene2.
<Button fx:id="btnCloseScene2" text="Close Scene 2" onAction="#closeScene2"/>
- 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();
}
- 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
