Java GUI Application.docx

在 NetBeans IDE 中设计 Swing GUI本教程将指导您完成使用 NetBeans IDE GUI 构建器为一个名为 ContactEditor 的应用程序创建图形用户界面 (GUI) 的过程在该过程中，您将布置一个 GUI 前端，以便查看和编辑员工数据库中包括的各个员工的联系信息 在本教程中，您将学习如何：使用 GUI 构建器界面；创建 GUI 容器；添加和对齐组件并调整其大小；调整组件锚点；设置组件自动调整大小行为；编辑组件属性目录 入门指南 o 创建项目 o 创建 JFrame 容器 熟悉 GUI 构建器 主要概念 o 自由设计 o 自动组件定位（对齐放置） o 可视反馈 先打基础 o 添加组件：基础 o 将单个组件添加到窗体 o 将多个组件添加到窗体 o 插入组件 更进一步 o 组件对齐 o 基线对齐 回顾所学内容 o 添加、对齐和锚定 o 调整组件大小 o 缩进 进行最后的调整 预览 GUI 部署 GUI 应用程序 另请参见 入门指南使用 IDE 的 GUI 构建器，用户无需深入了解布局管理器，便可以构建具有专业外观的 GUI只需将组件置于所需的位置，即可设置窗体布局。

有关 GUI 构建器可视反馈的描述，可参见 GUI 构建器可视反馈图例创建项目 由于 IDE 中的所有 Java 开发都是在项目内进行的，因此我们首先需要新建一个用来存储源文件及其他项目文件的 ContactEditor 项目IDE 项目是一组 Java 源文件，外加与其关联的元数据，其中包括特定于项目的属性文件、控制构建和运行设置的 Ant 构建脚本以及一个将 Ant 目标映射到 IDE 命令的 project.xml 文件尽管 Java 应用程序通常包括几个 IDE 项目，但是，在本教程中，我们将构建一个完全存储在单个项目中的简单应用程序 要创建新的 ContactEditor 应用程序项目，请执行以下操作： 1. 选择“文件”>“新建项目”或者，也可以单击 IDE 工具栏中的“新建项目”图标 2. 在“类别”窗格中选择 "Java" 节点，在“项目”窗格中选择“Java 应用程序”单击“下一步” 3. 在“项目名称”字段中输入 ContactEditor，然后指定项目位置 4. 将“使用专用文件夹存储库”复选框保留为取消选中状态 5. 确保“设置为主项目”复选框处于选中状态，并清除“创建主类”字段。

6. 单击“完成” IDE 在系统上的指定位置创建 ContactEditor 文件夹此文件夹包含项目的所有关联文件，其中包括其 Ant 脚本、用于存储源文件和测试的文件夹以及用于存储特定于项目的元数据的文件夹要查看项目结构，请使用 IDE 的“文件”窗口 创建 JFrame 容器创建新应用程序后，您可能已注意到“项目”窗口中的“源包”文件夹包含一个空的 <默认包> 节点要继续构建界面，我们需要创建一个 Java 容器，以便放置所需的其他 GUI 组件在此步骤中，我们将使用 JFrame 组件创建一个容器，并将该容器置于一个新包中要添加 JFrame 容器，请执行以下操作： 1. 在“项目”窗口中，右键单击 ContactEditor 节点，然后选择“新建”>“JFrame 窗体”此外，也可以选择“新建”>“其他”>“Swing GUI 窗体”>“JFrame 窗体”以查找 JFrame 窗体 2. 输入 ContactEditorUI 作为类名 3. 在“包”中输入 my.contacteditor 4. 单击“完成” IDE 在 ContactEditorUI.java 应用程序内创建 ContactEditorUI 窗体和 ContactEditorUI 类，并在 GUI 构建器中打开 ContactEditorUI 窗体。

请注意，my.contacteditor 包取代了默认包 熟悉 GUI 构建器现在，我们已为应用程序设置了一个新的项目，接下来让我们再花点时间来熟悉 GUI 构建器的界面 添加了 JFrame 容器后，IDE 会在一个 "Editor"（编辑器）标签中打开新创建的 ContactEditorUI 窗体，该标签具有一个包含几个按钮的工具栏，如上图所示ContactEditor 窗体在 GUI 构建器的 "Design"（设计）视图中打开，并沿 IDE 的边缘自动出现三个其他窗口；利用这些窗口，可以在构建 GUI 窗体时导航、组织和编辑这些窗体 GUI 构建器的各个窗口包括： 设计区域用于创建和编辑 Java GUI 窗体的 GUI 构建器主窗口在该工具栏中，"Source"（源）按钮用于查看类的源代码，"Design"（设计）按钮用于查看 GUI 组件的图形视图，而 "History"（历史记录）按钮用于访问文件更改的本地历史记录使用其他工具栏按钮可以方便地访问常用命令，例如，在选择模式和连接模式之间切换、对齐组件、设置自动调整组件大小行为以及预览窗体 导航器在应用程序中以树状分层结构提供所有组件（包括可视和非可视）的表示形式。

"Navigator"（导航器）还提供有关树中哪个组件当前正在 GUI 构建器中进行编辑的可视反馈，并允许您在可用面板中组织这些组件 组件面板可用组件的可定制列表，包含 JFC/Swing、AWT 和 JavaBeans 组件的标签以及布局管理器此外，您也可以使用定制器在 "Palette"（组件面板）中创建类别以及删除和重新排列其中显示的类别 属性窗口显示 GUI 构建器、"Navigator"（导航器）窗口、"Projects"（项目）窗口或 "Files"（文件）窗口中当前所选组件的属性 如果单击 "Source"（源）按钮，IDE 将在编辑器中显示应用程序的 Java 源代码，其中包括由 GUI 构建器自动构建的代码部分，这些部分将以灰色区域表示（选中时变为蓝色），称为“保护块”保护块是 "Source"（源）视图中不可编辑的受保护区域当处于 "Source"（源）视图中时，只能编辑显示在编辑器白色区域中的代码如果需要更改保护块内的代码，请单击 "Design"（设计）按钮从 IDE 的编辑器返回至 GUI 构建器，以便对窗体进行必要的调整保存所做的更改时，IDE 会更新文件的源代码。

注：还有一个供高级开发者使用的 "Palette Manager"（组件面板管理器），使用该管理器可以将 JAR、库或其他项目中的定制组件添加到 "Palette"（组件面板）中要通过组件面板管理器添加定制组件，请选择 "Tools"（工具）> "Palette"（组件面板）> "Swing/AWT Components"（Swing/AWT 组件） 主要概念通过简化创建图形界面的工作流，IDE 的 GUI 构建器解决了创建 Java GUI 的核心问题，从而使开发者不必再使用复杂的 Swing 布局管理器这一点是通过扩展目前的 NetBeans IDE GUI 构建器功能以支持直观的“自由设计”模式（具有易于理解和使用的简单布局规则）来实现的设置窗体布局时，GUI 构建器将提供可视基准线，用于建议最佳组件间距和对齐方式在后台，GUI 构建器会将您的设计理念转化为使用新的 GroupLayout 布局管理器和其他 Swing 结构实现的功能性 UI由于它使用动态布局模型，因此使用 GUI 构建器构建的 GUI 在运行时将按预期方式工作，同时会在不改变组件之间的定义关系的情况下进行相应的调整以适应所做的任何更改。

只要您调整窗体大小、转换语言环境或指定不同的外观，GUI 就会根据目标外观的插入和偏移量自动进行调整自由设计在 IDE 的 GUI 构建器中，只需像使用绝对定位那样将组件放在所需的位置，便可以构建窗体GUI 构建器将确定需要哪些布局属性，然后自动构建代码您无需关注插入量、锚点以及填充之类的问题 自动组件定位（对齐放置）将组件添加到窗体时，GUI 构建器将提供可视反馈，协助您根据操作系统的外观来定位组件GUI 构建器针对组件应在窗体中放置的位置提供一些有帮助的内联提示和其他可视反馈，并自动使组件沿基准线对齐它根据已放在窗体中的组件的位置提出这些建议，同时使填充仍保持灵活性，以便在运行时能够正确地呈现不同的目标外观可视反馈 GUI 构建器还提供有关组件锚点和链接关系的可视反馈通过这些指示符，可以快速识别各种定位关系和组件锁定行为，这些关系和行为将影响 GUI 在运行时的显示和行为方式这加快了 GUI 的设计过程，使您能够快速创建具有专业外观和相应功能的可视界面先打基础现在，您已熟悉了 GUI 构建器的界面，接下来该着手开发 ContactEditor 应用程序的 UI 了在此部分，我们将介绍如何使用 IDE 的组件面板将所需的各种 GUI 组件添加到窗体中。

有了 IDE 的“自由设计”模式，您将不必再费力地使用布局管理器来控制容器内组件的大小和位置只需将所需的组件拖放至 GUI 窗体中，如下面提供的各图所示 注：有关以下部分的交互式演示，请观看添加单个和多个组件 (.swf) 截屏视频添加组件：基础 尽管 IDE 的 GUI 构建器简化了创建 Java GUI 的过程，但是在开始布局之前大体设计出界面的外观通常还是会很有帮助的许多界面设计者将此视为一种“最佳做法”技术，但对本教程来说，只需跳转至后面的预览 GUI 部分，浏览一下最终窗体应具有的外观即可 由于我们已经将 JFrame 添加为窗体的顶层容器，因此下一步需要添加几个 JPanel，以便使用带标题的边框将 UI 的多个组件归到其中请参见以下各图，并注意在完成此操作时 IDE 的“拖放”行为 添加 JPanel： 1. 在 "Palette"（组件面板）窗口中，通过单击并松开鼠标按钮，从 "Swing Containers"（Swing 容器）类别中选择 "Panel"（面板）组件 2. 将光标移到 GUI 构建器中窗体的左上角当组件的位置靠近容器的左上边缘时，将出现指示首选边距的水平和垂直对齐基准线。

在窗体中单击，将 JPanel 放在此位置上 JPanel 组件出现在 ContactEditorUI 窗体中，并以橙色突出显示，表示它已选中在松开鼠标按钮后，将出现小指示符来显示组件的锚点关系，并在 "Navigator"（导航器）窗口中显示相应的 JPanel 节点，如下图所示接下来，需要调整 JPanel 的大小，为稍后在其中放置的组件留出空间，在此我们需要先花一些时间了解 GUI 构建器的另一个可视化功能要执行此操作，我们需要取消选中刚添加的 JPanel由于尚未添加标题边框，因此将看不到该面板不过请注意，当将光标移动到 JPanel 上时，其边缘会变为浅灰色，这样便可以清楚地看见它的位置只需单击该组件内的任意位置，便可以重新选中它，并且将会再次出现大小调整控柄和锚点指示符调整 JPanel 的大小：1. 选中刚刚添加的 JPanel小的方形大小调整控柄将会再次出现在组件周围 2. 单击并按住 JPanel 右边缘上的大小调整控柄，然后拖动直到靠近窗体边缘处出现对齐基准虚线 3. 松开大小调整控柄以调整组件大小 按照建议的偏移将 JPanel 组件延伸至容器的左边距和右边距，如下图所示。

至此，我们已添加了用于容纳 。