スポンサーリンク
スポンサーリンク

JavaFXで電卓を作ろう!!

今回からシリーズ「JavaFXで電卓を作ろう!!」をやっていきます。

JavaFXによる電卓の作り方を知れば、JavaFX自体もよく知ることができます。

見習い

電卓作りたいです!

管理人

ではこの記事をしっかり読んでください。

JavaFX Scene Builder 2.0を導入しよう!

JavaFXでレイアウトを作る上において、JavaFX Scene Builder 2.0は絶対に必要です。

以下のURLからダウンロードしてください。

JavaFX Scene Builder 1.x Archive
JavaFX Scene Builder 1.x Archive

バージョンは2.0なので、間違えないようにしてください!

上の画像をよくみて、間違えないようにしてください。

ダウンロードできたら、インストールしてください。

インストールが完了したらJavaFX Scene Builder 2.0を開きましょう!

管理人

このScene Builderがあれば、レイアウトはフィーリングで作れます!

レイアウトの作成

これが完成図です。

これを目指して作っていきます。

見習い

結構本格的ね。

AnchorPaneを用意する

まず「AnchorPane」を用意します。

これは、電卓のボタンやテキストフィールド(答えを表示する場所)を貼り付けるための土台です。

このように、「AnchorPane」をドラッグして貼り付けてください。

土台ができたらボタンの貼り付けに移ります。

見習い

なんで土台が必要なの?

管理人

その他のコントロール(部品)を管理しやすくするためだよ。

ボタンを貼り付ける

ボタンは「Controls」にあります。

このボタンも、先ほどと同様にドラッグして貼り付けます。

そしたら、「Button」という文字が表示されている状態なので、「1」や「2」などの数字に変えていきましょう。

それから、ボタンのサイズも変更していきましょう。

 

ボタンの文字を変更するには、ボタンをダブルクリックして、直に書き込むやりかたと、「Properties」の「Text」欄を変更するやりかたの二つがあります。

まずはダブルクリックのやり方です。

ダブルクリックすると、文字が編集可能になります。

見習い

ここら辺はフィーリングでいけそうね。

次に、「Properties」からの変更です。

矢印で指した場所から変更が可能です。

ちなみに、「Properties」からフォントや文字の大きさも変えられるので覚えておきましょう。

 

ボタンのサイズを変更する

ボタンのサイズ変更は直感的に出来ます。

このように、ボタンを選択した状態で、青色の部分にカーソルを当てると、サイズ変更可能な状態になります。

あとはクリックした状態でマウスを移動させると、サイズ変更ができます。

見習い

すごい簡単ね!

管理人

やっとScene Builderの使い勝手がわかったかな?

やりかたがわかったので、実際にレイアウトを作っていきます。

まずは3つならべてみました。

ちなみに、サイズ変更をいちいちするのが面倒くさい場合は、一つのボタンを選択した状態でコピペをすれば、同じサイズのボタンが現れるので楽です。

コピペは、

「Ctrl+C」→「Ctrl+V」

で出来ます。

あとはおなじ作業を繰り返して、「0〜9」、「+、ー、×、÷、=」ボタンを作っていきましょう。

最後に「TextField」も追加しましょう。

「TextField」も「Controls」の中にあります。

追加方法やサイズ変更などはボタンと全く同じです。

ここまで作るのが面倒くさいという方は、こちらの「main.fxml」をお使いください。

見習い

すでに用意してあるのね・・。

管理人

そうだね。実際、Scene Builderの使い方はそこまで重要じゃないし、単純作業する時間はできるだけ削りたいでしょ?

JavaFXでウィンドウを表示する

 

さて、電卓のレイアウトを作成し、「main.fxml」を作りました。

次は、その「main.fxml」を読み込んで、ウィンドウで表示をしていきます。

 

まずはウィンドウを表示してみましょう。

JavaSwingをやっておられた方は、「JFrame」クラスでいつも表示をしていたと思いますが、JavaFXでは「JFrame」ではなく、「Stage」クラスを使います。

(Main.java)

「Main」クラスは 「Application」クラスを継承します。

その「Application」クラスにある、「start」関数がいわゆる「main」関数です。

そして、「start」関数の引数は「Stage」クラスになっています。

この「Stage」クラスを使ってウィンドウの操作をしていきます。

この場合、「Stage」クラスの「show」関数を使ってウィンドウを表示するように指示をしています。

このように表示されていれば成功です。

見習い

ほぼテンプレプログラムね。

main.fxmlを読み込む

それでは「main.fxml」を読み込んでいきましょう。

FXMLファイルを読み込むためには、「FXMLLoader」クラスの「load」関数を使います。

「load」関数の引数は「URL」型なので、URL型を返す「getResource」関数を使います。

見習い

いまいちわかりません・・。

管理人

大丈夫。これも典型文みたいなものだから。

意味を気にし出したらキリがないよ。

読み込んだ内容をウィンドウに表示させる

それでは、読み込んだFXMLの内容を実際に表示させましょう。

「Parent」というのは、ボタンとかテキストフィールドなどのノードのベース・土台となるクラスです。

そこにFXMLの内容を代入し、それを基に「Scene」クラスのインスタンスを作ります。

そして、その「Scene」を「Stage」に追加して、最後に「show」関数で表示してあげます。

 

(Main.java)

ちなみに、

このようなエラーが出てしまったら、必ず例外処理をするようにしてください。

「try-catch」文を使ったり、今回のように「throws」文を使えばエラーは消せます。

 

そして最後に、

画像のように電卓のレイアウトが表示されていたら成功です。

見習い

たった数行のプログラムで電卓が表示されてる・・!!

管理人

これがJavaFX最大のメリットかもしれませんね。

コントローラーを使う

さて、電卓のレイアウトをウィンドウで表示しましたが、ボタンを押してもアクションが起きないままです

次は「コントローラー」という機能を使って、ボタンのイベントアクション(押した時の反応)を作成していきます。

Controller.javaを作る

今回、コントローラーを作っていくにあったって、コントロールクラスを作成するのですが、今回は「Controller」という名前のクラスを作成していきます。

クラス名は「Controller」である必要はありませんが、同じにしておくとわかりやすいと思います。

(Controller.java)

これがコントロールクラスです。

さて、ここで新しい要素が出てきました。

「@FXML」

この「@FXML」は後ほど解説します。

ここで理解しておきたいのが、「button1」という変数は、「1」ボタンのことを指しています。

それから、「onClick」関数ですが、これも後ほど解説します。

Controller.javaとmain.fxmlをリンクさせる

それでは、Controller.javaとmain.fxmlをリンクさせていきます。

「Controller」の「Controller class」の欄に先ほど作成した「Controller.java」のクラス名を入力します。

これでリンクは完了です。

たったこれだけです!

button1を「1」ボタンにリンクさせる

それでは先ほど宣言した「button1」変数と「1」ボタンをリンクさせていきましょう。

「Button 1」を選択し、

「Code」の「fx:id」欄に、先ほど定義した「button1」を入力します。

これで「button1」変数と「1」ボタンのリンクが出来ました。

 

そして、「On Action」の欄をみてください。

「onClick」と書かれています。

「On Action」欄に入る関数名は、「1」ボタンを押した時に実行される関数のことです。

この場合、「1」ボタンを押すと「onClick」関数が実行されるといったように設定しています。

 

さてこの時点で気づかれた方もいるでしょう。

そう、「@FXML」というのは、「main.fxml」で使われる変数・関数を宣言する際に用いられるキーワードのことなんです

これがなかったら、「Controller」クラス内でしか使われないものとして扱われます。

ですので、FXMLファイルで使用する変数・関数を宣言する時は必ず「@FXML」を記述しましょう。

見習い

コントローラの設定が少し面倒くさいかも。

管理人

こういった部品とコントローラの紐付けは案外大変だったりするんですよね。

onClick1関数を実装し、動作を確認する

それでは「onClick」関数を実際に実装をして、動作を確認していきましょう。

といっても、文字列を表示するだけです。

(Controller.java)

実行結果:

しっかり表示されていれば成功です。

管理人

少し長くなったので、ページを分けるよ。

見習い

はい!

コメント