NetBeans.docx

NetBeans.docx

《NetBeans.docx》由会员分享，可在线阅读，更多相关《NetBeans.docx（29页珍藏版）》请在冰豆网上搜索。

NetBeans

在NetBeansIDE中设计SwingGUI

下载quickstart-gui.zip，这是供脱机阅读的zip文件

本教程将指导您完成使用NetBeansIDEGUI生成器为一个名为ContactEditor的应用程序创建图形用户界面（GraphicalUserInterface,GUI）的过程。

在该过程中，您将布置一个GUI前端，以便查看和编辑员工数据库中包括的各个员工的联系信息。

在本教程中，您将了解如何执行以下操作：

∙使用GUI生成器界面

∙创建GUI容器

∙添加组件

∙调整组件大小

∙对齐组件

∙调整组件锚点

∙设置自动调整组件大小行为

∙编辑组件属性

学完本教程大约需要30分钟。

注意：

只要看到

图标，即可单击它来查看GUI生成器功能的详细交互演示。

要学完本教程，您需要具备以下软件和资源。

软件或资源

要求的版本

NetBeansIDE

版本6.5、6.1或6.0

JavaDevelopmentKit（JDK）

版本6或

版本5

入门指南

使用IDE的GUI生成器，用户无需深入了解布局管理器，便可以生成具有专业外观的GUI。

只需将组件置于所需的位置，即可设置窗体布局。

有关GUI生成器可视反馈的描述，可参见GUI生成器可视反馈图例。

创建项目

由于IDE中的所有Java开发都是在项目内进行的，因此我们首先需要新建一个用来存储源文件及其他项目文件的ContactEditor项目。

IDE项目是一组Java源文件，外加与其关联的meta数据，其中包括特定于项目的属性文件、控制生成和运行设置的Ant生成脚本以及一个将Ant目标映射到IDE命令的project.xml文件。

尽管Java应用程序通常包括几个IDE项目，但是，在本教程中，我们将生成一个完全存储在单个项目中的简单应用程序。

创建新的ContactEditor应用程序项目：

1.选择“文件”>“新建项目”。

或者，也可以单击IDE工具栏中的“新建项目”图标。

2.在“类别”窗格中选择"Java"节点，在“项目”窗格中选择“Java应用程序”。

单击“下一步”。

3.在“项目名称”字段中输入ContactEditor，然后指定项目位置。

4.将“使用专用文件夹存储库”复选框保留为取消选中状态。

（如果使用的是NetBeansIDE6.0，则此选项不可用。

）

5.确保“设置为主项目”复选框处于选中状态，并清除“创建主类”字段。

6.单击“完成”。

IDE将在系统上的指定位置创建ContactEditor文件夹。

此文件夹包含项目的所有关联文件，其中包括其Ant脚本、用于存储源文件和测试的文件夹以及用于存储特定于项目的meta数据的文件夹。

要查看项目结构，请使用IDE的“文件”窗口。

创建GUI容器

创建新应用程序后，您可能已注意到“项目”窗口中的“源包”文件夹包含一个空的"<缺省包>"节点。

要继续生成界面，我们需要创建一个Java容器，以便放置所需的其他GUI组件。

在此步骤中，我们将使用JFrame组件创建一个容器，并将该容器置于一个新包中。

创建JFrame容器：

1.在“项目”窗口中，右键单击"ContactEditor"节点，然后选择“新建”>“JFrame窗体”。

2.在“类名”中输入ContactEditorUI。

3.在“包”中输入my.contacteditor。

4.单击“完成”。

IDE将在ContactEditorUI.java应用程序内创建ContactEditorUI窗体和ContactEditorUI类，并在GUI生成器中打开ContactEditorUI窗体。

请注意，my.contacteditor包取代了缺省包。

返回页首

熟悉GUI生成器

现在，我们已为应用程序设置了一个新的项目，接下来让我们再花点时间来熟悉GUI生成器的界面。

要通过交互式演示来了解GUI生成器界面，请单击“查看演示”按钮。

查看演示

添加JFrame容器后，IDE会在一个编辑器标签中打开新创建的ContactEditorUI窗体，该标签具有一个包含几个按钮的工具栏，如上图所示。

ContactEditor窗体将在GUI生成器的“设计”视图中打开，并沿IDE的边缘自动出现三个其他窗口；利用这些窗口，可以在生成GUI窗体时导航、组织和编辑这些窗体。

GUI生成器的各个窗口包括：

∙设计区域。

GUI生成器的主窗口，用于创建和编辑JavaGUI窗体。

通过使用工具栏的“源”和“设计”切换按钮，可以查看类的源代码或其GUI组件的图形视图。

使用其他工具栏按钮可以方便地访问常用命令，例如，在“选择模式”和“连接模式”之间切换、对齐组件、设置自动调整组件大小行为以及预览窗体。

∙检查器。

以树状分层结构的形式提供应用程序中所有组件（包括可视组件和非可视组件）的表示。

“检查器”还提供有关树中哪个组件当前正在GUI生成器中进行编辑的可视反馈，并允许您在可用面板中组织这些组件。

∙组件面板。

可用组件的可定制列表，其中包含JFC/Swing、AWT和JavaBeans组件以及布局管理器的标签。

此外，您也可以使用定制器在组件面板中创建类别以及删除和重新排列其中显示的类别。

∙“属性”窗口。

显示GUI生成器、“检查器”窗口、“项目”窗口或“文件”窗口中当前选定组件的属性。

如果单击“源”按钮，IDE将在编辑器中显示应用程序的Java源代码，其中包括由GUI生成器自动生成的代码部分，这些部分将以蓝色区域表示，称为“保护块”。

保护块是“源”视图中不可编辑的受保护区域。

当处于“源”视图中时，只能编辑显示在编辑器白色区域中的代码。

如果需要更改保护块内的代码，请单击“设计”按钮从IDE的编辑器返回至GUI生成器，以便对窗体进行必要的调整。

保存所做的更改时，IDE会更新文件的源代码。

注意：

还有一个供高级开发者使用的组件面板定制器，使用该定制器可以将JAR、库或其他项目中的定制组件添加到组件面板中。

返回页首

主要概念

通过简化创建图形界面的工作流，IDE的GUI生成器解决了创建JavaGUI的核心问题，从而使开发者不必再使用复杂的Swing布局管理器。

这一点是通过扩展目前的NetBeansIDEGUI生成器功能以支持直观的“自由设计”模式（具有易于理解和使用的简单布局规则）来实现的。

设置窗体布局时，GUI生成器将提供可视基准线，用于建议最佳组件间距和对齐方式。

在后台，GUI生成器会将您的设计理念转化为使用新的GroupLayout布局管理器和其他Swing结构实现的功能性UI。

由于它使用动态布局模型，因此使用GUI生成器生成的GUI在运行时将按预期方式工作，同时会在不改变组件之间的定义关系的情况下进行相应的调整以适应所做的任何更改。

只要您调整窗体大小、转换语言环境或指定不同的外观，GUI就会根据目标外观的插入和偏移量自动进行调整。

自由设计

在IDE的GUI生成器中，只需像使用绝对定位那样将组件放在所需的位置，便可以生成窗体。

GUI生成器将确定需要哪些布局属性，然后自动生成代码。

您无需关注插入量、锚点以及填充之类的问题。

自动组件定位（对齐放置）

将组件添加到窗体时，GUI生成器将提供可视反馈，协助您根据操作系统的外观来定位组件。

GUI生成器针对组件应在窗体中放置的位置提供一些有帮助的内联提示和其他可视反馈，并自动使组件沿基准线对齐。

它根据已放在窗体中的组件的位置提出这些建议，同时使填充仍保持灵活性，以便在运行时能够正确地呈现不同的目标外观。

可视反馈

GUI生成器还提供有关组件锚点和链接关系的可视反馈。

通过这些指示符，可以快速识别各种定位关系和组件锁定行为，这些关系和行为将影响GUI在运行时的显示和行为方式。

这加快了GUI的设计过程，使您能够快速创建具有专业外观和相应功能的可视界面。

返回页首

先打基础

现在，您已熟悉了GUI生成器的界面，接下来该着手开发ContactEditor应用程序的UI了。

在本部分中，我们将介绍如何使用IDE的组件面板将所需的各种GUI组件添加到窗体中。

有了NetBeans的“自由设计”模式，您将不必再费力地使用布局管理器来控制容器内组件的大小和位置。

您需要做的就是将所需的组件拖放（或选取并放置）到GUI窗体中，如下面提供的各图所示。

添加组件：

基础

尽管IDE的GUI生成器简化了创建JavaGUI的过程，但是在开始布局之前大体设计出界面的外观通常还是会很有帮助的。

许多界面设计者将此视为一种“最佳做法”技术，但对本教程来说，只需跳转至后面的预览GUI部分，浏览一下最终窗体应具有的外观即可。

由于我们已经将JFrame添加为窗体的顶层容器，因此下一步需要添加几个JPanel，以便使用带标题的边框将UI的多个组件归到其中。

请参见以下各图，并注意在完成此操作时IDE的“选取并放置”行为。

添加JPanel：

1.在“组件面板”窗口中，通过单击Swing类别中的“面板”组件并松开鼠标按钮，选择该组件。

2.将光标移到GUI生成器中窗体的左上角。

当组件的位置靠近容器的左上边缘时，将出现指示首选边距的水平和垂直对齐基准线。

在窗体中单击，将JPanel放在此位置上。

JPanel组件将出现在ContactEditorUI窗体中，并以橙色突出显示，表示它处于选中状态，如下图所示。

在松开鼠标按钮后，将出现小指示符来显示组件的锚点关系，并在“检查器”窗口中显示相应的JPanel节点。

接下来，需要调整JPanel的大小，为稍后在其中放置的组件留出空间，在此我们需要先花一些时间了解GUI生成器的另一个可视化功能。

要执行此操作，我们需要取消选中刚添加的JPanel。

由于尚未添加标题边框，因此将看不到该面板。

不过请注意，当将光标移动到JPanel上时，其边缘会变为浅灰色，这样便可以清楚地看见它的位置。

只需单击该组件内的任意位置，便可以重新选中它，并且将会再次出现大小调整控柄和锚点指示符。

调整JPanel的大小：

1.选中刚刚添加的JPanel。

小的方形大小调整控柄将会再次出现在组件周围。

2.单击并按住JPanel右边缘上的大小调整控柄，然后拖动直到靠近窗体边缘处出现对齐基准虚线。

3.松开大小调整控柄以调整组件大小。

按照建议的偏移将JPanel组件延伸至容器的左边距和右边距，如下图所示。

至此，我们已添加了用于容纳UI名称信息的面板，接下来需要重复该过程来添加另一个面板，它位于第一个面板正下方，用于容纳电子邮件信息。

请参见以下各图再次执行前面的两个任务，同时注意GUI生成器的建议位置。

请注意，建议的两个JPanel之间的垂直间距要比边缘处的间距小得多。

添加了第二个JPanel后，调整其大小，使它充满窗体的其余垂直空间。

由于我们需要在外观上区分出GUI上半部分和下半部分的功能，因此需要为每个JPanel添加边框和标题。

我们将首先使用“属性”窗口完成此操作，然后将尝试使用弹出式菜单完成此操作。

将标题边框添加到JPanel中：

1.选择GUI生成器中的顶部JPanel。

2.在“属性”窗口中，单击"border"属性旁边的省略号按钮（...）。

3.在出现的JPanel边框编辑器中，选择“可用边框”窗格中的“带标题的边框”节点。

4.在位于下方的“属性”窗格中，为“标题”属性输入Name。

5.单击“字体”属性旁边的省略号（...），然后为“字体样式”选择“粗体”，为“大小”输入12。

单击“确定”退出对话框。

6.选择底部JPanel并重复步骤2至5，但此次需要右键单击JPanel，然后使用弹出式菜单访问“属性”窗口。

为“标题”属性输入E-mail。

带标题的边框将被添加到两个JPanel组件中。

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

查看演示。

将单个组件添加到窗体

现在，我们需要着手添加一些组件，它们实际上将提供联系人列表中的联系人信息。

在此任务中，我们将添加四个显示联系人信息的JTextField以及描述它们的JLabel。

执行此任务时，请注意GUI生成器显示的水平和垂直基准线，它们用于根据操作系统外观所定义的间距来建议首选组件间距。

这可确保在运行时自动呈现与目标操作系统的外观一致的GUI。

将JLabel添加到窗体中：

1.在“组件面板”窗口中，从Swing类别中选择“标签”组件。

2.将光标移到先前添加的NameJPanel上。

当出现基准线指示JLabel位于JPanel的左上角（此时与上边缘和左边缘之间存在较小的边距）时，请单击鼠标以放置此标签。

JLabel将被添加到窗体中，并且“检查器”窗口中将添加表示该组件的相应节点。

在继续操作之前，我们需要编辑刚添加的JLabel的显示文本。

尽管可以在任何时候编辑组件显示文本，但最简便的方法是在添加它们时进行编辑。

编辑JLabel的显示文本：

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

2.键入FirstName:

，然后按Enter键。

将显示JLabel的新名称，并且组件的宽度会随着编辑的内容进行相应地调整。

接下来，我们将添加JTextField，以便大致了解GUI生成器的基线对齐功能。

将JTextField添加到窗体中：

1.在“组件面板”窗口中，从Swing类别中选择“文本字段”组件。

2.将光标移到紧靠刚添加的FirstName:

JLabel右侧的位置。

当出现水平基准线指示JTextField的基线与JLabel的基线对齐，并且以垂直基准线给出两个组件之间的建议间距时，请单击鼠标以放置JTextField。

JTextField将与窗体中JLabel的基线对齐，如下图所示。

请注意，JLabel略微向下进行了移动，以便与较高的文本字段的基线对齐。

同以前一样，“检查器”窗口中将添加表示该组件的节点。

在继续操作之前，我们需要在刚添加的两个组件的右侧紧接着再添加一个JLabel和一个JTextField，如下图所示。

这次输入LastName:

作为JLabel的显示文本，并暂时将JTextField的占位符文本保留原样。

调整JTextField的大小：

1.选中刚添加到LastName:

JLabel右侧的JTextField。

2.将JTextField右边缘的大小调整控柄向封闭JPanel的右边缘拖动。

3.当出现垂直对齐基准线以给出文本字段与JPanel右边缘之间的建议边距时，请松开鼠标按钮以调整JTextField的大小。

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

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

查看演示。

将多个组件添加到窗体

现在，我们将添加Title:

和Nickname:

JLabel，它们用于描述我们将在稍后添加的两个JTextField。

我们将在按住Shift键的同时选取并放置组件，以便将它们快速添加到窗体中。

执行此任务时，同样请注意GUI生成器显示的用于建议首选组件间距的水平和垂直基准线。

将多个JLabel添加到窗体中：

1.在“组件面板”窗口中，通过单击Swing类别中的“标签”组件并松开鼠标按钮，选择该组件。

2.将光标移到先前在窗体中添加的FirstName:

JLabel的正下方。

当出现基准线指示新JLabel的左边缘与上方JLabel的左边缘对齐，并且它们之间存在较小边距时，请按住Shift键单击鼠标以放置第一个JLabel。

3.继续按住Shift键，同时在紧邻第一个JLabel的右侧单击鼠标以放置另一个JLabel。

确保在放置第二个JLabel前松开Shift键。

如果在放置最后一个JLabel前忘记松开Shift键，只需按Esc键即可。

JLabel将被添加到窗体中，从而创建了第二行组件，如下图所示。

“检查器”窗口中将添加表示每个组件的节点。

在继续操作之前，我们需要编辑JLabel的名称，以便能够看到将在以后设置的对齐效果。

编辑JLabel的显示文本：

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

2.键入Title:

，然后按Enter键。

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

。

JLabel的新名称将显示在窗体中，并且它们会随着编辑内容的加宽而发生位移，如下图所示。

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

查看演示。

插入组件

通常，需要在窗体中已放置的组件之间添加组件。

只要在两个现有组件之间添加组件，GUI生成器就会自动移动它们，以便为新组件留出空间。

为了对此进行演示，我们将在先前添加的两个JLabel之间插入一个JTextField，如下面的两幅图所示。

在两个JLabel之间插入JTextField：

1.在“组件面板”窗口中，从Swing类别中选择“文本字段”组件。

2.将光标移到位于第二行的Title:

和Nickname:

JLabel上，使JTextField与两者都重叠，并与它们的基线对齐。

如果在放置新文本字段时遇到困难，可以将其与NicknameJLabel的左基准线对齐，如下面的第一幅图所示。

3.单击鼠标以将JTextField放置在Title:

和Nickname:

JLabel之间。

JTextField将在两个JLabel之间对齐放置。

最右侧的JLabel会向JTextField的右侧移动，以适应建议的水平偏移。

我们仍需要将另外一个JTextField添加到窗体中，它将在窗体的右侧显示每个联系人的昵称。

添加JTextField：

1.在“组件面板”窗口中，从Swing类别中选择“文本字段”组件。

2.将光标移到Nickname标签的右侧，然后单击鼠标以放置该文本字段。

JTextField将在其左侧的JLabel旁边对齐放置。

调整JTextField的大小：

1.将在先前任务中添加的Nickname:

标签的JTextField大小调整控柄向封闭JPanel的右侧拖动。

2.当出现垂直对齐基准线以给出文本字段与JPanel边缘之间的建议边距时，请松开鼠标按钮以调整JTextField的大小。

JTextField的右边缘将与JPanel的边缘对齐，并留出建议的边缘边距；同时，GUI生成器会推断出合适的大小调整行为。

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

查看演示。

返回页首

更进一步

对齐是创建具有专业外观的GUI的最基本方面之一。

在上一部分中，我们通过将JLabel和JTextField组件添加到ContactEditorUI窗体中，大致了解了IDE的对齐功能。

接下来，我们将在使用应用程序所需的其他各种组件的过程中更深入地了解GUI生成器的对齐功能。

组件对齐

每次将组件添加到窗体中时，GUI生成器都会有效地将它们对齐，出现的对齐基准线可以证明这一点。

但是，有时也需要在组件组之间指定不同的关系。

先前我们添加了四个ContactEditorGUI所需的JLabel，但并未将它们对齐。

现在，我们将对齐两列JLabel，以使它们的右边缘排列整齐。

对齐组件：

1.选中窗体左侧的FirstName:

和Title:

JLabel。

2.单击工具栏中的“列向右对齐”按钮（

）。

或者，也可以右键单击其中任一组件，然后从弹出式菜单中选择“对齐”>“列右侧”。

3.对LastName:

和Nickname:

JLabel也重复此操作。

JLabel的位置将会移动，以使它们的显示文本的右边缘对齐。

同时，也会更新锚点关系，指示组件已分组。

在结束先前添加的JTextField的操作之前，我们需要确保JLabel之间插入的两个JTextField设置为可正确调整大小。

与拉伸到窗体右边缘的两个JTextField不同，所插入组件的大小可调性不是自动设置的。

设置调整组件大小行为：

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

2.在同时选中这两个JTextField的情况下，右键单击其中的任何一个，然后从弹出式菜单中选择“自动调整大小”>“水平”。

JTextField将被设置为在运行时水平调整大小。

同时，也会更新对齐基准线和锚点指示符，以提供组件关系的可视反馈。

将组件设置为相同大小：

1.按住Ctrl键单击窗体中的所有四个JTextField以将它们选中。

2.在选中所有JTextField的情况下，右键单击其中任何一个，然后从弹出式菜单中选择“设置缺省大小”。

这些JTextField均会设置为相同的宽度，并且每个JTextField的上边缘都将添加指示符，以提供组件关系的可视反馈。

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

将JLabel与组件组对齐：

1.在“组件面板”窗口中，从Swing类别中选择“标签”组件。

2.将光标移到JPanel左侧的FirstName和TitleJLabel下方。

当出现基准线指示新JLabel的右边缘与上方组件组（两个JLabel）的右边缘对齐时，请单击鼠标以放置该组件。

该JLabel将与上方的JLabel列右侧对齐，如下图所示。

GUI生成器将更新指示组件间距和锚点关系的对齐状态线。

与在先前的示例中一样，双击该JLabel以选中其显示文本，然后输入DisplayFormat:

作为显示名称。

请注意，当该JLabel对齐放置时，其他组件将发生位移以适应较长的显示文本。

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

查看演示。

基线对齐

每当添加或移动包含文本的组件（JLabel、JTextField等）时，IDE就会提供对齐建议，这些建议基于组件中文本的基线。

例如，先前插入JTextField时，其基线会自动与相邻的JLabel对齐。

现在，我们将添加一个组合框，用户可以使用它来选择ContactEditor应用程序将显示的信息格式。

在添加JComboB