使用 NetBeans IDE 5.5 创建漂亮的 GUI

Java 平台为您的桌面应用程序提供了创建图形用户界面（GUI）的支持。几个布局管理器帮助您指定 GUI 组件的位置和大小。您可能已经熟悉了一些常用布局管理器，包括 FlowLayout、BorderLayout 和 GridBagLayout 等等。布局管理器的可视指南，作为 Swing 教程的一部分，提供了对所有标准布局管理器的出色评论。

如果您是一位技术娴熟、乐于挑战的用户界面（UI）开发人员，你可以手动编写代码，使用布局管理器的组合，精确控制组件如何使用它们的容器空间。虽然手动布置 GUI 窗体的能力可以作为您在办公室炫耀的资本，但这很浪费时间。在很多情况下，您可以通过使用可视的开发环境设计和实现图形窗体，从而节约时间和精力。遗憾的是，很多集成开发环境（IDE）也不外乎是布局管理器提供的各种属性的瘦包装。

如果您是位想避免这种类型 IDE 的专家，那么您将很高兴地看到 NetBeans IDE 5.5 可提供更多价值。它不仅仅能够使您可视地设置布局管理器的各种属性，尽管它具有这个能力。NetBeans IDE 5.5 具有一个功能，称为 NetBeans IDE GUI Builder。这种 GUI builder（早在 NetBeans IDE 5.0 时作为 “Matisse” 推出）为您提供了花费更多时间设计应用程序 UI 的能力和自由，而无需花费大量时间处理特定布局管理器的低级细节。图 1 显示了 NetBeans IDE 5.5 的屏幕捕捉样例。此图和本文的其他图像都显示了与演示的地址窗格交互的 GUI builder 的屏幕捕捉。

 

NetBeans IDE GUI Builder 不仅通过为您的 GUI 设计提供即时可视的更新来简化 GUI 创建，还通过解决 UI 设计人员面临的最重要、最困难的问题，帮助您创建更好看的 GUI。使用具有 NetBeans IDE GUI Builder 的 NetBeans IDE 5.5 的一些优势和特性包括：

l      Free Design（自由设计）模式

l      平台独立性

l      可视化预览

l      国际化支持

l      调色板中的自定义组件支持

l      支持 Java Platform, Standard Edition 6（Java SE 6）代码布局

 

Free Design模式

NetBeans IDE GUI Builder 提供 Free Design 操作模式，能使您移动窗格或框架周围的 UI 组件，而无需担心底层的布局管理器。布局管理器不会消失。事实上，当您移动窗体周围的组件时，NetBeans IDE 使用名为 GroupLayout 的新布局管理器实现您指定的布局设计。而 GUI builder 本身处理低级细节的组件定位、大小、大小调整和间距。这使您在设计吸引人的 UI 时无需花费不必要的时间调整布局实现的每个细节。当您拖放、重排、对齐和锚定图形组件到窗体上时，GUI builder 提供可视反馈意见和布局提示，帮助您创建完美的 UI。 

Free Design 概念是 Java SE 6 平台提供的新 GroupLayout 布局管理器与先进的 NetBeans IDE GUI Builder 的结合。GUI builder 和布局管理器合作能使您自由放置和操纵窗体中随处可见的可视化组件。当您创建新窗体或面板时，Free Design 模式默认情况下为激活。这种与 GUI 窗体交互的设计风格出现在 NetBeans IDE 5.5 中，作为另一个布局管理器.

理论上，当您在 Design 窗格中安排组件时，NetBeans IDE 5.5 能够使用布局管理器的任何组合定位它们。然而实际上，它使用 GroupLayout 管理器。NetBeans IDE 工程师创建 GroupLayout 简化 IDE（如 NetBeans）内的 GUI 创建。

平台独立性

无论底层平台如何，好的 UI 设计总能很好地工作，如果您有意使用硬编码位置和大小信息放置窗体组件，那么这些 UI 将无法在所有平台上都正确显示。每个主机平台（无论是 Mac OS X、Open Solaris 或 Microsoft Windows）都有自己建议的组件位置和布局原则。NetBeans IDE GUI Builder 使用在所有目标平台上都运行良好且正常显示的一个布局定义，帮助您创建不受平台限制的 UI。

如果在放置组件的时候遵循布局原则，您的 UI 将在任何平台上看起来都很棒。当您将 UI 组件从调色板拖放到可视设计区域时，GUI builder 建议的对齐、位置、锚点和大小都会在运行时根据特定平台进行必要的调整。结果是您设计 UI 一次，它在任何地方都能正确运行。

GUI builder 和 GroupLayout 管理器在您的窗体设计中避免了绝对位置。相反，GUI builder 在组件之间保持相对的空间关系。当您将组件拖放到 NetBeans IDE 5.5 的可视化设计区域时，GUI builder 生成代码将特定数字偏移量和大小减少到最小。如果您注意了 NetBeans IDE 提供的可视化提示，您的 UI 设计将不受平台限制。

该可视化提示包括建议间距和对齐的虚线。因为布局管理器决定运行时的首选间距和位置提示，所以在不同主机上运行时组件之间的准确距离可能略有变化。

 

您甚至可以创建自定义规则，以控制 GroupLayout 类确定正确间距的方式。GroupLayout 对象从 LayoutStyle 对象中获得布局和间距原则。通过实现您自己的 LayoutStyle 类，您可以创建影响 GroupLayout 类工作方式的自定义的规则。然而，Java SE 6 平台已经为每个主要平台提供了 LayoutStyle 类实现，因此您的 GUI 设计将符合大部分平台的 UI 原则。

设计预览

当您设计 UI 时，GUI builder 显示了 NetBeans IDE 5.5 窗口的设计区域中的窗体。这是您的 UI 窗体的一个准确但静态的表示。您无法与它交互，就好像它实际正在运行一样。静态和非交互的视图在您安排组件时是很好的，但是该视图不会帮您在调节窗体大小时看到窗体组件将如何增大或缩小，您也不能测试 tab 切换的顺序。

NetBeans IDE 5.5 GUI Builder 拥有一个可视设计预览功能，能使您看到窗体将如何在您的应用程序中显示。可以通过单击预览图标（Design 窗格上的一个眼睛小图标）激活设计预览。

 

当您单击预览图标时，GUI builder 将在 Preview 模式下激活您的窗体。Preview 模式允许您将信息键入文本字段中，用 tab 键切换各个字段并调节窗体大小。预览还将告诉您，组件对齐和锚点是否按照您想要的方式进行设置。

 

国际化

国际化是使您的应用程序本地化的过程。本地化应用程序使用其目标语言环境的语言和文化期待提供更愉悦、可用的 UI。虽然正确国际化一个应用程序有很多要求，但您在 UI 设计中应该至少避免以下错误：

l      设置绝对组件位置和大小

l      使用硬编码字符串、字体、颜色以及从左到右的查看方向

NetBeans IDE GUI Builder 通过帮您创建一个在各处都能成功运行的布局设计，可以帮助您避免这些错误，不管使用哪一种特定于平台的组件位置规则。GroupLayout 管理器在组件之间提供根据平台外观变化的相应的间距和相对定位。此外，GUI builder 还可轻松地将文本提取到资源包中。如果您一起使用 Free Design 布局和GroupLayout 布局管理器，您的窗体将自动调整标签和其他组件大小，以适应新的本地化文本的长度。

为了完善您的 Swing UI，应该将它国际化。这意味着您可以为某个特定语言环境转换字符串、颜色和图像，而无需重建 GUI。您必须通过在 ResourceBundle 文件中放置这些项，避免硬编码字符串和其他可本地化内容。仔细提取所有可视文本，包括标签、按纽、选项卡和边框上的文本，以及源代码的窗口标题。不要忘记工具提示、助记符和可访问性说明。NetBeans IDE 5.5 中的国际化向导可以为您快速准确地提取可本地化的资源。您可以从 Tools 菜单启动该向导，

国际化向导引导您轻松完成 3 个步骤：

1.                  选择包含本地化资源的文件。

2.                  选择 NetBeans IDE 应该创建的资源包的名称。

3.                  提取并认可字符串。

虽然您可以使用向导提取单一源文件的本地化字符串，但是当您对多个文件使用向导时，它可以为您节约大量时间。

 

在您创建了 ResourceBundle 文件存储本地化文本后，必须指定让向导使用这个资源文件。

下一步将认可并编辑键值对列表。键是您的应用程序用于发现并使用本地化资源的名称。值是用于应用程序中的本地化术语、短语或其他资源。您的代码将使用键从 ResourceBundle 文件中加载本地化文本值。您可以修改键以遵守这一点的代码命名惯例。

NetBeans IDE GUI Builder 不仅帮您提取本地化文本，还帮您创建转换。通过为每个目标语言环境创建新的 ResourceBundle 对象，您可以添加转换。当您在 Projects 视图窗格的资源包文件上右键单击时，您可以通过选择提供的 Add Locale 选项添加新的语言环境。 

NetBeans IDE 5.5 的一个独特功能就是它的本地化编辑器。一旦您运行国际化向导，您的本地化文本将位于 ResourceBundle 文件中。如果您在 Project 视图窗口的该文件上右键单击并选择 Open 选项，NetBeans IDE 将打开本地化编辑器。在本示例中，开发人员可以将日语语言环境添加到项目中。目标文本出现在编辑器中，允许用户转换文本。

 

自定义组件

 

所有的 GUI 组件显示在 NetBeans IDE 内可停靠的调色板中。在默认情况下，调色板在 NetBeans IDE UI 的右侧，但您可以将它移动至您喜欢的位置。使用组件与将它们从调色板拖放至您的框架或窗格中一样简单。调色板预先配置了所有核心 Swing 和 Abstract Window Toolkit（AWT）组件。

您可以使用 Palette Manager 轻松安装自己自定义的组件。可以将您的组件包装为 Java archive（JAR）文件，作为更大库的一部分，或者甚至作为其他 NetBeans IDE 项目的一部分。您甚至可以将组件从您当前项目放置到易于访问的调色板上。

一旦创建了组件，类就出现在 Project 视图窗口中。您可以右键单击组件文件并选择 Tools > Add to Palette 选项。此时，您可以为组件选择类别并将它放置在调色板中。类别默认情况下包括 Swing、AWT 和 Beans，您还可以添加新的类别。将组件添加到调色板之后，您可以将它们从调色板中拖放至应用程序的其他窗体中。 

生成的代码

 

当您创建 UI 时，NetBeans IDE GUI Builder 为您生成了布局代码。生成的代码是受保护的，意思是 IDE 保护它避免意外、手动更改。受保护的代码在 IDE 中很好的标记，并且大部分代码包含在 initComponents 方法中。此外，还保护组件字段值和它们的事件处理程序头，而不是事件处理程序主体。

当您想要提供其他事件处理程序或自定义的初始化时，您可以在受保护区域外编写其他代码。另外，您可以使用 GUI builder 为任何 GUI 组件添加预创建和后创建以及预初始化和后初始化的代码。GUI builder 将您自定义的代码添加到 initComponents 方式中并将使用其余的受保护代码维护您的代码。因此虽然 GUI builder 创建了您不能直接在类源视图中编辑的受保护的代码，但它还是为您安全添加自定义代码提供了一种方法。

 

 

与 Java SE 6 平台集成

 

自 NetBeans IDE 5.0 开始，就一直提供了 Free Design 布局。NetBeans IDE 5.0 的 GUI Builder 通过使用名为 Swing Layout Extensions 的独立库，为该布局战略提供支持。IDE 提供这个库，因为对底层 GroupLayout 布局管理器的支持仍不是 J2SE 5.0 中核心 Java 平台的一部分。Swing Layout Extensions 仍然可用，然而现在该功能还存在于 Java SE 6 平台的核心库中。

您可以使用 NetBeans IDE 5.5 开发应用程序和 UI，用于 Java SE 6 或更早的 Java 平台版本。如果您为 Java SE 6 之前的任何平台版本编写应用程序，那么您必须继续使用 Swing Layout Extensions。然而，新的 GUI builder 也可以使用 Java SE 6 平台支持的布局管理器功能生成 UI。在后一种情况中，您不需要在最终产品中使用或包含布局扩展。

如果您在 NetBeans IDE 5.5 中创建了一个新项目并且您的目标平台是 Java SE 6，那么 GUI builder 将使用 Java SE 6 平台的核心库自动生成 UI。然而，如果您将这个旧项目导入 NetBeans IDE 5.5，那么您应该手动更新项目布局以使用新的 Java SE 6 平台库。当然，如果喜欢，您仍然可以使用布局扩展，但是这样做不需要使用 Java SE 6 平台。

您可以通过访问窗体属性更改 UI 的 Layout Generation Style。在 NetBeans IDE GUI Builder 主窗口中，确保 Design 模式是激活的。这样可以在 Design 窗格中以图形方式显示 UI 设计。单击 Inspector 窗格中的窗体，查看窗体属性。属性之一是 Layout Generation Style。您可以选择 Standard Java 6 Code 或 Swing Layout Extensions Library。更改这个设置不会影响 UI 的外观，但会更改 GUI builder 生成代码，创建 UI 的方式。

 

小结

 

NetBeans IDE GUI Builder 帮助您创建专业级 UI。它指导您使用 Free Design 布局模式选择组件放置和大小。这种模式让您将 GUI 组件拖放到面板或框架中。虽然您可以将组件放置在您想要的位置，但是 NetBeans IDE GUI Builder 提供了位置提示，使您的设计在任何主机平台上看起来都很正确。如果您使用 Free Design 概念，那么 NetBeans IDE GUI Builder 将使用 GroupLayout 实现您的 UI 设计。GroupLayout 是一个布局管理器，可以控制组件大小和位置以及运行时组件的间距。这些不受平台限制的设计在运行时产生特定于平台的布局。因为在创建时，您能够预览您的 GUI 设计，所以您总能了解运行时有哪些东西值得期待。

此外，NetBeans IDE GUI Builder 还帮助您创建易于本地化的国际化应用程序。国际化向导将帮助您提取本地化文本，创建特定于语言环境的资源文件。为了提高生产率并简化使用自己或第三方 GUI 组件的方式，NetBeans IDE 使您将这些组件添加到组件调色板中。要使用新的图形组件，您只需将它从调色板拖放到窗体或面板中。

最后，NetBeans IDE 5.5 GUI Builder 将与 Java SE 6 平台很好地合作。GUI builder 可以生成在 Java SE 6 平台中使用新的 GroupLayout 布局管理器的布局实现，或者它可以使用运行上述 Java 平台版本的 Swing Layout Extensions。无论使用旧扩展或 Java SE 6 平台提供的新布局，NetBeans IDE 5.5 GUI Builder 帮助您创建漂亮的 GUI。

有关更多信息，请访问：

 

l      NetBeans IDE 5.5 下载

l      JDK 6 Project：Java SE 6 平台下载

l      GUI Building in NetBeans IDE 5.0

l      NetBeans User FAQ: GUI Editor (Matisse)

l      Swing Layout Extensions Project

l      GUI Builder: Update Pack for NetBeans IDE 5.5