Kotlin #4 JavaFXを使って画面を作成
画面を作成する
今日は、Kotlinで下記の画面を作成してみたいと思います。
IntelliJ IDEAに、JavaFX をプラグインに追加して使用します。
JavaFX（ジャバエフエックス）とは、Java仮想マシン上で動作するGUIアプリケーションを作成するためのフレームワークのことです。
画面を使ってユーザーとやりとりしたいなら（GUIアプリケーション）、JavaFXを使用します。
Java言語で書かれたものですが、もちろん、Kotlinからも使用できます。
では、さくっといってみましょう。
1. JavaFX（ジャバエフエックス） をプラグインに追加
① IntelliJ IDEA を起動します。
下記のアイコンをクリックします。
② 設定 / 環境設定ダイアログ を表示します。
設定/環境設定ダイアログの表示方法は、
Ctrlキーを押下しながらAltキーを押下して、sキーを押下するか、
画面上にあるメニューから、「ファイル」をクリックして「設定」をクリックすることで表示できます。
③ JavaFXが既にプラグインされているか確認します。
このサイトで IntelliJ IDEA をインストールしていれば既に入っています。
インストール済みタブに切り替えて、JavaFX プラグインが有効になっていることを確認します。
[1] 画面左にある「プラグイン」をクリックします。
[2] 画面上にある「インストール済み」をクリックします。
[3] 検索ワード欄に「javaFX」と入力します。
すぐ下に「JavaFX」が表示されます。
[4] 画面右にあるJavaFXの説明欄に、「すべてのプロジェクトで有効」と表示されているのを確認します。
[5] 確認できたら、「OK」ボタンをクリックします。
※プラグインが無効になっている場合・・・
[1] プラグインの横にあるチェックボックスを選択
[2] 適用ボタンをクリックして、
[3] OKボタンをクリックします。
2. 新規プロジェクトを作成
① IntelliJ IDEA を起動します。
下記のアイコンをクリックします。
② 新規プロジェクト画面を表示します。
[1] 画面上にある「ファイル」をクリックします。
[2] メニューリストが表示されますので、「新規」をクリックします。
[3] 右側に詳細メニューが表示されますので、「プロジェクト。。。」をクリックします。
[4] 下記の新規プロジェクト画面 が表示されます。
③ プロジェクトの種類で「JavaFX」を選択します。
④ プロジェクトの設定をします。
[1] 名前
プロジェクト名は、「JavaFxHelloWorld」と入力します。
[2] 場所
プロジェクトの保管場所は、「C:¥KotlinProject\JavaFxHelloWorld 」を設定します。
[3] 言語
プログラム言語は、「Kotlin」を選択します。
[4] ビルドシステム
ビルドツール は、「Gradle」を選択します。
ちなみに、Kotlinの標準のビルドツールはGradleです。
JavaFXはJavaの標準ライブラリなので特別ビルドツールは必要とはしないのですが
Gradleでプロジェクトを作っておくと、あとでライブラリが必要となったときなどに
簡単に導入・管理ができるのでおすすめです。
[5] アーティファクト
プロジェクト名と同じ、「JavaFxHelloWorld」が表示されます。
[6] プロジェクトSDK
「16 java version “16.0.2"」となっていることを確認します。
[7] 上記の設定を確認して、「次へ」ボタンをクリックします。
下記の画面が表示されます。
⑤ アプリケーションで使用するライブラリを選択します。
BootstepFX、ControlsFX、FormsFX の３つのライブラリを選択します。
「完了」ボタンをクリックします。
下記の画面が表示されますので、「このウィンドウ」をクリックします。
自動で画面表示するサンプルプログラムが出来て、ビルドが始まります。
下記のように、「完了」「BUILD SUCCESSFUL」と表示されます。つまりエラーなし。
⑥ プログラムファイルを開きます。
「src」フォルダをクリックします。
「main」「Kotlin」「com.example javafxhelloworld」の順にクリックしていきます。
「HelloApplication.kt」がプログラムファイルです。
これをクリックすると、画面右横に自動で作成されたプログラムが表示されます。
⑦ プログラムを実行します。
[1] 「HelloApplication.kt」をクリックします。
[2] プログラムの「fun main()」の左横にある 緑の三角をクリックします。
[3] 「実行 'HelloApplicationKt(U)’」を選択します。
⑧ 実行結果として、下記の画面が表示されます。
おめでとうございます！成功ですね。
では、中央にある「Hello」ボタンをクリックしてみましょう。
Welcome to JavaFX Application! が表示されました。
お疲れさまでした！
これで実行完了です。×で画面を閉じておきましょう。
3. プログラムの説明
簡単にプログラムの中身を確認していきたいと思います。
たくさん説明したいことはありますが、大きな外枠のイメージを掴んで頂くため
詳細な説明は省いています。
色々と気になる箇所が出てくると思いますが、まずは大きく見ていきましょう。
まず、このプログラムは大きく2つに分かれていることを確認してください。
「main」というファンクションと、「HelloApplecation」というクラスです。
ファンクションなのかクラスなのかを見分けるワードは、
fun ファンクション名
class クラス名
です。
次に、実行される順番を確認してきましょう。
ファンクション「main」をまず見に行きます。
その中には、Applicaion.launch(HelloApplication::calss.java) とありますね。
クラス「HelloApplication」を実行してね、となります。
クラス「HelloApplication」では、JavaFXにもともと用意されているファンクション「start」を
書き換えて使いますよと宣言しています。
どう書き換えているのかというと、
・表示する画面のタイトルには、「Hello！」と表示する。
・表示する画面の大きさは、横320×縦240にする。
・上記に設定した画面を表示する。
といった感じです。
ちなみに、stage.title というのは、画面のStageにあるtitle と読みます。
一番外にあるピンク色の枠のStageは、ウィンドウを表すクラスです。
このクラス「Stage」を生成して、show()することでウィンドウを表示します。
次回は、ファンクションを作って動かしてみたいと思います。
ファンクションには、色んな種類がありますのでお楽しみに。