JavaFXで画面遷移がしたい！
更新：2019/09/12
はじめに
JavaFXの勉強しているときに、JavaFXで画面遷移するにはどうすればいいんじゃいと、思ったので実際に画面遷移をするシンプルなサンプルアプリを作ってみました。
開発環境
OS : Windows 10 home
IDE : Eclipse Photon
IDE : Eclipse Photon
作ったアプリ
分かりにくいですが、今回作ったアプリのイメージGIFです。
このように画面が切り替わっているのがわかると思います。
このように画面が切り替わっているのがわかると思います。
ディレクトリ構成
このアプリのsrcフォルダの中身は下のようになってます。
src/
└application/
├Main.java
├IndexController.java
├NextController.java
├Index.fxml
└Next.fxml
└application/
├Main.java
├IndexController.java
├NextController.java
├Index.fxml
└Next.fxml
簡単にコードを解説
今回のアプリは「FXML」を使って画面をデザインしました(デザインはくそですが...)
Index.fxmlとNext.fxmlのコードは本記事ないでは触れませんがGitHubで公開しているのでそちらを参照してください。
また「 Main.java 」は、ほとんどJavaFXプロジェクトを生成した時のままなので説明しません。(追加したのは16行目のアプリのタイトルを表示する所だけです。)
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」でも同様の処理をしています。
また、「画面２」に進むボタン及び「画面１」に戻るボタンの「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();
}
}
}おわりに
簡単な流れの説明でしたが、JavaFXで画面遷移ができるようになったと思います.少しでも皆さんのお力になれたら光栄です。
サンプルコード
関連記事
Tweet