2.4　Java GUI的可视化设计方法

可视化程序设计，也称为可视化编程，是以“所见即所得”的思想为原则，通过直观的操作方式进行界面的设计，并即时在设计环境看到在运行环境的实际表现结果，从而实现编程工作的可视化及程序代码的自动生成。其实质是设计过程可视化，设计结果即时呈现，通俗地讲就是“看着画”界面。NetBeans IDE通过其GUI构建器支持Java GUI程序的可视化设计。本节介绍NetBeans GUI构建器的使用方法和技巧。

2.4.1　NetBeans GUI构建器的界面

NetBeans IDE中有最优秀的Java程序的GUI设计工具——GUI构建器，它可以使Java GUI应用程序设计者采用可视化程序设计方法，像画图一样画出程序的图形用户界面，同时自动生成对应的Java代码，使程序GUI的设计非常直观高效。

运行NetBeans IDE，新建Java项目并在该项目中创建JFrame容器，之后IDE启动GUI构建器，并在一个编辑器标签中打开新创建的窗体（见图2.4），该标签具有包含几个按钮的工具栏。新建的窗体在GUI构建器的设计视图中打开，并自动出现三个其他窗口，利用这些窗口，可以在构建GUI窗体时导航、组织和编辑这些窗体。

GUI构建器的主要窗口（见图2.16）如下。

设计区域：用于创建和编辑Java GUI窗体的GUI构建器主窗口。

编辑器工具栏：与设计区域紧密配合。“源”按钮用于查看程序源代码，“设计”按钮用于查看GUI组件的图形视图，而“历史记录”按钮用于访问文件更改的本地历史记录，其他工具栏按钮可以方便地访问常用命令。例如，在选择模式和连接模式之间切换、对齐组件、设置自动调整组件大小行为以及预览窗体。

帮助栏：为当前进行的工作提供一些有帮助的内联提示，并根据已放在容器中的组件情况智能化地提出在当时可能是最优选择的建议。

导航器：在应用程序中以树状分层结构提供所有组件（包括可视和非可视）的表示形式。“导航器”还提供有关树中哪个组件当前正在GUI构建器中进行编辑的可视反馈——以加粗字体显示的组件名，并允许在可用面板中组织这些组件。

组件面板：可用组件的可定制列表，包含Swing、AWT和JavaBeans组件的类别以及布局管理器。此外，也可以使用定制器在“组件面板”中创建类别以及删除和重新排列其中显示的类别。

属性窗口：显示GUI构建器、“导航器”“项目”窗口或“文件”窗口中当前所选组件的属性。

如果单击“源”按钮，IDE将在编辑器中显示应用程序的Java源代码，其中包括由GUI构建器自动构建的代码部分，这些部分将以灰色区域表示（选中时变为蓝色），称为“保护块”。保护块是“源”视图中不可编辑的受保护区域。当处于“源”视图中时，只能编辑显示在编辑器白色区域中的代码。如果需要更改保护块内的代码，单击“设计”按钮从IDE的编辑器返回至GUI构建器，对窗体等组件及其属性进行调整。保存所做的更改时，IDE会更新文件的源代码。也可以使用“定制代码”功能，有限地修改保护块中的源代码。

2.4.2　添加组件及GUI构建器的可视反馈功能

在NetBeans IDE的GUI构建器中，只要像使用绝对定位那样将组件拖放在所需的位置，便可以构建窗口界面，GUI构建器将确定需要哪些布局属性，然后自动构建代码。GUI构建器在我们设计界面时还提供即时动态反馈，提示对齐位置、有关组件锚点和链接关系等，这些帮助功能可以加快设计速度。

1. 添加单个组件

一般的GUI界面都包含多个组件，组件都放置在窗口或其他容器中。将组件添加到窗体时，GUI构建器会提供可视反馈，协助设计者根据操作系统的外观来定位组件。

例2.1　按照2.1节所述步骤创建名为chap02的Java应用程序项目，并在该项目中创建一个命名为UserLogin的JFrame窗体。下面以在该窗体中创建一个标签组件为例，介绍添加单个组件的基本步骤。

（1）在“组件面板”中，从“Swing控件”类别中选择“标签”组件。

（2）将光标移到GUI构建器“设计”视图中窗体的左上角。当组件的位置靠近容器的左上边缘时，将出现指示首选边距的水平和垂直对齐基准线（两条正交的虚线，见图2.17）。在窗体中单击，将该（标签）组件放在此位置上。

此时，标签组件出现在窗体中，并以橙色突出显示，表示它已被选中。在松开鼠标按键后，将出现指示符来显示组件的锚点关系，并在导航器中显示相应的jLabel1节点（见图2.18）。

2. 可视反馈功能

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

1）对齐基准线

当添加或移动组件时会出现对齐基准线，提示松开鼠标按键时组件将对齐的首选位置。定位后对齐基准线将被实线和锚点指示符所取代，实线指明组件之间共享的公共对齐位置。

首先明确几个相关的排版术语（见图2.19）。基线（Baseline）是一条虚构的线，如图示2.19所示字母“e”所在的底线。上坡度（Ascent）是从基线到坡顶的距离，如图2.19所示字母“b”和“k”及大写字母的上面部分。下坡度（Descent）是从基线到坡底的距离，如图2.19所示中字母“p”和“g”类字母的底线。行间距（Leading）是指某一行的坡底到相邻下一行的坡顶之间的空隙。

（1）插入量（Inset）是组件与其所在容器边框之间的首选距离，通过水平和垂直基准虚线来指示（见图2.20）。

（2）偏移（Offset）是相邻组件之间的首选距离，包括水平偏移和垂直偏移，通过水平和垂直基准虚线来指示。

例2.2　单击“组件面板”中的“标签”图标，然后将光标移动到UserLogin窗体中jLabel1组件下方，微小距离垂直反复移动，将会看到“已移至距上方组件的较小首选位置”基准虚线及帮助栏相关提示（见图2.21（a））、“已移至距上方组件的中间首选位置”（见图2.21（b））、“距上方组件的较大首选位置”（见图2.21（c））。当较大首选位置基准线出现时单击鼠标左键，创建jLabel2组件。

例2.3　单击“组件面板”中的“文本字段”图标，然后将光标移动到UserLogin窗体中jLabel2组件右边，微小距离水平反复移动，将会看到“已移至距左侧组件的较小首选位置”基准虚线及帮助栏相关提示（见图2.22（a））、“已移至距左侧组件的中间首选位置”（见图2.22（b））、“已移至距左侧组件的较大首选位置”（见图2.22（c））。当较小首选位置基准线出现，且与jLabel2基线对齐时单击鼠标左键，创建jTextField1组件。

（3）基线（Baseline）与边（Edge）对齐是包含文本的相邻组件之间的首选关系。通过水平或垂直基准虚线来指示。在例2.3中当微距垂直移动jTextField1组件时，可以看到帮助栏提示“基线与另一个组件对齐”（见图2.23（a））、“与另一个组件的顶边对齐”（见图2.23（b））及“与另一个组件的底边对齐”（见图2.23（c））。

例2.4　单击“组件面板”中的“文本字段”图标，然后将光标移动到UserLogin窗体中jTextField1组件下方，微小距离反复移动，将会看到“与另一个组件的左边对齐”基准虚线及帮助栏相关提示（见图2.24（a））和“与另一个组件的右边对齐”（见图2.24（b））。当左边对齐基准线出现，且距上方jTextField1较大首选位置时单击鼠标左键，创建jTextField2组件。

请试着创建jLabel3组件，位于距容器左边框的首选位置，且与右边jTextField2基线对齐。

（4）缩进（Indent）是一种特殊的对齐关系，其中一个组件位于另一个组件的下方并稍微向右偏移。通过两条垂直的基准虚线来指示（见图2.25）。

使用GUI构建器的上述功能可以帮助我们对齐组件的位置。

2）锚点指示符

当组件对齐到位后，会出现实心锚点指示符，指明组件之间共享的公共对齐位置。

（1）容器：将各个组件连接到它们所在容器的锚点以小的半圆指示符表示，并有从组件本身延伸到容器边缘的虚线（见图2.26）。如图2.26中jLabel1有向上延伸到容器上边缘和向左延伸到容器左边缘的锚点指示符。

（2）组件：将一个组件连接到相邻组件的锚点以小的半圆指示符表示，并有从该组件延伸到其他组件的虚线（见图2.27）。如图2.27中jTextField2有向上延伸到jTextField1和向左延伸到jLabel3的锚点指示符。

3）突出显示和控柄

（1）突出显示：当在一个组件上按住鼠标左键并拖动时，会在目标位置出现一个橙色提示框指明选定组件将要放置的位置（见图2.28）。

（2）控柄：当单击一个组件时该组件被选定，组件周围出现小方形大小调整控柄，光标放在某个控柄上会出现水平或垂直或斜向双向箭头光标（见图2.29），此时按住鼠标左键并移动鼠标可以向相应方向改变组件大小。

4）大小调整指示符

（1）相同大小：选择两个或多个组件之后，右击出现快捷菜单（见图2.30）。选择“相同大小”|“相同宽度”时，设计界面出现“H”形相同宽度指示符（见图2.31）；选择“相同大小”|“相同高度”时，设计界面出现“工”形相同高度指示符（见图2.32）。

（2）自动调整大小：在编辑器工具栏中单击“更改水平大小可调性”按钮，或者在图2.30的快捷菜单中选择“自动调整大小”|“水平”，或者在组件的属性窗口中选取“可水平调整大小”，则该组件的大小在运行时将根据窗口的大小自动调整宽度，设计视图中组件左右移动则出现宽度调整指示符，工具栏按钮处于选择（按下）状态（见图2.33）。用同样的方法（）可以设置组件的高度可调性，并出现高度调整指示符（见图2.34）。

3. 添加多个组件

有时候需要向图形界面中连续添加多个相同类型的组件，这时在“组件面板”中单击这个组件后，在按住Shift键的同时连续多次单击拖放组件，可以快速向窗体中添加多个这种组件。执行此任务时，GUI构建器同样会显示用于建议首选组件间距的水平和垂直基准线。

例2.5　向例2.4所设计的界面中添加用于选择用户角色的单选按钮。

采用添加多个组件的技巧创建三个相邻显示的单选按钮，步骤如下。

（1）单击“组件面板”中的“Swing控件”组中的“单选按钮”组件，光标移到jLabel3标签的下方，当帮助栏中出现“缩进组件。已移至距上方组件的中间首选位置。”时，按住Shift键并单击鼠标。

（2）鼠标向右移动，当帮助栏出现“已移至距左侧组件的中间首选位置。基线与另一个组件对齐。”提示时，单击。

由于步骤（2）操作中没有按住Shift键（忘记了！），不能继续连续创建第三个单选按钮，留待后面介绍插入组件时解决。例2.5得到如图2.35所示界面。

注意，连续创建一组组件时需要按住Shift键。但在创建最后一个组件时应松开Shift键，如果没有松开可以按Esc键终止成组创建状态。

4. 插入组件

经常出现需要在窗体中已放置的组件之间添加组件的情况。在两个现有组件之间添加组件时，GUI构建器就会自动移动它们，以便为新组件留出空间。

例2.6　在例2.5完成的图2.35界面中，补上标签“我是一名：”和一个单选按钮。

采用插入组件技术补上，操作步骤如下。

（1）单击“组件面板”中“Swing控件”类别中的“单选按钮”组件。

（2）将光标移到位于第4行的两个单选按钮上，使jRadioButton3与两者都重叠，并与它们的基线对齐（）。如果在放置新组件时遇到困难，可以将其与原来两个组件中第二个的左基准线对齐。

（3）单击鼠标即将jRadioButton3放置在jRadioButton1和jRadioButton2之间。

（4）单击“组件面板”中“Swing控件”类别中的“标签”组件。

（5）将光标移到位于第3行和第4行行首的两个组件上，使新建组件jLabel4与两者都重叠，并移至容器左边缘的首选位置（见图2.36）。

（6）单击鼠标即在原第3行和第4行之间新增一行，将jLabel4放置在该新行的行首（图2.37）。

5. 复制粘贴组件

一些需要新创建的组件如果与窗体中某个已有的组件属性设置等基本一致，可以通过复制快速创建和设置该新组件。

把已有的组件先复制到剪贴板中，然后反复进行粘贴而制作该组件的多个副本。操作步骤如下。

（1）单击选取已有的组件。

（2）右击该组件，在出现的快捷菜单中选择第一个“复制”命令。注意，有两个行为不同的“复制”命令。

（3）右击空白处，在出现的快捷菜单中选择“粘贴”命令。此时在原组件上错位重叠出现一个新组件并处于选取状态（）。

（4）将粘贴生成的组件移动到适当位置。

（5）如果需要，重复（3）和（4）步，粘贴生成更多该组件的副本。

6. 插入新行“复制”组件

此方法在已有的组件下方插入一个空行，然后创建该组件的一个副本，并与原组件左边框对齐。操作步骤如下。

（1）单击选取已有的组件。

（2）右击该组件，在出现的快捷菜单中选择第二个（靠下的）“复制”命令。

用上述两种方法创建的新组件除了位置、组件名称和显示文字（一般是text属性）不同外，其他属性都与原组件相同。

7. 删除组件

如果窗体中某个组件不再需要或不符合要求需要删除，直接选取该组件后按Delete键，或者右击该组件，在快捷菜单中选择“删除”命令。

组件删除后，原来占据的位置会保留下来。