JavaFX8 screen transition

1. Specifications

When executed, screen 1 opens. Screen 1 has a button for transitioning to screen 2 and a button for closing the window. Screen 2 has a button to transition to screen 1.

2. File structure

Create a project in Eclipse.

screenTrance ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ (1) └ src ・ ・ ・ ・ ・ ・ ・ ・ (2) └ pkg ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ (3) ├ Main.java ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ (4) ├ MainController.java ・ ・ ・ ・ (5) ├ Screen.java ・ ・ ・ ・ ・ ・ ・ ・ (6) ├ SubController.java ・ ・ ・ ・ ・ (7) ├ mainScreen.fxml ・ ・ ・ ・ ・ ・ (8) └ subScreen.fxml ・ ・ ・ ・ ・ ・ ・ (9)

(1) Project to be created (2) Source file directory created arbitrarily when creating a project (3) Package to create (4) Source file (described in the next chapter), initial screen (screen 1) startup (5) Source file (described in the next chapter), controller on screen 1 (6) Source file (described in the next chapter), screen startup at screen transition (7) Source file (described in the next chapter), controller for screen 2 (8) Source file (described in the next chapter, created by SceneBuilder), contents of screen 1 (9) Source file (described in the next chapter, created by SceneBuilder), contents of screen 2

3. Source file

3.1. Main.java

Main.java


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

public class Main extends Application {
	@Override
	public void start(Stage primaryStage) {
		try {
			//Loading the scene graph from FXML
			FXMLLoader loader = new FXMLLoader(getClass().getResource("mainScreen.fxml"));
			Parent root = loader.load();

			//Creating a scene with the root node of the scene graph
			Scene scene = new Scene(root, 600, 400);
			//Setting the scene on the stage
			primaryStage.setScene(scene);
			primaryStage.setTitle("Screen 1");
			primaryStage.show();
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

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

3.2. MainController.java

MainController.java


package pkg;

import java.net.URL;
import java.util.ResourceBundle;

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.Button;

public class MainController {

    @FXML
    private ResourceBundle resources;

    @FXML
    private URL location;

    @FXML
    private Button nextButton;

    @FXML
    private Button closeButton;

    @FXML
    void OnclickedCloseButton(ActionEvent event) {
    	closeButton.getScene().getWindow().hide();			//Close screen
    }

    @FXML
    void OnclickedNextButton(ActionEvent event) {
    	nextButton.getScene().getWindow().hide();			//Close screen
    	Screen screen = new Screen();						//Open screen(Method call)Preparation of
    	screen.transitionScreen("subScreen.fxml", "Screen 2");	//Open screen
    }

    @FXML
    void initialize() {
        assert nextButton != null : "fx:id=\"nextButton\" was not injected: check your FXML file 'screen.fxml'.";
        assert closeButton != null : "fx:id=\"closeButton\" was not injected: check your FXML file 'screen.fxml'.";

    }
}

3.3. Screen.java

Screen.java


package pkg;

import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Screen {
	public void transitionScreen(String fxmlName, String fxmlTitle) {
		try {
			//Loading the scene graph from FXML
			FXMLLoader loader = new FXMLLoader(getClass().getResource(fxmlName));
			Parent root = loader.load();

			//Creating a scene with the root node of the scene graph
			Scene scene = new Scene(root, 600, 400);
			//Setting the scene on the stage
			Stage stage = new Stage();

			stage.setScene(scene);
			stage.setTitle(fxmlTitle);
			stage.show();
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
}

3.4. SubController.java

SubController.java


package pkg;

import java.net.URL;
import java.util.ResourceBundle;

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.Button;

public class SubController {

    @FXML
    private ResourceBundle resources;

    @FXML
    private URL location;

    @FXML
    private Button backButton;

    @FXML
    void OnclickedBackButton(ActionEvent event) {
    	backButton.getScene().getWindow().hide();			//Close screen
    	Screen screen = new Screen();						//Open screen(Method call)Preparation of
    	screen.transitionScreen("MainScreen.fxml", "Screen 1");	//Open screen
    }

    @FXML
    void initialize() {
        assert backButton != null : "fx:id=\"backButton\" was not injected: check your FXML file 'subScreen.fxml'.";

    }
}

3.5. mainScreen.fxml

mainScreen.fxml


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

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.text.Font?>


<Pane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="pkg.MainController">
   <children>
      <Button fx:id="nextButton" layoutX="255.0" layoutY="184.0" mnemonicParsing="false" onAction="#OnclickedNextButton" prefHeight="33.0" prefWidth="91.0" text="Go to screen 2" />
      <Button fx:id="closeButton" layoutX="255.0" layoutY="337.0" mnemonicParsing="false" onAction="#OnclickedCloseButton" prefHeight="33.0" prefWidth="91.0" text="close" />
      <Label alignment="CENTER" layoutX="255.0" layoutY="23.0" prefHeight="33.0" prefWidth="91.0" text="Screen 1">
         <font>
            <Font size="20.0" />
         </font>
      </Label>
   </children>
</Pane>

3.6. subScreen.fxml

subScreen.java


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

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.text.Font?>

<Pane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="pkg.SubController">
   <children>
      <Button fx:id="backButton" layoutX="255.0" layoutY="184.0" mnemonicParsing="false" onAction="#OnclickedBackButton" prefHeight="33.0" prefWidth="91.0" text="Go to screen 1" />
      <Label alignment="CENTER" layoutX="255.0" layoutY="23.0" prefHeight="33.0" prefWidth="91.0" text="Screen 2">
         <font>
            <Font size="20.0" />
         </font>
      </Label>
   </children>
</Pane>

4. Actual screen image

4.1. Screen 1

screen1.png

4.2. Screen 2

screen2.png

Recommended Posts

JavaFX8 screen transition
Screen transition method
Screen transition memorandum
[Swift] Simple screen transition summary
Android development ~ Screen transition (intent) ~
[Note] Scene transition with JavaFX
screen
Screen transition Information transfer memorandum
Animation settings at screen transition
Screen transition with swing, java
Screen transition using Intent in Kotlin
[Rails] How to prevent screen transition
Screen transition by Post method [Java]
[Java Swing] Screen transition by CardLayout
JavaFX text
Screen transition memorandum Information transfer from listview
JavaFx memorandum
Screen transition by [Android Studio] [Java] button