NetBeans.docx

1、NetBeans在 NetBeans IDE 中设计 Swing GUI下载 quickstart-gui.zip，这是供脱机阅读的 zip 文件本教程将指导您完成使用 NetBeans IDE GUI 生成器为一个名为 ContactEditor 的应用程序创建图形用户界面 (Graphical User Interface, GUI) 的过程。在该过程中，您将布置一个 GUI 前端，以便查看和编辑员工数据库中包括的各个员工的联系信息。在本教程中，您将了解如何执行以下操作： 使用 GUI 生成器界面 创建 GUI 容器 添加组件 调整组件大小 对齐组件 调整组件锚点 设置自动调整组件大小行为

2、 编辑组件属性 学完本教程大约需要 30 分钟。注意：只要看到 图标，即可单击它来查看 GUI 生成器功能的详细交互演示。要学完本教程，您需要具备以下软件和资源。软件或资源要求的版本NetBeans IDE版本 6.5、6.1 或 6.0Java Development Kit (JDK)版本 6 或版本 5入门指南使用 IDE 的 GUI 生成器，用户无需深入了解布局管理器，便可以生成具有专业外观的 GUI。只需将组件置于所需的位置，即可设置窗体布局。有关 GUI 生成器可视反馈的描述，可参见 GUI 生成器可视反馈图例。创建项目由于 IDE 中的所有 Java 开发都是在项目内进行的，因此

3、我们首先需要新建一个用来存储源文件及其他项目文件的 ContactEditor 项目。IDE 项目是一组 Java 源文件，外加与其关联的 meta 数据，其中包括特定于项目的属性文件、控制生成和运行设置的 Ant 生成脚本以及一个将 Ant 目标映射到 IDE 命令的 project.xml 文件。尽管 Java 应用程序通常包括几个 IDE 项目，但是，在本教程中，我们将生成一个完全存储在单个项目中的简单应用程序。创建新的 ContactEditor 应用程序项目：1. 选择“文件”“新建项目”。或者，也可以单击 IDE 工具栏中的“新建项目”图标。 2. 在“类别”窗格中选择 Java

4、节点，在“项目”窗格中选择“Java 应用程序”。单击“下一步”。 3. 在“项目名称”字段中输入 ContactEditor，然后指定项目位置。 4. 将“使用专用文件夹存储库”复选框保留为取消选中状态。（如果使用的是 NetBeans IDE 6.0，则此选项不可用。） 5. 确保“设置为主项目”复选框处于选中状态，并清除“创建主类”字段。 6. 单击“完成”。 IDE 将在系统上的指定位置创建 ContactEditor 文件夹。此文件夹包含项目的所有关联文件，其中包括其 Ant 脚本、用于存储源文件和测试的文件夹以及用于存储特定于项目的 meta 数据的文件夹。要查看项目结构，请使用

5、IDE 的“文件”窗口。创建 GUI 容器创建新应用程序后，您可能已注意到“项目”窗口中的“源包”文件夹包含一个空的 节点。要继续生成界面，我们需要创建一个 Java 容器，以便放置所需的其他 GUI 组件。在此步骤中，我们将使用 JFrame 组件创建一个容器，并将该容器置于一个新包中。创建 JFrame 容器：1. 在“项目”窗口中，右键单击 ContactEditor 节点，然后选择“新建”“JFrame 窗体”。 2. 在“类名”中输入 ContactEditorUI。 3. 在“包”中输入 my.contacteditor。 4. 单击“完成”。 IDE 将在 ContactEdit

6、orUI.java 应用程序内创建 ContactEditorUI 窗体和 ContactEditorUI 类，并在 GUI 生成器中打开 ContactEditorUI 窗体。请注意，my.contacteditor 包取代了缺省包。返回页首熟悉 GUI 生成器现在，我们已为应用程序设置了一个新的项目，接下来让我们再花点时间来熟悉 GUI 生成器的界面。要通过交互式演示来了解 GUI 生成器界面，请单击“查看演示”按钮。查看演示添加 JFrame 容器后，IDE 会在一个编辑器标签中打开新创建的 ContactEditorUI 窗体，该标签具有一个包含几个按钮的工具栏，如上图所示。Conta

7、ctEditor 窗体将在 GUI 生成器的“设计”视图中打开，并沿 IDE 的边缘自动出现三个其他窗口；利用这些窗口，可以在生成 GUI 窗体时导航、组织和编辑这些窗体。GUI 生成器的各个窗口包括： 设计区域。GUI 生成器的主窗口，用于创建和编辑 Java GUI 窗体。通过使用工具栏的“源”和“设计”切换按钮，可以查看类的源代码或其 GUI 组件的图形视图。使用其他工具栏按钮可以方便地访问常用命令，例如，在“选择模式”和“连接模式”之间切换、对齐组件、设置自动调整组件大小行为以及预览窗体。 检查器。以树状分层结构的形式提供应用程序中所有组件（包括可视组件和非可视组件）的表示。“检查器”

8、还提供有关树中哪个组件当前正在 GUI 生成器中进行编辑的可视反馈，并允许您在可用面板中组织这些组件。 组件面板。可用组件的可定制列表，其中包含 JFC/Swing、AWT 和 JavaBeans 组件以及布局管理器的标签。此外，您也可以使用定制器在组件面板中创建类别以及删除和重新排列其中显示的类别。 “属性”窗口。显示 GUI 生成器、“检查器”窗口、“项目”窗口或“文件”窗口中当前选定组件的属性。 如果单击“源”按钮，IDE 将在编辑器中显示应用程序的 Java 源代码，其中包括由 GUI 生成器自动生成的代码部分，这些部分将以蓝色区域表示，称为“保护块”。保护块是“源”视图中不可编辑的受

9、保护区域。当处于“源”视图中时，只能编辑显示在编辑器白色区域中的代码。如果需要更改保护块内的代码，请单击“设计”按钮从 IDE 的编辑器返回至 GUI 生成器，以便对窗体进行必要的调整。保存所做的更改时，IDE 会更新文件的源代码。注意：还有一个供高级开发者使用的组件面板定制器，使用该定制器可以将 JAR、库或其他项目中的定制组件添加到组件面板中。返回页首主要概念通过简化创建图形界面的工作流，IDE 的 GUI 生成器解决了创建 Java GUI 的核心问题，从而使开发者不必再使用复杂的 Swing 布局管理器。这一点是通过扩展目前的 NetBeans IDE GUI 生成器功能以支持直观的“

10、自由设计”模式（具有易于理解和使用的简单布局规则）来实现的。设置窗体布局时，GUI 生成器将提供可视基准线，用于建议最佳组件间距和对齐方式。在后台，GUI 生成器会将您的设计理念转化为使用新的 GroupLayout 布局管理器和其他 Swing 结构实现的功能性 UI。由于它使用动态布局模型，因此使用 GUI 生成器生成的 GUI 在运行时将按预期方式工作，同时会在不改变组件之间的定义关系的情况下进行相应的调整以适应所做的任何更改。只要您调整窗体大小、转换语言环境或指定不同的外观，GUI 就会根据目标外观的插入和偏移量自动进行调整。自由设计在 IDE 的 GUI 生成器中，只需像使用绝对定位

11、那样将组件放在所需的位置，便可以生成窗体。GUI 生成器将确定需要哪些布局属性，然后自动生成代码。您无需关注插入量、锚点以及填充之类的问题。自动组件定位（对齐放置）将组件添加到窗体时，GUI 生成器将提供可视反馈，协助您根据操作系统的外观来定位组件。GUI 生成器针对组件应在窗体中放置的位置提供一些有帮助的内联提示和其他可视反馈，并自动使组件沿基准线对齐。它根据已放在窗体中的组件的位置提出这些建议，同时使填充仍保持灵活性，以便在运行时能够正确地呈现不同的目标外观。可视反馈GUI 生成器还提供有关组件锚点和链接关系的可视反馈。通过这些指示符，可以快速识别各种定位关系和组件锁定行为，这些关系和行为

12、将影响 GUI 在运行时的显示和行为方式。这加快了 GUI 的设计过程，使您能够快速创建具有专业外观和相应功能的可视界面。返回页首先打基础现在，您已熟悉了 GUI 生成器的界面，接下来该着手开发 ContactEditor 应用程序的 UI 了。在本部分中，我们将介绍如何使用 IDE 的组件面板将所需的各种 GUI 组件添加到窗体中。有了 NetBeans 的“自由设计”模式，您将不必再费力地使用布局管理器来控制容器内组件的大小和位置。您需要做的就是将所需的组件拖放（或选取并放置）到 GUI 窗体中，如下面提供的各图所示。添加组件：基础尽管 IDE 的 GUI 生成器简化了创建 Java GU

13、I 的过程，但是在开始布局之前大体设计出界面的外观通常还是会很有帮助的。许多界面设计者将此视为一种“最佳做法”技术，但对本教程来说，只需跳转至后面的预览 GUI 部分，浏览一下最终窗体应具有的外观即可。由于我们已经将 JFrame 添加为窗体的顶层容器，因此下一步需要添加几个 JPanel，以便使用带标题的边框将 UI 的多个组件归到其中。请参见以下各图，并注意在完成此操作时 IDE 的“选取并放置”行为。添加 JPanel：1. 在“组件面板”窗口中，通过单击 Swing 类别中的“面板”组件并松开鼠标按钮，选择该组件。 2. 将光标移到 GUI 生成器中窗体的左上角。当组件的位置靠近容器的

14、左上边缘时，将出现指示首选边距的水平和垂直对齐基准线。在窗体中单击，将 JPanel 放在此位置上。 JPanel 组件将出现在 ContactEditorUI 窗体中，并以橙色突出显示，表示它处于选中状态，如下图所示。在松开鼠标按钮后，将出现小指示符来显示组件的锚点关系，并在“检查器”窗口中显示相应的 JPanel 节点。接下来，需要调整 JPanel 的大小，为稍后在其中放置的组件留出空间，在此我们需要先花一些时间了解 GUI 生成器的另一个可视化功能。要执行此操作，我们需要取消选中刚添加的 JPanel。由于尚未添加标题边框，因此将看不到该面板。不过请注意，当将光标移动到 JPanel

15、上时，其边缘会变为浅灰色，这样便可以清楚地看见它的位置。只需单击该组件内的任意位置，便可以重新选中它，并且将会再次出现大小调整控柄和锚点指示符。调整 JPanel 的大小：1. 选中刚刚添加的 JPanel。小的方形大小调整控柄将会再次出现在组件周围。 2. 单击并按住 JPanel 右边缘上的大小调整控柄，然后拖动直到靠近窗体边缘处出现对齐基准虚线。 3. 松开大小调整控柄以调整组件大小。 按照建议的偏移将 JPanel 组件延伸至容器的左边距和右边距，如下图所示。至此，我们已添加了用于容纳 UI 名称信息的面板，接下来需要重复该过程来添加另一个面板，它位于第一个面板正下方，用于容纳电子邮件

16、信息。请参见以下各图再次执行前面的两个任务，同时注意 GUI 生成器的建议位置。请注意，建议的两个 JPanel 之间的垂直间距要比边缘处的间距小得多。添加了第二个 JPanel 后，调整其大小，使它充满窗体的其余垂直空间。 由于我们需要在外观上区分出 GUI 上半部分和下半部分的功能，因此需要为每个 JPanel 添加边框和标题。我们将首先使用“属性”窗口完成此操作，然后将尝试使用弹出式菜单完成此操作。将标题边框添加到 JPanel 中：1. 选择 GUI 生成器中的顶部 JPanel。 2. 在“属性”窗口中，单击 border 属性旁边的省略号按钮 (.)。 3. 在出现的 JPanel

17、 边框编辑器中，选择“可用边框”窗格中的“带标题的边框”节点。 4. 在位于下方的“属性”窗格中，为“标题”属性输入 Name。 5. 单击“字体”属性旁边的省略号 (.)，然后为“字体样式”选择“粗体”，为“大小”输入 12。单击“确定”退出对话框。 6. 选择底部 JPanel 并重复步骤 2 至 5，但此次需要右键单击 JPanel，然后使用弹出式菜单访问“属性”窗口。为“标题”属性输入 E-mail。 带标题的边框将被添加到两个 JPanel 组件中。要查看以上操作过程的演示，请单击查看演示。将单个组件添加到窗体现在，我们需要着手添加一些组件，它们实际上将提供联系人列表中的联系人信息。

18、在此任务中，我们将添加四个显示联系人信息的 JTextField 以及描述它们的 JLabel。执行此任务时，请注意 GUI 生成器显示的水平和垂直基准线，它们用于根据操作系统外观所定义的间距来建议首选组件间距。这可确保在运行时自动呈现与目标操作系统的外观一致的 GUI。将 JLabel 添加到窗体中：1. 在“组件面板”窗口中，从 Swing 类别中选择“标签”组件。 2. 将光标移到先前添加的 Name JPanel 上。当出现基准线指示 JLabel 位于 JPanel 的左上角（此时与上边缘和左边缘之间存在较小的边距）时，请单击鼠标以放置此标签。 JLabel 将被添加到窗体中，并且“

19、检查器”窗口中将添加表示该组件的相应节点。在继续操作之前，我们需要编辑刚添加的 JLabel 的显示文本。尽管可以在任何时候编辑组件显示文本，但最简便的方法是在添加它们时进行编辑。编辑 JLabel 的显示文本：1. 双击 JLabel 以选中其显示文本。 2. 键入 First Name:，然后按 Enter 键。 将显示 JLabel 的新名称，并且组件的宽度会随着编辑的内容进行相应地调整。接下来，我们将添加 JTextField，以便大致了解 GUI 生成器的基线对齐功能。将 JTextField 添加到窗体中：1. 在“组件面板”窗口中，从 Swing 类别中选择“文本字段”组件。 2

20、. 将光标移到紧靠刚添加的 First Name: JLabel 右侧的位置。当出现水平基准线指示 JTextField 的基线与 JLabel 的基线对齐，并且以垂直基准线给出两个组件之间的建议间距时，请单击鼠标以放置 JTextField。 JTextField 将与窗体中 JLabel 的基线对齐，如下图所示。请注意，JLabel 略微向下进行了移动，以便与较高的文本字段的基线对齐。同以前一样，“检查器”窗口中将添加表示该组件的节点。在继续操作之前，我们需要在刚添加的两个组件的右侧紧接着再添加一个 JLabel 和一个 JTextField，如下图所示。这次输入 Last Name: 作

21、为 JLabel 的显示文本，并暂时将 JTextField 的占位符文本保留原样。调整 JTextField 的大小：1. 选中刚添加到 Last Name: JLabel 右侧的 JTextField。 2. 将 JTextField 右边缘的大小调整控柄向封闭 JPanel 的右边缘拖动。 3. 当出现垂直对齐基准线以给出文本字段与 JPanel 右边缘之间的建议边距时，请松开鼠标按钮以调整 JTextField 的大小。 JTextField 的右边缘将与 JPanel 的边缘对齐，并留出建议的边缘边距，如下图所示。要查看以上操作过程的演示，请单击查看演示。将多个组件添加到窗体现在，我

22、们将添加 Title: 和 Nickname: JLabel，它们用于描述我们将在稍后添加的两个 JTextField。我们将在按住 Shift 键的同时选取并放置组件，以便将它们快速添加到窗体中。执行此任务时，同样请注意 GUI 生成器显示的用于建议首选组件间距的水平和垂直基准线。将多个 JLabel 添加到窗体中：1. 在“组件面板”窗口中，通过单击 Swing 类别中的“标签”组件并松开鼠标按钮，选择该组件。 2. 将光标移到先前在窗体中添加的 First Name: JLabel 的正下方。当出现基准线指示新 JLabel 的左边缘与上方 JLabel 的左边缘对齐，并且它们之间存在较

23、小边距时，请按住 Shift 键单击鼠标以放置第一个 JLabel。 3. 继续按住 Shift 键，同时在紧邻第一个 JLabel 的右侧单击鼠标以放置另一个 JLabel。确保在放置第二个 JLabel 前松开 Shift 键。如果在放置最后一个 JLabel 前忘记松开 Shift 键，只需按 Esc 键即可。 JLabel 将被添加到窗体中，从而创建了第二行组件，如下图所示。“检查器”窗口中将添加表示每个组件的节点。在继续操作之前，我们需要编辑 JLabel 的名称，以便能够看到将在以后设置的对齐效果。编辑 JLabel 的显示文本：1. 双击第一个 JLabel 以选中其显示文本。

24、2. 键入 Title:，然后按 Enter 键。 3. 重复步骤 1 和 2，为第二个 JLabel 的名称属性输入 Nickname:。 JLabel 的新名称将显示在窗体中，并且它们会随着编辑内容的加宽而发生位移，如下图所示。要查看以上操作过程的演示，请单击查看演示。插入组件通常，需要在窗体中已放置的组件之间添加组件。只要在两个现有组件之间添加组件，GUI 生成器就会自动移动它们，以便为新组件留出空间。为了对此进行演示，我们将在先前添加的两个 JLabel 之间插入一个 JTextField，如下面的两幅图所示。在两个 JLabel 之间插入 JTextField：1. 在“组件面板”窗

25、口中，从 Swing 类别中选择“文本字段”组件。 2. 将光标移到位于第二行的 Title: 和 Nickname: JLabel 上，使 JTextField 与两者都重叠，并与它们的基线对齐。如果在放置新文本字段时遇到困难，可以将其与 Nickname JLabel 的左基准线对齐，如下面的第一幅图所示。 3. 单击鼠标以将 JTextField 放置在 Title: 和 Nickname: JLabel 之间。 JTextField 将在两个 JLabel 之间对齐放置。最右侧的 JLabel 会向 JTextField 的右侧移动，以适应建议的水平偏移。我们仍需要将另外一个 JTex

26、tField 添加到窗体中，它将在窗体的右侧显示每个联系人的昵称。添加 JTextField：1. 在“组件面板”窗口中，从 Swing 类别中选择“文本字段”组件。 2. 将光标移到 Nickname 标签的右侧，然后单击鼠标以放置该文本字段。 JTextField 将在其左侧的 JLabel 旁边对齐放置。 调整 JTextField 的大小：1. 将在先前任务中添加的 Nickname: 标签的 JTextField 大小调整控柄向封闭 JPanel 的右侧拖动。 2. 当出现垂直对齐基准线以给出文本字段与 JPanel 边缘之间的建议边距时，请松开鼠标按钮以调整 JTextField

27、的大小。 JTextField 的右边缘将与 JPanel 的边缘对齐，并留出建议的边缘边距；同时，GUI 生成器会推断出合适的大小调整行为。要查看以上操作过程的演示，请单击查看演示。返回页首更进一步对齐是创建具有专业外观的 GUI 的最基本方面之一。在上一部分中，我们通过将 JLabel 和 JTextField 组件添加到 ContactEditorUI 窗体中，大致了解了 IDE 的对齐功能。接下来，我们将在使用应用程序所需的其他各种组件的过程中更深入地了解 GUI 生成器的对齐功能。组件对齐每次将组件添加到窗体中时，GUI 生成器都会有效地将它们对齐，出现的对齐基准线可以证明这一点。但

28、是，有时也需要在组件组之间指定不同的关系。先前我们添加了四个 ContactEditor GUI 所需的 JLabel，但并未将它们对齐。现在，我们将对齐两列 JLabel，以使它们的右边缘排列整齐。对齐组件：1. 选中窗体左侧的 First Name: 和 Title: JLabel。 2. 单击工具栏中的“列向右对齐”按钮 ()。或者，也可以右键单击其中任一组件，然后从弹出式菜单中选择“对齐”“列右侧”。 3. 对 Last Name: 和 Nickname: JLabel 也重复此操作。 JLabel 的位置将会移动，以使它们的显示文本的右边缘对齐。同时，也会更新锚点关系，指示组件已分组

29、。在结束先前添加的 JTextField 的操作之前，我们需要确保 JLabel 之间插入的两个 JTextField 设置为可正确调整大小。与拉伸到窗体右边缘的两个 JTextField 不同，所插入组件的大小可调性不是自动设置的。设置调整组件大小行为：1. 按住 Ctrl 键单击两个插入的 JTextField 组件，以便在 GUI 生成器中将它们选中。 2. 在同时选中这两个 JTextField 的情况下，右键单击其中的任何一个，然后从弹出式菜单中选择“自动调整大小”“水平”。 JTextField 将被设置为在运行时水平调整大小。同时，也会更新对齐基准线和锚点指示符，以提供组件关系的

30、可视反馈。将组件设置为相同大小：1. 按住 Ctrl 键单击窗体中的所有四个 JTextField 以将它们选中。 2. 在选中所有 JTextField 的情况下，右键单击其中任何一个，然后从弹出式菜单中选择“设置缺省大小”。 这些 JTextField 均会设置为相同的宽度，并且每个 JTextField 的上边缘都将添加指示符，以提供组件关系的可视反馈。现在，我们需要添加另一个描述 JComboBox 的 JLabel，用户可以使用该 JComboBox 来选择 ContactEditor 应用程序将显示的信息格式。将 JLabel 与组件组对齐：1. 在“组件面板”窗口中，从 Swin

31、g 类别中选择“标签”组件。 2. 将光标移到 JPanel 左侧的 First Name 和 Title JLabel 下方。当出现基准线指示新 JLabel 的右边缘与上方组件组（两个 JLabel）的右边缘对齐时，请单击鼠标以放置该组件。 该 JLabel 将与上方的 JLabel 列右侧对齐，如下图所示。GUI 生成器将更新指示组件间距和锚点关系的对齐状态线。与在先前的示例中一样，双击该 JLabel 以选中其显示文本，然后输入 Display Format: 作为显示名称。请注意，当该 JLabel 对齐放置时，其他组件将发生位移以适应较长的显示文本。要查看以上操作过程的演示，请单击查看演示。基线对齐每当添加或移动包含文本的组件（JLabel、JTextField 等）时，IDE 就会提供对齐建议，这些建议基于组件中文本的基线。例如，先前插入 JTextField 时，其基线会自动与相邻的 JLabel 对齐。现在，我们将添加一个组合框，用户可以使用它来选择 ContactEditor 应用程序将显示的信息格式。在添加 JComboB