1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

JavaFX + IntelliJ + Scene BuilderでGUIアプリケーションを作るサンプル

Posted at

はじめに

GUIアプリケーションを作りたいと思いました。GUIアプリを作るためのライブラリやフレームワークは色々ありますが、個人的には一番得意なJavaで作れたらいいなと思い、JavaFXを使って開発するための環境構築をしてみました。
サンプルを作っただけで満足しちゃったけど!

肝心なところは他の記事に丸投げするクソ記事ですのでご注意ください。
でも、他の記事に書かれているのと同じことをそのまま書くのは色々とアレだと思うので仕方ないのではないかと(言い訳)

ソースはこちらです。
https://github.com/dhirabayashi/javafx_sample

超適当な用語説明

JavaFX

  • Javaでいい感じのGUIアプリを作れるライブラリ
  • もともとはRIAのライブラリだったが、RIAがオワコンになったため今は普通のGUIライブラリになっている
  • 今はJDKに同梱されなくなったので、OpenJFXを別途導入する必要がある(Gradleがいい感じにやってくれるけど)

IntelliJ(IntelliJ IDEA)

  • Javaに対応したIDE
  • 今はEclipseよりも人気が高い気がする
  • 有料のUltimateと無料のCommunity版がある
  • 今回のサンプルではCommunity版を使用する

SceneBuilder

  • JavaFXでの開発を楽にしてくれるツール
  • ドラッグ&ドロップでコンポーネントを配置するなど、GUIベースで開発ができる

環境

  • macOS Catalina 10.15.6
  • AdoptOpenJDK 14.0.1

環境構築手順

JDKとIntelliJはインストール済みとします。

IntelliJでJavaFXプロジェクトを作成する

下記の記事を参考になさるといいでしょう。プロジェクトの作成からサンプルコードの作成、実行まで一通り網羅されていてわかりやすいです。
IntelliJ IDEAとGradleでのJavaFXアプリケーション開発 〜環境構築からサンプルコードまで〜

しかし、私の環境ではなぜかうまく動かなかったため、少しソースを変更しました。
Class#getResource() → ClassLoader#getResource()

MainApp.java
package com.github.dhirabayashi.javafx;

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

import java.util.Objects;

public class MainApp extends Application {

    @Override
    public void start(Stage stage) throws Exception {
        var cl = getClass().getClassLoader();
        Parent root = FXMLLoader.load(Objects.requireNonNull(cl.getResource("scene.fxml")));

        Scene scene = new Scene(root);
        scene.getStylesheets().add(Objects.requireNonNull(cl.getResource("styles.css")).toExternalForm());

        stage.setTitle("JavaFXサンプル");
        stage.setScene(scene);
        stage.show();
    }
}

Scene BuilderとIntelliJの連携

上記の手順だけでも開発は可能になりますが、全部コードベースで開発するよりも、Scene Builderを導入してGUIベースで開発したほうが楽だと思いますので、その手順を示します。(やはり丸投げですが)

これについてはIntelliJの公式ヘルプがありますので、それをご覧になるといいです。
JavaFX Scene Builderを構成する

やっていることとしては、Scene Builderを別途インストールして、そのパスをIntelliJで設定するだけです。
日本語化していない場合はメニュー名が違っていると思いますが、Preferencesを開いて「JavaFX」で検索すれば出てきます。

JavaFXではfxmlファイルを編集することでGUIの開発を行いますが、Scene Builderを使うとそのfxmlの内容をいい感じに書き換えてくれるというイメージです。
Scene Builderを開くには、fxmlファイルを選択して右クリックメニューから「Open in SceneBuilder」を選択します。1

スクリーンショット 2020-08-30 11.28.22.png

Scene Builderの使い方はこちらの記事がわかりやすかったです。Eclipseの例となっていますが、Scene Builderを開いた後の操作は変わりません。
Scene Biulder の基本的な使い方

おわりに

予告通りのクソ記事でしたが、とりあえずJavaFXの開発環境ができてよかったです。

  1. ダブルクリックでfxmlファイルを開き、左下のタブで「Scene Builder」を選択するという方法もありますが、その手順だと後述のプレビューやコントローラのスケルトンコード生成機能が使えないっぽいので、右クリックからの起動がおすすめです。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?