java-fxにてボタンクリックでイベントを起こし、ラベルを表示・非表示する方法がわかりません。

Question

java fx学習中です。
ボタンクリックにイベントハンドラを持たせたいのですが、クリックの画面遷移ができません。

そもそもfxの概念がわかっていないのが問題と思います。

アンカーパネルを土台にして複数のアンカーパネルを用意してfx:idで制御しようと思ったのですが、できませんでした。

これは発想の問題ですか？　着眼点がズレていますか？
もしくは単なる技術不足ですか？

画面遷移をjavaアプリケーションで行いたいです。
解決策をご教授お願いします。

//---追記拝見しました。

[Main.java]

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

public class Main extends Application {
	@Override
	public void start(Stage primaryStage) {
		try {
			BorderPane root = (BorderPane)FXMLLoader.load(getClass().getResource("Sample.fxml"));
			Scene scene = new Scene(root,600,500);
			scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
			primaryStage.setScene(scene);
			primaryStage.show();
		} catch(Exception e) {
			e.printStackTrace();
		}
	}
	
	public static void main(String[] args) {
		launch(args);
	}
}

[MainController.java]（イベントコントローラ）

package application;

import javafx.event.ActionEvent;
import javafx.fxml.FXML;

public class MainController extends DefaultController {
	protected void dbMake(ActionEvent e) {}
	protected void dbShow(ActionEvent e) {}
	protected void dbDelt(ActionEvent e) {}
	@Override
	protected void retHome(ActionEvent e) {}

}

[DefaultController.java]（全ての画面に共通するイベントを記載）

package application;

import javafx.event.ActionEvent;

abstract class DefaultController {
	abstract protected void retHome(ActionEvent e);
}

[sample.fxml]

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

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.CheckBox?>
<?import javafx.scene.control.Hyperlink?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.BorderPane?>

<BorderPane stylesheets="@application.css" xmlns="http://javafx.com/javafx/9.0.4" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.MainController">
  <center>
    <AnchorPane prefHeight="500.0" prefWidth="600.0" BorderPane.alignment="CENTER">
      <children>
            <AnchorPane fx:id="main" prefHeight="500.0" prefWidth="600.0">
               <children>
              <Label layoutX="240.0" layoutY="60.0" styleClass="title" text="DB管理メイン画面" />
              <Button layoutX="370.0" layoutY="200.0" mnemonicParsing="false" onAction="#dbDelt" styleClass="deltBtn" text="DB削除" />
              <Button layoutX="260.0" layoutY="200.0" mnemonicParsing="false" onAction="#dbShow" styleClass="showBtn" text="DB閲覧" />
              <Button layoutX="150.0" layoutY="200.0" mnemonicParsing="false" onAction="#dbMake" styleClass="makeBtn" text="DB作成" />
               </children>
            </AnchorPane>
            <AnchorPane disable="true" prefHeight="500.0" prefWidth="600.0">
               <children>
               <ScrollPane prefHeight="300.0" prefWidth="400.0" AnchorPane.leftAnchor="100.0" AnchorPane.topAnchor="80.0">
                <content>
                  <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="300.0" prefWidth="400.0" styleClass="DB-List">
                           <children>
                      <CheckBox layoutX="10.0" mnemonicParsing="false" prefHeight="20.0" text="DBname" />
                           </children>
                  </AnchorPane>
                </content>
              </ScrollPane>
              <Button layoutX="180.0" mnemonicParsing="false" prefWidth="90.0" styleClass="deltDB-cxlBtn" text="キャンセル" AnchorPane.bottomAnchor="50.0" />
              <Button layoutX="350.0" mnemonicParsing="false" styleClass="deltDB-dltBtn" text="削除" AnchorPane.bottomAnchor="50.0" />
               </children>
            </AnchorPane>
        <Hyperlink layoutX="220.0" styleClass="retHome" text="メイン画面に戻る" AnchorPane.bottomAnchor="20.0" />

      </children>
    </AnchorPane>
  </center>
</BorderPane>

と書いています。
DB管理デスクトップアプリを作りたいです。

Comments

[KSwordOfHaste]

問題が発想・着眼点・技術力その他の何かは具体的な事実（コード）を見なければなんとも言えません。「複数のアンカーパネルを土台」、「fx:idで制御」といった漠然とした説明ではプログラムがどこまで正しくてどこが間違っているかは判断できないのです。

[makoto-n]

拝見しました。ソースを追記しました。

Answer 1

###アプリケーションが正常に起動しない原因
現状のコードで一番の問題はアプリケーションが正常に起動しない点だと思います。原因はコントローラークラスにFXMLと連携するための記述(@FXMLアノテーション)が抜けているためです。

次のように@FXMLアノテーションを追記すればとりあえず最初の画面は表示されるようになると思います。

public class MainController extends DefaultController {
  @FXML
  protected void dbMake(ActionEvent e) {}
  @FXML
  protected void dbShow(ActionEvent e) {}
  @FXML
  protected void dbDelt(ActionEvent e) {}
  @Override
  protected void retHome(ActionEvent e) {}
}

###画面遷移（画面の切り替え）
実のところJavaFXによる画面遷移の方法は様々考えられるので「こうでなければならない」というような単純な回答はできません。しかしご質問のコードは「どうしたらよいかまだ手探り」のように感じられるので、このコードに対してどうしたらよいと言いにくいです。

例えばFXMLが一つだけあり、そこに複数の画面の構成を盛り込もうとしておられるかのようにも見えます。一方DefaultControllerという基底クラスを定義しておられることから「画面ごとに複数のコントローラーで制御しよう」としている意志も感じられます。

JavaFXでは「一つの画面は単一のFXMLファイルかつ単一のコントローラーで構成する」のが基本なのですがそれに照らすとご質問のコードは「どうしようとしているか今一つ見えない」と言わざるを得ないのです。

バリエーションが色々あるので２つ程例を挙げてみますと・・・

• (A) 単純な構成のアプリケーションを単一FXML/単一コントローラで構成する

こうすることもできます。適当なStackPaneを画面上に配置し、その下に複数の画面を表すAnchorPaneなど任意のコンテナノードを並べて置き、画面の切り替えはそれらのコンテナノードのどれか一つだけvisibleプロパティーをtrueにすることで可能です。ごく単純なアプリならこの方法でも許容できる気がします。

• (B) 画面ごとに別々のコントローラーで制御する

ある程度複雑なアプリケーションならこうすると思います。この場合は画面ごとに「別のFXMLファイル」「別のコントローラークラス」を定義します。画面を切り替える方法も複数考えられます。それぞれのFXMLに対応するウィンドウ(Stage)を別々にしてもよいですし、Stageは単一にし画面毎にSceneを切り替える方法もあります。さらにStageもSceneも単一としてSceneのrootNodeだけを画面ごとに切り替える方法もあります。
ただ、JavaFXというよりJava自体(オブジェクト指向自体)の初心者の方にとって複数のインスタンスを連携させることの難しさの壁があるかも知れません。

まずは上記のどちらでやりたいかによって大方針を決め、それに基づき詳細な方式を検討するとよいのではないでしょうか？

個人的には自然かつ一般的な設計方針として(B)がよいと思います。しかしあえて言えば設計に充分経験を積んでいない場合は(A)の方が取り組みやすいと思います。

Comments

[makoto-n]

回答ありがとうございます。
>>「どうしたらよいかまだ手探り」
まさにその通りにございます。
オブジェクト指向は大雑把に学校で学んだ程度で、
DB管理アプリの外枠はJavaFXで作ってみようというだけです。
ただ、学習のためにFXで作成したいです。
(A)のような設計ができるのではないか？と思い、IDでtrue/fulseしてみようと悩んでいました。
DefaultControllerはextendしてabstractしたら、容易に実装できるのではと考えたからです。

(B)で仰られる「別のコントローラークラス」とScene対応で作成しようと思います。