JavaFXで画面遷移がしたい！

2021.08.13
目次
    1. >はじめに
    2. >開発環境
    3. >ディレクトリ構成
    4. >簡単にコードを解説
スポンサーリンク
スポンサーリンク

>はじめに

JavaFXの勉強しているときに、JavaFXで画面遷移するにはどうすればいいんじゃいと、思ったので実際に画面遷移をするシンプルなサンプルアプリを作ってみました。

>開発環境

分かりにくいですが、今回作ったアプリのイメージGIFです。

transition.gif (400×400)

このように画面が切り替わっているのがわかると思います。

gamen.PNG (982×480)

>ディレクトリ構成

このアプリのsrcフォルダの中身は下のようになってます。
 src/
  └application/
    ├Main.java
    ├IndexController.java
    ├NextController.java
    ├Index.fxml
    └Next.fxml

>簡単にコードを解説

今回のアプリは「FXML」を使って画面をデザインしました(デザインはくそですが…)

Index.fxmlとNext.fxmlのコードは本記事ないでは触れませんがGitHubで公開しているのでそちらを参照してください。

また「 Main.java 」は、ほとんどJavaFXプロジェクトを生成した時のままなので説明しません。(追加したのは16行目のアプリのタイトルを表示する所だけです。)

>Main.java

package application;
 
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.AnchorPane;
import javafx.stage.Stage;
 
 
public class Main extends Application {
	@Override
	public void start(Stage primaryStage) {
		try {
			AnchorPane root = (AnchorPane)FXMLLoader.load(getClass().getResource("Index.fxml"));
			Scene scene = new Scene(root,400,400);
			primaryStage.setTitle("初期ページ");
			primaryStage.setScene(scene);
			primaryStage.show();
		} catch(Exception e) {
			e.printStackTrace();
		}
	}
 
	public static void main(String[] args) {
		launch(args);
	}
}

今回のサンプルアプリの動作は二つ画面を行き来するだけなので、基本的には「 IndexController.java 」と「 NextController.java」のコードの内容は同じになります。

また、「画面２」に進むボタン及び「画面１」に戻るボタンの「fx:id」を「nextPage_button」と「backPage_button」、
「画面２」に進むボタン及び「画面１」に戻るボタンを押した時の「On Action」を「nextPage_button_onClick」と「backPage_button_onClick」とそれぞれ設定してあります。

では、画面遷移の説明です。
とは言っても、やっていることはとても簡単で現在表示されている画面を閉じて、新しい画面を生成しているだけです。

この記事は、とにかく動けばいいやという方を対象としているので、GitHub のソースを持ってきてもらって動かしてもらえればいいのですが、それでは無責任なので一応ソースの流れの説明を…

●画面を閉じる処理
「IndexController.java」の24行目でgetScene()メソッドによって取得したシーンを Windowクラス(26行目)のhide()メソッドで閉じています。

●画面を生成する処理
①「IndexController.java」の32行目でParentクラスの変数をparentとし、 FXMLLoaderクラスのloadメソッドの引数で指定したfxmlファイルをparentに入れる。
②Sceneクラスにparentをセットする。
③StageクラスのsetSceneメソッドにparentをセットして、showメソッドで新しい画面を表示させる。

これが一連の流れで、「NextController.java」でも同様の処理をしています。

>IndexController.java

package application;
 
import java.io.IOException;
	
import javafx.event.Event;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.Node;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.stage.Stage;
import javafx.stage.Window;

public class IndexController {
	@FXML
	private Button nextPage_button;
	
	@FXML
	public void nextPage_button_onClick(Event eve) {
		/*
		 * 現在表示されている画面を閉じる
		 */
		Scene s = ((Node)eve.getSource()).getScene();
		Window window = s.getWindow();
		window.hide();
	
		/*
		 * 新しい画面を生成する
		 */
		try {
			Parent parent = FXMLLoader.load(getClass().getResource("Next.fxml"));
			Scene scene = new Scene(parent);
			Stage stage = new Stage();
			stage.setScene(scene);
			stage.setTitle("画面２");
			stage.show();
		}catch(IOException e) {
			e.printStackTrace();
		}
	}
}

>NextController.java

package application;
 
import java.io.IOException;
	
import javafx.event.Event;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.Node;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.stage.Stage;
import javafx.stage.Window;

public class NextController {
	 @FXML
	 private Button backPage_button;
	
	@FXML
	public void backPage_button_onClick(Event eve) {
		 /*
		  * 現在表示されている画面を閉じる
		  */
		Scene s = ((Node)eve.getSource()).getScene();
		Window window = s.getWindow();
		window.hide();
	
		/*
		 * 新しい画面を生成する
		 */
		try {
			Parent parent = FXMLLoader.load(getClass().getResource("Index.fxml"));
			Scene scene = new Scene(parent);
			Stage stage = new Stage();
			stage.setScene(scene);
			stage.setTitle("画面１");
			stage.show();
		}catch(IOException e) {
			e.printStackTrace();
		}
	}
}

コメント