JavaFXでGUIアプリを作成してみよう！NetBeansやSceneBuilder等の便利ツールも紹介します。

ツール

公開日時: 2021-03-22 　更新日時: 2021-10-08

JavaFXでGUIアプリを作成してみよう！NetBeansやSceneBuilder等の便利ツールも紹介します。

この記事でわかること

システム エンジニア: JavaFXでGUIアプリケーションを作成する方法が知りたいです。

プロジェクト マネージャー: NetBeansを使えば、簡単にGUIアプリケーションを作成できます。順に説明しますので、一緒に見ていきましょう。

JavaFXでGUIアプリを作成してみよう！

今回は、JavaFXでGUIアプリケーションを作成する方法について説明します。NetBeansを使えば、簡単にGUIアプリケーションを作成できます。NetBeansは事前にインストールしておいてください。

JavaFXでGUIアプリケーションの作成に興味のある方はぜひご覧ください。

開発環境

ここでは、GUIアプリケーションの開発環境は以下とします。

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

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

/*
 * 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
    }    
    
}

* 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

<?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>

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

<?import java.lang.*?>

<?import java.util.*?>

<?import javafx.scene.*?>

<?import javafx.scene.control.*?>

<?import javafx.scene.layout.*?>

</children>

</AnchorPane>

JavaFXApplication1.java

/*
 * 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);
    }
    
}

* 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のインストーラをダウンロードしてインストールしてください。

Scene Builder

インストールが終わったら、NetBeansのTools→Options→Java→JavaFXと進みます。次に、Scene Builder Homeに「C:\Program Files\SceneBuilder」を設定します。

ボタンの配置

GUIアプリケーションにボタンを配置して、イベントを設定してみます。
まずは、FXMLDocumentController.javaを以下のように修正します。handleButtonAction2が今回追加したイベントメソッドです。

/*
 * 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
    }    
    
}

* 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ファイルをテキストエディタで開くと、以下のようになります。

<?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>

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

<?import javafx.scene.control.Button?>

<?import javafx.scene.control.Label?>

<?import javafx.scene.layout.AnchorPane?>

</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。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

JavaFXでGUIアプリを作成してみよう！NetBeansやSceneBuilder等の便利ツールも紹介します。

JavaFXでGUIアプリを作成してみよう！

開発環境

JavaFXでGUIアプリケーション作成

SceneBuilderのインストール

ボタンの配置

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

Java新着案件New Job

官公庁向け業務システム開発/Java/東京都千代田区/【WEB面談可】/テレワーク

販売管理システム開発/Java/東京都中央区/【WEB面談可】/テレワーク

生命保険会社向けシステム開発/Java/東京都千代田区/【WEB面談可】/テレワーク

社会保険システムのパッケージ開発/Java/東京都港区/【WEB面談可】/テレワーク

金融機関向けシステム更改/Java/東京都江東区/【WEB面談可】/テレワーク

大手通信会社者向けWebシステム改修/Java/東京都港区/【WEB面談可】/テレワーク

JavaFXでGUIアプリを作成してみよう！NetBeansやSceneBuilder等の便利ツールも紹介します。

JavaFXでGUIアプリを作成してみよう！

開発環境

JavaFXでGUIアプリケーション作成

SceneBuilderのインストール

ボタンの配置

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

Java新着案件New Job

官公庁向け業務システム開発/Java/東京都千代田区/【WEB面談可】/テレワーク

販売管理システム開発/Java/東京都中央区/【WEB面談可】/テレワーク

生命保険会社向けシステム開発/Java/東京都千代田区/【WEB面談可】/テレワーク

社会保険システムのパッケージ開発/Java/東京都港区/【WEB面談可】/テレワーク

金融機関向けシステム更改/Java/東京都江東区/【WEB面談可】/テレワーク

大手通信会社者向けWebシステム改修/Java/東京都港区/【WEB面談可】/テレワーク

関連記事Related Posts