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

UI デザイナープラグインを有効にする

この機能は、IntelliJ IDEA にデフォルトでバンドルされ有効になっている UI デザイナープラグインに依存しています。関連する機能が利用できない場合は、プラグインを無効にしていないことを確認してください。

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

2. インストール済みタブを開き、UI デザイナープラグインを見つけて、プラグイン名の横にあるチェックボックスを選択します。

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

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

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

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

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

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

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

   

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

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

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

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

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

   • クラス名 : フォームに関連付けられた 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 つのラベルの名前を Author と Genre に変更します。

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

ボタンを追加

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

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

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

   

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

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

  

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

  

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

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

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

   

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

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

   

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

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

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

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

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