本教程指导您如何使用NetBeans IDE GUI Builder为名为ContactEditor的应用程序创建图形用户界面（GUI）。在此过程中，您将布置一个GUI前端，使用该前端可以查看和编辑员工数据库中所包含的个人联系信息。
在本教程中，您将学会如何：
l 使用GUI Builder界面
l 创建GUI容器
l 添加组件
l 调整组件大小
l 对齐组件
l 调整组件锚定
l 设置组件自动调整大小行为
l 编辑组件属性
本教程大约要花30分钟的时间。
注意：只要看到 图标，即可单击它以查看GUI Builder功能的详细交互演示。
IDE的GUI Builder使得无需理解布局管理器的相关知识就能够构建具有专业外观的GUI。只需将组件放在合适的位置就能够设置窗体布局。
有关GUI Builder的可视化反馈的描述，请使用GUI Builder Visual Feedback Legend链接。
创建项目
因为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并指定项目位置。
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作为Class Name。
3. 输入my.contacteditor作为包。
4. 单击Finish。
IDE在ContactEditorUI.java应用程序中创建 ContactEditorUI窗体和ContactEditorUI类，并从GUI Builder打开 ContactEditorUI窗体。注意，my.contacteditor包将替换默认包。
既然已经为应用程序建立了新项目，现在我们就花一点时间来熟悉一下GUI Builder的界面。要通过交互演示深入了解GUI Builder界面，请单击查看演示图标。
查看演示
我们添加JFrame容器时，IDE将在Editor选项卡中打开新创建的ContactEditorUI窗体，其工具栏包含多个按钮，如上图所示。ContactEditor窗体在GUI Builder的Design视图中打开时，三个其他窗口自动沿IDE的边缘显示出来，允许像自己构建的窗体那样导航、组织和编辑GUI窗体。
GUI Builder的各种窗口包括：
l 设计区域。用于创建和编辑Java GUI窗体的GUI Builder的主窗口。工具栏的Source和Design切换按钮允许查看类的源代码或其GUI组件的图形视图。其他工具栏按钮提供常见命令的便捷访问，如在Selection和Connection模式之间选择、对齐组件、设置组件自动调整大小行为，以及预览窗体。
l Inspector（检查器）。按照树层次结构提供应用程序中所有组件（可视的和非可视的）的表示形式。Inspector还提供关于在GUI Builder中当前正在编辑树中的什么组件的可视化反馈，同时还允许在可用面板中组织组件。
l Palette。可自定义的可用组件的列表，包含JFC/Swing、AWT和JavaBeans组件的选项卡，以及布局管理器。此外，可以使用Customizer创建、移除和重排Palette中显示的类别。
l 属性窗口。显示在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可以断定需要的布局属性，然后自动生成代码。您自己不必考虑插入、锚定、填充，等等。
自动组件定位（抓取）
向窗体添加组件时，GUI Builder将提供可视化反馈，帮助根据操作系统的外观定位组件。GUI Builder提供关于应该将组件置于窗体何处的有用内联提示及其他可视化反馈，并自动将组件抓取到沿准线的位置。它是根据已经放置在窗体中的组件的位置提出这些建议的，但同时这种填充方法还保留着灵活性，以便各种目标外观都在运行时正确呈现。
可视化反馈
GUI Builder还提供关于组件锚定和链接关系的可视化反馈。这些指示符可以让您快速识别对GUI的显示方式和运行时行为有影响的各种定位关系和组件固定行为。这可加快GUI的设计进程，能让您快速创建可用的专业级可视化界面。
熟悉了GUI builder的界面之后，我们就该开始开发ContactEditor应用程序的UI了。在本部分中，我们将使用IDE的Palette添加窗体所需的各种GUI组件。
由于有了IDE的“自由设计”范例，您无需再使用布局管理器控制容器中组件的大小和位置。您需要做的，只是将所需组件拖放（或选取和放下）到GUI窗体中，如下图所示。
添加组件：基础
尽管IDE的GUI Builder简化了Java GUI的创建过程，在开始布置界面前，拟订所需的界面显示方式一般还是有帮助的。很多界面设计器把这一点视为“最佳实践”技术，但在本教程中，建议您首先向前跳到预览 GUI 部分简单地查看一下完成后的窗体外观。
由于我们已经添加了JFrame作为窗体的顶级容器，下一步是添加两个允许使用有标题边框来群集化UI组件的Jpanel。参考下图并注意完成操作时IDE的“选取和放下”行为。
添加Jpanel的步骤：
1. 在Palette窗口中，通过单击和释放鼠标按键从Swing类别选择JPanel组件。
2. 将指针移动到GUI Builder中窗体的左上角。当组件位置接近容器的左上边缘时，水平和垂直对齐准线将出现，指示较佳的边距。在窗体中单击，将JPanel置于此位置。
JPanel组件在ContactEditorUI窗体中以橙色突出显示的方式表示被选中，如下图所示。释放鼠标按键后，显示组件锚定关系的小型指示器出现，同时在Inspector窗口中显示相应的JPanel节点。
下一步，我们需要调整JPanel的大小以便为稍后在其中放置组件留出空间，但是首先我们花点时间了解一下GUI Builder的另一种可视化功能。为此，我们需要取消选中刚才添加的Jpanel。因为我们尚未添加标题边框，所以面板将消失。但是注意，在Jpanel上传递指针时，其边缘会变为浅灰色，可以清楚地看到其位置。您只需在组件内部单击任何位置即可重新选中它，同时显示其缩放柄和锚定指示器。
调整Jpanel大小的步骤：
1. 选择要添加的Jpanel。围绕组件的周长将显示多个小正方形缩放柄。
2. 在JPanel右边缘上的缩放柄上单击并保持，然后拖动直到窗体边缘附近的虚线对齐准线出现。
3. 释放缩放柄以调整组件的大小。
按照建议的偏移量扩展JPanel组件以横跨容器的左右边距，如下图所示：
我们添加了包含UI的名称信息的面板后，需要重复该过程在其下直接添加另一个面板，用于电子邮件信息。请参考下图，重复执行上述两个任务，注意GUI Builder的建议位置。注意，两个Jpanel之间的建议垂直边距比边缘之间小得多。添加第二个Jpanel后，调整其大小，使其充满窗体的剩余垂直空间。
因为我们希望在GUI的上下两部分中可视化地区分功能，所以需要为每个Jpanel添加边框和标题。我们首先使用“属性”窗口完成此操作，然后使用弹出菜单进行试用。
向Jpanel添加标题边框的步骤：
1. 选择GUI Builder中上面的Jpanel。
2. 在Properties窗口，单击Border