FeaturesDocs & SupportCommunityBlogsPartners

使用NetBeans IDE设计一个Swing GUI程序

翻译：Sam Wang（NetBeans 中文社区成员）

Content on this page applies to NetBeans IDE 6.0

下载 quickstart-gui.zip一个用于离线阅读的打包文件

此教程指导您如何使用NetBeans IDE 的 GUI Builder创建一个名为ContactEditor的图形用户界面（GUI）应用程序的全过程。 在此过程中您将会设计布局一个GUI前端，允许您能够查看及修改保存在员工数据库中的个人联系信息。

教程中您将会学到如何:

  • 使用GUI Builder 界面
  • 创建一个 GUI 容器
  • 添加组件
  • 调整组件大小
  • 对齐组件
  • 调整组件锚距
  • 设置组件自动调整大小行为
  • 编辑组件属性

    • 本教程大约需要30分钟的时间完成。

    注意： 当您看到 图示，表示您可以通过点击它查看更为详细的GUI Builder相关功能的交互式解说。

入门

IDE的GUI Builder能让那些没有深入了解布局管理的用户创建一个具有专业级外观的GUI应用变为可能。

有关GUI Builder的可视化反馈描述，您可以查阅 GUI Builder 可视化反馈信息图例.

创建项目

因为在IDE中所有的Java开发工作都以项目进行的，所以我们先创建一个新的ContactEditor项目，用于保存源代码及其它的项目文件。 一个IDE项目是一组Java源代码文件和与其相关联的元数据资料构成，它包括特定于项目的属性文件，一个用于控制构建及运行设置的Ant构建脚本，和将Ant目标映射为IDE命令的project.xml文件。 尽管Java应用程序经常由多个IDE的项目组成，但在本教程中，为了简单起见，我们将构建一个全部存储在单个项目中的简单应用程序。

开始创建一个新的ContactEditor应用程序项目的步骤：

  1. 选择 File > New Project。或者您可以点击IDE工具栏上的 New Project 图示。
  2. 在 Categories 窗格中，选择 Java 节点，再从 Projects 窗格中，选择 Java Application。单击 Next。
  3. 在 Project Name 栏位中输入 ContactEditor 并在 Project Location 中指定项目保存的路径。
  4. 确保 Set as Main Project 的复选框是选上的并且已清除 Create Main Class 的选上状态。
  5. 单击 Finish。

    IDE会根据刚刚指定的位置在您的系统中创建 ContactEditor 文件夹。 这个文件夹包含所有的项目相关的文件，包括项目的Ant脚本，用于存储源代码和测试代码的文件夹，以及一个用于保存特定于项目元数据的文件夹。 要查看项目的文件结构，请点击 IDE 的 Files 窗口。

创建一个 GUI 容器

当创建一个新的应用之后，您可能已经注意到在 Projects 窗口的Source Packages文件夹中包含一个空的包 <default package> 节点。 为了着手构建用户界面，我们需要创建一个Java容器用于放置其它所需的GUI组件。 在这一步，我们将使用JFrame创建一个容器并放置于一个新的包当中。

创建 JFrame 容器的步骤：

  1. 在 Projects 窗口中，右键单击 ContactEditor 节点并选择 New > JFrame Form。
  2. 输入 ContactEditorUI 作为类名。
  3. 输入 my.contacteditor 作为包名。
  4. 单击 Finish。

    IDE从 ContactEditorUI.java 文件当中创建了 ContactEditorUI 窗体以及 ContactEditorUI 类并且在 GUI Builder中打开了 ContactEditorUI 窗体。请注意 my.contacteditor 包名已经代替了默认包名（default package）。

 

顶部

开始熟悉 GUI Builder

既然已经为应用程序建立了新项目，现在先让我们花些时间来熟悉一下 GUI Builder的界面。要通过交互的演示深入了解GUI Builder界面的，请点击查看演示图示。

The IDE's GUI Builder Interface.

查看演示

当我们添加 JFrame 容器，IDE 在编辑器标签窗体中打开刚刚创建的 ContactEditorUI 窗体并且内嵌了一个包含多个按钮的工具栏，正如上图所示。 ContactEditor 正展开在 GUI Builder的设计视图当中，并且三个外加的窗体自动沿IDE的边缘显示出来，正如您所需的让您能导航，组织及修改GUI窗体。

GUI Builder 包括的各种窗口：

  • 设计区域。GUI Builder用于创建及编辑Java GUI窗体的主要窗口。 工具栏的 Source 及 Design 切换按钮允许您查看类的源代码或其GUI组件的图形视图。 附加的工具栏按钮提供访问常见命令的便捷途径，例如选择模式及连接模式，对齐组件，设置组件自动调整大小行为，以及窗体预览。
  • Inspector（检查器）。 按照树层次结构提供应用程序中所有组件的表示形式，包括可视的及不可视的。 Inspector还提供关于在GUI Builder中当前正在编辑树中的什么组件的可视化反馈，同时还允许在可用面板中组织组件。
  • Palette。 可自定义的可用组件的列表，包含JFC/Swing、AWT和JavaBeans组件的选项卡，以及布局管理器。 另外，您可以使用 Palette 的自定义功能创建，移除，或重新安排分类显示的类别。
  • Properties 窗口。 显示在GUI Builder，Inspector 窗口，Projects 窗口或 Files 窗口中，当前被选中的组件的属性。

如果您单击 Source 按钮，IDE将在编辑器中显示应用程序Java源代码，包括由GUI Builder自动产生的由蓝色区域标示的部分， 称之为：保护块（Guarded Blocks）。保护块是一外在 Source 视图中不能被编辑的被保护区域。在Source 视图中您只能够编辑那些白色的区域。 如果您需要修改保护块内的代码，请单击 Design 按钮返回 GUI Builder，当中包括了对窗体的所有必需的调整功能。 保存更改时，IDE将更新文件的源代码。

提示： 对于高级开发人员，可以使用 Palette 自定义器从JARs，库或其它项目添加自定义的组件到Palette中。

顶部

主要概念

IDE的GUI Builder通过简化创建图形界面流程的方式解决 Java 图形用户界面创建的核心问题， 从而把开发人员从Swing布局管理器的复杂性中解放出来。它依靠扩展当前 NetBeans IDE的GUI Builder以支持一个包含简化布局规则的易懂的“自由设计”范例，并且易于理解和使用。 正如布置您的窗体时，GUI Builder提供可视化准线，给出最佳间距和组件对齐建议。 在后台，GUI Builder将设计决策转换为可用的UI，这种UI是使用新GroupLayout layout管理器及其他Swing构造实现的。 因为它使用了一个动态的布局模型，通过GUI Builder 进行构建的图形用户界面，正如您在运行时所期待的, 界面迎合其它改变的调整您都不需要更改 组件间的关系定义。每当您更改窗体的大小，转换本地化，或者指定不同的外观与感觉，您的图形用户界面会自动地调整以适应最终的外观与感觉的设置。

自由设计

在IDE的GUI Builder中，可以通过将组件简单地置于需要的位置来构建窗体，就好像使用绝对的定位方法那样。GUI Builder可以断定需要的布局属性，然后自动生成代码。 您自己不必考虑插入、锚定、填充，等等。

自动组件定位（抓取）

向窗体添加组件时，GUI Builder将提供可视化反馈，帮助根据操作系统的外观定位组件。 GUI Builder提供关于应该将组件置于窗体何处的有用内联提示及其他可视化反馈，并自动将组件抓取到沿准线的位置。 它是根据已经放置在窗体中的组件的位置提出这些建议的，但同时这种填充方法还保留着灵活性，以便各种目标外观都在运行时正确呈现。

可视化反馈

GUI Builder还提供关于组件锚定和链接关系的可视化反馈。 这些指示符可以让您快速识别对GUI的显示方式和运行时行为有影响的各种定位关系和组件固定行为。 这可加快GUI的设计进程，能让您快速创建可用的专业级可视化界面。

顶部

首要一步

熟悉了GUI builder的界面之后，我们就该开始开发ContactEditor应用程序的UI了。 在本部分中，我们将使用IDE的Palette添加窗体所需的各种GUI组件。

由于有了IDE的“自由设计”范例，您无需再使用布局管理器控制容器中组件的大小和位置。 您需要做的，只是将所需组件拖放（或选取和放下）到GUI窗体中，如下图所示。

添加组件：基础

尽管IDE的GUI Builder简化了创建Java 图形用户界面的工作， 同时您也可以用它来在实现应用之前，进行用户界面样式描会及草案的一种很好的工具。 许多界面设计师认为这是一种“最好的实践”技术，然而，本教程的目的只是让您简单的窥视一下我们是如何从能看到的到预览您的用户界面这么一个完整的过程。

我们已经添加了一个JFrame作为我们窗体的顶层容器，下一步是添加一对JPanel组件用于组合我们用户界面的标题边框。 依照下面的插图并且当准备完成这个操作时请留意IDE的“点选”行为。

添加JPanle：

  1. 打开Palette窗口，从Swing分类中通过点击鼠标左键选择JPanel组件。
  2. 在GUI Builder当中移动鼠标指针到窗体的左上角。当组件靠近于容器的顶部往左的边缘时， 水平和垂直对齐指示线便出现以指示最佳的边距。点击窗体在当前位置放置JPanel。

    3. 正如下面的插图所示，ContactEditorUI的JPanel组件出现橙色高亮表示它已被选中。 当您释放鼠标按钮后，显示组件锚定关系的小型指示器出现，同时在Inspector窗口中显示相应的JPanel节点。

下一步，我们需要调整JPanel的大小以便为稍后在其中放置组件留出空间，但是首先让我们来花点时间了解一下GUI Builder的另一种可视化特性。 为此，我们需要取消选中刚才添加的JPanel。因为我们尚未添加标题边框，所以面板将消失。 但是注意，当您在JPanel上移动鼠标指针时，其边缘会变为浅灰色，这样可以清楚地看到其占有的位置。 您只需单击组件内部的任何位置即可重新选中它，同时其缩放句柄和锚定指示器将重新显示。

调整JPanel大小的步骤：

  1. 选择您刚刚添加的JPanel。围绕组件的周边将显示多个小正方形缩放句柄。
  2. 单击并保持选中JPanel右边缘上的缩放句柄，然后住右拖动直到窗体边缘附近的虚线对齐准线出现。
  3. 释放缩放句柄以调整组件的大小。

    4. 按照建议的偏移量扩展JPanel组件以横跨容器的左右边距，如下图所示。

现在，我们已经添加了一个包含UI的名称信息的面板，我们需要重复该过程在其下直接添加另一个面板，用于电子邮件信息。 请参考下图，重复执行上述两个任务，注意GUI Builder的建议位置。 注意，两个Jpanel之间的建议垂直边距比边缘之间小得多。 添加第二个Jpanel后，调整其大小，使其充满窗体的剩余垂直空间。

 

因为我们希望在GUI的上下两部分中可视化地区分功能，所以需要为每个Jpanel添加边框和标题。我们首先使用“属性”窗口完成此操作，然后使用弹出菜单进行试用。

向JPanel添加标题边框的步骤：

  1. 选择GUI Builder中最上层的JPanel。
  2. 在Properties窗口，单击Border属性旁边的省略号按钮（...）。
  3. 在显示的JPanel的Border编辑器中，选择Available Borders窗格中的TitledBorder节点。
  4. 在下面的Properties窗格中，为Title属性输入Name。
  5. 单击Font属性旁边的省略号（...），为Font Style选择Bold，并为Size输入12。单击OK退出对话框。
  6. 选择下面的JPanel并重复执行步骤2到5，但是这次请通过右键单击JPanel并使用弹出式菜单来访问Properties窗口。为Title属性输入E-mail。

    至此，已将有标题的边框添加到了两个JPanel组件中。

要查看上述操作过程的示范，请点击 查看演示

向窗体添加个别组件

现在，我们需要开始添加显示联系人列表中实际联系人信息的组件。 在此任务中，我们将添加四个JTextField，让它们显示联系人信息和描述它们的JLabel。 在完成此操作时，请注意GUI Builder显示的水平和垂直准线，这些基准线显示操作系统外观定义的首选组件间距。 这确保了在运行时自动按照目标操作系统的外观呈现GUI。

向窗体添加JLabel的步骤：

  1. 在Palette窗口中，从Swing类别选择JLabel组件。
  2. 将鼠标指针移动到我们之前添加的Name JPanel之上。 当基准线出现，指示将JLabel置于JPanel的左上角，同时在左上边缘留下较小边距时，单击以放置标签。

    3. 将JLabel添加到窗体，将表示组件的相应节点添加到Inspector窗口。

在进行下一步操作之前，我们需要编辑刚才添加的JLabel的显示文本。尽管在任何时候都可以编辑组件的显示文本，但在添加它们的时候编辑最为方便。

编辑JLabel的显示文本的步骤：

  1. 双击JLabel选择其显示文本。
  2. 键入First Name: 并按回车键。

    3. 此时将显示JLabel的新名称，并且组件的宽度随编辑的结果调整。

现在，我们添加一个JTextField以查看GUI Builder的基线对齐功能。

向窗体添加JTextField的步骤：

  1. 在Palette窗口中，从Swing类别选择JTextField组件。
  2. 移动鼠标指针，使其紧靠我们刚才添加的First Name: JLabel的右边。 当水平准线出现，指示将JtextField的基线与JLabel的基线对齐，并使用垂直基线建议两个组件之间的间距时，单击以放置JTextField。

    3. JTextField进入窗体中的位置时，其基线将与JLabel的基线对齐，如下图所示。 注意，JLabel稍微向下移动了一点儿，以便与较高文本字段的基线对齐。 一般情况下，将表示组件的节点添加到Inspector窗口。

在进行下一步操作之前，我们需要在刚才添加的组件的右边紧挨着添加其他JLabel和JTextField，如下图所示。 这一次输入Last Name:作为JLabel的显示文本，并暂时让JTextField的占位符文本保持原样。

调整JTextField大小的步骤：

  1. 选择我们刚才添加到Last Name:JLabel右边的JTextField。
  2. 将JTextField的右边缘的缩放句柄拖向封闭的JPanel的右边缘。
  3. 当垂直对齐准线显示文本字段和Jpanel的右边缘之间的边距时，释放鼠标按键以调整JTextField的大小。

    4. JTextField的右边缘将与JPanel的建议的边缘边距对齐，如下图所示。

要查看上述操作过程的示范，请单击 查看演示

向窗体添加多个组件

现在我们添加Title:和 Nickname: JLabel，这些标签将描述我们稍后添加的两个JTextField。 我们按住Shift键选取和放下组件，以快速将其添加到窗体。 执行此操作时，请再次注意GUI Builder显示水平和垂直准线，以建议首选组件间距。

向窗体添加多个JLabel的步骤：

  1. 在Palette窗口中，通过单击和释放鼠标按键从Swing类别选择JLabel组件。
  2. 在窗体上移动鼠标指针，使其直接位于我们刚才添加的First Name:JLabel的下边。 当准线出现，指示新JLabel的左边缘与上面的JLabel的左边缘对齐，同时在它们之间保留一个小边距时，按住Shift键单击以放置第一个JLabel。
  3. 按住 Shift 键不要松开，立即单击将另一个 JLabel 放在第一个的右边。 确保在放置第二个JLabel前释放Shift键。 如果忘记在放置最后一个JLabel前释放Shift键，则请按Esc键。

    4. 将JLabel添加到窗体将创建另一行，如果下图所示。表示每个组件的节点将被添加到Inspector窗口中。

在继续一下步之前，我们需要编辑JLabel的名称，以便查看到后面设置的对齐效果。

编辑JLabel的显示文本的步骤：

  1. 双击第一个JLabel以选中其显示文本。Double-click the first JLabel to select its display text.
  2. 键入 Title:并按回车键。
  3. 重复步骤1和2，为第二个JLabel的名称属性输入Nickname:。

    4. JLabel的新名称将在窗体中显示并随编辑宽度的结果而改变，如果下图所示。

要查看上述操作过程的示范，请单击 查看演示。

插入组件

经常需要在已放入窗体中的组件之间添加新的组件。 在现有组件之间添加组件时，GUI Builder会自动改变它们的位置，为新组件留出空间。 为了演示这一点，我们将在之前添加的两个JLabel之间插入一个JTextField，如下图所示。

在两个JLabel之间插入一个JTextField的步骤：

  1. 在Palette窗口中，从Swing类别选择JTextField组件。
  2. 将鼠标指针移动到第二行中的Title:和Nickname:JLabel上，以便JTextField与此二者重叠，并与其基线对齐。 如果在放置新文本字段时遇到困难，则可将其与Nickname JLabel的左侧准线对齐，如下面的第一个图所示。
  3. 单击以在Title:和Nickname:JLabel之间放置JTextField。
  4. 单击以在Title:和Nickname:JLabel之间放置JTextField。

    5. JTextField将进入两个Jlabel之间的位置。最右边的JLabel将移动到JTextField的右边，以适应建议的水平偏移量。

我们还需要在窗体的右部添加一个附加JTextField，显示每个联系人的别名。

添加JTextField的步骤：

  1. 在Palette窗口中，从Swing类别选择JTextField组件。
  2. 将鼠标指针移动到Nickname标签的右边，单击以放置文本字段。

    3. JTextField将进入JLabel左边紧挨着它的位置。

调整JTextField大小的步骤：

  1. 将在上一个任务中添加的Nickname:标签的JTextField的缩放句柄拖向封闭JPanel的右边。
  2. 当垂直对齐准线显示文本字段和JPanel的边缘之间的边距时，释放鼠标按键以调整JtextField的大小。

    3. JTextField的右边缘将与JPanel的建议的边缘边距对齐，GUI Builder将推断适当的调整大小行为。

要查看上述操作过程的示范，请单击 查看演示

顶部

继续下一步

对齐是创建专业级GUI的大多数基本方面之一。 在上一部分中，我们了解了IDE的对齐功能，以及将JLabel和JTextField组件添加到ContactEditorUI窗体。 下一步，我们进一步了解一下在使用应用程序所需的各种其他组件时GUI Builder的对齐功能。

组件对齐

每次将组件添加到窗体时，GUI Builder都会通过显示的对齐准线有效地对齐它们。 但是，指定组件组之间的不同关系有时也是必要的。以前我们添加了四个ContactEditor GUI所需的JLabel，但是我们没有对齐它们。 现在我们对齐JLabel的两个列，以便其右边缘在一条直线上。

对齐组件的步骤：

  1. 在左侧窗体中选择First Name:和Title:JLabel。
  2. 单击工具栏中Column按钮中的Align Right （）。或者，右键单击弹出菜单的Column中的任何一个并选择Align > Right。
  3. 再为Last Name:和Nickname:JLabel重复此步骤。

    4. Jlabel的位置将改变，以便对齐其显示文本的右边缘。锚定关系将更新，以指示组件已分组。

在完成以前添加的JTextField之前，我们需要确保正确调整在两个JLabel之间插入的两个JTextField的大小。 与我们拉到窗体的右边缘的两个JtextField不同，插入组件的调整大小行为不是自动设置的。

设置组件的调整大小行为的步骤：

  1. 按住Ctrl键单击两个已添加的JTextField组件，以便在GUI Builder中选中它们。
  2. 在所选的两个JTextField中，右键单击它们中的任意一个并从弹出菜单选择 Auto Resizing > Horizontal。

    3. JTextFields将被设置为在运行时水平调整大小。对齐准线和锚定指示器将被更新，从而提供组件关系的可视化反馈。

将组件设置为相同大小的步骤：

  1. 按住Ctrl键单击窗体中的全部四个JTextField以选中它们。
  2. 在所选的JTextField中，右键单击它们中的任意一个并从弹出菜单选择Set Default Size。

    3. 所有这些JTextField将被设置为相同的宽度，并且指示器将被添加到每个JTextField的顶部边缘，提供组件关系的可视化反馈。

现在我们需要添加描述JComboBox的另一个JLabel，它允许用户选择ContactEditor应用程序将显示的信息的格式。

将JLabel与组件组对齐的步骤：

  1. 在Palette窗口中，从Swing类别选择JLabel组件。
  2. 将鼠标指针移动到JPanel左边的First Name和Title Jlabel之下。 当准线出现，指示已将新JLabel的右边缘与上面的组件组（两个JLabel）的右边缘对齐时，单击以放置组件。

    3. JLabel将进入与上面的JLabel列右对齐的位置，如下图所示。GUI Builder将更新对齐状态行，以指示组件的间距和锚定关系。

在上面的示例中，双击JLabel以选中其显示文本，可为显示名称输入Display Format:。注意，当JLabel进入位置时，其他组件将改变以适应较长的显示文本。

要查看上述操作过程的示范，请单击 查看演示

基线对齐

只要添加或移动包括文本的组件（如JLabel、JTextField等），IDE就会建议基于组件中文本基线的对齐方式。 例如，以前我们插入JTextField时，其基线将自动与邻近的JLabel对齐。

现在我们将添加允许用户选择将显示的ContactEditor应用程序的信息格式的组合框。 添加JComboBox时，我们将其基线与JLabel的文本的基线对齐。请再次注意，基线对齐准线将显示，帮助我们定位。

对齐组件的基线的步骤：

  1. 在Palette窗口中，从Swing类别中选择JComboBox组件。
  2. 移动鼠标指针，使其紧靠我们刚才添加的JLabel的右边。当水平准线出现，指示将JComboBox的基线与JLabel 中的文本的基线对齐，并使用垂直基线建议两个组件之间的间距时，单击以放置组合框。

    3. 该组件将进入与其右边的JLabel的基线对齐的位置，如下图所示。GUI Builder将显示状态行，以指示组件的间距和锚定关系。

调整JComboBox大小的步骤：

  1. 选择GUI Builder中的JComboBox。
  2. 将JcomboBox右边缘的缩放句柄向右拖，直到建议JComboBox和JPanel边缘之间的首选偏移量的对齐准线出现为止。

    3. 如下图所示，JComboBox的右边缘将与JPanel的建议边缘边距对齐，组件的宽度将随窗体自动调整大小。

编辑组件模型超出了本教程的范围，所以现在我们不去管JComboBox的占位符项列表。

要查看上述操作过程的示范，请单击 查看演示

顶部

回顾我们所学的

我们已经为构建ContactEditor GUI开了个好头，现在我们花点时间来回顾一下添加界面所需的几个组件时学到的知识。

到现在为止，我们一直致力于使用IDE的对齐准线帮助定位将组件添加到ContactEditor GUI中。 但是，我们必须了解放置组件的另一个完整部分是锚定。尽管我们还没有讨论它，您已经在它自动调整组件大小及位置的特性中受益。 如上所述，只要向窗体添加组件，IDE就使用准线建议目标外观的首选位置。放置后，新组件还将被锚定到最近的容器边缘或组件，以便在运行时维护组件关系。 在本部分，我们将集中于如何以更加简单的方式完成这些任务，同时指出GUI builder将在后台完成的工作。

添加、对齐和锚定

GUI Builder允许通过简化典型的工作流动作来快速而方便地布置窗体。 只要向窗体添加组件，GUI Builder就会自动将其置于首选位置并设置必要的链接关系，这样您就可以集中精力设计窗体，而不用顾及复杂的实现细节。

添加、对齐和编辑JLabel的显示文本的步骤：

  1. 在Palette窗口中，从Swing类别选择JLabel组件。
  2. 在窗体上移动鼠标指针，使其紧靠在JPanel的E-mail标题之下。当准线出现，指示将其置于JPanel的左上角，同时在左上边缘留下较小边距时，单击以放置该JLabel。
  3. 双击JLabel选择其显示文本。然后键入E-mail Address:并按回车键。

    4. JLabel将进入窗体中的首选位置，并被锚定到封闭JPanel左上边缘。与以前一样，将表示组件的相应节点添加到Inspector窗口。

添加JTextField的步骤：

  1. 在Palette窗口中，从Swing类别选择JTextField组件。
  2. 移动鼠标指针，使其紧靠刚才添加的E-mail Address标签的右边。当准线出现，指示将JTextField的基线与JLabel中的文本的基线对齐，并使用垂直基线建议两个组件之间的边距时，单击以放置文本字段。

    3. JTextField将进入E-mail Address:JLabel右边的位置，并链接到该JLabel。其相应的节点也将被添加到Inspector窗口中。

  3. 将JTextField的缩放句柄拖到封闭的JPanel的右边，直到建议JTextField和JPanel边缘之间的首选偏移量的对齐准线出现为止。

    4. JTextField的右边缘将进入指示首选边距的对齐准线。

现在我们需要添加将显示ContactEditor的整个联系人列表的JList。

添加JList和调整其大小的步骤：

  1. 在Palette窗口中，从Swing类别选择JList组件。
  2. 移动鼠标指针，使其紧靠刚才添加的E-mail Address JLabel的下边。 当准线出现，指示将JList的左上边缘沿JPanel的左边缘和上面的JLabel 与首选边距对齐时，单击以放置JList。
  3. 将JList的右缩放句柄拖到封闭的JPanel的右边，直到建议对齐准线（指示其与上面的JTextField相同）出现为止。

    4. JList将进入对齐准线指定的位置，并在Inspector窗口中显示其相应节点。另请注意，窗体将扩展以适应新添加的JList。

由于JList用于显示较长数据列表，它们通常需要添加JScrollPane。只要添加需要JScrollPane的组件，GUI Builder将自动添加它。 因为JScrollPane是不可视组件，所以必须使用Inspector窗口来查看或编辑GUI Builder所创建的任何JScrollPane。

要查看上述操作过程的示范，请单击 查看演示

组件大小

设置几个相关的组件往往是有好处的，如模式对话框中的按钮，为了视觉上的一致性，需要设置为相同的大小。 为了演示这一点，我们将向 ContactEditor窗体添加四个JButton，ContactEditor窗体允许我们在联系人列表中添加、编辑和移除个别条目，如下图所示。 然后，我们将四个按钮设置为相同的大小，这样它们就可以作为提供相关功能的按钮被方便地识别出来。

添加、对齐和编辑多个按钮的显示文本的步骤：

  1. 在Palette窗口中，选择JButton组件。
  2. 在下面的JPanel中，将JButton移动到E-mail Address JTextField的右边缘。 当准线出现，指示将JButton的基线和右边缘与JTextField对齐时，按住Shift键单击以沿JFrame的右边缘放置第一个按钮。 释放鼠标按键时，JTextField的宽度将收缩以适应JButton。
  3. 将指针移动到下面的JPanel中的JList的右上角。 当准线出现，指示将JButton的右上边缘与JList对齐时，按住Shift键单击以沿JFrame的右边缘放置第二个按钮。
  4. 在刚才添加的两个JButton的下边添加其他两个JButton以创建一个列。 确保使用建议的间距一致地放置Jbutton。如果忘记在放置最后一个JButton前释放Shift键，则请按Esc键。
  5. 分别双击每个JButton，为它们的各自的名称输入文本。 为顶部的按钮输入Add，为第二个输入Edit，为第三个输入Remove，为第四个输入As Default。

    6. JButton组件将进入对齐准线所指定的位置。按钮的宽度将更改以适应新名称。

将按钮放置到需要的位置后，我们将四个按钮设置为相同的大小，以获取视觉一致性，同时还可以表示它们具有相关功能。

将组件设置为相同大小的步骤：

  1. 通过按住Ctrl键单击选择全部四个JButton。
  2. 右键单击其中之一，并从弹出菜单选择Same Size > Same Width。

    这些JButton将被设置为与名称最长的按钮为准的相同的大小。

要查看上述操作过程的示范，请单击 查看演示.

缩进

一般情况下，将多个组件群集化到另一个组件下时，以明确这些组件是一组具有相关功能的组件时，此操作是必需的。 例如，一个典型的例子是将多个相关复选框置于一个普通标签下。 GUI Builder允许通过提供为操作系统外观建议首选偏移量的特殊准则方便地完成缩进操作。

在本部分，我们将在允许用户自定义应用程序显示数据的方式的JLabel之下添加几个JRadioButton。请参考下图完成此操作，或者单击相关过程后的“查看演示”图标查看交互演示。

在JLabel下缩进JRadioButton的步骤：

  1. 将名为Mail Format的JLabel添加到窗体的JList下方。确保该标签与上面的JList左对齐。
  2. 在Palette窗口中，从Swing类别选择JRadioButton组件。
  3. 将鼠标指针移动到我们刚才添加的JLabel之下。当准线出现，指示将JRadioButton的左边缘与JLabel对齐时，轻轻向右移动JRadioButton直到二级缩进准线出现为止。 按住Shift键单击以放置第一个单选按钮。
  4. 将指针移动到第一个JRadioButton的右边。按住Shift键单击以放置第二个和第三个JRadioButton，一定要严格遵守建议的组件间距。 确保在放置最后一个JRadioButton前释放Shift键。
  5. 双击每个JRadioButton，为它们的每个名称输入所需的文本。为左边的单选按钮输入HTML，为第二个输入Plain Text，为第三个输入Custom。

    6. 至此，已将三个JRadioButton添加到窗体并在Mail Format JLabel下进行了缩进。

现在我们需要将三个JRadioButton添加到ButtonGroup以启用预期的切换行为，我们一次只能选择一个单选按钮。这将依次确保我们的NameFinder应用程序的联系人信息按选择的邮件格式显示。

将JRadioButton添加到ButtonGroup的步骤：

  1. 在Palette窗口中，从Swing类别中选择ButtonGroup组件。
  2. 在GUI Builder设计区域的任意位置单击，以将ButtonGroup组件添加到窗体。注意，ButtonGroup在窗体中并不显示，但在Inspector的Other Component区域是可见的。
  3. 选择窗体中的全部三个JRadioButton。
  4. 在Properties窗口中，从buttonGroup属性组合框选择buttonGroup1。

    5. 三个JRadioButton将被添加到按钮组。

要查看上述操作过程的示范，请单击 查看演示

顶部

进行最终调整

我们已经完成了ContactEditor应用程序GUI的大部分工作，但还有几件事情要做。在本部分，我们来看看GUI Builder简化的几个其他典型布局任务。

最后要做的事

现在我们需要添加一些按钮，这些按钮允许用户确认他们为个别联系人输入的信息并将其添加到联系人列表，或者取消添加的信息，让数据库保持不变。 在此步骤，我们将添加两个必须的按钮，并通过编辑让它们在窗体中显示为相同的大小，即使它们的显示文本具有不同的长度。

添加和编辑按钮的显示文本的步骤：

  1. 如果下方的JPanel已扩展到JFrame窗体的下边缘，则向下拖动JFrame的下边缘。这将在JFrame的边缘和JPanel的边缘之间留出OK和Cancel按钮的空间。
  2. 在Palette窗口中，从Swing类别选择JButton组件。
  3. 将鼠标指针移动到窗体的电子邮件JPanel之下。当准线出现，指示将JButton的右边缘与下面的JFrame的右下角对齐时，单击以放置按钮。
  4. 将另一个JButton添加到第一个的左边，确保沿JFrame的下边缘使用建议的间距放置它。
  5. 分别双击每个JButton选择其显示文本。为左边的按钮输入 OK，为右边的按钮输入 Cancel。注意，按钮的宽度将更改以适应新名称。
  6. 将两个JButton设置为相同的大小，方法是选择这两个按钮，右键单击任意一个并从弹出菜单选择Same Size > Same Width。

    JButton组件将在窗体中显示，其相应的节点将出现在Inspector窗口中。JButton组件的代码也将被添加到窗体的源文件中，并且Editor的Source视图中同样可见。 这些JButton中的每一个将被设置为与名称最长的按钮相同的大小。

最后需要做的，是删除各个组件中的占位符文本。 注意，在大致完成窗体时，移除占位符文本是一种避免产生组件对齐和锚定关系问题的有用技巧，大多数开发人员通常在布置窗体的过程中移除此文本。 检查窗体时，针对每个JTextField选择和删除占位符文本。我们将JComboBox和JList中的占位符项目留到以后的教程中介绍。

要查看上述操作过程的示范，请单击 查看演示.

顶部

预览图形用户界面（GUI）

现在您已经成功地构建了ContactEditor 的图形用户界面（GUI），您可以试用界面以查看效果。 可以通过单击GUI Builder工具栏中的Preview Form button（）在编辑时预览窗体。 窗体将在它自己的窗口中打开，允许在构建和运行前先测试它。

顶部

部署图形用户界面（GUI）应用程序

为了让使用GUI Builder创建的界面在IDE之外运行，必须针对GroupLayout布局管理器的类对应用程序进行编译，而且使这些类在运行时可用。 这些类包含在Java SE 6中，但未在Java SE 5中包含。如果您开发的应用程序将在Java SE 5上运行，则应用程序需要添加Swing Layout Extensions库。

如果在JDK 5上运行IDE，IDE会自动生成应用程序代码以使用Swing Layout Extensions库。当部署应用程序时，需要在应用程序中包含Swing Layout Extensions库。 当您创建应用程序时（Build > Build Main Project），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 Layout Extensions库。

注意： 注意：如果使用JDK 6创建应用程序，但是想让应用程序也能在Java SE 5上运行，可以让IDE生成器生成代码包含Swing Layout Extensions库，而不是使用Java SE 6中的类。 在GUI Editor中打开ContactEditorUI类。在Inspector中，展开ContactEditorUI节点并选择Form ContactEditorUI。 在Properties窗口中，将Layout Generation Style属性的值更改为Swing Layout Extensions Library。

分发和运行独立的图形用户界面（GUI）应用程序

准备将图形用户界面（GUI）应用程序分发到IDE之外的步骤：

  • 将项目的dist文件夹压缩为ZIP归档文件。（dist文件夹可能还包含一个lib文件夹，也需要将其包含在内。）

从命令行运行独立图形用户界面（GUI）应用程序的步骤：

  1. 导航到项目的dist文件夹。
  2. 键入以下内容：
    java -jar <jar_name>.jar

注意： 如果遇到以下错误：

Exception in thread "main" java.lang.NoClassDefFoundError: org/jdesktop/layout/GroupLayout$Group

确保manifest.mf文件引用当前安装的Swing Layout Extensions库的版本。

有关布局扩展库的更多信息，请访问Swing Layout Extensions 项目。

顶部


下一步

现在您已经完成了如何设计一个Swing 图形用户界面（GUI）教程。有关使用NetBeans IDE中的Java GUI的更多信息，请参见：

顶部
Companion
Projects: 		                  Powered by: