NetBeans网络开发教程I—构建GUI（一）

　　本教程指导您如何使用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文件夹中包含一个空节点。为了继续构建界面，我们需要创建一个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的界面。要通过交互演示深入了解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属性旁边的省略号按钮（...）。

　　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的左上角，同时在左上边缘留下较小边距时，单击以放置标签。

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

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

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

　　1. 双击JLabel选择其显示文本。

　　2. 键入First Name:并按Enter键。

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

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

　　向窗体添加JTextField的步骤：

　　1. 在Palette窗口中，从Swing类别选择JTextField组件。

　　2. 移动指针，使其紧靠我们刚才添加的First Name: Jlabel的右边。当水平准线出现，指示将JtextField的基线与JLabel的基线对齐，并使用垂直基线建议两个组件之间的间距时，单击以放置JtextField。

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

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

　　调整JTextField大小的步骤：

　　1. 选择我们刚才添加到Last Name:JLabel右边的JTextField。

　　2. 将JtextField的右边缘的缩放柄拖向封闭的Jpanel的右边缘。

　　3. 当垂直对齐准线显示文本字段和Jpanel的右边缘之间的边距时，释放鼠标按键以调整JtextField的大小。

　　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键。

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

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

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

　　1. 双击第一个JLabel选择其显示文本。

　　2. 键入Title:并按Enter键。

　　3. 重复步骤1和2，为第二个JLabel的名称属性输入Nickname:。

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

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

　　插入组件

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

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

　　1. 在Palette窗口中，从Swing类别选择JTextField组件。

　　2. 将指针移动到第二行中的Title:和Nickname:Jlabel上，以便JTextField与此二者重叠，并与其基线对齐。如果在放置新文本字段时遇到困难，则可将其与Nickname JLabel的左侧准线对齐，如下面的第一个图所示。

　　3. 单击以在Title:和Nickname:Jlabel之间放置JtextField。

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

　　更详细的内容，请点击作者博客

　　http://blog.csdn.net/java060515/archive/2008/01/25/2064747.aspx