java-beginner.com ブログ

プログラミングを学習するブログ(Javaをメインに)

JavaFXで簡易電卓

投稿日:

最終更新日:2016年08月18日

アイキャッチ

こんにちは。「Javaを復習する初心者」です。

今回はJavaFXで簡易電卓を作成しました。

JavaにはJavaFXというGUIがあります。以前はSwingで簡易電卓を作りましたが、今回はそれと同じようなものをJavaFXで作ってみました。

ボタン動作にJavaScriptを使った例

この記事に先行してQiitaの方に動作部分をJavaScriptで記述したものを投稿しています。fxmlファイルというXML形式のファイルをJavaFXで使うのですが、そこにJavaScriptを記述することができます。Main.javaとapp.fxmlの2つだけで出来るアプリケーションの例として投稿しました。JavaScriptでボタンクリックのイベントを記述しています。

http://qiita.com/java-beginner/items/ce013c5b7fe8e69be082

ボタンをJavaで実装

今回はボタンクリックのイベントをJavaで実装しました。この場合、AppController.javaといった名前でコントロールを記述するJavaファイルを作ることになります。

ソースはgithubリポジトリにアップロードしてあります。jarファイルもアップロードしました。java8が動く環境なら起動できると思います。

https://github.com/java-beginner/simple-calculator-JavaFX

以下のような画面のアプリケーションです。

screenShot

アプリケーションは以下のファイルで構成されています。

  • Main.java
  • AppController.java
  • app.fxml
  • Constants.java
  • Evaluation.java

各ファイルの大まかな役割を記載します。Main.javaは画面を表示する起動クラスです。app.fxmlを読み込んで表示するという部分を記述しています。app.fxmlはコンポーネントの配置を記述するファイルです。このファイルにはコントローラーをAppController.javaに指定するという記述をしています。AppController.javaはボタンクリック時の動作を記述しています。このファイルでEvaluation.javaを使っています。実際の式の評価はJavaScriptの式にして実行しています。Constants.javaは定数をまとめたクラスです。

JavaFXとSwingを比べた場合、個人的な感想としてコンポーネントの配置とアクションイベントの記述が簡単です。コンポーネントについては、fxmlファイルに要素を記述するのですが、実際には後述する開発環境のツールを使っています。要素にfx:id属性を指定し、コントローラー側で@FXMLアノテーションを記述してバインドするという方式で、配置したオブジェクトにアクセスできます。java側には@FXML [要素名] [fx:id]という記述をします。アクションイベントはクリックの場合は、fxml側はonAction属性を記述します。コントローラー側ではメソッドの定義に@FXMLを付与します。

開発環境についてですが、以下を使いました。

  • Eclipse Luna + e(fx)clipse – IDEプラグイン
  • JavaFX Scene Builder 8.2.0

いつも使っているEclipseはEclipse Marsなのですが、プラグインのインストール中に不具合が発生したため、上記環境を使いました。

前述で「fxmlファイルに要素を記述」と述べましたが、実際には先にJavaFX Scene Builderを使って、コンポーネントを配置しています。位置の微調整で直接fxmlファイルの数値を編集しました。また、onAction属性も直接入力しています。GUI上でこの作業をやるには少し面倒に感じました。