在 NetBeans IDE 4.0 中生成 GUI
这个简短的教程将指导您创建一个名为 ColorSwitcher 的应用程序。您将建立一个能将面板的颜色从浅灰切换到中灰、黑色的简单程序。
在创建 ColorSwitcher 的过程中，您将了解如何完成以下任务：
入门
在 IDE 中，所有 Java 开发都将在项目中进行。IDE 项目是一组 Java 源文件及其关联的元数据，包括特定于项目的属性文件、控制生成和运行设置的 Ant 生成脚本，以及将 Ant 目标映射到 IDE 命令的 project.xml 文件。
创建项目
首先，我们需要创建一个名为 ColorSwitcher 的 Java 应用程序，但是为了执行此操作，需要创建用来存储源和其他项目文件的新项目。然而，Java 应用程序通常由几个 IDE 项目组成，因此针对本教程，我们将生成一个简单应用程序，该应用程序全部存储在单个项目中。
|
创建新的 ColorSwitcher 应用程序项目：
- 选择“文件”
 “新建项目”(Ctrl+Shift+N)。或者，可以单击 IDE 工具栏中的“新建项目”图标。
- 在“类别”窗格中，选择“常规”文件夹。在“项目”窗格中，选择“Java 应用程序”，然后单击“下一步”。
- 在“项目名称”字段中输入 "ColorSwitcher" 并指定项目位置。
- 确保选中“设置为主项目”复选框，并取消选择“创建主类”（如果该选项已被选中）。
- 单击“完成”。
IDE 将在系统的指定位置创建 "ColorSwitcher" 文件夹。该文件夹包含所有项目的关联文件，包括它的 Ant 脚本、用于存储源和测试的文件夹以及特定于项目元数据的文件夹。可以使用“文件”窗口查看该结构。
|
创建容器
为了继续开发应用程序，我们需要创建一个 Java 容器，用于放置其他需要的 GUI 组件。创建新应用程序之后，您可能注意到“项目”窗口中的“源包”文件夹包含一个空 <default package> 节点。现在，我们将使用 JFrame 组件创建一个容器并将该容器放在一个新包中。
|
创建 JFrame 容器：
- 在“项目”窗口中，右键单击 "ColorSwitcher" 节点，然后选择“新建”
 “JFrame 窗体”。
- 输入 ColorSwitch 作为类名称。
- 输入 my.colorswitcher.pkg 作为包。
- 单击“完成”。
IDE 将在 ColorSwitch.java 应用程序中创建 ColorSwitch 窗体和 ColorSwitch 类。my.colorswitcher.pkg 包将替换 <default package>，ColorSwitcher 窗体在“设计”视图的“编辑器”窗口中打开。
|
定义项目的主类
继续进行任何操作之前，我们需要使 IDE 了解哪个类为主类，以便能够正确生成和运行命令。可以将任何带有主方法的类设置为主类，但是本例中我们把在上一步中创建的 ColorSwitcher 类设置为主类。
|
设置主类：
- 在“项目”窗口中，右键单击 ColorSwitcher 项目节点，然后选择“属性”。
- 在左侧窗格中，选择“运行”节点下面的“运行项目”。
- 在右侧窗格中，单击“主类”字段右侧的“浏览”按钮。
- 在出现的“浏览主类”对话框中，选择 my.colorswitcher.pkg.ColorSwitch 并单击“选择主类”。
- 单击“确定”退出“项目属性”对话框。
当执行生成和运行命令时，IDE 将设置其引用的主类参数。
|
熟悉 IDE 的编辑器
目前我们已经为应用程序设置了新项目，下面我们将花几分钟的时间熟悉 IDE 的“编辑器”界面。下面的屏幕截图显示的是在 IDE 编辑器的“设计”视图中打开的 ColorSwitcher 应用程序。
添加 JFrame 容器之后，IDE 在一个带有工具栏（该工具栏包含“源”和“设计”的切换按钮）的编辑器标签中打开新建的 ColorSwitch 窗体。通过使用工具栏中的这些切换按钮，您可以选择查看 ColorSwitch 类的源代码或其 GUI 组件的图形视图。
最初将在“设计”视图中打开 ColorSwitch 类，同时将在 IDE 的右侧自动显示下列三个窗口：
- 组件面板。包含各种 JFC/Swing、AWT 和 JavaBeans 组件的标签，以及一系列布局管理器。
- 检查器。提供所有组件的表示，包括在应用程序中表示为树状分层结构的可视和不可视组件。检查器也提供有关树中哪个组件正在编辑器中编辑的可视反馈，并允许您在可用面板中组织这些组件。
- 属性。显示在检查器、编辑器、项目或文件窗口中当前选定组件的属性。
单击“源”按钮显示应用程序的 Java 源代码和 IDE 生成的代码部分（用蓝色的保护块表示，在“源”视图中不可编辑）。在“源”视图中时，只能在“编辑器”的白色区域中键入。单击“设计”按钮将使 IDE 的编辑器返回到图形视图。
编辑窗体
目前您已经创建了一个窗体，并且熟悉了 IDE 的 GUI 工具，接下来我们将开始开发 GUI 应用程序的细节部分。在此步骤中，我们将更改 JFrame 的缺省布局，使用 IDE 的组件面板向窗体添加必要的 GUI 元素，并且使用 GridBag 定制器将它们重新排列。
选择布局管理器
目前我们已经将 JFrame 添加为窗体的最上层容器，下一步是指定布局管理器，用来控制容器内组件的大小和位置。每种容器类型都有缺省的布局管理器。JFrame 组件的缺省布局管理器是 BorderLayout，它将该容器分为五个部分（北、南、东、西和中）。
在此步骤中，我们将切换到 GridBagLayout 布局管理器，它使用一组复杂的组件属性（称为“约束”）对布局的所有方面进行精确控制。GridBagLayout 将组件放置在行和列的网格中，其中网格单元的大小不必完全相同。此外，组件可跨越多行或多列，或同时跨越行和列。
|
更改布局管理器：
- 在组件面板中，单击“布局”标签以访问 Java 基本类 (JFC) 中可用的布局管理器。请注意，当鼠标位于组件面板中的布局图标上时，将出现一个工具提示，显示该布局管理器的名称。
- 单击“布局”标签中的 GridBagLayout 按钮 (
 )。
- 单击编辑器中灰色 ColorSwitch 窗体上的任意位置，设置布局管理器。
GridBagLayout 将添加到“检查器”中的 JFrame 组件分层结构。
|
添加按钮
目前我们已经更改了布局管理器，我们需要添加将实际运行 ColorSwitcher 应用程序的按钮。完成该操作时注意 IDE 的“选取和拖放”行为。
|
添加按钮：
- 在 Swing 组件面板中，选择 JButton 组件。
- 单击编辑器中 ColorSwitch 窗体上的任意位置，将 JButton 组件添加到窗体。
JButton 组件显示在编辑器的“设计”视图中，而其相应的节点显示在“检查器”中。JButton 组件的源代码被添加到源代码，并且在“源”视图中可见。
|
现在编辑该按钮，以便它以所需的字体样式和大小显示正确的文本。
|
重命名按钮并更改其显示字体：
- 在编辑器的“设计”视图中，右键单击 JButton 组件，然后从上下文菜单中选择“编辑文本”。或者，您只需单击该按钮并按空格键即可。
- 在文本字段中输入 "Switch Color"。按 Enter 键。
- 在仍然选中 JButton 组件的情况下，滚动到“属性”窗口中的字体属性，并单击省略号 (...) 按钮。
- 在“字体编辑器”对话框中，将“字体样式”选择为“粗体”，并将“字体大小”选择为 "14"。单击“确定”。
JButton 组件标签 "Switch Color" 将以大号的粗体字型显示。
|
此时编辑器中显示 "Switch Color" 按钮，该按钮位于其 JFrame 容器的中心，按钮边框为深紫色。窗体的其余部分为灰色空白区域，边界线为浅蓝色，表示 JFrame 本身的边缘。
添加标签
由于我们的应用程序使用一个标签来显示将调用按钮的颜色，因此下一步我们需要添加标签。在该步骤中，我们将从 IDE 的组件面板中选择 JLabel Swing 组件，并将其放置在编辑器工作区的窗体中。再次提醒，完成该操作时应注意 IDE 的“选取和拖放”行为。
|
添加标签组件：
- 在组件面板窗口中，单击 Swing 标签以显示可用的 Swing 组件。
- 选择 JLabel 组件。
- 单击编辑器中 ColorSwitch 窗体上的任意位置，将 JLabel 组件添加到窗体。
在编辑器中显示带有文本 "jLabel1" 的标签，并且在检查器的树视图中突出显示名为 "jLabel1 [JLabel]" 的节点。此外，JLabel 组件的属性显示在“属性”窗口中，并且其源代码添加到编辑器的“源”视图。
|
使用 GridBag 定制器调整布局
与其他布局不同，当选中“检查器”时，GridBagLayout 在“属性”窗口中没有可显示的属性。使用 GridBag 定制器可在 GridBagLayout 中对组件的位置和约束进行可视化调整。其包括 GridBag 约束的属性表单、调整约束的按钮和组件布局的简短描述。
|
使用 GridBag 定制器调整窗体的布局：
- 要打开 GridBag 定制器，请在检查器中右键单击 GridBagLayout 节点，然后选择“定制”。
- 在工作区域（此窗口右边窗格）中，通过单击 JButton 的中部并将其拖动到 JLabel 组件下方，可以重新定位 JButton。当您拖动按钮时，黑色和红色网格表示可用的位置。另外请注意，左侧窗格中的“网格 X”和“网格 Y”属性也随之改变，以反映新位置。
- 选择 JLabel 组件，并将 JLabel 的“内部填充 Y”约束调整为 33，以便标签可以完全填充按钮上的单元。然后将其“填充”约束设置为“水平”。
- 建立组件的大概布局后，按 Ctrl 键同时选择 "JLabel" 和 "JButton"，并且将两者的“插入”（左、右、上和下）设置为 5 以增加组件之间的空间。GridBag 定制器在组件周围以浅黄色边缘来显示插入量。
- 单击“关闭”退出 GridBag 定制器。
IDE 将更新已编辑的组件以反映这些组件的新位置和其他约束。尽管编辑器的“设计”视图不显示网格，但它现在包含一列和两行。
|
当使用 GridBag 布局时，尽管 GridBag 定制器是您实际编辑窗体的位置，但是编辑器的“设计”视图能够更好地反映运行时中组件的外观。通常，使用 GridBag 定制器之前最好先勾画出布局的外观，这样将很有帮助。
对窗体进行最终调整
目前已经在窗体中对两个组件进行了排列，我们需要编辑标签，以便其在通过“颜色转换器”按钮激活时显示颜色。我们将通过删除标签的文本并改变其不透明属性来完成此操作，这样可以使其只在单击该按钮时才显示颜色。
|
编辑标签的属性：
- 在编辑器的“设计”视图中，选择 JLabel 组件。
- 在“属性”窗口中，通过单击“属性”按钮显示组件的属性。
- 滚动到 text 属性，选择当前的 jLabel1 名称，然后删除文本，将该文本字段保留为空。按 Enter 键。
- 向下滚动到“其他属性”，选中 opaque 属性的复选框，然后再次按 Enter 键。
jLabel1 组件从编辑器工作区中消失，但是，通过检查器中相应的节点仍可以将其选中。
|
最后，我们需要调整窗体的属性，以便该窗体在运行时以适当的尺寸进行显示。
编辑窗体的属性：
- 在编辑器的“设计”视图中，选择检查器中的 JFrame 容器，然后选择“代码”按钮。
- 在“属性”窗口中，滚动到“生成调整大小代码”选项并将其设置为 True。按 Enter 键。
- 滚动到“窗体尺寸”属性，将尺寸设置为 [200, 150]，然后按 Enter 键。
当您运行应用程序时，在窗口中将以新的尺寸生成窗体。
|
设置组件事件
目前您已经创建了必要的组件并将它们添加到我们的应用程序窗体，我们还需要建立这些组件与用户之间的交互性。可以采用几种方法完成此操作，但是针对本教程，我们将着重使用编辑器中的“源”视图直接输入代码。
设置按钮
首先应设置按钮以切换颜色。在此步骤中，我们将添加所需的用户输入方法及将进行监视的侦听程序代码。
|
添加鼠标事件：
- 如果焦点尚未设置，请将焦点放置在编辑器窗口（“设计”视图）中。
- 右键单击 jButton1 组件，然后选择“事件”“鼠标” "MouseClicked"。
IDE 生成侦听程序代码 jButton1.addMouseListener 和事件方法 jButton1MouseClicked()。焦点切换到包含 ColorSwitcher 类的 Java 源代码的“源”视图，并将光标放置在我们将要添加事件处理代码（在以下步骤中）的行上。
|
 |
IDE 所生成的受保护的 Java 代码块具有浅蓝色背景，并且不能在“源”视图中直接编辑。要在受保护的块内编辑代码，请单击“设计”按钮返回到“设计”视图。 |
添加事件处理程序代码
创建了 jButton1MouseClicked() 方法之后，您可以添加定制代码，以在事件出现时对其进行处理。本教程中的目标是每次单击 "Switch Color" 按钮将更改标签的颜色。
|
添加代码：
- 在编辑器工具栏中，找到“快速浏览”组合框（紧接在“设计”切换按钮的右侧），然后从 ColorSwitcher 应用程序的元素列表中选择 "JButton1"。光标显示在 JButton1 变量声明的开始位置，该声明位于 JButton1 的蓝色受保护块中。
- 将光标移到变量声明段下方的一行（大约在 67 行）。
|
在编辑器的“源”视图中，右键单击左边距然后选择“显示行号”可以显示行号。 |
- 声明以下新变量：
private java.awt.Color currentColor = java.awt.Color.lightGray;
- 在“快速浏览”组合框中，选择 "jButton1MouseClicked"。将光标放在受保护块下方的 //Add your handling code here:（大约在第 50 行）之后，并键入以下代码：
if (currentColor == java.awt.Color.lightGray)
currentColor = java.awt.Color.gray;
else if (currentColor == java.awt.Color.gray)
currentColor = java.awt.Color.black;
else
currentColor = java.awt.Color.lightGray;
jLabel1.setBackground (currentColor);
|
请注意，在最后一行在句点前，jLabel 后跟的是数字一 ("1") 而不是字母 "l"。 |
- 通过选择“文件”“保存”(Ctrl + S) 可以保存文件。
IDE 将存储代码，并将错误图标放置在任何发现问题的行的左侧。
|
通过单击编辑器工具栏中的“测试窗体”按钮，可以在工作时预览窗体。测试窗体在自己的窗口中打开，您可以在生成和运行之前对其进行测试。
使用“组件面板管理器”添加 GUI 组件
如果使用定制组件、bean 或组件库，则可以使用组件面板管理器将它们添加到 IDE 的组件面板，如下图所示。要启动“组件面板管理器”，请选择“工具”“组件面板管理器”。
查看操作中的 ColorSwitcher 应用程序
目前您已经成功生成了 ColorSwitcher 窗体，可以尝试应用程序查看结果。
编译和运行您的程序
目前已经创建了用户界面和组件之间的连接，您可以编译并运行您的应用程序了。
|
编译程序：
- 通过选择“生成”“编译”(F9)，可以编译 ColorSwitcher。
此时将打开“输出”窗口，显示进度和出现的任何错误。如果成功生成，主窗口底部的状态栏中会显示“已完成 ColorSwitcher”消息。
|
如果生成过程出现一些问题，在输出窗口中会显示错误消息。您可以通过双击一条错误消息来跳到源代码中发生错误的行。成功生成应用程序之后，您就可以运行它。
|
或者，可以跳过生成步骤，而只是运行您的程序。IDE 将在运行程序之前自动编译所有已过期的类。 |
|
运行程序：
- 通过选择“运行”“运行其他项目”“运行主项目”(F6)，可以运行 ColorSwitcher 应用程序。
IDE 显示输出窗口。如果有执行错误，则 IDE 显示输出和执行窗口。
|
当运行命令成功时，将显示 ColorSwitcher 应用程序，并且其显示在图像下面。在应用程序窗口中，单击 "Switch Color" 按钮可检查按钮上的区域的颜色变化。每次单击该按钮时，按钮上的标签应从浅灰变为中灰，然后变成黑色。完成应用程序测试之后，单击关闭该窗口退出应用程序。
有关进一步的研究
目前您已经完成了 IDE 的生成 GUI 的教程。有关如何使用 NetBeans IDE 的详细信息，请参见：
- NetBeans 联机帮助。NetBeans IDE 自身附带的文档。按 F1 可以打开此联机帮助。
- 使用 NetBeans IDE。在 NetBeans IDE 中开发 Java 应用程序的完整指南。
- NetBeans 支持和文档。供 NetBeans IDE 用户参考的文章、常见问题解答和邮件列表的完整列表。
