
Swingによるデスクトップアプリケーション開発(BMI診断)-JavaSE1.8
Java8のSwing環境でデスクトップアプリケーションの開発方法を学ぶ講座をシリーズで提供しています。今回はWindowBuilder(Swingデザイナー)を使ってBMI診断アプリケーションを作成します。BMI診断とは身長と体重からボディマス指数(BMI)を算出して体型(肥満度)を診断するものです。
2024年9月よりECLIPSEのバージョンを最新版(Version: 2024-06 (4.32.0))に変更しました。
外部設計
WindowBuilderのSwingデザイナーで図1のようなGUIを作成します。

内部設計
処理ロジック
BMI診断ボタンをクリックすることでアクションイベントが発生し、BMIを算出する処理ロジックを実装したメソッドが起動する。
BMI処理ロジック
1.BMI値を計算する。
BMI=体重(Kg)÷(身長(m)×身長(m))※新著の単位はcmではなくmである
2.算出したBMI値から次の基準で体形(肥満度)を判定する。
BMI値が18.5未満の場合は体型は「やせ型」
BMI値が18.5以上で25未満の場合は体型は「普通」
BMI値が25以上の場合は体型は「肥満」
実装準備
プロジェクトの作成
Eclipseのメニューバーより
ファイル→新規→Javaプロジェクト→「SwingHealthCheck」プロジェクトを作成→図2の内容で設定する

※作成済みであればこの処理は必要ありません。
以下画面のスクリーンショットはライトテーマで取得します。
(ライトテーマの設定方法)
Eclipseのメニューバーより
ウィンドウ → 設定 → 一般 → 外観 → ルック&フィール → ライト
→ 適用して閉じる → Eclipseの再起動がかかります
実装
ひな形の作成
WindowBuilderを用いてSwingアプリケーションのスケルトン(骨格)を自動生成させます。
Eclipseパッケージ・エクスプローラより
SwingHealthCheckプロジェクトを右クリック→新規→その他
→ WindowBuilder → Swingデザイナー → JFrameを選択 → 次へ

以下の内容で作成
パッケージ:jp.ict.aso.swing
名前:HealthCheck

GUI実装
自動生成されたプログラム(スケルトン)からGUIのデザインを実装します。
パレットと構造(コンポーネント、プロパティ)のViewを利用するのがコツです。デザインイメージは設定反映の参考としてとらえた方が良いでしょう。
①画面中央下部にあるデザインタブでソースコード編集画面からSwingデザイナーに切り替えます。

②contentPaneのLayoutプロパティをBorderLayoutに設定します。

③contentPaneの「North」の位置にGUI部品のJPanelをパレットから配置します。JPanelのLayoutプロパティはGridLayoutとします。

④JPanelのLayoutプロパティを + マークから展開しcolumnsを3に、rowsを2に設定します。

⑤JPanelにGUI部品のJLabel、JTextFieldを順番にパレットから配置します。それぞれのtextプロパティを図9のように変更します。

⑥contentPaneの「Center」の位置にGUI部品のJLabelをパレットから配置します。あわせてtextプロパティも「BMI診断結果?」に変更します。

⑦contentPaneの「South」の位置にGUI部品のJButtonをパレットから配置します。あわせてtextプロパティも「BMI診断実行」に変更します。

⑩ボタンにイベントリスナーを対応付けます。パレットのSwingActions内にある「新規」のリスナーを選択してボタンをクリックすることで対応付けられます。

イベント実装
ソースタブに変更します。

①「BMI診断実行ボタン」のイベントのソース部分を変更します。

②フィールド変数を変更します。//kokoの部分を追加します。

③ローカル変数の宣言になっている部分を変更します。//kokoの部分を変更します。

④実行確認します。エディタの画面内で右クリック → 実行 → Javaアプリケーションで実行されます。

⑤BMI診断実行ボタンのクリックで結果が表示されるか確認します。

ここまでの実装ではいろいろと不具合があるようです。
とりあえず「タイトルがない」「画面の大きさが任意に変えられてしまう」の2点を修正します。
実装変更
①フレームにタイトルを追加します。//kokoの部分を追加します。

②画面(フレーム)の大きさを固定します。//kokoの部分を追加します。

③実行して動きを確認します。これで完成しました。

単独起動
実行可能JARファイル
①せっかくですので、単独で起動できるアプリケーションにエクスポートしましょう。Java1.8以上のJREの環境がWindowsのPCにインストールされていればダブルクリックで起動できます。
Eclipseパッケージ・エクスプローラより
SwingHealthCheckプロジェクトを右クリック → エクスポート
→ Java → 実行可能JARファイル → 次へ
→ 以下のように設定する → 完了

以下のような警告が出る場合がありますが、気にしません。

作成されたjarファイルをダブルクリックするとBMI診断アプリが起動します。

最後に
以上でSwingデザイナーを使って身長と体重からBMI値を計算するデスクトップアプリケーションを作成できました。