2.12　搭建Java图形界面开发环境

图形用户界面（Graphics User Interface，GUI）是用户与程序交互的窗口，比命令行界面更加直观，并且更好操作。Swing程序是Java的客户端窗体程序，除了通过手动编写代码的方式设计Swing程序之外，Eclipse中还提供了WindowBuilder工具，该工具是一种非常好用的Swing可视化开发工具，有了它，开发人员就可以像Visual Studio一样通过拖曳组件的方式来编写Swing程序。

记得上大学那会儿比较主流的Java图形开发插件是Visual Editor和SWT Designer，不久又出了一个Jigloo，但去官网看了一下，发现这个东西很久没有更新了，不过据说短小精悍、五脏俱全。SWT Designer不久前被Google公司收购后重新整合进Google自己的产品中，然后开源了，现在名字叫WindowBuilder Pro，看上去界面组件很丰富、强大，支持Swing、AWT、SWT以及Google自家的GWT等。

WindowBuilder Pro已经是目前Java图形界面开发的主流免费工具。如果不缺钱，也可以使用收费的集成开发环境（IDE），比如MyEclipse。在本书中我们使用WindowBuilder Pro，WindowBuilder Pro相当于Eclipse的一个插件，要在Eclipse中使用。WindowBuilder Pro的官网地址是http://www.eclipse.org/windowbuilder/。不过，安装WindowBuilder不必去官网，在Eclipse中即可完成安装。

可以在Eclipse中安装WindowBuilder Pro。打开Eclipse，单击Help→Ecplise MarketPlace，随后出现Ecplise MarketPlace对话框，在该对话框的搜索框中输入WindowBuilder，然后单击右侧的Go按钮，将会出现适合当前Eclipse的WindowBuilder Pro，如图2-50所示。

单击对话框右下角的Install按钮，将出现安装向导，分别单击Confirm和Finish按钮，最后向导对话框消失，返回Eclipse主界面，在主界面右下角可以看到安装进度，如图2-51所示。

注意，这个过程要保持在线。稍等片刻，出现重启Eclipse对话框，如图2-52所示。

单击Restart Now按钮，重启Eclipse。

【例2.6】 第一个Java图形界面程序

1）打开Eclipse后，单击File→New→Project命令或直接按Ctrl+N组合键来打开新建工程对话框，在该对话框上将滑块拉倒底部，可以看到WindowBuilder，展开它，再展开SWT Designer，接着选中SWT/JFace Java Project，如图2-53所示。

单击Next按钮，并在下一个对话框中输入工程名，这里输入myprj，并在Use an execution environment JRE下拉列表框选择JavaSE-1.8，如图2-54所示。

因为本书用的是JDK1.8，所以这里选择JavaSE-1.8，然后单击Finish按钮。此时工程新建完毕，如果工程视图没有出现，可以单击Eclipse的菜单Windows→Show View→Project Explorer。

新建工程完成之后，选中并右击Project Explorer下的src，然后选择New→Other，如图2-55所示。

此时出现向导对话框，在该对话框中选择WindowsBuilder→Swing Designer→JFrame，如图2-56所示。

单击Next按钮，在下一个对话框中输入JFrame的名称，如myfrm，该名称也是新建Java文件的主文件名（在磁盘上会创建一个myfrm.java文件），如图2-57所示。

最后单击Finish按钮，这样myfrm.java就自动创建成功了，并自动打开了代码编辑窗口。这个Java文件既可以通过代码编辑的方式来设计窗口界面，又可以通过可视化拖曳控件的方式来设计窗口界面。JFrame的界面和普通Java文件的不同之处在于，它不仅可以编辑源代码，还可以直接设计界面。我们可以在编辑窗口的下方找到代码编辑和界面设计的切换标签，如图2-58所示。

单击Design标签，即可出现界面设计窗口，如图2-59所示。

其中，界面左边的Palette（翻译为“调色板”）相当于一个控件工具箱，可以拖曳其中的控件到右边的表单窗口上。在放置控件之前，我们先要了解两个概念：容器（Container）和布局（Layout）。容器是一切的基础，比如一台主机，没有主板，显卡和CPU之类的东西就无法组合起来，目前使用默认的Panel。布局是指控件在窗口摆放的格式，没有布局控件就无法摆放，因而窗口无法设置。这里准备使用绝对布局（Absolute Layout），先单击Palette中的Absolute layout，再到窗口中单击，就添加完成了，如图2-60所示。

绝对布局就是让我们可以随心所欲地安放控件，可以与默认的布局进行比较，该布局方式比较适合新手使用。绝对布局添加完毕后，我们可以在窗口上放置控件，比如放置一个标签（JLabel）控件，可以先单击JLabel控件，然后在窗口空白处再次单击，即可快速添加完成，如图2-61所示。

可以设置标签的标题，在左边的Properties视图中找到text，然后在右边输入“IP地址：”，如图2-62所示。

如果以前学过VC、Delphi、Qt之类的可视化开发工具，应该对这种界面开发方式比较熟悉，即先放置控件，然后设置控件的属性，最后根据需要为控件添加事件响应函数，比如单击按钮弹出一个窗口。

使用同样的方法在标签控件右边放置一个文本编辑框（JTextField），然后在窗口上放置一个按钮（JButton），并设置其text为“连接服务器”。最后调整对话框的大小，可以单击对话框的标题栏，此时对话框的下方和右边边框上会出现小黑方块，选中小黑方块（按住鼠标左键不要释放）可以调整对话框大小。最终对话框设计结果如图2-63所示。

下面为按钮添加鼠标单击事件处理函数。右击该按钮，在弹出的快捷菜单中选择Add event handler→mouse→mouse clicked，此时Eclipse将自动添加鼠标单击处理函数mouseClicked，并且自动定位到mouseClicked函数处，我们可以为该处理函数添加如下代码：

public void mouseClicked(MouseEvent e) {
    String t1=textField.getText().trim();
    if(t1.isEmpty())
        JOptionPane.showMessageDialog(null, "请输入IP地址");
    else
        JOptionPane.showMessageDialog(null, "连接服务器成功");
}

代码首先判断编辑框是否为空，如果为空，则跳出一个信息框提示输入IP地址；如果不为空，则跳出一个信息框提示连接服务器成功。当然，这里只是模拟，并没有真正连接服务器。其中，textField是编辑框的变量，通过该变量可以引用编辑框类的成员函数，比如getText（获得编辑框中的文本内容），textField可以在编辑框属性视图内的Variable属性中看到，如图2-64所示。

用户也可以根据需要设置更易于理解的编辑框变量名称。JOptionPane类是Swing中用于实现类似Windows平台下的MessageBox的功能，调用JOptionPane类中的各个静态方法来生成各种标准的对话框，从而实现显示信息、提出问题、警告、用户输入参数等功能。这些对话框都是模态对话框，要使用JOptionPane类，需要在文件开头导入对应的程序包：

import javax.swing.JOptionPane;

代码编辑完毕后就可以准备运行该工程了。

2）保存工程并运行（可以单击工具栏上的白色箭头或按Ctrl+F11组合键来运行），运行结果如图2-65所示。

至此，基于WindowBuilder的Java图形界面开发环境就搭建成功了。为什么一个网络程序开发人员也要学会图形界面设计呢？这是因为完整的网络程序通常分为服务端和客户端，客户端通常都需要和用户打交道，因此需要一个友好的图形界面和用户交互。即使我们编写客户端自测程序，也建议直接在图形界面下编写，因为这样模拟的场景更真实，控制台程序对于用户交互毕竟有限，有时无法模拟出用户使用的真实状况。比如连接服务器，通常要在一定时间内有所反馈（连接成功或连接失败），界面不能卡死，所以要考虑多线程，这些情况的模拟在图形界面下更加容易模拟出来。 hIiaG2ODYhwMyC8V4eBUn+JNJ1YIqJfAM80Eon4IClp1iOoFQGK6Hr3svi8AG+ca