JavaFX チュートリアル〜今度こそ、初めてでも大丈夫3:Button〜

イントロダクション

以前記載した記事で「初めてでも大丈夫」などと記載していましたが、ちょっと「危ういな」と思いチュートリアルをやってみようとなりました。

今回は、ボタンの表示をやります。

チュートリアル

ここのページを、戦国Xサラの要領でガンガン斬り伏せながらやっていきます。

<チュートリアル>

基本のコード

public class Lv2_Button extends Application {

	/**
	 * このメソッドは、Applicationクラス(JavaFXのフレームワーク部品)
	 * のメソッドをオーバーライドする。
	 * {@link Application#launch(String...)}から呼び出される。
	 */
	@Override
	public void start(Stage primaryStage) throws Exception {
		// チュートリアルには省略されている部分
		Group group = new Group();
		// この部分がチュートリアルに記載されている。

		// Fontを使用する方法
		Label label1 = new Label();
		label1.setFont(new Font("Aeial", 30));
		label1.setText("Text1");
		label1.setTranslateX(60);
		label1.setTranslateY(60);

		// 回転させる
		label1.setRotate(-45.0);

		// ボタンを追加する
		Button btn = new Button();
		
		// 上のコンポーネント(Labelとか、イメージとか)
		group.getChildren().addAll(label1, btn);
		// チュートリアルでは省略されている
		Scene scene = new Scene(group, 300, 300);
		primaryStage.setScene(scene);
		primaryStage.setTitle("チュートリアル1");
		primaryStage.show();
	}

	/**
	 * メインメソッド。
	 * Apllicationクラスのlaunchメソッドを呼び出す。
	 * 
	 * @param args プログラム引数
	 */
	public static void main(String[] args) {
		launch(args);
	}
}

このコードの実行結果

ちょっとわかりずらいけど、左端にボタンがあります。ボタンかどうかも怪しい感じです。ボタンだとわかるようにします。下の様にコードを修正します。

// ボタンを追加する
Button btn = new Button("ボタン");

ボタンが表示されました。しかし位置が悪い。。。

ソースを以下の様に追加修正します。

// ボタンを追加する
Button btn = new Button("ボタン");
btn.setLayoutX(100.0);
btn.setLayoutY(120.0);

やっぱりなんか微妙だけどまぁよし!ボタンを作成した(new Button())の行の下にあるコードは、Labelクラスでも使用したメソッドと同じ名前です。「setLayout?()」?の部分に「X」「Y」が入りそれぞれの位置を指定します。

アイコンの追加

さらにコードを修正します。

// イメージファイルの読み込み
Image img = new Image(
    this.getClass().getResourceAsStream("check.png"));
btn.setGraphic(new ImageView(img));

コードが長くなってしまった場合は、上の様にインデントをつけて(コードの開始位置をずらして)次の行にコードを書きます。そして、Imageクラスのインスタンス化(new Image())の部分はこのクラスのあるディレクトリ(フォルダ)と同じ場所にあるcheck.pngファイルを読み込んでいます。起動しているのは「Lv2_Button」クラスです。

そして、ボタンにイメージを追加しています。btn.setGraphic(new ImageView(img));これはImageViewクラスはNodeクラスを継承している(親子関係があるけど、Imageクラスにはないのでbtn.setGraphic(Node);の形位に遭わないためこの様に処理をしています。詳しくはJavaDocを参照されたし。。。

追伸:ButtonクラスはNodeクラスを継承しているので「setGraphic()」はNodeクラスのメソッドですがButtonクラスでも使用できます。この部分はおいおい理解していきましょう。

そして実行結果、よくみるとアイコンに余計な部分も入っています。元になるcheck.pngファイルをちゃんと加工していないのでこの様になります。

アクションの割り当て

アクション→ボタンを押下した時の処理を実装します。追加するコードは以下の様になります。

// アクションの追加
btn.setOnAction(event -> {
	label1.setRotate(label1.getRotate() + 15.0);
});

チュートリアルにはスタイルの指定もありましたが、ちょいと飛ばしてしまおうと思います。。。

でわでわ。。。