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

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

本教程指导您如何使用NetBeans IDE GUI Builder为名为ContactEditor的应用程序创建图形用户界面（GUI）。在此过程中，您将布置一个GUI前端，使用该前端可以查看和编辑员工数据库中所包含的个人联系信息。

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

添加JtextField的步骤：

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

2.       将指针移动到Nickname标签的右边，单击以放置文本字段。

JTextField将进入Jlabel左边紧挨着它的位置。

 

调整JTextField大小的步骤：

1.       将在上一个任务中添加的Nickname:标签的JTextField的缩放柄拖向封闭Jpanel的右边。

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

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

继续下一步

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

组件对齐

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

对齐组件的步骤：

1.       在左侧窗体中选择First Name:和Nickname:Jlabel。

2.       单击工具栏中Column按钮中的Align Right ( )。或者，右键单击弹出菜单的Column中的任何一个并选择Align > Right。

3.       再为Last Name:和Nickname:Jlabel重复此步骤。

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

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

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

1.       按住Ctrl键单击两个插入的JTextField组件，以便在GUI Builder中选中它们。

2.       在所选的两个JtextField中，右键单击它们中的任意一个并从弹出菜单选择Auto Resizing > Horizontal。

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

 

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

1.       按住Ctrl键单击窗体中的全部四个JtextField以选中它们。

2.       在所选的JtextField中，右键单击它们中的任意一个并从弹出菜单选择Set Default Size。

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

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

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

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

2.       将指针移动到Jpanel左边的First Name和Title Jlabel之下。当准线出现，指示已将新Jlabel的右边缘与上面的组件组（两个JLabel）的右边缘对齐时，单击以放置组件。

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

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

基线对齐

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

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

对齐组件的基线的步骤：

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

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

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

 

调整JComboBox大小的步骤：

1.       选择GUI Builder中的JComboBox。

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

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

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

回顾所学的知识

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

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

添加、对齐和锚定

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

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

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

2.       在窗体上移动指针，使其紧靠下面的Jpanel的电子邮件标题之下。当准线出现，指示将其置于JPanel的左上角，同时在左上边缘留下较小边距时，单击以放置该JLabel。

3.       双击JLabel选择其显示文本。然后键入E-mail Address:并按Enter键。

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

 

添加JtextField的步骤：

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

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

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

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

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

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

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

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

2.       移动指针，使其紧靠刚才添加的E-mail Address Jlabel的下边。当准线出现，指示将Jlist的左上边缘沿Jpanel的左边缘和上面的Jlabel 与首选边距对齐时，单击以放置Jlist。

3.       将Jlist的右缩放柄拖到封闭的JPanel的右边，直到建议对齐准线（指示其与上面的JTextField相同）出现为止。

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。

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。

至此，已将三个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。

三个JradioButton将被添加到按钮组。

进行最终对齐

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

最后要做的事

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

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

1.       如果将下面的Jpanel扩展到JFrame窗体的下边缘，则向下拖动JFrame的下边缘。这将在JFrame的边缘和JPanel的边缘之间留出OK和Cancel按钮的空间。

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

3.       将指针移动到电子邮件JLabel之下的窗体上。当准线出现，指示将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库。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之外的步骤：

l         将项目的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项目。

下一步

现在您已经完成了IDE的GUI Building教程。有关使用NetBeans IDE中的Java GUI的更多信息，请参见：

l          构建Java桌面数据库应用程序

l          向按钮添加功能：入门指南

l          在NetBeans IDE 5.5中使用Java DB (Derby)数据库 

l          GUI Builder常见问题解答

l          Java GUI应用程序学习指南