SwingでGUI作ってみた

# はじめに
GUI作ってみたいなーと思い、Swingを使って作ってみました。
私自身、初めて作ってみた内容をまとめますので、初心者向けになります。
もし間違っていたり、こうしたほうが良いということがありましたら、教えていただけると嬉しいです。

# 環境
macOS Catalina(バージョン 10.15.1)
Eclipse
~~プラグインのインストールは[Eclipse2019-03ver.にSwingをプラグインする方法
](https://qiita.com/mizuki_chi00/items/6e169a865074c275a4db)を参考にインストール~~
ページが無くなってました。。

# 準備
1. プロジェクトを作成
2. New > Otherを選択し、WindowsBuilder > Swing Designer > Application Window を選択→[Next]
<img width="527" alt="スクリーンショット 2019-12-17 10.54.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526526/b851af88-a73d-ada4-2bed-a99776b6a611.png">
3. 名前を入力し、[finish]で作成
 → 以下のようなコードが自動生成されます
<img width="1061" alt="スクリーンショット 2019-12-17 11.01.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526526/7df17f36-e60a-a377-5e38-77908c63ff3c.png">

# 画面作成
[Design]タブで自由に配置できたりします。
今回は自由に配置したかったので、Absolute layoutで作成
<img width="1059" alt="スクリーンショット 2019-12-17 11.10.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526526/7315713b-fb5e-7692-b30f-b0e650a488d3.png">
1. LayoutsからAbsolute layoutをクリック　→　右側のWindowっぽいエリアをクリック
　→これで、土台の上に、パネルが設置されました。（見た目は変わりませんが、床の上に絨毯を引いたイメージですかね）
2. Componentsから、配置したいコンポーネントを選択し、配置していきます。
labelを配置してみました。
<img width="451" alt="スクリーンショット 2019-12-17 11.17.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526526/deb65495-81ca-c857-c146-18db140b0d7c.png">
配置すると、コードも自動生成されます。
<img width="363" alt="スクリーンショット 2019-12-17 11.19.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526526/4bfa926e-8343-7c3b-2de8-bc30274a03c8.png">
3. 配置したコンポートネントを選択することで、プロパティを変更できるようになります。
　 表示するテキストをユーザーIDに変更してみます。
　 プロパティのtextを「ユーザーID」に書き換え→labelの大きさを横に引き伸ばす
<img width="1006" alt="スクリーンショット 2019-12-17 11.22.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526526/d30e7e1d-120d-17d4-ba5a-8638a52dd915.png">
4. これを繰り返し、イメージした通りにUIを作っていきます。
最終的にこんな感じのUIにしました。（イケてないUIですが、まだ作成中なので・・・）
<img width="452" alt="スクリーンショット 2019-12-17 11.25.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526526/5b8c1eb7-52b9-2c74-8c89-256cab34f658.png">

| タイトル | コンポーネント |
|:-:|:-:|
|☆彡ホテル|JLabel|
|ユーザー名|JLabel|
|パスワード|JLabel|
|ユーザー名の隣|JFormattedTextField|
|パスワードの隣|JpasswordField|
|ログイン|JButton|

# イベント作成
今のままではUIが表示されるだけなので、ログインボタンを押しても何も起きません。
ログインボタンをクリックした際に、イベントが発生するようにします。
今回はログインボタンを押した後に、別の画面を表示するようにします。
1. コンポーネントを右クリックし、「Add event handler > mouse > mouse clicked」を選択
<img width="854" alt="スクリーンショット 2019-12-17 11.36.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526526/18314aad-12f6-39ae-1023-6a34c0ee2e7e.png">
2. コードが自動生成されるので、ここに処理を書いていきます
<img width="357" alt="スクリーンショット 2019-12-17 11.43.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526526/6a2927c8-d58c-ae50-cf83-819770d483ef.png">
3. ログインボタンを押した際に、元の画面（ログイン画面）を破棄して、次の画面を表示するよう実装してみます。
<img width="354" alt="スクリーンショット 2019-12-17 11.47.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526526/f1e75c91-9449-da6c-3f51-f17bc5a70fbd.png">
frame.dispose();でログイン画面を破棄し、
a.frame.setVisible(true);で別の画面を可視化しています。

ちょっとわかりづらいですが、
frame.dispose();のframeはログイン画面で、
a.frame.setVisible(true);のframeは、別の画面になります。
a.frame.setVisible(true);のframeでエラーが出ていた場合は、表示させる画面の「private JFrame frame;」のprivateを削除してしまいましょう。
<img width="217" alt="スクリーンショット 2019-12-17 11.46.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526526/71eb6c71-e832-b85f-f982-5e48f17acc5e.png">
4. だいたいの準備はできたので実行してみましょう
実行すると、ログイン画面が表示されます。
<img width="403" alt="スクリーンショット 2019-12-17 11.55.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526526/7ff83c7f-ebd2-0d2d-8c08-a939546c0fdd.png">

ログインボタンを押すと...
<img width="453" alt="スクリーンショット 2019-12-17 11.57.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526526/232705ed-babe-2493-4db3-4d0f6d4e6728.png">
別の画面が表示されます。

# さいごに
プロではないので、あくまでも参考レベルでお願いします...
また、Absolute layoutで作成する場合、コンポーネントの大きさを自由に変えられるのは嬉しいのですが、画面のサイズを変更すると、元の位置からいい感じに動いてくれないので、少し悲しくなります...
もしいい方法知っていましたら教えてください...
今作っているものが完成したらまた記事を書こうかと思います。