はじめに
GUI作ってみたいなーと思い、Swingを使って作ってみました。
私自身、初めて作ってみた内容をまとめますので、初心者向けになります。
もし間違っていたり、こうしたほうが良いということがありましたら、教えていただけると嬉しいです。
環境
macOS Catalina(バージョン 10.15.1)
Eclipse
プラグインのインストールはEclipse2019-03ver.にSwingをプラグインする方法
を参考にインストール
ページが無くなってました。。
準備
- プロジェクトを作成
- New > Otherを選択し、WindowsBuilder > Swing Designer > Application Window を選択→[Next]
- 名前を入力し、[finish]で作成
→ 以下のようなコードが自動生成されます
画面作成
[Design]タブで自由に配置できたりします。
今回は自由に配置したかったので、Absolute layoutで作成
1. LayoutsからAbsolute layoutをクリック → 右側のWindowっぽいエリアをクリック
→これで、土台の上に、パネルが設置されました。（見た目は変わりませんが、床の上に絨毯を引いたイメージですかね）
2. Componentsから、配置したいコンポーネントを選択し、配置していきます。
labelを配置してみました。
配置すると、コードも自動生成されます。
3. 配置したコンポートネントを選択することで、プロパティを変更できるようになります。
表示するテキストをユーザーIDに変更してみます。
プロパティのtextを「ユーザーID」に書き換え→labelの大きさを横に引き伸ばす
4. これを繰り返し、イメージした通りにUIを作っていきます。
最終的にこんな感じのUIにしました。（イケてないUIですが、まだ作成中なので・・・）
| タイトル | コンポーネント |
|---|---|
| ☆彡ホテル | JLabel |
| ユーザー名 | JLabel |
| パスワード | JLabel |
| ユーザー名の隣 | JFormattedTextField |
| パスワードの隣 | JpasswordField |
| ログイン | JButton |
イベント作成
今のままではUIが表示されるだけなので、ログインボタンを押しても何も起きません。
ログインボタンをクリックした際に、イベントが発生するようにします。
今回はログインボタンを押した後に、別の画面を表示するようにします。
1. コンポーネントを右クリックし、「Add event handler > mouse > mouse clicked」を選択
2. コードが自動生成されるので、ここに処理を書いていきます
3. ログインボタンを押した際に、元の画面（ログイン画面）を破棄して、次の画面を表示するよう実装してみます。
frame.dispose();でログイン画面を破棄し、
a.frame.setVisible(true);で別の画面を可視化しています。
ちょっとわかりづらいですが、
frame.dispose();のframeはログイン画面で、
a.frame.setVisible(true);のframeは、別の画面になります。
a.frame.setVisible(true);のframeでエラーが出ていた場合は、表示させる画面の「private JFrame frame;」のprivateを削除してしまいましょう。
4. だいたいの準備はできたので実行してみましょう
実行すると、ログイン画面が表示されます。
ログインボタンを押すと...
別の画面が表示されます。
さいごに
プロではないので、あくまでも参考レベルでお願いします...
また、Absolute layoutで作成する場合、コンポーネントの大きさを自由に変えられるのは嬉しいのですが、画面のサイズを変更すると、元の位置からいい感じに動いてくれないので、少し悲しくなります...
もしいい方法知っていましたら教えてください...
今作っているものが完成したらまた記事を書こうかと思います。