自由気ままにゆるーい感じでいくよー

当ブログでの発言は個人の見解であり、所属する組織の公式見解ではありません

JavaFX さわってみた

なんとなくアプリを作りたくなったから、JavaFXでストップウォッチをつくってみたよー

  1. 準備
    • JavaFX
    • Swing的なもの、Java8以降からGUIアプリケーションを開発する為の標準プラグインJavaFXになったっぽい
    • SceneBuilder
    • 画面上のボタンやテキストフィールドなどのグラフィカルなものを簡単に作るためのツール
    • e(fx)clipse
    • SceneBuilderで作成したアプリケーションのGUIeclipse上のソースを対応付ける為のプラグイン
    • launch4j
    • 実行可能な.jarファイルを.exeファイルに変換する為のツール
  1. つくってみた

最初の基本的な作り方を習得する為にSceneBuilderとかをインストールしてみたけど、ソース上で画面構成まで設定できると知ってしまった為、後半はソースでごりごり設定してます(笑)


そんじゃつくっていこかー

まずJavaFXプロジェクトを新規作成してみると、こんなプロジェクト構成になっているはず

f:id:SolNote:20180710102634p:plain

上から順に、、、

FormController.java
 Form.fxmlで配置した要素の処理を書き込むクラス
Main.java
 アプリケーションのメインクラス
application.css
 まんまレイアウトを整えるためのファイル
Form.fxml
 JSP的な存在で、このファイルをSceneBuilderで開いて、レイアウトの設定を行う

Form.fxmlを右クリック>SceneBuilderで開くをすると、こんな感じでSceneBuilderが表示される
一旦一番シンプルな画面にしたかった為、左下の「AnchorPane」を削除した

f:id:SolNote:20180710103053p:plain

そんでもって「Pane」をドラッグアンドドロップ!!!

f:id:SolNote:20180710131359p:plain

ここから好きなようにボタンやテキストボックスを配置していくよー




と思ってたけど、何やらソースで要素の配置やら、大きさの設定やらをできるらしい。。。

 

そっちでやろかー

 

<本来の流れ>
1 Form.fxmlをSceneBuilderで開いて、UIを編集する
2 要素に処理を設定する場合は、右側のcodeタブOnAction欄に名前を設定する
3 2で設定した名前のメソッドをFormController.javaに作成し、処理を書き込む
4 実行して、動作するかを確認する

ここからはソースでごりごりしていきますよー

JavaFXには定期的に処理を行う為の仕組みとして「Timeline」というクラスがある為、これを利用して定期的な処理を実現させました
今回は100msごとにカウントアップと画面表示の更新をさせています

f:id:SolNote:20180710135322p:plain

ボタンなどの要素はこんな感じでインスタンスを生成し、それぞれに処理を設定しました

f:id:SolNote:20180710140323p:plain

後はレイアウトをちょいちょい整えてー

f:id:SolNote:20180710142215p:plain

f:id:SolNote:20180710142335p:plain

できあがりー

f:id:SolNote:20180710142542p:plain

こんな感じで簡単にできるなんて知らなんだ。。。

これからはもっといろいろ作ってみよー