読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

JavaFXのHello Worldを試してみました

Java

Javaプロジェクトの作成

  • Eclipseを起動してNew→Java Projectでプロジェクトを作成。

f:id:tyoshikawa1106:20160411233454p:plain


  • プロジェクト名を入力: MyJavaFX
  • Use Default JREを選択
  • Finishボタンでプロジェクトを作成

f:id:tyoshikawa1106:20160411234839p:plain

クラスの作成

  • New → Classでクラスを作成
  • packageにユニークキーを入力(ドメイン名など)
  • クラス名を入力 : MyApp
  • superクラスのBrowseボタンをクリック
  • 検索ボックスにApplicationと入力、javafxを選択

f:id:tyoshikawa1106:20160412000417p:plain

  • public static void mainの生成チェックをつけておく
  • 入力内容を確認してFinishボタンをクリック

f:id:tyoshikawa1106:20160412000532p:plain

  • クラス生成完了

f:id:tyoshikawa1106:20160412000647p:plain

Javaを実行してみる

さっきつくったクラスを次のように編集

package io.github.tyoshikawa1106;

import javafx.application.Application;
import javafx.stage.Stage;

public class MyApp extends Application {

  @Override
  public void start(Stage primaryStage) throws Exception {
    primaryStage.show();
  }

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

}

Runアイコンをクリック
f:id:tyoshikawa1106:20160412000932p:plain


ウィンドウを表示できます。
f:id:tyoshikawa1106:20160412001013p:plain

FXMLファイルを作成

  • レイアウト部分はFXMLファイルで定義されます。
  • New → Fileから作成

f:id:tyoshikawa1106:20160412001517p:plain

  • Home.fxmlで作成

f:id:tyoshikawa1106:20160412001601p:plain

  • こんな感じ
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<BorderPane prefHeight="300" prefWidth="400"
	xmlns="http://javafx.com/javafx/8"
	xmlns:fx="http://javafx.com/fxml/1">
	<center>
		<Label fx:id="label1" text="Hello JavaFX!" BorderPane.alignment="CENTER" />
	</center>
</BorderPane>
  • MyJavaFXAppを編集
package io.github.tyoshikawa1106;

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

public class MyApp extends Application {

	@Override
	public void start(Stage primaryStage) throws Exception {
		Parent root = FXMLLoader.load(getClass().getResource("Home.fxml"));
		Scene scene = new Scene(root, 400, 300);
		primaryStage.setScene(scene);
		primaryStage.show();
	}

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

}

これで起動するとFXMLファイルで定義したラベルが表示されます。
f:id:tyoshikawa1106:20160412002405p:plain

コントローラの作成

  • ウィンドウフォームから利用するコントローラを作成します。(Javaクラスの作成)

f:id:tyoshikawa1106:20160412003039p:plain

f:id:tyoshikawa1106:20160412003057p:plain

  • こんな感じ
package io.github.tyoshikawa1106;

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

public class HomeController {
	@FXML
	private Label label1;
	
	@FXML
	protected void doClick(ActionEvent event) {
		label1.setText("Hello! World!");
	}
}


コントローラが作成できたので、Home.fxmlを変更

<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<BorderPane prefHeight="300" prefWidth="400"
	fx:controller="io.github.tyoshikawa1106.HomeController"
	xmlns="http://javafx.com/javafx/8"
	xmlns:fx="http://javafx.com/fxml/1">
	<center>
		<Label fx:id="label1" text="Hello JavaFX!" BorderPane.alignment="CENTER" />
	</center>
	<bottom>
		<Button fx:id="button1" onAction="#doClick" text="Click!" BorderPane.alignment="CENTER" />
	</bottom>
</BorderPane>


ボタンが表示され、クリックするとラベルの内容が変更されます。
f:id:tyoshikawa1106:20160412004734p:plain

f:id:tyoshikawa1106:20160412004752p:plain:w300


JavaFXのHello Worldはこんなかんじでした。