JavaFXでGUIアプリを作成してみよう！NetBeansやSceneBuilder等の便利ツールも紹介します。
- システム
エンジニア - JavaFXでGUIアプリケーションを作成する方法が知りたいです。
- プロジェクト
マネージャー - NetBeansを使えば、簡単にGUIアプリケーションを作成できます。順に説明しますので、一緒に見ていきましょう。
JavaFXでGUIアプリを作成してみよう！
今回は、JavaFXでGUIアプリケーションを作成する方法について説明します。NetBeansを使えば、簡単にGUIアプリケーションを作成できます。NetBeansは事前にインストールしておいてください。
JavaFXでGUIアプリケーションの作成に興味のある方はぜひご覧ください。
開発環境
ここでは、GUIアプリケーションの開発環境は以下とします。
|
1
2
3
4
|
NetBeans: Apache NetBeans IDE 12.2
Java: 1.8.0_261; Java HotSpot(TM) 64-Bit Server VM 25.261-b12
Runtime: Java(TM) SE Runtime Environment 1.8.0_261-b12
SceneBuilder: JavaFX Scene Builder 15.0.1
|
JavaFXでGUIアプリケーション作成
JavaFXでGUIアプリケーションを作成する方法を紹介します。NetBeansでFile→New Projectと進みます。次に、Java with Ant→JavaFX→JavaFX FXML Applicationを選択します。デフォルトのまま、Finishボタンをクリックしてください。新規プロジェクトが作成されます。
以下の3ファイルが作成されます。
FXMLDocumentController.java
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
package javafxapplication1;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Label;
/**
*
* @author user
*/
public class FXMLDocumentController implements Initializable {
@FXML
private Label label;
@FXML
private void handleButtonAction(ActionEvent event) {
System.out.println(""You clicked me!"");
label.setText(""Hello World!"");
}
@Override
public void initialize(URL url, ResourceBundle rb) {
// TODO
}
}
|
FXMLDocument.fxml
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<?xml version=""1.0"" encoding=""UTF-8""?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<AnchorPane id=""AnchorPane"" prefHeight=""200"" prefWidth=""320"" xmlns:fx=""http://javafx.com/fxml/1"" fx:controller=""javafxapplication1.FXMLDocumentController"">
<children>
<Button layoutX=""126"" layoutY=""90"" text=""Click Me!"" onAction=""#handleButtonAction"" fx:id=""button"" />
<Label layoutX=""126"" layoutY=""120"" minHeight=""16"" minWidth=""69"" fx:id=""label"" />
</children>
</AnchorPane>
|
JavaFXApplication1.java
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
package javafxapplication1;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
/**
*
* @author user
*/
public class JavaFXApplication1 extends Application {
@Override
public void start(Stage stage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource(""FXMLDocument.fxml""));
Scene scene = new Scene(root);
stage.setScene(scene);
stage.show();
}
/**
* @param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}
}
|
そのままビルドして実行すると、ウィンドウが表示されます。「Click Me!」というボタンをクリックすると、「Hello World!」が表示されます。簡単なGUIアプリケーションが作成できました。
SceneBuilderのインストール
直感的にGUIコンポーネントを配置するために、SceanBuilderを導入します。もちろん、fxmlファイルを直接編集しても構いません。
以下URLからSceneBuilderのインストーラをダウンロードしてインストールしてください。
インストールが終わったら、NetBeansのTools→Options→Java→JavaFXと進みます。次に、Scene Builder Homeに「C:\Program Files\SceneBuilder」を設定します。
ボタンの配置
GUIアプリケーションにボタンを配置して、イベントを設定してみます。
まずは、FXMLDocumentController.javaを以下のように修正します。handleButtonAction2が今回追加したイベントメソッドです。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
package javafxapplication1;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Label;
/**
*
* @author user
*/
public class FXMLDocumentController implements Initializable {
@FXML
private Label label;
@FXML
private void handleButtonAction(ActionEvent event) {
System.out.println(""You clicked me!"");
label.setText(""Hello World!"");
}
@FXML
private void handleButtonAction2(ActionEvent event) {
System.out.println(""You clicked me 2!"");
label.setText(""Hello World2!"");
}
@Override
public void initialize(URL url, ResourceBundle rb) {
// TODO
}
}
|
次に、FXMLDocument.fxmlをダブルクリックすると先ほどインストールしたSceneBuilderが起動します。日本語メニューが文字化けすると思いますが、必要に応じて英語化するなど対処してください。ここでは対処方法については触れません。
ControlsからButtonをドラッグアンドドロップで配置して、onActionイベントを登録します。保存後にfxmlファイルをテキストエディタで開くと、以下のようになります。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<?xml version=""1.0"" encoding=""UTF-8""?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.AnchorPane?>
<AnchorPane id=""AnchorPane"" prefHeight=""200"" prefWidth=""320"" xmlns=""http://javafx.com/javafx/15.0.1"" xmlns:fx=""http://javafx.com/fxml/1"" fx:controller=""javafxapplication1.FXMLDocumentController"">
<children>
<Button fx:id=""button"" layoutX=""126"" layoutY=""90"" onAction=""#handleButtonAction"" text=""Click Me!"" />
<Label fx:id=""label"" layoutX=""126"" layoutY=""120"" minHeight=""16"" minWidth=""69"" />
<Button layoutX=""216.0"" layoutY=""90.0"" mnemonicParsing=""false"" onAction=""#handleButtonAction2"" text=""Button2"" />
</children>
</AnchorPane>
|
「Click Me!」というボタンをクリックすると、「Hello World!」が表示されます。「Button2」ボタンをクリックすると、「Hello World2!」が表示されます。GUIアプリケーションにボタンを追加できました。
- システム
エンジニア - JavaFXでGUIアプリケーションを作成するとき、NetBeansを使えば、簡単にGUIアプリケーションを作成できるのですね。
- プロジェクト
マネージャー - 作成方法が理解できたら、実際にソースコードで指定してみましょう。
まとめ
いかがでしたでしょうか。JavaFXでGUIアプリケーションを作成する方法について説明しました。NetBeansを使えば、簡単にGUIアプリケーションを作成できることがお分かりいただけたと思います。また、SceneBuilderを使用すれば、直感的にコンポーネントを配置できます。
ぜひご自身でソースコードを書いて、理解を深めてください。
FEnetJava・Javaコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。
-
スマホアプリから業務系システムまで
スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
-
充実した研修制度
毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
-
資格取得を応援
スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
-
東証プライム上場企業グループ
オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。
安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。
株式会社オープンアップシステムに興味を持った方へ
株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。
年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。
Java新着案件New Job
-
官公庁向け業務システム開発/Java/東京都千代田区/【WEB面談可】/テレワーク
月給39万～44万円東京都千代田区(永田町駅) -
販売管理システム開発/Java/東京都中央区/【WEB面談可】/テレワーク
月給49万～55万円東京都中央区(京橋駅) -
生命保険会社向けシステム開発/Java/東京都千代田区/【WEB面談可】/テレワーク
月給42万～48万円東京都千代田区(大手町駅) -
社会保険システムのパッケージ開発/Java/東京都港区/【WEB面談可】/テレワーク
月給42万～48万円東京都港区(新橋駅) -
金融機関向けシステム更改/Java/東京都江東区/【WEB面談可】/テレワーク
月給46万～51万円東京都江東区(豊洲駅) -
大手通信会社者向けWebシステム改修/Java/東京都港区/【WEB面談可】/テレワーク
月給42万～48万円東京都港区(品川駅)
