在 NetBeans IDE 5.5 中生成 GUI
作者：Talley Mulligan
下载 quickstart-gui.zip 文件以便脱机阅读
本教程将指导您使用 NetBeans IDE GUI 生成器（代码名称为 Matisse）来完成应用程序（名为 ContactEditor）图形用户界面 (Graphical User Interface, GUI) 的创建过程。在此过程中，您将设置 GUI 前端的布局，并通过前端来查看和编辑员工数据库中所包含的员工联系信息。
在此教程中，您将了解如何：
入门指南
IDE 的 GUI 生成器经过了不断的改进，截至 NetBeans 5.0 版本时，它已变得更为强大、更具直观性了。用户无需深入了解布局管理器，就可以生成具有专业外观的 GUI。NetBeans 的新 GUI 生成器解决了生成 GUI 的难题。通过使用该生成器，只需将组件放置在所需的位置，就可以完成窗体布局的设置。
有关 GUI 生成器的可视反馈说明，您可以参见 GUI 生成器可视反馈图例。
创建项目
因为 IDE 中的所有 Java 开发都是在项目中进行的，所以首先需要创建一个新的 ContactEditor 项目，用于在其中存储源代码和其他项目文件。IDE 项目是一组 Java 源代码文件及其关联的元数据，包括特定于项目的属性文件、控制生成和运行设置的 Ant 生成脚本，以及将 Ant 目标映射到 IDE 命令的 project.xml 文件。但是，Java 应用程序通常由若干个 IDE 项目组成，针对本教程，我们将生成一个简单的应用程序，该应用程序完全存储在单个的项目中。
|
创建新的 ContactEditor 应用程序项目：
- 选择“文件”>“新建项目”。或者，可以单击 IDE 工具栏中的“新建项目”图标。
- 在“类别”窗格中选择“常规”节点，然后在“项目”窗格中选择“Java 应用程序”。单击“下一步”。
- 在“项目名称”字段中输入 ContactEditor 并指定项目位置。
- 请确保选中“设置为主项目”复选框，并在“创建主类”选项被选中的情况下取消选中该选项。
- 单击“完成”。
IDE 将在系统的指定位置创建 ContactEditor 文件夹。此文件夹包含项目的所有关联文件，包括其 Ant 脚本、用于存储源代码和测试文件的文件夹以及用于存储特定于项目的元数据的文件夹。要查看项目结构，请使用 IDE 的“文件”窗口。
|
创建 GUI 容器
创建新的应用程序后，您可能会注意到“项目”窗口中的“源包”文件夹包含一个空的 <缺省包> 节点。要继续生成界面，需要创建一个 Java 容器，我们将在其中放置其他所需的 GUI 组件。在此步骤中，我们将使用 JFrame 组件创建一个容器，并将该容器放在一个新包中。
|
创建 JFrame 容器：
- 在“项目”窗口中，右键单击 "ContactEditor" 节点，然后选择“新建”>“JFrame 窗体”。
- 输入 ContactEditorUI 作为类名。
- 输入 my.contacteditor 作为包。
- 单击“完成”。
IDE 在 ContactEditorUI.java 应用程序中创建了 ContactEditorUI 窗体和 ContactEditorUI 类，并在 GUI 生成器中打开了 ContactEditorUI 窗体。请注意，my.contacteditor 包替换了缺省包。
|
返回页首
熟悉 GUI 生成器
现在，我们已经为应用程序建立了新项目，让我们花一些时间来熟悉一下 GUI 生成器的界面。要通过交互式演示了解 GUI 生成器界面，请单击“查看演示”图标。
查看演示
添加 JFrame 容器后，IDE 将在一个带有工具栏（包含几个按钮）的编辑器标签中打开新建的 ContactEditorUI 窗体，如上图所示。ContactEditor 窗体在 GUI 生成器的“设计”视图中打开，并沿 IDE 的边缘自动出现三个其他窗口。通过使用这些窗口，可以在生成 GUI 窗体时导航、组织和编辑这些窗体。
GUI 生成器的各种窗口包括：
- 设计区域。GUI 生成器用于创建和编辑 Java GUI 窗体的主窗口。通过使用工具栏的“源”和“设计”切换按钮，可以查看类的源代码或其 GUI 组件的图形视图。使用其他工具栏按钮可以方便地访问常用命令，如在“选择”和“连接”模式之间进行选择、对齐组件、设置自动调整组件大小的行为以及预览窗体。
- 检查器。提供所有组件的表示，包括在应用程序中表示为树状分层结构的可视和非可视组件。检查器还提供有关树中哪个组件正在 GUI 生成器中进行编辑的可视反馈，并允许您在可用面板中组织这些组件。
- 组件面板。可用组件的可定制列表，包含 JFC/Swing、AWT 和 JavaBean 组件的标签以及布局管理器。此外，还可以使用定制器来创建、删除和重新排列组件面板中显示的类别。
- “属性”窗口。显示 GUI 生成器、“检查器”窗口、“项目”窗口或“文件”窗口中当前选定组件的属性。
如果单击“源”按钮，IDE 将在编辑器中显示应用程序的 Java 源代码，其中包含 GUI 生成器自动生成的代码部分，这部分以蓝色区域表示，称为“被保护的块”。被保护的块是“源”视图中无法编辑的受保护区域。处于“源”视图中时，只能编辑出现在编辑器白色区域中的代码。如果需要对被保护的块中的代码进行更改，请单击“设计”按钮以便从 IDE 的编辑器切换到 GUI 生成器，然后在生成器中对窗体进行必要的调整。保存更改时，IDE 将更新文件的源代码。
注意：对于高级开发者来说，可以使用组件面板定制器将 JAR、库或其他项目中的定制组件添加到组件面板中。
返回页首
主要概念
通过简化创建图形界面的工作流，IDE 的 GUI 生成器解决了创建 Java GUI 的核心问题，使开发者不必再使用复杂的 Swing 布局管理器。它是通过扩展目前的 NetBeans IDE GUI 生成器功能以支持直观的“自由设计”模式（借助易于理解和使用的简单布局规则）来实现的。设置窗体布局时，GUI 生成器将提供可视基准线，它们给出了建议的最佳组件间距和对齐方式。在后台，GUI 生成器将设计理念转化为使用新的 GroupLayout 布局管理器和其他 Swing 结构实现的功能性 UI。因为它使用动态布局模型，所以使用 GUI 生成器生成的 GUI 在运行时会按预期方式工作，因此在不改变组件之间的定义关系的同时会进行相应的调整以满足所做的任何更改。只要您调整窗体大小、转换语言环境或指定不同的外观，GUI 就会根据目标外观的插入和偏移量自动进行调整。
自由设计
在 IDE 的 GUI 生成器中，只需像在使用绝对定位时那样将组件放在需要的位置，就可以生成窗体。GUI 生成器将确定需要哪些布局管理器，然后自动生成代码。您无需关注插入、锚点以及填充之类的操作。部署应用程序时，将所包含的更新 Swing 库中可自由分发的 JAR 文件打包便可确保这些应用程序按预期方式运行。
自动组件定位（对齐放置）
将组件添加到窗体时，GUI 生成器将提供可视反馈，协助您根据操作系统的外观来定位组件。GUI 生成器针对组件在窗体上放置的位置提供一些有帮助的内在提示和其他可视反馈，并自动使组件沿基准线对齐。此功能根据已放在窗体上的组件位置提供这些建议，同时使填充保持灵活性，以便在运行时正确地呈现不同的目标外观。
可视反馈
GUI 生成器还提供有关组件锚点和链接关系的可视反馈。通过这些指示符，可以快速判断各种定位关系和组件锁定行为，这些关系和行为将影响 GUI 在运行时的显示和行为方式。这加快了 GUI 的设计过程，使您能够快速创建可正常使用的、具有专业外观的可视界面。
返回页首
先打基础
现在，您已熟悉了 GUI 生成器的界面，该着手开发 ContactEditor 应用程序的 UI 了。在本部分，我们将介绍如何使用 IDE 的组件面板将所需的各种 GUI 组件添加到窗体中。
由于使用了 NetBeans 的“自由设计”模式，您将不必再费力地使用布局管理器来控制容器内的组件大小和位置。您需要做的就是将所需的组件拖放（或选取并放置）到 GUI 窗体中，如下图所示。
添加组件：基础
尽管 IDE 的 GUI 生成器简化了创建 Java GUI 的过程，但在开始设置界面布局之前先规划出需要的界面外观通常是很有用的。许多界面设计人员将此视为一种“最佳”方法，但对本教程来说，只需跳转到后面的预览 GUI 部分，浏览一下最终窗体应具有的外观即可。
由于我们已经将 JFrame 添加为窗体的顶层容器，下一步需要添加几个 JPanel。这样就可以使用带标题的边框将 UI 的多个组件归到其中了。请参阅下图，并注意在完成此操作时，IDE 的“选取和放置”行为。
|
添加 JPanel：
- 在“组件面板”窗口中，通过单击 Swing 类别中的 JPanel 组件并释放鼠标按钮，选择该组件。
- 将光标移动到 GUI 生成器中窗体的左上角。当组件的位置靠近容器的左上边缘时，将出现指示首选边距的水平和垂直对齐基准线。在窗体中单击，以将 JPanel 放在此位置上。
JPanel 组件出现在 ContactEditorUI 窗体中，并以橙色突出显示，表示它处于选中状态，如下图所示。在释放鼠标按钮后，将出现小指示符来显示组件的锚点关系，并在“检查器”窗口中显示相应的 JPanel 节点。
|
接下来，需要调整 JPanel 的大小，为稍后在其中放置的组件留出空间，在此我们需要先花一些时间了解 GUI 生成器的另一个可视化功能。要执行此操作，我们需要取消选择刚添加的 JPanel。因为尚未添加标题边框，所以您看不到此面板。不过请注意，将光标移动到 JPanel 上方时，其边缘会变为浅灰色，由此可以清楚地看见它的位置。只需单击该组件内的任意位置，便可以重新选择它，调整大小图柄和锚点指示符将再次出现。
|
调整 JPanel 大小：
- 选择刚添加的 JPanel。小的方形调整大小图柄会再次出现在组件周围。
- 单击并按住 JPanel 右边缘上的调整大小图柄，然后拖动，直到靠近窗体边缘处出现对齐基准虚线。
- 释放调整大小图柄以调整组件大小。
按照建议的偏移值将 JPanel 组件延伸至容器的左边距和右边距，如下图所示。
|
现在，我们已添加了用于容纳 UI 名称信息的面板，需要重复该过程来添加另一个面板，它位于第一个面板正下方，用于容纳电子邮件信息。请参照下面的图再次执行前面的两个任务，注意 GUI 生成器的建议位置。请注意，建议的两个 JPanel 之间的垂直间距要比边缘处的间距小得多。添加第二个 JPanel 之后，请调整其大小，使其填满窗体其余的垂直空间。
因为我们需要在外观上区分出 GUI 上半部分和下半部分中的功能，所以需要为每个 JPanel 添加边框和标题。我们先使用“属性”窗口来完成此任务，然后尝试使用弹出式菜单来完成。
|
将标题边框添加到 JPanel 中：
- 选择 GUI 生成器中的顶部 JPanel。
- 在“属性”窗口中，单击“边框”属性旁边的省略号按钮 (...)。
- 在出现的 JPanel 边框编辑器中，选择“可用边框”窗格中的 TitledBorder 节点。
- 在下面的“属性”窗格中，为“标题”属性输入 Name。
- 单击“字体”属性旁边的省略号 (...)，为“字体样式”选择“粗体”，为“大小”输入 12。单击“确定”退出对话框。
- 选择底部 JPanel 并重复步骤 2 至 5，但此次是右键单击 JPanel，然后使用弹出式菜单访问“属性”窗口。为“标题”属性输入 E-mail。
带标题的边框将被添加到两个 JPanel 组件中。
|
要查看以上操作过程的演示，请单击 查看演示。
将单个组件添加到窗体
现在我们需要着手添加一些组件，这些组件将提供联系人列表中的实际联系人信息。在此任务中，我们将添加四个显示联系人信息的 JTextField 以及描述它们的 JLabel。完成此任务时，请注意 GUI 生成器显示的水平和垂直基准线，它们会给出建议的首选组件间距，即操作系统的外观所定义的间距。这可确保在运行时自动呈现 GUI 以反映目标操作系统的外观。
|
将 JLabel 添加到窗体中：
- 在“组件面板”窗口中，从 Swing 类别中选择 JLabel 组件。
- 将光标移动到先前添加的名为 Name 的 JPanel 上方。当出现基准线指示 JLabel 位于 JPanel 的左上角（与上边缘和左边缘之间存在很小的边距）时，在其中单击以放置标签。
这样会将 JLabel 添加到窗体中，并将代表该组件的相应节点添加到“检查器”窗口中。
|
在执行下一步之前，我们需要编辑刚添加的 JLabel 的显示文本。尽管可以在任何时候编辑组件显示文本，但最简便的方法是在添加它们时进行编辑。
|
编辑 JLabel 的显示文本：
- 双击 JLabel 以选择其显示文本。
- 键入 "First Name:"，然后按 Enter 键。
将显示 JLabel 的新名称，组件的宽度也随着编辑的内容进行相应调整。
|
现在，我们将添加 JTextField，以便大致了解 GUI 生成器的基线对齐功能。
|
将 JTextField 添加到窗体中：
- 在“组件面板”窗口中，从 Swing 类别中选择 JTextField 组件。
- 移动光标，使其紧邻刚添加的 "First Name:" JLabel 的右侧。当出现水平基准线指示 JTextField 的基线与 JLabel 的基线对齐，并且以垂直基准线给出两个组件的建议间距时，请单击鼠标以放置 JTextField。
JTextField 将放入到窗体中的正确位置并与 JLabel 的基线对齐，如下图所示。请注意，JLabel 略微向下进行了移动以便与较高的文本字段的基线对齐。同样，代表该组件的节点也将添加到“检查器”窗口中。
|
在执行下一步之前，我们需要在刚添加的内容的右侧紧接着再添加一个 JLabel 和一个 JTextField，如下图所示。这次输入 "Last Name:" 作为 JLabel 的显示文本，并暂时将 JTextField 的占位符文本保持原样。
|
调整 JTextField 大小：
- 选择我们刚添加到 "Last Name:" JLabel 右侧的 JTextField。
- 拖动 JTextField 右边缘的调整大小图柄至封闭的 JPanel 的右边缘。
- 当出现垂直对齐基准线以给出文本字段与 JPanel 右边缘之间的建议边距时，释放鼠标按钮以调整 JTextField 的大小。
JTextField 的右边缘与 JPanel 的建议边缘边距对齐，如下图所示。
|
要查看以上操作过程的演示，请单击 查看演示。
将多个组件添加到窗体
现在我们添加 "Title:" 和 "Nickname:" JLabel，它们是对稍后将添加的两个 JTextField 的描述。我们在按住 Shift 键的同时选取并放置组件，以将它们快速地添加到窗体中。完成此任务时，同样请注意，GUI 生成器将显示给出建议的首选组件间距的水平和垂直基准线。
|
将多个 JLabel 添加到窗体中：
- 在“组件面板”窗口中，通过单击并释放鼠标按钮，从 Swing 类别中选择 JLabel 组件。
- 将光标移动到窗体上，使其位于先前添加的名为 "First Name:" 的 JLabel 正下方。当出现基准线指示新 JLabel 的左边缘与上方 JLabel 的左边缘对齐，且它们之间存在小边距时，请按住 Shift 键并单击一下，以放置第一个 JLabel。
- 继续按住 Shift 键并再次单击，在紧邻第一个 JLabel 的右侧将放置另一个 JLabel。确保在放置第二个 JLabel 前释放 Shift 键。如果在放置最后一个 JLabel 前忘记释放 Shift 键，只需按 Esc 键即可。
JLabel 将被添加到窗体中，从而创建了第二行组件，如下图所示。代表每个组件的节点将添加到“检查器”窗口中。
|
在继续下一步前，我们需要编辑 JLabel 的名称，以便能够看到将在以后设置的对齐的效果。
|
编辑 JLabel 的显示文本：
- 双击第一个 JLabel 以选择其显示文本。
- 键入 "Title:"，然后按 Enter 键。
- 重复步骤 1 和 2，为第二个 JLabel 的名称属性输入 "Nickname:"。
JLabel 的新名称将显示在窗体中，它们会随着编辑的宽度而发生变化，如下图所示。
|
要查看以上操作过程的演示，请单击 查看演示。
插入组件
通常，需要在已放置在窗体中的组件之间添加组件。只要在两个现有组件之间添加了组件，GUI 生成器就会自动移动它们，以便为新组件留出空间。要演示此操作，我们将在先前添加的 JLabel 之间插入一个 JTextField，如下面的两个图所示。
|
在两个 JLabel 之间插入 JTextField：
- 在“组件面板”窗口中，从 Swing 类别中选择 JTextField 组件。
- 将光标移动到第二行名为 "Title:" 和 "Nickname:" 的 JLabel 上方，使 JTextField 与两者都重叠，并与它们的基线对齐。如果在放置新文本字段时遇到困难，可以将其与 Nickname JLabel 的左基准线对齐，如下面的第一幅图像所示。
- 单击鼠标以将 JTextField 放置在 "Title:" 和 "Nickname:" JLabel 之间。
JTextField 将在两个 JLabel 之间对齐放置。最右侧的 JLabel 向 JTextField 右侧移动，以适应建议的水平偏移。
|
我们仍需要将另外一个 JTextField 添加到窗体中，它会在窗体的右侧显示每个联系人的昵称。
|
添加 JTextField：
- 在“组件面板”窗口中，从 Swing 类别中选择 JTextField 组件。
- 将光标移动到 Nickname 标签的右侧，然后单击鼠标以放置文本字段。
JTextField 在其左侧的 JLabel 旁边对齐放置。
|
|
调整 JTextField 大小：
- 将先前任务中添加的 "Nickname:" 标签的 JTextField 的调整大小图柄向封闭的 JPanel 右侧拖动。
- 当出现垂直对齐基准线给出文本字段与 JPanel 边缘之间的建议边距时，释放鼠标按钮以调整 JtextField 大小。
JTextField 的右边缘将与 JPanel 的边缘对齐，并在此之间留出建议的边缘边距，GUI 生成器将推断出合适的调整大小行为。
|
要查看以上操作过程的演示，请单击 查看演示。
返回页首
更进一步
对齐是创建具有专业外观的 GUI 的最基本内容之一。在上一部分，我们在将 JLabel 和 JTextField 组件添加到 ContactEditorUI 窗体的过程中大致了解了 IDE 的对齐功能。接下来，我们将在使用应用程序所需的各种其他组件的过程中更深入地了解 GUI 生成器的对齐功能。
组件对齐
每次将组件添加到窗体中时，GUI 生成器都会有效地将它们对齐，出现的对齐基准线可以证明这一点。但是，有时也需要在组件组之间指定不同的关系。先前我们添加了四个 ContactEditor GUI 所需的 JLabel，但并未将它们对齐。现在，我们将对齐两列 JLabel，使它们的右边缘对齐。
|
对齐组件：
- 选择窗体左侧的 "First Name:" 和 "Title:" JLabel。
- 单击工具栏中的“列中右对齐”按钮 (
 )。或者，也可以右键单击两者之一，然后从弹出式菜单中选择“对齐”>“列右侧”。
- 对 "Last Name:" 和 "Nickname:" JLabel 也重复此操作。
JLabel 的位置将移动，以使它们显示文本的右边缘对齐。并且会更新锚点关系，指明已将组件分组。
|
在结束先前添加的 JTextField 操作之前，我们需要确保 JLabel 之间插入的两个 JTextField 设置是可以正确调整大小的。与拉伸到窗体右边缘的两个 JTextField 不同，所插入组件的大小可调性不是自动设置的。
|
设置组件的大小可调性：
- 按住 Ctrl 键并分别单击两个插入的 JTextField 组件，以便在 GUI 生成器中选择它们。
- 在两个 JTextField 都被选定时，右键单击其中一个 JTextField，然后从弹出式菜单中选择“自动调整大小”>“水平”。
JTextField 将设置为在运行时水平调整大小。对齐基准线和锚点指示符将被更新，以提供组件关系的可视反馈。
|
|
将组件设置为相同大小：
- 按住 Ctrl 键并分别单击窗体中的所有四个 JTextField 以选择它们。
- 在这些 JTextField 被选定时，右键单击其中一个 JTextField，然后从弹出式菜单中选择“设置缺省大小”。
这些 JTextField 均被设置为相同的宽度，并且其指示符将被添加到每个 JTextField 的上边缘，它们提供组件关系的可视反馈。
|
现在，我们需要添加另一个描述 JComboBox 的 JLabel，用户可以使用 JComboBox 来选择 ContactEditor 应用程序显示的信息的格式。
|
将 JLabel 与组件组对齐：
- 在“组件面板”窗口中，从 Swing 类别中选择 JLabel 组件。
- 将光标移动到 JPanel 左侧的名为 First Name 和 Title 的 JLabel 下方。当出现基准线指示新 JLabel 的右边缘与上方组件组（两个 JLabel）的右边缘对齐时，单击鼠标以放置该组件。
JLabel 将与上方的 JLabel 列进行右对齐，如下图所示。GUI 生成器将更新指示组件间距和锚点关系的对齐状态行。
|
与在先前示例中一样，双击 JLabel 以选择其显示文本，然后输入 "Display Format:" 作为显示名称。请注意，当 JLabel 对齐放置时，其他组件将进行移动以适应较长的显示文本。
要查看以上操作过程的演示，请单击 查看演示。
基线对齐
每当添加或移动包含文本的组件（JLabel、JTextField 等）时，IDE 就会提供对齐建议，这些对齐建议基于组件中文本的基线。例如，先前插入 JTextField 时，其基线自动与相邻的 JLabel 对齐。
现在，我们将添加一个组合框，用户可以使用它选择 ContactEditor 应用程序显示的信息的格式。在添加 JComboBox 的过程中，我们会将其基线与 JLabel 文本的基线对齐。请再次注意为帮助定位而出现的基线对齐基准线。
|
对齐组件的基线：
- 在“组件面板”窗口中，从 Swing 类别中选择 JComboBox 组件。
- 移动光标，使其紧靠刚添加的 JLabel 的右侧。当出现水平基准线指示 JComboBox 的基线与 JLabel 中文本的基线对齐，并且以垂直基准线给出两个组件的建议间距时，单击鼠标以放置组合框。
组件将与其左侧的 JLabel 的基线对齐，如下图所示。GUI 生成器将显示指明组件间距和锚点关系的状态行。
|
|
调整 JComboBox 大小：
- 选择 GUI 生成器中的 JComboBox。
- 将 JComboBox 右边缘上的调整大小图柄向右侧拖动，直到出现对齐基准线给出 JComboBox 和 JPanel 边缘间建议的首选偏移。
如下图所示，JComboBox 的右边缘与 JPanel 的建议边缘边距对齐，并且该组件的宽度将自动设置为随着窗体的大小而进行相应调整。
|
编辑组件模型不在本教程的涉及范围内，因此我们将暂时保留 JComboBox 的占位符项列表的原样。
要查看以上操作过程的演示，请单击 查看演示。
返回页首
回顾学过的内容
我们已经出色地完成了生成 ContactEditor GUI 的过程，现在我们需要花几分钟再添加几个界面所需的组件来重温学过的内容。
到目前为止，我们一直在介绍如何将组件添加到 ContactEditor GUI 中，并使用 IDE 的对齐基准线来帮助定位。但还有另一个重要方面，就是了解如何在放置组件过程中使用锚点。尽管我们尚未讨论它，但您已经利用了此功能，只是没有意识到。如前面所提到的，只要将组件添加到窗体中，IDE 就会通过基准线给出建议的目标外观首选位置。在放置新组件的同时，也会将该组件锚定在最近的容器边缘或组件上，以确保在运行时保持组件关系。在本部分，我们将重点介绍如何以更简化的方式完成这些任务，同时指出 GUI 生成器在后台进行的工作。
添加、对齐和锚定
在 GUI 生成器中，可以通过简化典型工作流操作来快捷、轻松地设置窗体布局。只要将组件添加到窗体中，GUI 生成器就会自动将组件对齐放置到首选位置并设置所需的链接关系，以便您可以专注于设计窗体，而不必疲于应付复杂的实现细节。
|
添加、对齐和编辑 JLabel 的显示文本：
- 在“组件面板”窗口中，从 Swing 类别中选择 JLabel 组件。
- 将光标移到窗体上，使其位于底部 JPanel 的 E-mail 标题的正下方。当出现基准线指示它位于 JPanel 的左上角（此时与上边缘和左边缘之间存在较小的边距）时，请单击鼠标以放置 JLabel。
- 双击 JLabel 以选择其显示文本。然后键入 "E-mail Address:" 并按 Enter 键。
JLabel 将对齐放置到窗体中的首选位置，并锚定在封闭 JPanel 的上边缘和左边缘上。同以前一样，代表该组件的相应节点将被添加到“检查器”窗口中。
|
|
添加 JTextField：
- 在“组件面板”窗口中，从 Swing 类别中选择 JTextField 组件。
- 移动光标，使其紧靠刚添加的 E-mail Address 标签的右侧。当出现基准线指示 JTextField 的基线与 JLabel 中文本的基线对齐，并且以垂直基准线给出两个组件间的建议间距时，单击鼠标以放置文本字段。
JTextField 将与 "E-mail Address:" JLabel 右侧的位置对齐并链接到 JLabel。它的相应节点也将添加到“检查器”窗口中。
- 将 JTextField 的调整大小图柄向封闭 JPanel 的右侧拖动，直到出现对齐基准线给出 JTextField 和 JPanel 边缘间的建议偏移。
JTextField 的右边缘将与指示首选边距的对齐基准线对齐。
|
现在，我们需要添加 JList，它将用于显示 ContactEditor 的整个联系人列表。
|
添加 JList 并调整其大小：
- 在“组件面板”窗口中，从 Swing 类别中选择 JList 组件。
- 移动光标，使其移到先前添加的名为 E-mail Address 的 JLabel 的正下方。当出现基准线指示 JList 的左边缘和上边缘分别与 JPanel 左边缘和上方的 JLabel 对齐（留出首选边距）时，单击鼠标以放置 JList。
- 将 JList 的右侧调整大小图柄向封闭 JPanel 的右侧拖动，直到出现对齐基准线指示其宽度与上方 JTextField 的宽度相同。
JList 与对齐基准线指定的位置对齐，其相应节点显示在“检查器”窗口中。另请注意，窗体会扩展以容纳新添加的 JList。
|
由于 JList 用于显示长数据列表，因此通常需要添加 JScrollPane。只要添加了需要 JScrollPane 的组件，GUI 生成器就会自动为您添加。因为 JScrollPane 是非可视组件，所以必须使用“检查器”窗口才能查看或编辑 GUI 生成器创建的所有 JScrollPane。
要查看以上操作过程的演示，请单击 查看演示。
调整组件大小
通常，将若干个相关组件（如模态对话框中的按钮）设置为相同大小对保持外观一致性有好处。为演示此操作，我们将在 ContactEditor 窗体中添加四个 JButton。这些按钮允许我们添加、编辑和删除联系人列表中的各个条目，如下图所示。之后，我们将四个按钮设置为相同大小，以便可以轻松判断出它们提供相关的功能。
|
添加、对齐和编辑多个按钮的显示文本：
- 在“组件面板”窗口中，选择 JButton 组件。
- 将 JButton 移动到下部 JPanel 中 E-mail Address JTextField 的右边缘上方。当出现基准线指示 JButton 的基线和右边缘与 JTextField 的基线和右边缘对齐时，请按住 Shift 键并单击，从而沿 JFrame 的右边缘放置第一个按钮。您释放鼠标按钮时 JTextField 的宽度会缩减以适应 JButton。
- 将光标移动到下部 JPanel 中 JList 的右上角。当出现基准线指示 JButton 的上边缘和右边缘与 JList 的上边缘和右边缘对齐时，请按住 Shift 键并单击，从而沿 JFrame 的右边缘放置第二个按钮。
- 在我们已添加的两个 JButton 的下方再添加两个 JButton，以创建一个列。确保按照建议的间距放置 JButton 并保持间距的一致性。如果在放置最后一个 JButton 前忘记释放 Shift 键，只需按 Esc 键即可。
- 双击每个 JButton 并为其名称输入文本。为最上面的按钮输入
Add，为第二个按钮输入 Edit，为第三个按钮输入 Remove，为第四个按钮输入 As Default。
JButton 组件将与对齐基准线指定的位置对齐。按钮的宽度将更改以适应新名称。
|
现在，已将按钮放置在希望的位置，接下来，我们将四个按钮设置为相同的大小以保持外观一致性，同时表明它们的功能彼此之间是相关的。
|
将组件设置为相同大小：
- 通过按住 Ctrl 键并进行相应的选择，选择所有四个 JButton。
- 右键单击其中一个 JButton，然后从弹出式菜单中选择“相同大小”>“相同宽度”。
JButton 的大小会被设置为与名称最长的按钮的大小相同。
|
要查看以上操作过程的演示，请单击 查看演示。
提供缩排功能
通常，需要将多个组件集合在另一个组件下，以表明它们属于相关功能组。一个典型的例子是，在同一标签下放置几个相关的复选框。在 GUI 生成器中，通过使用特殊基准线（针对操作系统外观提供首选偏移建议），可以轻松完成缩排。
在本部分，我们将在 JLabel 下添加几个 JRadioButton。用户可以使用它们定制应用程序显示数据的方式。请在完成此任务时参阅下图，或单击此操作过程之后的“查看演示”图标来查看交互式演示。
|
缩排 JLabel 下的 JRadioButton：
- 将名为 Mail Format 的 JLabel 添加到窗体的 JList 下方。确保该标签与上面的 JList 左对齐。
- 在“组件面板”窗口中，从 Swing 类别中选择 JRadioButton 组件。
- 将光标移动到刚添加的 JLabel 的下方。当出现基准线指示 JRadioButton 的左边缘与 JLabel 的左边缘对齐时，请将 JRadioButton 稍稍向右移动，直到出现次级缩排基准线。按 Shift 键并单击，以放置第一个单选按钮。
- 将光标移动到第一个 JRadioButton 的右侧。按 Shift 键并单击，以放置第二个和第三个 JRadioButton，请注意保持建议的组件间距。确保在放置最后一个 JRadioButton 前释放 Shift 键。
- 双击每个 JRadioButton，并为其名称输入所需的文本。为最左侧的单选按钮输入
HTML，为第二个单选按钮输入 Plain Text，为第三个单选按钮输入 Custom。
三个 JRadioButton 将添加到窗体中，并在 Mail Format JLabel 的下方缩排。
|
现在，我们需要将三个 JRadioButton 添加到 ButtonGroup 中来启用预期的切换行为，即一次只能选中一个单选按钮。这将确保 NameFinder 应用程序的联系人信息以我们选择的邮件格式显示。
|
将 JRadioButton 添加到 ButtonGroup 中：
- 在“组件面板”窗口中，从 Swing 类别中选择 ButtonGroup 组件。
- 单击 GUI 生成器设计区域中的任何位置，将 ButtonGroup 组件添加到窗体中。请注意，窗体本身不会显示 ButtonGroup，但它会显示在“检查器”的“其他组件”区域中。
- 选择窗体中的所有三个 JRadioButton。
- 在“属性”窗口中，从 buttonGroup 属性组合框中选择 buttonGroup1。
三个 JRadioButton 将添加到按钮组中。
|
要查看以上操作过程的演示，请单击 查看演示。
返回页首
进行最终调整
我们已大致成功地生成了 ContactEditor 应用程序的 GUI，但还有几项工作尚待完成。在本部分，我们将介绍 GUI 生成器简化的其他几项典型布局任务。
最后加工
目前我们需要添加一些按钮，通过这些按钮用户可以确认他们输入的单个联系人的信息，并将该信息添加到联系人列表中或取消添加，使数据库保持不变。在此步骤中，需要添加两个按钮并编辑这些按钮，以便在它们的显示文本具有不同的长度时，它们出现在窗体中的大小却相同。
|
添加和编辑按钮的显示文本：
- 如果下部 JPanel 延伸到了 JFrame 窗体的下边缘处，请向下拖动 JFrame 的下边缘。这可以在 JFrame 的边缘和 JPanel 的边缘间为 "OK "和 "Cancel" 按钮留出空间。
- 在“组件面板”窗口中，从 Swing 类别中选择 JButton 组件。
- 将光标移动到窗体中名为 E-mail 的 JPanel 下方。当出现基准线指示 JButton 的右边缘与 JFrame 右下角对齐时，单击鼠标以放置按钮。
- 将另一个 JButton 添加到第一个 JButton 的左侧，确保按照沿 JFrame 下边缘的建议间距放置它。
- 双击每个 JButton 来选择其显示文本。为左按钮输入 OK，为右按钮输入 Cancel。请注意，按钮的宽度将更改以适应新名称。
- 要将两个 JButton 设置为相同大小，请选择它们，右键单击任何一个，然后从弹出式菜单中选择“相同大小”>“相同宽度”。
JButton 组件将出现在窗体中，其相应节点显示在“检查器”窗口中。JButton 组件的代码也将添加到窗体的源文件中，并出现在编辑器的“源”视图中。每个 JButton 的大小都会被设置为与名称最长的按钮的大小相同。
|
需要做的最后一项工作是删除各种组件中的占位符文本。请注意，在设置了大致的窗体布局后删除占位符文本对避免出现组件对齐和锚点关系的问题很有帮助，大多数开发者通常在设置窗体的布局过程中删除此类文本。请在浏览窗体时选择并删除每个 JTextField 的占位符文本。我们将保留 JComboBox 和 JList 中的占位符项，供以后的教程使用。
要查看以上操作过程的演示，请单击 查看演示。
返回页首
预览 GUI
现在您已成功生成了 ContactEditor GUI，可以试用该界面来查看结果了。您可以在工作过程中预览窗体，方法是单击 GUI 生成器工具栏中的“预览窗体”按钮 (
)。窗体将在其自己的窗口中打开，您可以在生成并运行之前对其进行测试。
返回页首
部署 GUI 应用程序
为了让通过 GUI 生成器创建的界面能够在 IDE 外部使用，必须对应用程序的 GroupLayout 布局管理器的类进行编译，并且保证那些类在运行时可用。Java SE 6 包含了这些类，而 Java SE 5 则未包含。如果开发的应用程序要运行在 Java SE 5 上，则应用程序需要使用 Swing 布局扩展库。
如果在 JDK 5 上运行 IDE，IDE 将自动生成应用程序代码以使用 Swing 布局扩展库。在部署应用程序时，需要将 Swing 布局扩展库包含在应用程序中。IDE 将自动在应用程序的 dist/lib 文件夹中提供一个该库的 JAR 文件副本。IDE 还会将位于 dist/lib 文件夹的每个 JAR 文件添加到应用程序 JAR 文件的 manifest.mf 文件内 Class-Path 元素中。
如果在 JDK 6 上运行 IDE，IDE 将生成应用程序代码以使用 Java SE 6 中的 GroupLayout 类。这意味着您可以部署应用程序，使其在安装了 Java SE 6 的系统上运行，并且不需要将 Swing 布局扩展库打包到该应用程序中。
注意：如果使用 JDK 6 创建应用程序，但需要在 Java SE 5 上运行此应用程序，则可以通过 IDE 生成代码以使用 Swing 布局扩展库而不是 Java SE 6 中的类。请在“GUI 编辑器”中打开 ContactEditorUI 类。在“检查器”中，展开 "ContactEditorUI" 节点，然后选择“窗体 ContactEditorUI”。在“属性”窗口中，将“布局生成样式”属性的值更改为“Swing 布局扩展库”。
分发和运行独立的 GUI 应用程序
为 IDE 外部的分发准备 GUI 应用程序：
- 将项目的 dist 文件夹压缩为一个 ZIP 归档。（dist 文件夹还可能包含 lib 文件夹，您需要将此文件夹一并包含在其中。）
通过命令行来运行独立的 GUI 应用程序：
- 导航至项目的 dist 文件夹。
- 键入以下命令：
java -jar <jar_name>.jar
注意：如果出现以下错误：
Exception in thread "main" java.lang.NoClassDefFoundError: org/jdesktop/layout/GroupLayout$Group
请确保 manifest.mf 文件引用的是当前安装的 Swing 布局扩展库版本。
有关布局扩展库的详细信息，请访问 Swing 布局扩展项目。
返回页首
后续步骤
现在，您已经完成了 IDE 的生成 GUI 的教程。有关在 NetBeans IDE 中使用 Java GUI 的更多信息，请参见：
返回页首
