IDEA如何使用 Swing 构建用户界面

IntelliJ IDEA的 UI Designer插件使您可以使用 Swing 库组件为您的应用程序创建图形用户界面 (GUI)。使用 UI Designer，您可以快速创建在顶层容器中使用的对话框和控件组，例如 JFrame。这些元素可以与您直接在 Java 代码中定义的组件共存。

在本教程中，您将学习使用 UI Designer 的基础知识，并尝试为示例应用程序创建自己的 GUI 表单。作为练习，我们将构建一个图形用户界面表单，用于编辑有关书籍的信息，例如书名、作者、类型和可用状态。

在本教程结束时，您的表单将类似于以下示例：

安装 Swing UI Designer 插件

此功能依赖于 Swing UI Designer 插件，您需要安装并启用该插件。

按 CtrlAlt0S 打开设置，然后选择插件。
打开 Marketplace 选项卡，找到 Swing UI Designer 插件，并单击安装（如果出现提示，请重启 IDE）。

克隆示例项目

该应用程序的源代码托管在 GitHub 上，位于 Build UI using Swing Sample Project。

在主菜单中，前往文件(F) | 新建(N) | 来自版本控制的项目...。
指定存储库的 URL，然后单击克隆。
如有需要，请同意在新窗口中打开克隆的项目。

IntelliJ IDEA 存储了您在 .form 文件中创建的 GUI 窗体的信息。表单可以与 Java 源文件关联，并置于版本控制之下。

首先，我们将创建一个新的 GUI 表单及其关联的 Java 类。

创建新的 GUI 表单

在项目工具窗口 Alt01 ，选择 src.com.example.library.forms 包，按 AltInsert ，并选择 Swing UI 设计器 | Swing UI 窗体。
在打开的新建GUI 窗体对话框中，指定以下详细信息：
- 窗体名称(F) ：指定 BookEditor 作为新 GUI 表单的名称。
- 基础布局管理器(L) ：从下拉列表中选择 GridLayoutManager (IntelliJ) 布局管理器。
- 创建绑定类(B) ：选择该选项与窗体一起创建一个关联的 Java 类。
  
  IntelliJ IDEA 将自动创建一个 Java 类并绑定到 GUI 表单。绑定类作为 GUI 表单的底层代码表示。它允许您将组件链接到类中的对应字段，并有助于实现表单的行为和功能。
- 类名(C) ：保留与表单关联的 Java 类的默认名称。
点击 OK。

我们的项目现在有一个 BookEditor.form 文件和 BookEditor.java 文件。 BookEditor.form 文件是我们安排 GUI 组件并设置其属性的地方。该 BookEditor.java 文件将包含使我们的表单功能化的代码。

表单部分

在我们继续之前，让我们快速看一下 BookEditor.form 。当您选择一个 .form 文件时，您将看到由四个主要部分组成的 UI Designer。

Form workspace ：显示表单中组件的可视化表示。创建新的 GUI 窗体时，顶级 JPanel 组件会默认添加到 IntelliJ IDEA 中，您可以添加更多组件来构建您的窗体。
组件树 ：显示设计窗体中包含的组件，并使您可以导航和选择一个或多个组件。我们的表单目前只有一个组件，JPanel，不过我们很快会添加更多组件。
属性检查器 ：显示当前在表单工作区或组件树中选择的组件的属性。
Palette ：包含您可以放置在表单中的 UI 组件列表。

接下来，让我们继续构建表单并将必填字段、复选框和控件整合到我们的 Book 编辑器中。

首先，您可以处理 JPanel 组件，该组件充当容器来存储您要构建的 GUI。

设置 JPanel 容器

在 BookEditor.java 打开并将以下代码粘贴到文件顶部的包声明下：
复制代码
```
import javax.swing.*;
```
在 BookEditor.java 中也将以下代码粘贴到 BookEditor 类中：
复制代码
```
private JPanel contentPane;
```
打开 BookEditor.form 文件。

IntelliJ IDEA 不提供在编辑器中打开基于 XML 的 .form 文件的方式。请勿手动修改这些文件。

在组件树部分，选择 JPanel以查看组件的可用属性。
在属性检查器中，将字段名属性的值设置为 contentPane。

在表单上放置 GUI 组件

打开 BookEditor.form 文件。
在调色板部分，选择 JTextField并点击表单的顶部部分放置组件。

重复此操作，并按从上到下的顺序分别添加一个 JTextField 、一个 JComboBox 和一个 JCheckBox 组件。

IntelliJ IDEA 显示添加的组件在组件树中，并将相应的声明添加到 BookEditor.java 中。

打开 BookEditor.java 。将 BookEditor 类替换为以下内容，在其中我们重新命名了字段名并扩展了 BookEditor 类：

复制代码

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

请切换回 BookEditor.form 。您将看到，在 BookEditor.java 更改字段名称后，IntelliJ IDEA 在组件树中显示错误。要解决这些问题，请在属性检查器中将更新后的组件名称设置为字段名属性的值。

请记住， textField1 已重命名为 bookNameField， textField2 已重命名为 authorNameField。

我们目前的字段名称没有任何标签，终端用户无法识别。 Swing 库提供了一个特定的组件， JLabel ，您可以使用它向您的 GUI 表单添加任何文本标签。

对于复选框，不需要添加标签，因为您可以直接在 JCheckBox 组件属性中配置文本。

添加文本标签

在每个 JTextField 和 JComboBox 右侧添加 JLabel 组件。
在组件树中选择第一个 JLabel。在属性检查器中，将文本属性的值更改为 Title。

在创建标签时，您可以输入字符串或使用 .properties 文件中的键值对。
以类似的方式将其他两个标签的名称更改为 Author 和 Genre。
请在组件树中选择 JCheckBox 组件。然后，将 不可用 指定为文本属性的值。

我们希望我们的图书编辑器能够保存和放弃最终用户所做的更改。为此，让我们添加保存和取消按钮。

添加按钮

在包含 JCheckBox 的单元格下面添加 VSpacer 组件。这将创建一个用于按钮的区域并将其平均分成两半。
在垂直空隔的每一侧添加两个 JButton 组件。
在每个按钮的文本属性中，分别指定它们的名称------取消 和 Save。

现在我们已经将所有必要的 Swing 组件放置到 GUI 表单中，让我们检查中间结果并了解表单在运行时的外观。

预览 GUI 表单

右键点击您的 GUI 表单，然后从上下文菜单中选择预览。

IntelliJ IDEA 将显示窗体预览对话框。在预览模式下，您可以点击按钮、选择复选框、输入文本等，就像在运行时所做的一样。

在此阶段，我们的GUI表单有些粗糙。让我们通过调整边距并设置首选窗口大小来改善其外观和感觉。

调整 GUI 窗体的外观和感觉

在组件树中选择 JPanel容器。
要使用边距属性组配置容器的顶部、底部、左侧和右侧边距。将每个边距的值设置为 10。
若要配置表单的首选大小，请选择显示专家属性(S) 复选框，然后找到并展开 preferredSize 属性组。请将宽度属性的值设置为 400 ，并将高度的值设置为 200。
再运行一次预览以检查结果。

为表单添加功能

现在 GUI 表单已经准备好了，您可以通过编辑 BookEditor.java 中的内容来使其发挥作用。本教程中的表单功能已准备好，并可以在 BookEditorExample.java 中找到，位于 src/com/example/library/forms/BookEditorExample 下。

将 BookEditor.java 的内容替换为 BookEditorExample.java 的内容。
"在 BookEditor.java 中，将类声明和公共方法声明中的两个 BookEditorExample 重命名为 BookEditor。"
打开 Main.java 并运行应用程序。

您在表单中输入的书籍详细信息将会打印在终端中。

故障排除

问题：使用外部构建系统（Maven/Gradle）构建带有 GUI 设计器表单的项目时，表单未被编译，代码无法运行，在尝试访问组件时失败并出现 NullPointerException 错误。