当前页面: 开发资料首页 → Netbeans 专题 → NetBeans IDE 5.0 中的 GUI 构建
NetBeans IDE 5.0 中的 GUI 构建
摘要: NetBeans IDE 5.0 中的 GUI 构建 Talley Mulligan --> 反馈 Please note that this is a DRAFT document and th...
本教程指导您如何为名为 ContactEditor 的应用程序创建图形用户界面 (GUI)。在此过程中，您将布置一个 GUI 前端，使用该前端可以查看和编辑员工数据库中所包含的个人联系信息。
在本教程中，您将学会如何：
- 使用 GUI Builder 界面
- 创建 GUI 容器
- 添加组件
- 调整组件大小
- 对齐组件
- 调整组件锚定
- 设置组件自动调整大小行为
- 编辑组件属性
本教程大约要花 30 分钟的时间。
注意：如果看到 
图标，可单击它查看 GUI Builder 功能的详细交互演示。
入门
从 NetBeans 5.0 开始，IDE 的 GUI Builder 已经进行了修补，变得更加直观也更加功能强大，可以让用户在没有深刻理解布局管理器的情况下，也能构建出专业级 GUI。NetBeans 的新 GUI Builder 消除了构建 GUI 的困难，允许简单地将组件置于需要它们的位置来布置窗体。
创建项目
因为 IDE 中的所有 Java 开发工作都在项目中进行的，所以我们首先需要创建一个新 ContactEditor 项目，并将源和其他项目文件存储在其中。IDE 项目由一组 Java 源文件和与其关联的元数据构成，它包括特定于项目的属性文件、控制构建和运行设置的 Ant 构建脚本和将 Ant 目标映射为 IDE 命令的 project.xml 文件。Java 应用程序往往由多个 IDE 项目组成，但在本教程中，为了简单起见，我们将构建一个全部存储在单个项目中的简单应用程序。
创建新 ContactEditor 应用程序项目的步骤：
- 选择 File > New Project。或者可以单击 IDE 工具栏中的 New Project 图标。
- 在 Categories 窗格中，选择 General 节点，在 Projects 窗格中，选择 Java Application。单击 Next。
- 在 Project Name 字段中输入 ContactEditor 并指定项目位置。
- 确保选中 Set as Main Project 复选框，如果已选中 Create Main Class，则取消选中它。
- 单击 Finish。
IDE 将在系统中的指定位置创建 ContactEditor 文件夹。此文件夹包含项目的所有关联文件，包括其 Ant 脚本、用于存储源和测试的文件夹，以及特定于项目的元数据文件夹。要查看项目结构，请使用 IDE 的 Files 窗口。创建 GUI 容器
创建新应用程序后，您可能已经注意到 Projects 窗口的 Source Packages 文件夹中包含一个空 <default package> 节点。为了继续构建界面，我们需要创建一个 Java 容器，在其中放置其他必需的 GUI 组件。在此步骤，我们将使用 JFrame 组件构建容器，并将容器置于新包中。
创建 JFrame 容器的步骤：
- 在 Projects 窗口中，右键单击 ContactEditor 节点并选择 New > JFrame Form。
- 输入 ContactEditorUI 作为 Class Name。
- 输入 my.contacteditor 作为包。
- 单击 Finish。
IDE 在 ContactEditorUI.java 应用程序中创建 ContactEditorUI 窗体和 ContactEditorUI 类，并从 GUI Builder 打开 ContactEditorUI 窗体。注意，my.contacteditor 包将替换默认包。
熟悉 GUI Builder
既然已经为应用程序建立了新项目，现在我们就花一点时间来熟悉一下 GUI Builder 的界面。要通过交互演示深入了解 GUI Builder 界面，请单击 View Demo 图标。
我们添加 JFrame 容器时，IDE 将在 Editor 选项卡中打开新创建的 ContactEditorUI 窗体，其工具栏包含多个按钮，如上图所示。ContactEditor 窗体在 GUI Builder 的 Design 视图中打开时，三个其他窗口自动沿 IDE 的边缘显示出来，允许像自己构建的窗体那样导航、组织和编辑 GUI 窗体。
GUI Builder 的各种窗口包括：
- 设计区域。用于创建和编辑 Java GUI 窗体的 GUI Builder 的主窗口。工具栏的 Source and Design 切换按钮允许查看类的源代码或其 GUI 组件的图形视图。其他工具栏按钮提供常见命令的便捷访问，如在 Selection and Connection 模式之间选择、对齐组件、设置组件自动调整大小行为，以及预览窗体。
- Inspector（检查器）。按照树层次结构提供应用程序中所有组件（可视的和非可视的）的表示形式。Inspector 还提供关于在 GUI Builder 中当前正在编辑树中的什么组件的可视化反馈，同时还允许在可用面板中组织组件。
- Palette（调板）。可自定义的可用组件的列表，包含 JFC/Swing、AWT and JavaBeans 组件的选项卡，以及布局管理器。此外，可以使用 Customizer 创建、移除和重排 Palette 中显示的类别。
- 属性窗口。显示在 GUI Builder、Inspector 窗口、Projects 窗口或 Files 窗口中当前选择的组件的属性。
如果单击 Source 按钮，则 IDE 将在 Editor 中显示应用程序的 Java 源代码，同时通过蓝色区域指示由 GUI Builder 自动生成的代码部分，称为“保护块（Guarded Blocks）”。保护块是在 Source 视图中不可编辑的受保护区域。在 Source 视图中，只能编辑 Editor 的白色区域中显示的代码。如果需要更改“保护块”内的代码，请单击 Design 按钮将 IDE 的 Editor 返回 GUI Builder，可以在此对窗体进行必要的调整。保存更改时，IDE 将更新文件源。
注意：高级开发人员可以使用 Palette Customizer 从 JAR、库或其他项目将自定义组件添加到 Palette 中。
主要概念
IDE 的 GUI Builder 通过简化图形界面解决了 Java GUI 创建的核心问题，从而把开发人员从 Swing 布局管理器的复杂性中解放出来。它通过扩展当前的 NetBeans IDE GUI Builder，使其支持简单的“自由设计”范例来完成此操作。“自由设计”范例的规则简单，易学易用。布置窗体时，GUI Builder 将提供可视化准线，给出最佳间距和组件对齐建议。在后台，GUI Builder 将设计决策转换为可用的 UI，这种 UI 是使用新 GroupLayout layout 管理器及其他 Swing 构造实现的。因为它使用动态布局模型，所以使用 GUI Builder 构建 GUI 的行为在运行时根据需要进行，能通过调整以适应任何更改，而不改变已定义的组件之间的关系。您只要调整窗体大小、切换地点或指定不同外观，GUI 就会按照目标外观的插入和偏移自动进行调整。
自由设计
在 IDE 的 GUI Builder 中，可以通过将组件简单地置于需要的位置来构建窗体，就好像使用绝对的定位方法那样。GUI Builder 可以断定需要的布局管理器，然后自动生成代码。您自己不必考虑插入、锚定、填充，等等。部署应用程序时，可以通过打包所包含的已更新 Swing 库的可自由分发的 JAR 文件，确保其行为符合要求。
自动组件定位（抓取）
向窗体添加组件时，GUI Builder 将提供可视化反馈，帮助根据操作系统的外观定位组件。GUI Builder 提供关于应该将组件置于窗体何处的有用内联提示及其他可视化反馈，并自动将组件抓取到沿准线的位置。它是根据已经放置在窗体中的组件的位置提出这些建议的，但同时这种填充方法还保留着灵活性，以便各种目标外观都在运行时正确呈现。
可视化反馈
GUI Builder 还提供关于组件锚定和链接关系的可视化反馈。这些指示符可以让您快速识别对 GUI 的显示方式和运行时行为有影响的各种定位关系和组件固定行为。这可加快 GUI 的设计进程，能让您快速创建可用的专业级可视化界面。
先做重要事情
熟悉了 GUI builder 的界面之后，我们就该开始开发 ContactEditor 应用程序的 UI 了。在本部分中，我们将使用 IDE 的 Palette 添加窗体所需的各种 GUI 组件。
由于有了 NetBeans 5.0 的“自由设计”范例，您无需再使用布局管理器控制容器中组件的大小和位置。您需要做的，只是将所需组件拖放（或选取和放下）到 GUI 窗体中，如下图所示。
添加组件：基础
尽管 IDE 的 GUI Builder 简化了 Java GUI 的创建过程，在开始布置界面前，拟订所需的界面显示方式一般还是有帮助的。很多界面设计器把这一点视为“最佳实践”技术，但在本教程中，建议您首先向前跳到预览 GUI 部分简单地查看一下完成后的窗体外观。
由于我们已经添加了 JFrame 作为窗体的顶级容器，下一步是添加两个允许使用有标题边框来群集化 UI 组件的 Jpanel。参考下图并注意完成操作时 IDE 的“选取和放下”行为。
添加 Jpanel 的步骤：
- 在 Palette 窗口中，通过单击和释放鼠标按键从 Swing 类别选择 JPanel 组件。
- 将指针移动到 GUI Builder 中窗体的左上角。当组件位置接近容器的左上边缘时，水平和垂直对齐准线将出现，指示较佳的边距。在窗体中单击，将 JPanel 置于此位置。
JPanel 组件在 ContactEditorUI 窗体中以橙色突出显示的方式表示被选中，如下图所示。释放鼠标按键后，显示组件锚定关系的小型指示器出现，同时在 Inspector 窗口中显示相应的 JPanel 节点。
下一步，我们需要调整 JPanel 的大小以便为稍后在其中放置组件留出空间，但是首先我们花点时间了解一下 GUI Builder 的另一种可视化功能。为此，我们需要取消选中刚才添加的 Jpanel。因为我们尚未添加标题边框，所以面板将消失。但是注意，在 Jpanel 上传递指针时，其边缘会变为浅灰色，可以清楚地看到其位置。您只需在组件内部单击任何位置即可重新选中它，同时显示其缩放柄和锚定指示器。
调整 Jpanel 大小的步骤：
- 选择要添加的 Jpanel。围绕组件的周长将显示多个小正方形缩放柄。
- 在 JPanel 右边缘上的缩放柄上单击并保持，然后拖动直到窗体边缘附近的虚线对齐准线出现。
- 释放缩放柄以调整组件的大小。
可以按照建议的偏移量扩展 JPanel 组件以横跨容器的左右边距，如下图所示：
我们添加了包含 UI 的名称信息的面板后，需要重复该过程在其下直接添加另一个面板，用于电子邮件信息。请参考下图，重复执行上述两个任务，注意 GUI Builder 的建议位置。注意，两个 Jpanel 之间的建议垂直边距比边缘之间小得多。添加第二个 Jpanel 后，调整其大小，使其充满窗体的剩余垂直空间。
因为我们希望在 GUI 的上下两部分中可视化地区分功能，所以需要为每个 Jpanel 添加边框和标题。我们首先使用“属性”窗口完成此操作，然后使用弹出菜单进行试用。
向 Jpanel 添加标题边框的步骤：
- 选择 GUI Builder 中上面的 Jpanel。
- 在 Properties 窗口，单击 Border 属性旁边的省略号按钮 (...)。
- 在显示的 Jpanel 的 Border 编辑器中，选择 Available Borders 窗格中的 TitledBorder 节点。
- 在下面的 Properties 窗格中，为 Title 属性输入 Name。
- 单击 Font 属性旁边的省略号 (...)，为 Font Style 选择 Bold，并为 Size 输入 12。单击 OK 退出对话框。
- 选择下面的 JPanel 并重复执行步骤 2 到 5，但是通过右键单击 JPanel 并使用弹出菜单来访问 Properties 窗口。为 Title 属性输入 E-mail。
至此，已将有标题的边框添加到了两个 JPanel 组件中。
编辑 Jlabel 的显示文本的步骤：
- 双击 JLabel 选择其显示文本。
- 键入 First Name::并按 Enter 键。
此时将显示 Jlabel 的新名称，并且组件的宽度随编辑的结果调整。
现在，我们添加一个 JTextField 以查看 GUI Builder 的基线对齐功能。
向窗体添加 JTextField 的步骤：
- 在 Palette 窗口中，从 Swing 类别选择 JTextField 组件。
- 移动指针，使其紧靠我们刚才添加的 First Name: Jlabel 的右边。当水平准线出现，指示将 JtextField 的基线与 JLabel 的基线对齐，并使用垂直基线建议两个组件之间的间距时，单击以放置 JtextField。
JTextField 进入窗体中的位置时，其基线将与 Jlabel 的基线对齐，如下图所示。注意，JLabel 稍微向下移动了一点儿，以便与较高文本字段的基线对齐。一般情况下，将表示组件的节点添加到 Inspector 窗口。
在进行下一步操作之前，我们需要在刚才添加的组件的右边紧挨着添加其他 JLabel and JtextField，如下图所示。这一次输入 Last Name:作为 Jlabel 的显示文本，并暂时让 JtextField 的占位符文本保持原样。
调整 JTextField 大小的步骤：
- 选择我们刚才添加到 Last Name: JLabel 右边的 JTextField。
- 将 JtextField 的右边缘的缩放柄拖向封闭的 Jpanel 的右边缘。
- 当垂直对齐准线显示文本字段和 Jpanel 的右边缘之间的边距时，释放鼠标按键以调整 JtextField 的大小。
JtextField 的右边缘将与 Jpanel 的建议的边缘边距对齐，如下图所示。
要查看上述过程的演示，请单击
向窗体添加多个组件
现在我们添加 Title: and Nickname: Jlabel，这些标签将描述我们稍后添加的两个 JtextField。 我们按住 Shift 键选取和放下组件，以快速将其添加到窗体。执行此操作时，再次注意 GUI Builder 显示水平和垂直准线，建议首选组件间距。
向窗体添加多个 JLabel 的步骤：
- 在 Palette 窗口中，通过单击和释放鼠标按键从 Swing 类别选择 JLabel 组件。
- 在窗体上移动指针，使其直接位于我们刚才添加的 First Name: JLabel 的下边。当准线出现，指示新 Jlabel 的左边缘与上面的 JLabel 的左边缘对齐，同时在它们之间保留一个小边距时，按住 Shift 键单击以放置第一个 Jlabel。
- 按住 Shift 键不要松开，立即单击将另一个 JLabel 放在第一个的右边。确保在放置第二个 Jlabel 前释放 Shift 键。如果忘记在放置最后一个 JLabel 前释放 Shift 键，则请按 Esc 键。
将 Jlabel 添加到窗体将创建另一个行，如果下图所示。表示每个组件的节点将被添加到 Inspector 窗口中。
在进行下一步之前，我们需要编辑 Jlabel 的名称，以便查看到后面设置的对齐效果。
编辑 JLabel 的显示文本的步骤：
- 双击第一个 JLabel 选择其显示文本。
- 键入 Title:并按 Enter 键。
- 重复步骤 1 和 2，为第二个 JLabel 的名称属性输入 Nickname:。
Jlabel 的新名称将在窗体中显示并随编辑宽度的结果而改变，如果下图所示。
我们还需要在窗体的右部添加一个附加 JtextField，显示每个联系人的别名。
添加 JtextField 的步骤：
- 在 Palette 窗口中，从 Swing 类别选择 JTextField 组件。
- 将指针移动到Nickname 标签的右边，单击以放置文本字段。
JTextField 将进入 Jlabel 左边紧挨着它的位置。
调整 JTextField 大小的步骤：
- 将在上一个任务中添加的 Nickname:标签的 JTextField 的缩放柄拖向封闭 Jpanel 的右边。
- 当垂直对齐准线显示文本字段和 JPanel 的边缘之间的边距时，释放鼠标按键以调整 JtextField 的大小。
JtextField 的右边缘将与 Jpanel 的建议的边缘边距对齐，GUI Builder 将推断适当的调整大小行为。
要查看上述过程的演示，请单击 返回页首
继续下一步
对齐是创建专业级 GUI 的大多数基本方面之一。在上一部分中，我们了解了 IDE 的对齐功能，以及将 JLabel and JTextField 组件添加到 ContactEditorUI 窗体。下一步，我们进一步了解一下在使用应用程序所需的各种其他组件时 GUI Builder 的对齐功能。
组件对齐
每次将组件添加到窗体时，GUI Builder 都会通过显示的对齐准线有效地对齐它们。但是，指定组件组之间的不同关系有时也是必要的。以前我们添加了四个 ContactEditor GUI 所需的 Jlabel，但是我们没有对齐它们。现在我们对齐 Jlabel 的两个列，以便其右边缘在一条直线上。
对齐组件的步骤：
- 在右边窗体中选择 First Name: and Title: Jlabel。
- 单击工具栏中 Column 按钮中的 Align Right (
)。或者，右键单击弹出菜单的 Column 中的任何一个并选择 Align > Right。
- 再为 Last Name: and Nickname: Jlabel 重复此步骤。
Jlabel 的位置将改变，以便对齐其显示文本的右边缘。锚定关系将更新，以指示组件已分组。
在完成以前添加的 JtextField 之前，我们需要确保正确调整在两个 Jlabel 之间插入的两个 JtextField 的大小。与我们拉到窗体的右边缘的两个 JtextField 不同，插入组件的调整大小行为不是自动设置的。
设置组件的调整大小行为的步骤：
- 按住 Ctrl 键单击两个插入的 JTextField 组件，以便在 GUI Builder 中选中它们。
- 在所选的两个 JtextField 中，右键单击它们中的任意一个并从弹出菜单选择 Auto Resizing > Horizontal。
JTextFields 将被设置为在运行时水平调整大小。对齐准线和锚定指示器将被更新，从而提供组件关系的可视化反馈。
将组件设置为相同大小的步骤：
- 按住 Ctrl 键单击窗体中的全部四个 JtextField 以选中它们。
- 在所选的 JtextField 中，右键单击它们中的任意一个并从弹出菜单选择 Set Default Size。
所有这些 JtextField 将被设置为相同的宽度，并且指示器将被添加到每个 JtextField 的顶部边缘，提供组件关系的可视化反馈。
现在我们需要添加描述 JcomboBox 的另一个 Jlabel，它允许用户选择 ContactEditor 应用程序将显示的信息的格式。
将 JLabel 与组件组对齐的步骤：
- 在 Palette 窗口中，从 Swing 类别选择 JLabel 组件。
- 将指针移动到 Jpanel 左边的 First Name and Title Jlabel 之下。当准线出现，指示已将新 Jlabel 的右边缘与上面的组件组（两个 JLabel）的右边缘对齐时，单击以放置组件。
JLabel 将进入与上面的 Jlabel 列右对齐的位置，如下图所示。GUI Builder 将更新对齐状态行，以指示组件的间距和锚定关系。
在上面的示例中，双击 JLabel 以选中其显示文件，可为显示名称输入 Display Format:。注意，当 JLabel 进入位置时，其他组件将改变以适应较长的显示文本。
要查看上述过程的演示，请单击 请单击
基线对齐
只要添加或移动包括文本的组件（如 Jlabel、JtextField 等），IDE 就会建议基于组件中文本基线的对齐方式。例如，以前我们插入 JTextField 时，其基线将自动与邻近的 Jlabel 对齐。
现在我们将添加允许用户选择将显示的 ContactEditor 应用程序的信息格式的组合框。添加 JcomboBox 时，我们将其基线与 Jlabel 的文本的基线对齐。请再次注意，基线对齐准线将显示，帮助我们定位。
对齐组件的基线的步骤：
- 在 Palette 窗口中，从 Swing 类别中选择 JComboBox 组件。
- 移到指针，使其紧靠我们刚才添加的 JLabel 的右边。当水平准线出现，指示将 JComboBox 的基线与 JLabel 中的文本的基线对齐，并使用垂直基线建议两个组件之间的间距时，单击以放置组合框。
该组件将进入与其右边的 Jlabel 的基线对齐的位置，如下图所示。GUI Builder 将显示状态行，以指示组件的间距和锚定关系。
调整 JComboBox 大小的步骤：
- 选择 GUI Builder 中的 JComboBox。
- 将 JcomboBox 右边缘的缩放柄向右拖，直到建议 JComboBox 和 Jpanel 边缘之间的首选偏移量的对齐准线出现为止。
如下图所示，JcomboBox 的右边缘将与 Jpanel 的建议边缘边距对齐，组件的宽度将随窗体自动调整大小。
编辑组件模型超出了本教程的范围，所以现在我们不去管 JcomboBox 的占位符项列表。
要查看上述过程的演示，请单击 返回页首
回顾所学的知识
我们已经为构建 ContactEditor GUI 开了个好头，现在我们花点时间来回顾一下添加界面所需的几个组件时学到的知识。
到现在为止，我们一直致力于使用 IDE 的对齐准线帮助定位将组件添加到 ContactEditor GUI 中。但是，我们必须了解放置组件的另一个完整部分是锚定。尽管我们还没有讨论它，您已经得到了它的不用调整大小的好处。如上所述，只要向窗体添加组件，IDE 就使用准线建议目标外观的首选位置。放置后，新组件还将被锚定到最近的容器边缘或组件，以便在运行时维护组件关系。在本部分，我们将集中于如何以更加简单的方式完成这些任务，同时指出 GUI builder 将在后台完成的工作。
添加、对齐和锚定
GUI Builder 允许通过简化典型的工作流动作来快速而方便地布置窗体。只要向窗体添加组件，GUI Builder 就会自动将其置于首选位置并设置必要的链接关系，这样您就可以集中精力设计窗体，而不用顾及复杂的实现细节。
添加、对齐和编辑 JLabel 的显示文本的步骤：
- 在 Palette 窗口中，从 Swing 类别选择 JLabel 组件。
- 在窗体上移动指针，使其紧靠下面的 Jpanel 的电子邮件标题之下。当准线出现，指示将其置于 JPanel 的左上角，同时在左上边缘留下较小边距时，单击以放置该 JLabel。
- 双击 JLabel 选择其显示文本。然后键入 E-mail Address: 并按 Enter 键。
JLabel 将进入窗体中的首选位置，并被锚定到封闭 Jpanel 左上边缘。与以前一样，将表示组件的相应节点添加到 Inspector 窗口。
添加 JtextField 的步骤：
- 在 Palette 窗口中，从 Swing 类别选择 JTextField 组件。
- 移动指针，使其紧靠刚才添加的 E-mail Address 标签的右边。当准线出现，指示将 JTextField 的基线与 JLabel 中的文本的基线对齐，并使用垂直基线建议两个组件之间的边距时，单击以放置文本字段。
JTextField 将进入 E-mail Address: JLabel 右边的位置，并链接到该 Jlabel。其相应的节点也将被添加到 Inspector 窗口中。
- 将 JtextField 的缩放柄拖到封闭的 Jpanel 的右边，直到建议 JTextField and JPanel 边缘之间的首选偏移量的对齐准线出现为止。
JtextField 的右边缘将进入指示首选边距的对齐准线。
现在我们需要添加将显示 ContactEditor 的整个联系人列表的 Jlist。
添加 Jlist 和调整其大小的步骤：
- 在 Palette 窗口中，从 Swing 类别选择 JList 组件。
- 移动指针，使其紧靠刚才添加的 E-mail Address Jlabel 的下边。当准线出现，指示将 Jlist 的左上边缘沿 Jpanel 的左边缘和上面的 Jlabel 与首选边距对齐时，单击以放置 Jlist。
- 将 Jlist 的右缩放柄拖到封闭的 JPanel 的右边，直到建议对齐准线（指示其与上面的 JTextField 相同）出现为止。
JList 将进入对齐准线指定的位置，并在 Inspector 窗口中显示其相应节点。另请注意，窗体将扩展以适应新添加的 Jlist。
由于 Jlist 用于显示较长数据列表，它们通常需要添加 JscrollPane。只要添加需要 JscrollPane 的组件，GUI Builder 将自动添加它。因为 JscrollPane 是不可视组件，所以必须使用 Inspector 窗口来查看或编辑 GUI Builder 所创建的任何 JscrollPane。
要查看上述过程的演示，请单击
组件大小
设置几个相关的组件往往是有好处的，如模式对话框中的按钮，为了视觉上的一致性，需要设置为相同的大小。为了演示这一此，我们将向 ContactEditor 窗体添加 Jbutton，ContactEditor 窗体允许我们在联系人列表中添加、编辑和移除个别条目，如下图所示。然后，我们将四个按钮设置为相同的大小，这样它们就可以作为提供相关功能的按钮被方便地识别出来。
添加、对齐和编辑多个按钮的显示文本的步骤：
- 在 Palette 窗口中，选择 JButton 组件。
- 在下面的 Jpanel 中，将 JButton 移动到 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。
- 右键单击其中之一，并从弹出菜单选择 Same Size > Same Width。
这些 Jbutton 将被设置为与名称最长的按钮相同的大小。
要查看上述过程的演示，请单击
向窗体添加个别组件
现在，我们需要开始添加显示联系人列表中实际联系人信息的组件。在此任务中，我们将添加四个 JtextField，让它们显示联系人信息和描述它们的 Jlabel。在完成此操作时，请注意 GUI Builder 显示的水平和垂直准线，这些基准线显示操作系统外观定义的首选组件间距。这确保了在运行时自动按照目标操作系统的外观呈现 GUI。
向窗体添加 JLabel 的步骤：
- 将名为 Mail Format 的 JLabel 添加到 Jlist 下的窗体。确保该标签与上面的 JList 左对齐。
- 在 Palette 窗口中，从 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 的步骤：
- 在 Palette 窗口中，从 Swing 类别中选择 ButtonGroup 组件。
- 在 GUI Builder 设计区域的任意位置单击，以将 ButtonGroup 组件添加到窗体。注意，ButtonGroup 中窗体中不显示，但在 Inspector 的 Other Component 区域是可见的。
- 选择窗体中的全部三个 JradioButton。
- 在 Properties 窗口中，从 buttonGroup 属性组合框选择 buttonGroup1。
三个 JradioButton 将被添加到按钮组。
要查看上述过程的演示，请单击 返回页首
进行最终对齐
我们已经完成了 ContactEditor 应用程序 GUI 的大部分工作，但还有几件事情要做。在本部分，我们来看看 GUI Builder 简化的几个其他典型布局任务。
最后要做的事
现在我们需要添加一些按钮，这些按钮允许用户确认他们为个别联系人输入的信息并将其添加到联系人列表，或者取消添加的信息，让数据库保持不变。在此步骤，我们将添加两个必须的按钮，并通过编辑让它们在窗体中显示为相同的大小，即使它们的显示文本具有不同的长度。
添加和编辑按钮的显示文本的步骤：
- 如果将下面的 Jpanel 扩展到 JFrame 窗体的下边缘，则向下拖动 JFrame 的下边缘。这将在 JFrame 的边缘和 JPanel 的边缘之间留出 OK 和 Cancel 按钮的空间。
- 在 Palette 窗口中，从 Swing 类别选择 JButton 组件。
- 将指针移动到电子邮件 JLabel 之下的窗体上。当准线出现，指示将 Jbutton 的右边缘与下面的 Jframe 的右下角对齐时，单击以放置按钮。
- 将另一个 JButton 添加到第一个的左边，确保沿 Jframe 的下边缘使用建议的间距放置它。
- 双击每个 JButton 选择其显示文本。为左边的按钮输入 OK，为右边的按钮输入 Cancel。注意，按钮的宽度将更改以适应新名称。
- 将两个 Jbutton 设置为相同的大小，方法是选择这两个按钮，右键单击任意一个并从弹出菜单选择 Same Size > Same Width。
JButton 组件将在窗体中显示，其相应的节点将出现在 Inspector 窗口中。JButton 组件的代码也将被添加到在 Editor 的 Source 视图中可见的窗体的源文件中。这些 Jbutton 中的每一个将被设置为与名称最长的按钮相同的大小。
最后需要做的，是删除各个组件中的占位符文本。注意，在大致完成窗体时，移除占位符文本是一种避免产生组件对齐和锚定关系问题的有用技巧，大多数开发人员通常在布置窗体的过程中移除此文本。检查窗体时，针对每个 JtextField 选择和删除占位符文本。我们将 JComboBox 和 JList 中的占位符项目留到以后的教程中介绍。
要查看上述过程的演示，请单击
预览 GUI
现在您已经成功地构建了 ContactEditor GUI，您可以试用界面以查看效果。可能通过单击 GUI Builder 工具栏中的 Preview Form 按钮 (
) 在运行时预览窗体。窗体将在它自己的窗口中打开，允许在构建和运行前先测试它。
部署 GUI 应用程序
为了让使用 GUI Builder 创建的界面在 IDE 之外运行，部署应用程序时，必须包括包含各种布局相关扩展的外部库。因为 NetBeans 5.0 GUI Builder 依赖于 Swing Layout Extensions 库，所以它在运行时还必须位于应用程序的类路径上。
您可以在系统的以下位置找到 Swing Layout Extensions 库的 JAR 文件：
NetBeans_installation_folder/ide6/modules/ext/swing-layout-installed_version.jar分发和运行独立的 GUI 应用程序
要确保 GUI 应用程序将在运行时自动使用 Swing Layout Extensions 库，构建项目时，IDE 自动将 JAR（及项目类路径上的所有其他 JAR 文件）复制到 dist/lib 文件夹。IDE 还将每个 JAR 文件添加到 Class-Path 元素（即应用程序 JAR 文件的 manifest.mf 文件）中。
准备将 GUI 应用程序分发到 IDE 之外的步骤：
- 将项目的 dist 文件夹（包括 lib 文件夹）压缩为 ZIP 归档文件。
从命令行运行独立 GUI 应用程序的步骤：
- 导航到项目的 dist 文件夹。
- 键入以下内容：
java -jar <jar_name>.jar
注意：如果使用的是预发布版本的 NetBeans IDE 或者遇到以下错误：Exception in thread "main" java.lang.NoClassDefFoundError:org/jdesktop/layout/GroupLayout$Group确保 manifest.mf 文件引用当前安装的 Swing Layout Extensions 库的版本。
有关布局扩展库的更多信息，请访问 Swing Layout Extensions 项目。
进一步研究
现在您已经完成了 IDE 的 GUI Building 教程。有关使用 NetBeans IDE 的更多信息，请参见：
- Matisse GUI Builder FAQ。使用 NetBeans GUI Builder 的有用提示和技巧集合。
- NetBeans 联机帮助。NetBeans IDE 本身包含的文档。按 F1 可打开联机帮助。
- Using NetBeans IDE。在 NetBeans IDE 中开发 Java 应用程序的完整指南。
- NetBeans 支持与文档。NetBeans IDE 用户的文章、FAQ 和邮件列表的完整列表。
↑返回目录
前一篇: GUI 编辑器
后一篇: 使用 NetBeans 开发 Java EE 5 "
