LoginSignup
2
3

OpenJDK + OpenJFXでJavaアプリ開発環境構築

Last updated at Posted at 2023-12-04

はじめに

PCを新調したので改めてJavaの開発環境を構築したので,メモも兼ねて記事作成.

OpenJDK + OpenJFXのインストールとEclipse上の設定までの手順.

JavaFXを使うこともあって,あらかじめ同梱されてる(らしい)Liberica JDKというディストリビューションをつかおうと思いましたが,いろいろ詰まったので結局それぞれOpen JDKとOpenJFXでやることにしました.

Open JDKとOpenJFXのインストール

Open JDK

Oracleの公式ページより「JDK」からプラットフォームに合ったものをDLしましょう.
スクリーンショット 2023-12-04 103442.png
スクリーンショット 2023-12-04 104918.png

適当な場所に解凍して環境変数を通します

  • 「(略)/jdk-xx.x.x/bin」を環境変数"PATH"に追加
  • 「(略)/jdx-xx.x.x/」を環境変数"JAVA_HOME"に追加 1 (なければ新規作成)

最後にターミナルでコマンドを売ってパスが通っているか確認しましょう.

>java --version

スクリーンショット 2023-12-04 104115.png
インストールしたバージョンが表示されればOK.

Open JFX

Open JDKと同じく,Oracleの公式ページから配布ページに飛べます
image.png
image.png

SDKとJMODsという2つの項目がありますが,開発に必要なSDKをダウンロードしましょう.
JMODsは配布用のスタンドアロンJarを作るときに必要なはず.

ダウロードした圧縮ファイルを解凍したら,適当なところに配置しておきましょう.

Scene Builderのインストール

JavaFXはSwingやAWTと異なり,ソースコードにコンポーネントをハードコードするのではなく,FXMLというファイルにコンポーネントやその入れ子構造を記述してGUIを構成します.
FXMLをハンドライトするのは非効率的なので,直感的にGUIを作成できるツールがあります.
それが「Scene Builder」です.
2023-12-04.png
Gluonの公式ページよりインストーラをダウンロードできます
インストール先はのちの設定で必要になるので控えておいてください.

Eclipseのインストールと設定

Eclipseのインストール

Pleiadesの公式ページよりPleiades All in One Eclipseのお好みのエディション,バージョンをダウンロードして適当なところに解凍しましょう2

JDKを自前でインストールしているので,一番同梱物の少ないPlatformエディションでも問題ないと思います.

JavaFX向け拡張機能のインストール

Eclipseを起動し,ウィンドウ上端のメニューより[ヘルプ]→[Eclipse マーケットプレース]からマーケットプレースを起動.
検索ボックスにJavaFXと入力してEnter
トップに出てくる拡張機能「e(fx)clipse」をインストール
スクリーンショット 2023-12-04 110748.png

インストール時に規約に同意するか聞かれるのでOKでそのまま進みましょう.

拡張機能の設定

拡張機能にJavaFX開発で必要な「JavaFX SDK」と「Scene Builder」のパスを教えてあげる必要があります.
Eclipseのウィンドウ上端のメニューバーより,「ウィンドウ」->「設定」から設定ウィンドウを開き,左のツリーから「JavaFX」をクリックします.
image.png
ここにScene Builderの本体とJavaFXのディレクトリの"lib"ディレクトリを指定します.

JavaFXプロジェクトの作成

以上で環境設定は終わりです.
最後に簡単なJavaFXアプリケーションを作って終わりにしましょう.

新規プロジェクトの作成

新規Javaプロジェクトを作成しましょう
Eclipseのメニューより「ファイル」->「新規」->「プロジェクト」を選択します
image.png
表示されたウィンドウのツリーから「JavaFX」->「JavaFXプロジェクト」を選択して,「次へ」をクリックしてください.
image.png

プロジェクトの設定は,プロジェクト名を「HelloJavaFX」として「次へ」を押してください.
スクリーンショット 2023-12-04 130515.png
Javaビルド設定が表示されるので,「ライブラリー」タブを開いて「外部JARの追加」をクリックしてください.
image.png
ファイルダイアログが開くので,JavaFX SDKのディレクトリ内の"lib"ディレクトリ直下のJarファイルをすべて選択してください.

モジュールパスに追加されたことを確認したら「次へ」を押してください.

image.png

最後に,JavaFX固有の設定が表示されます.
ここで,「宣言的UI」内部の「言語」を「FXML」に変更してください.
他のオプションは気にしなくていいです.
image.png
「完了」ボタンを押せばプロジェクトの作成は終わりです.

ファイル構成

以上の手続きで出来上がったJavaFXプロジェクトがこちらです.
image.png

  • Main.java
    • アプリケーションのエントリーポイント.FXMLとCSSの読み込み等の初期化処理を担当.
    • 基本はいじらない
  • SampleController.java
    • イベントハンドラを記述するファイル
    • 名前の通りMVCのCにあたる処理を書くところ
    • イベント処理の実装をここに書くといずれ肥大化するので,ロジックは別ファイルに書いてハンドラから別ファイルのメソッドに投げるのが吉(というかMVCのModelとControllerの関係ってそういうことですよね)
  • Sample.fxml
    • GUIの構成を記述するファイル
    • 基本的にはScene Builderで編集
    • コンポーネントによってはScene Builderで設定できないプロパティがあるので(確かあったはず),エディタで開いて編集することもある

後のファイルは気にしなくていいです.

GUI作成

まずはガワから作りましょう.
パッケージエクスプローラよりSample.fxmlを右クリックして「Scene Builderで開く」をクリックしてください.
image.png
そうするとScene Builderが立ち上がります.
今回は「ボタンを押した回数をラベルに表示する」というアプリケーションを作りたいので,ボタントラベルを配置しましょう.
ウィンドウ左のアコーディオンメニューの「Control」内に「Button」と「Label」があります.
image.png

ドラッグ&ドロップでウィンドウに配置しましょう
ウィンドウ中央にD&Dでも配置できますが,ウィンドウ左側のメニューの下部,「階層」にD&Dすることでコンポーネントの階層構造を指定して配置できます.
image.png
ウィンドウの中央にプレビューが表示されます
image.png

コンポーネントをクリックして選択すると,ウィンドウ右側のサイドバーにプロパティが表示されます.
image.png
設定項目は3つに分類できます

  • Properties
    • コンポーネントの内部情報を設定できます
    • 主にテキストの設定やCSSセレクタの設定ができます
  • Layout
    • 他コンポーネントとの位置関係を設定ができます
    • 主にマージンやパディングの設定ができます
  • Code
    • Controllerと強調する設定ができます
    • Controller側から参照するためのIDの設定やイベント発生時のハンドラを設定できます

とりあえずButtonのラベルを「Click」にLabelのテキストを" "(空白)に設定しました.
image.png

さて,Controllerと連携するためにはCodeメニューからハンドラとIDを設定する必要がありますが,先にSampleController.javaの準備をしましょう.

コントローラの準備

Eclipseに戻ってSampleController.javaを開きましょう

SampleController.java
package application;

public class SampleController {
	
}

ここにコンポーネントの参照と,イベントハンドラを追加します.

SampleController.java
package application;

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

public class SampleController {
+	@FXML
+	private Label clickCount;

+	@FXML
+	protected void handleButtonClicked(ActionEvent e) {
+	}
}

@FXMLというアノテーションは,FXMLと連携するために必要なもので,これをつけておくとGUIとコントローラでつなげてくれます.
今一度Scene Builderに戻ってGUI側の設定も済ませましょう.

Scene Builderからの設定

Buttonにはイベントハンドラを,LabelにはIDを設定しましょう.

イベントハンドラの設定

配置したButtonをクリックして選択し,右のメニューから「Code」->「On Action」にハンドラを設定します.
編集したSampleController.javaを保存していれば,サジェストが出るはずです.
image.png

これを選択すればハンドラの設定は終わりです.

IDの設定

次にLabelを選択して同じように右のメニューの「Code」->「fx:id」を見てみます.
Buttonのハンドラの時と同じようにサジェストが出るのでそれを選択します
image.png

以上でSceneBuilderを使った設定は終わりです.
保存して閉じましょう.

次はイベントハンドラの中身を記述していきます.

イベントハンドラ実装

カウンタは別クラスにシングルトンで実装します.
一応,コントローラクラスにも初期化処理を書いて状態を持たせることはできるのですが,クラスの担当が増えるのであまりお勧めしません.
デフォルトでapplicationというパッケージができているので,この下にlogicというパッケージを作ってそこにCounter.classを作成します.

Counter.java
package application.logic;

public class Counter {
	private static Counter instance = new Counter();
	private int count;

	private Counter() {
		count = 0;
	}

	public void addCount() {
		this.count++;
	}

	public int getCount() {
		return this.count;
	}

	public static Counter getInstance() {
		return Counter.instance;
	}
}

SampleController.javaに戻ってイベント処理を書き上げましょう

SampleController.java
package application;

+import application.logic.Counter;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.Label;
public class SampleController {
	@FXML
	private Label clickCount;

	@FXML
	protected void handleButtonClicked(ActionEvent e) {
+		Counter counter = Counter.getInstance();
+		counter.addCount();
+		int count = counter.getCount();
+		clickCount.setText(Integer.toString(count));
	}
}

これでイベントハンドリングも終わりです.
では実行してみましょう.

実行結果

click_count.gif

これでおしまいです!
ビューとコントロールが初めから分離されてるので,かなりきれいにデスクトップアプリケーションが作れますね

終わりに

JavaFXの環境構築から適当なデスクトップアプリケーションの作成までを解説しました.
ここまでできれば簡単なアプリケーションであればすぐに実装できるのではないかと思います.

最近はずっとPython+TkinterでGUI作ってたから久しぶりに触ったJavaFXの便利さに感動してます.

今回のサンプルプログラムはこちらです.
Eclipseにインポートした後設定を直す必要があるかもしれませんが…

  1. 不要かも

  2. Windowsではパス長に制限があるので,できる限りC:直下に近いところに解凍しましょう

2
3
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
2
3