チュートリアル: Swing を使用して UI を構築する

Swing UI Designer プラグインをインストールする

この機能は、インストールして有効にする必要がある Swing UI デザイナー(英語)プラグインに依存しています。

1. Ctrl+Alt+S を押して設定を開き、 プラグイン を選択します。

2. Marketplace タブを開き、 Swing UI デザイナープラグインを見つけて、 インストール をクリックします (プロンプトが表示されたら、IDE を再起動します)。

サンプルプロジェクトのクローンを作成する

アプリケーションのソースコードは、 Swing サンプルプロジェクトを使用して UI を構築する(英語)の GitHub でホストされています。

1. メインメニューで ファイル(F) | 新規(N) | バージョン管理からプロジェクト… へ移動します。

2. リポジトリの URL を指定して、 クローン をクリックします。

3. 必要に応じて、クローンプロジェクトを新しいウィンドウで開くことに同意します。

新しい GUI フォームを作成する

1. プロジェクト ツールウィンドウ Alt+1 で、 src.com.example.library.forms パッケージを選択し、 Alt+Insert を押して、 Swing UI デザイナー | Swing UI フォーム を選択します。

   

2. 開いた 新規GUI フォーム ダイアログで、次の詳細を指定します。

   • フォーム名(F): 新しい GUI フォームの名前として BookEditor を指定します。

   • ベースレイアウトマネージャー(L): ドロップダウンから GridLayoutManager (IntelliJ) レイアウトマネージャー(英語)を選択します。

   • バインドされたクラスを作成する(B): フォームと一緒に関連する Java クラスを作成するオプションを選択します。

     IntelliJ IDEA は、Java クラスを自動的に作成し、GUI フォームにバインドします。 バインドされたクラスは、GUI フォームの基礎となるコード表現として機能します。 これにより、コンポーネントをクラス内の対応するフィールドにリンクし、フォームの動作と機能の実装を容易にすることができます。

   • クラス名(C): フォームに関連付けられた Java クラスのデフォルト名をそのままにします。

   

3. OK をクリックします。

JPanel コンテナーを設定する

1. BookEditor.java を開き、パッケージ宣言のファイルの上部に次のコードを貼り付けます。

   import javax.swing.*;

2. BookEditor.java でも、 BookEditor クラス内に次のコードを貼り付けます。

   private JPanel contentPane;

3. BookEditor.form ファイルを開きます。

   コンポーネントツリー セクションで、 JPanel を選択して、コンポーネントで使用可能なプロパティを表示します。

   

4. プロパティインスペクターで、 フィールド名 プロパティの値を contentPane に設定します。

   

フォームに GUI コンポーネントを配置する

1. BookEditor.form ファイルを開きます。

2. パレット セクションで、 JTextField を選択し、フォームの上部セクションをクリックしてコンポーネントを配置します。

   この操作を繰り返し、上から下の順に、さらに JTextField コンポーネントを 1 つ、 JComboBox コンポーネントを 1 つ、 JCheckBox コンポーネントを 1 つ追加します。

   IntelliJ IDEA は、 コンポーネントツリー に追加されたコンポーネントを表示し、対応する宣言を BookEditor.java に追加します。

3. BookEditor.java を開きます。 BookEditor クラスを、フィールド名を変更し、 BookEditor クラスを拡張した以下の内容に置き換えます。

   public class BookEditor extends JFrame { private JPanel contentPane; private JTextField bookNameField; private JTextField authorNameField; private JComboBox genreComboBox; private JCheckBox isTakenCheckBox; }

4. BookEditor.form に戻ります。 BookEditor.java でフィールド名を変更すると、IntelliJ IDEA によって コンポーネントツリー にエラーが表示されます。 これらの問題を解決するには、プロパティインスペクターで、更新されたコンポーネント名を フィールド名 プロパティの値として設定します。

   

テキストラベルを追加する

1. JLabel コンポーネントを各 JTextField および JComboBox の右側に追加します。

2. コンポーネントツリー の最初の JLabel を選択します。 プロパティインスペクタで、 テキスト プロパティの値を Title に変更します。

3. 同様の方法で、他の 2 つのラベルの名前を 作成者 と Genre に変更します。

4. コンポーネントツリー 内の JCheckBox コンポーネントを選択します。 次に、 テキスト プロパティの値として Is unavailable を指定します。

ボタンを追加

1. JCheckBox のあるセルに VSpacer コンポーネントを追加します。 これにより、ボタン用の領域が作成され、それが 2 つの半分に均等に分割されます。

2. 垂直スペーサーの両側に 2 つの J ボタンコンポーネントを追加します。

3. 各ボタンの テキスト プロパティで、それぞれの名前（キャンセル および 保存する ）を指定します。

   

GUI フォームをプレビューする

• GUI フォームを右クリックし、コンテキストメニューから プレビュー を選択します。

  

  IntelliJ IDEA は フォームプレビュー ダイアログを表示します。 プレビューモードでは、実行時と同じように、ボタンをクリックしたり、チェックボックスを選択したり、テキストを入力したりすることができます。

  

GUI フォームの外観と操作感を調整する

1. コンポーネントツリー 内の JPanel コンテナーを選択します。

2. コンテナーの上、下、左、右の余白を構成するには、 余白 プロパティグループを使用します。 各余白の値を 10 に設定します。

   

3. フォームの推奨サイズを構成するには、 高度なプロパティを表示する(S) チェックボックスをオンにして、 preferredSize プロパティグループを見つけて展開します。 width プロパティの値を 400 に設定し、 heightプロパティの値 を 200 に設定します。

4. もう一度プレビューを実行して結果を確認します。

   

フォームに機能を追加する

GUI フォームの準備ができたため、 BookEditor.java のコンテンツを編集して機能させることができます。 このチュートリアルのフォームの機能は準備されており、 src/com/example/library/forms/BookEditorExample にある BookEditorExample.java で利用できます。

1. BookEditor.java のすべての内容を BookEditorExample.java の内容に置き換えます。

2. BookEditor.java では、クラス宣言とパブリックメソッド宣言で、 BookEditorExample の 2 つのインスタンスの名前を BookEditor に変更します。

3. Main.java を開いて アプリケーションを実行します。

フォームに入力した書籍の詳細がターミナルに印刷されます。