Swing是一把刀（转载）

正在学习Swing编程，看到了一篇无比强大的博客，不转不足以表达我的顶礼膜拜之情。

友情提示：

1. 转载内容不完整，请参照原文获取完整信息。

2. 如果需要复制源码，可参考以下原文链接。

http://blog.csdn.net/sjdl9396/article/details/7440424

对Swing的抱怨和批评从来就没有停止过。不过从以前的铺天盖地，到后来的见怪不怪，到现在的冷冷清清。似乎人们早就已经浸淫在无处不在的web和满天飞的RIA之中，懒得去理会Swing这个老古董了。难道Swing真的到了日薄西山、穷途末路的地步？

大家对待Swing的态度从来就不缺乏偏见。作为Java的桌面UI技术，其实它和MFC、VCL、Winform、WPF以及Flex、Silverlight一样，只是做界面的技术工具而已，本身并没有什么不好。只要计算机还用屏幕、键盘、鼠标来进行交互，这些UI技术（或其后续改良继任者）就会始终存在。无论哪个UI技术，说到底都是在屏幕上画图，本质上都是画点、划线而已，只是有的用起来复杂，有的简单，有的功能强，有的功能弱。不过对于技艺高超者来说，给个邮票大的地方也能跳出激动人心的舞蹈，Flex不就是在Flash这块邮票上面不停的折腾么？这又和脚下的空间有多少关系呢？相比Flash/Flex这张小邮票，Swing则给了我们一个巨大的足球场。如果我们还是不能在这个舞台上吸引更多的观众，还是多反思一下自己的舞技吧，就算脚下的场地有点湿滑不平，我们也没必要喋喋不休。

Swing的设计的确有点过于概念化，导致结构比较抽象，对初学者来说确实比较费劲。记得最开始学习Swing时，弄个table还要创建什么TableModel，还有个AbstractTableModel，还有个DefaultTableModel...一头雾水。为什么不是table.addRow(String[]row)就ok么？直到慢慢理解了MVC，理解了更多设计模式，理解了action和listener监听，renderer/editor机制，UI代理、事件派发线程...才慢慢理解和掌握了Swing，编程水平也有了很大提高。而回头再看十年前用VB6写程序，DIM一个ADO、连接ODBC、拖拽一个文本框、设置属性绑定....简直就是工具的奴隶，一点软件设计的内涵也没学到，不客气的说真是害了一代人。

人类能发展在于善用工具。要把各种UI技术比喻成工具刀，Swing是哪类刀呢？有人说Swing连个TreeTable、日期控件都没有，真是原始社会（夸张点吧，怎么也算封建社会吧）！那么Swing就是这样一把刀了？



 
这把刀实在是吓坏了不少人。不过一些痛恨Swing的人会觉得很解气。要说有偏见吧，确实偏见是无处不在的。就像美国人鄙视日本人，日本人鄙视韩国人，韩国人鄙视中国人，中国上海人鄙视北京人，北京人鄙视天津人，天津人鄙视河南人，河南人鄙视新疆人，新疆人鄙视所有人..............扯远了。其实熟悉一段时间Swing后，只要掌握了一些基本的MVC设计思路和常用组件的使用方法，就会发现，这把刀可以很锋利，可以说是“宝刀未老”，而不是”锈迹斑斑“：



 

不过对于很多非常简单的UI任务来说，Swing会显得很啰嗦、很繁琐。API浩如烟海，文档缺乏，一头扎进去半天出不来。我们头大，我们发狂：我要拧一个螺丝而已，你却给我下面这把刀：



 
所以，你家里需要准备一个单独的螺丝刀，用来拧螺丝；准备一把剪刀，用来剪纸张；一个刮胡刀，用来刮胡子；一把菜刀，用来切菜；还要一个指甲刀，用来剪指甲。虽然菜刀也能凑合割指甲，刮胡刀剁饺子馅也没意见（疯了），但是你显然不想这么做。所以，别抱怨Flex这把剪刀功能不够强，Silverlight这个螺丝刀功能不够多，Swing太复杂。作为Java平台的厂商，Sun除了推出Swing这样的全功能工具刀，还能如何呢？现实世界需求很复杂，只能尽量全满足。这就是生活。

 
所以，上战场除了带上冲锋枪，扛上火箭筒的同时，挎上GPS，腿上还要再绑上一把刀。程序员也是一样，多一项技能就是多一项武器，关键时刻一个都不能少，一个武器就多一个生存的机会。



 

工作原因，使用Swing好多年了。我很喜欢Swing。它复杂，它啰嗦，它功能强，它发展慢。不过我还是很喜欢，并在一些项目中使用。慢慢的，积累了一些在项目中使用Swing的经验。不这里先秀一个今天上午还在改的项目界面，希望大家喜欢。

首先说明一下，这是一个免费的ERP产品界面，只是一个原型和Demo，还没有被最终确认。图上面的功能、模块、数据都是假的，大家不要较真。由于ERP软件的模块和产品功能众多、业务逻辑复杂，程序的界面需要体现“友好、方便、易用”的原则。再加上其“免费”的重要特性，这里选择了绿色和灰色为基本色调，以橙色作为主要的辅助色，既不过于死板，也不过于花哨，体现了“绿色、环保、低碳（好像不太搭边哦）”的软件设计理念。



 
上图是ERP软件的主界面。窗口上下分别是菜单和状态栏，左侧是模块树，右侧是快捷功能列表，中间是具体数据和内容的显示区域，用多tab方式显示每个页面。为了考虑到绝大多数用户的屏幕尺寸，这里都以1024*768作为基本尺寸进行设计和抓图。可以看到中间的数据显示区域已经不是很宽裕。所以，程序加了一个功能：双击中间的tab头可以将左右闭合，增大中间内容页面的可见区域，如下图效果。可以看到，左右区域闭合后，还会露出图标以及tooltip文字，不影响继续使用：


 
中间的内容页可以显示任意Swing组件，例如放一些销售业绩图、报表、股票图（ERP里头不管股票吧，懂行的纠正一下下）之类，例如下图：



 
当然在ERP系统中，最多的还是各种枯燥的数据和报表，这时候表格还是最常见和重要的呈现方法。但是放在咱这里，表格也要做的清新、耐看一点，不能太审美疲劳：

或者，查找一下全球供应商或者客户分布及其业务情况：

 

 

好了，先上这几张图。如果大家喜欢，以后再上传更多。

做了很多项目和界面，有几个体会：

• 界面设计，一定要“美工先行”。也就是美术设计和效果图的设计工作要先于软件开发去做。在美工设计的阶段，大家一定不要考虑技术上的问题，别冲上去第一眼就“哎呦，这个不好搞”，”这个圆角和渐变咋弄？“，这是我们程序员的职业通病。大家是否发现，光靠程序员自己，几乎是无法做出真正好的UI？因为程序设计和艺术设计几乎用不同的大脑部位（具体是前脑后脑左脑右脑我还真没仔细研究），而我们程序员擅长的是逻辑思维，对发散思维的艺术设计则基本都“缺根弦”。比如我们写程序时候，要突出一个数据，我们就直接给设置颜色，先上setColor(Color.red)；难看？换setColor(Color.green)；靠，还不行？你啰嗦不啊？干脆直接setColor(Color.black)了事。你说，这界面怎么能好看。
• 严格执行美工的设计。一旦美工设计好了效果图，程序员应当”一个像素不差“的把它实现出来，而不要自作聪明的随意修改，或以”技术上不好搞“为借口退缩。要把界面设计当做艺术品一样对待。记住细节才是成败的关键和真正出彩的地方。上面的抓图，我们都是把运行结果抓图放大后逐个边框圆角甚至像素比对审核，做到"一丝不差"，这样才能真正的出设计精品。
• 把握”以用为本“的原则。软件是艺术，但不是艺术品，光看不碰；软件之本在于用。如果脱离了”易用“和”以用户体验为中心“的设计宗旨，一味的追求华丽、花哨，忽视了用户的使用体验，则容易本末倒置，哗众取宠，结果自然是一败涂地。
• 统一的风格。软件的整个界面设计要有鲜明的主题，甚至上升到其理念是什么。然后由专业的美工形成具体的色系，规定其使用方法，并体现到每个页面、每个按钮、每个像素中去。

 

相信通过这些手段，我们每个人每个团队都可以制作出高质量的软件界面，让使用者赏心悦目，让开发者心旷神怡，让老板心花怒放，让竞争对手心惊胆战！

后记：

如果大家对以上界面感兴趣，我将在后续文章中介绍本项目的设计思路、功能、实现方法，以及相关源代码。本项目主要用到的第三方的包有JGoodies和TWaver。同时希望通过这一系列文章，能够让大家重新认识Swing这把刀，用好这把刀，一路披荆斩棘、砍瓜切菜、攻城拔寨、再创辉煌！

不喜欢看文字的朋友：可直接下载可执行程序。要源代码的朋友：容我再整理几天，但一定会奉上。喜欢更多抓图的朋友：可以在上篇文章《Swing是一把刀》中看到更多抓图。

 

关于绿色

喜欢绿色，喜欢雅黑，无可救药。在这个吵吵闹闹的软件行业，绿色也忽然从“春风一拂千山绿”唯美变成俗不可耐的buzzword。比如：

 

• 绿色软件：大大的buzzword。忽然一夜之间，所有的软件都绿色了，好像不“绿”就跟不上形势。比如绿色杀毒，绿色OFFICE，绿色ERP，绿色windows。反正全绿。
• 绿色征途：看，精神鸦~片也可以很“绿”的；
• 绿~坝-花季护航：呃，老好的软件，不多说了；
• 绿色世博：嗯，喊的老响了。至今一头雾水。

绿色还有一些不好的词，比如人人避之不及的“绿帽子”之类。台湾的绿营也代表了大坏蛋那帮人（至少陈水扁带了个头）。还有“我把老板气的脸都绿了”、”老板整天灯红酒绿“，也都不是什么好词。

不过绿色更多的还是代表了“春天、自然、环保、低碳”等没好的东西。皮尤慈善信托基金（Pew）在一份名为《绿色改变世界》的研究报告中指出，计算机屏幕如果使用绿色可以节省大量电能并降低辐射，保护使用者双眼和皮肤。例如一个全屏显示的绿色软件界面可以让一台液晶显示器消耗功率降低13.7瓦；假设美国电脑拥有量为5299万台来计算，每年仅关机状态功耗一项可以节约6.2亿度电。如果我们把所有的软件都设计成“绿色”这个环保色，每台计算机都会减少5%的电能和辐射，人的情绪也会更加平缓舒畅，心脏和双肺由此减少12%的血液循环负担，从而降低人类对氧气的需求和二氧化碳的呼出达到14%。加上节省下来的对皮肤护理保养、心肺疾病治疗、近视以及眼镜相关行业对自然资源的消耗，每年全球可以节省1400亿美元的资源消耗，相当于减少砍伐8500平方公里的亚马逊热带雨林，对于处于正在复苏之中的世界经济具有说一不二的作用。看来，“绿色软件”，先把自己的界面搞“绿”了，就是地球的一大幸事！

（注意：上述报告和数据纯属胡诌八扯，如有雷同，纯属巧合。）

但是制作一个绿色的软件界面确实一个心愿。尤其是能够体现“ 枝间新绿一重重，小蕾深藏数点红”的那种感觉！现在终于有了，经过一个多星期的折腾，终于有了一个雏形，在上一篇博文 《Swing是一把刀》中给大家看到的：

 

 

 

 

框架，还是框架

这个程序的设计初衷是快速建立一个美观的Swing应用程序外观。但是，具体来说，它又并非完全是下面几个东西：

• LookAndFeel：这个程序并非一个LnF。一个LnF会对所有的Swing组件进行重新定义Paint并可以通过UIManager.setLookAndFeel进行启用。这个程序用到了大量LookAndFeel的机制，甚至也直接定义了不少UI。不过它并不是一个完整的LookAndFeel。这些定制完全是为这个程序框架服务的。也就是说，这些UI和重绘机制只有在当前的程序框架起作用，而无法指望一句UIManager.setLookAndFeel就将你的任意Swing程序变成上图风格。
• 组件库：也不是组件库。其实里面的组件，除了这个OutlookPane（左侧的模块树）是完全新做出来的（而且没有从JTabbedPane继承，也许理论上还经不起太严谨的推敲），其他的组件都是很简单、现成的。例如列表、按钮、菜单等，都是直接用Swing的，只是重载了一些方法或者定义了UI而已。而且我并非是想让大家直接new OutlookPane()这样来使用，而是使用XML文件对整个界面进行配置使用；
• GUI程序框架：似乎有点大。这仅仅是一个很小的程序而已。

做Java的喜欢满嘴Framework。你要是不能气定神闲一口气提到20个Framework并有意无意的暗示自己很精通，那~都不好意思跟人家说话；最好再能挑一个有点名气的，指手画脚、评头论足、怒其不争一下下，那就像大牛了（例如Hibernate就是个很不错的candidate）。所以，咱这个小程序也就死乞白赖往“框架”上凑凑，反正已经带上了“绿帽子”，也不怕丢人丢到底。

 

好吧，这是一个框架，虽然我也不知道框架该怎么定义。反正我的设计初衷是：如果你用Swing开发一个类似上图结构的应用程序，那么你可以直接用这个框架。这个程序框，包含了上面菜单、地下状态条、左边模块栏、右边功能快捷列表，中间多tab标签页的各种内容（也提供了几个常用的内容页风格，例如列表、流程图等）。这个窗口已经被封装好，通过XML配置文件来定义菜单、状态条、模块栏、流程图、右边的快捷列表。同时，这些都是联动的。例如：点击左边的模块栏中的子模块，一个对应的流程图会显示在中间tab页；选中流程图中的节点，可以把该节点相关的功能列在右侧。点击右侧列表，可以执行各种定义好的动作（动作通过动作码定义，后面会详细介绍）。使用么，直接new一个窗口类，set各个部分的XML文件名，然后setVisible(true)就OK了。至于中间的各个组件和大家关心的LookAndFeel，则都定义好了，基本上不用太关心细节。

 

不管怎么说，我们就叫它“框架”吧。

 

XML配置

每个应用程序都千奇百怪，功能各异。如何用一个同样的界面来组织呢？的确，这个界面并非适合所有人。不过这里的所有菜单、按钮、流程图、图标等，其动作都是可以用一个“动作码”类定义的，所有的动作都会回调一个统一的函数。而我们只要在这个函数处插入监听，就可以拦截具体动作码，执行我们想做的任何事情，例如格式化C盘、往aobama@whitehouse.com邮箱发个垃圾邮件啥的。

 

例如，要定义主菜单，通过这个XML：

 

Xml代码  

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <menubar>  
3.   <menu text="System">  
4.     <menu text="One Sub Module">  
5.       <menuitem text="Test Report Item" tooltip="Tooltip"   
6.                             icon="/free/email.png" action="A001"/>  
7.       <menuitem text="Test Report Item" tooltip="Tooltip"   
8.                             icon="/free/email.png" action="A001"/>  
9.       <menuitem text="Test Report Item" tooltip="Tooltip"   
10.                             icon="/free/email.png" action="A001"/>  
11.       <menuitem text="Test Report Item" tooltip="Tooltip"   
12.                             icon="/free/email.png" action="A001"/>  
13. ...  
14.   </menu>  
15. </menubar>  

[xml] view plain copy print ?

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <menubar>  
3.   <menu text="System">  
4.     <menu text="One Sub Module">  
5.       <menuitem text="Test Report Item" tooltip="Tooltip"   
6.                             icon="/free/email.png" action="A001"/>  
7.       <menuitem text="Test Report Item" tooltip="Tooltip"   
8.                             icon="/free/email.png" action="A001"/>  
9.       <menuitem text="Test Report Item" tooltip="Tooltip"   
10.                             icon="/free/email.png" action="A001"/>  
11.       <menuitem text="Test Report Item" tooltip="Tooltip"   
12.                             icon="/free/email.png" action="A001"/>  
13. ...  
14.   </menu>  
15. </menubar>  

<?xml version="1.0" encoding="UTF-8"?>
<menubar>
  <menu text="System">
    <menu text="One Sub Module">
      <menuitem text="Test Report Item" tooltip="Tooltip" 
                            icon="/free/email.png" action="A001"/>
      <menuitem text="Test Report Item" tooltip="Tooltip" 
                            icon="/free/email.png" action="A001"/>
      <menuitem text="Test Report Item" tooltip="Tooltip" 
                            icon="/free/email.png" action="A001"/>
      <menuitem text="Test Report Item" tooltip="Tooltip" 
                            icon="/free/email.png" action="A001"/>
...
  </menu>
</menubar>

 

 以上XML可以定义一个System的主菜单，以及一个One Sub Module的菜单项，以及一系列的二级菜单。每个菜单都可以设置icon图标、文字、tooltip文字，以及动作码（就是那个action）。如下图：

 

左侧的模块栏就是典型的Outlook的风格，很多软件干脆都叫它OutlookPane（我这里也是如此）。这个OutlookPane的配置，通过如下类似XML：

 

Xml代码  

1. <outlook>  
2.   <module text="Engineering Box"   
3.                  icon="/free/test/module_unselected.png"   
4.                  selected_icon="/free/test/module_selected.png"   
5.                  network="network.xml">  
6.   </module>  
7. </outlook>  

[xml] view plain copy print ?

1. <outlook>  
2.   <module text="Engineering Box"   
3.                  icon="/free/test/module_unselected.png"   
4.                  selected_icon="/free/test/module_selected.png"   
5.                  network="network.xml">  
6.   </module>  
7. </outlook>  

<outlook>
  <module text="Engineering Box" 
                 icon="/free/test/module_unselected.png" 
                 selected_icon="/free/test/module_selected.png" 
                 network="network.xml">
  </module>
</outlook>

同样，主模块（也就是每个大分栏）包含了模块栏的文字、icon图标（选中和未选中两个），以及一个xml文件。这个xml文件包含了一个流程图，流程图包含了具体的子模块。点击展开大模块栏后，所有的子模块也会显示在栏目中，同时模块的流程关系会通过对应的xml文件中定义的方式，显示在一个图形化的流程图界面中，最终显示在中间的tab页上。

 

可以看到，左侧的模块列表和中间的图形节点是一一对应的。当鼠标选中节点后（变成橙色），左侧的列表对应的项也会被选中。同时，和这个节点（代表了一个具体子模块）相关的功能，都会显示在右侧的快捷列表中（这是通过指向的network.xml文件定义的）

 

上面例子中的Network.xml内容举例如下：

 

Xml代码  

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <network>  
3.     <node x="30" y="50"  
4.           text="AP Prepay"  
5.           network_text="AP Prepay"  
6.           tooltip="This is a tooltip of a node"  
7.           icon="/free/test/module.png"  
8.           list_icon="/free/test/submodule.png">  
9.         <button1 tooltip="Tooltip"   
10.                             icon="/free/test/module_attachment.png" action="X002"/>  
11.         <button2 tooltip="Tooltip"   
12.                             icon="/free/test/module_attachment.png" action="X002"/>  
13.         <button3 tooltip="Tooltip"   
14.                             icon="/free/test/module_attachment.png" action="X002"/>  
15.         <shortcuts>  
16.             <separator text="Most Often Used Reports"/>  
17.             <shortcut text="Add a Part" tooltip="Tooltip"   
18.                             icon="/free/submodule.png" action="Z010"/>  
19.             <shortcut text="Delete a Part" tooltip="Tooltip"   
20.                             icon="/free/submodule.png" action="Z010"/>  
21.             <shortcut text="AP Aging Report" tooltip="Tooltip"   
22.                             icon="/free/chart.png" action="Z010"/>  
23.             <shortcut text="MRP for All Parts Used this Month" tooltip="Tooltip"   
24.                             icon="/free/user.png" action="Z010"/>  
25.             <shortcut text="Dashboard of this Month" tooltip="Tooltip"   
26.                             icon="/free/email.png" action="Z010"/>  
27.             <shortcut text="All Open Purchase Orders" tooltip="Tooltip"   
28.                             icon="/free/chart.png" action="Z010"/>  
29.             <shortcut text="Search in Address Book" tooltip="Tooltip"   
30.                             icon="/free/user.png" action="Z010"/>  
31.             <shortcut text="All Online Users" tooltip="Tooltip"   
32.                             icon="/free/email.png" action="Z010"/>  
33.             <separator text="Common Reports"/>  
34.             <shortcut text="All Open Purchase Orders" tooltip="Tooltip"   
35.                             icon="/free/chart.png" action="Z010"/>  
36.             <shortcut text="Search in Address Book" tooltip="Tooltip"   
37.                             icon="/free/user.png" action="Z010"/>  
38.             <shortcut text="All Online Users" tooltip="Tooltip"   
39.                             icon="/free/email.png" action="Z010"/>  
40.             <shortcut text="All Open Purchase Orders" tooltip="Tooltip"   
41.                             icon="/free/chart.png" action="Z010"/>  
42.             <shortcut text="Search in Address Book" tooltip="Tooltip"   
43.                             icon="/free/user.png" action="Z010"/>  
44.             <shortcut text="All Online Users" tooltip="Tooltip"   
45.                             icon="/free/email.png" action="Z010"/>  
46.             <shortcut text="All Open Purchase Orders" tooltip="Tooltip"   
47.                             icon="/free/chart.png" action="Z010"/>  
48.             <shortcut text="Search in Address Book" tooltip="Tooltip"   
49.                             icon="/test/user.png" action="Z010"/>  
50.             <shortcut text="All Online Users" tooltip="Tooltip"   
51.                             icon="/free/email.png" action="Z010"/>  
52.         </shortcuts>  
53.     </node>  
54. </network>  

[xml] view plain copy print ?

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <network>  
3.     <node x="30" y="50"  
4.           text="AP Prepay"  
5.           network_text="AP Prepay"  
6.           tooltip="This is a tooltip of a node"  
7.           icon="/free/test/module.png"  
8.           list_icon="/free/test/submodule.png">  
9.         <button1 tooltip="Tooltip"   
10.                             icon="/free/test/module_attachment.png" action="X002"/>  
11.         <button2 tooltip="Tooltip"   
12.                             icon="/free/test/module_attachment.png" action="X002"/>  
13.         <button3 tooltip="Tooltip"   
14.                             icon="/free/test/module_attachment.png" action="X002"/>  
15.         <shortcuts>  
16.             <separator text="Most Often Used Reports"/>  
17.             <shortcut text="Add a Part" tooltip="Tooltip"   
18.                             icon="/free/submodule.png" action="Z010"/>  
19.             <shortcut text="Delete a Part" tooltip="Tooltip"   
20.                             icon="/free/submodule.png" action="Z010"/>  
21.             <shortcut text="AP Aging Report" tooltip="Tooltip"   
22.                             icon="/free/chart.png" action="Z010"/>  
23.             <shortcut text="MRP for All Parts Used this Month" tooltip="Tooltip"   
24.                             icon="/free/user.png" action="Z010"/>  
25.             <shortcut text="Dashboard of this Month" tooltip="Tooltip"   
26.                             icon="/free/email.png" action="Z010"/>  
27.             <shortcut text="All Open Purchase Orders" tooltip="Tooltip"   
28.                             icon="/free/chart.png" action="Z010"/>  
29.             <shortcut text="Search in Address Book" tooltip="Tooltip"   
30.                             icon="/free/user.png" action="Z010"/>  
31.             <shortcut text="All Online Users" tooltip="Tooltip"   
32.                             icon="/free/email.png" action="Z010"/>  
33.             <separator text="Common Reports"/>  
34.             <shortcut text="All Open Purchase Orders" tooltip="Tooltip"   
35.                             icon="/free/chart.png" action="Z010"/>  
36.             <shortcut text="Search in Address Book" tooltip="Tooltip"   
37.                             icon="/free/user.png" action="Z010"/>  
38.             <shortcut text="All Online Users" tooltip="Tooltip"   
39.                             icon="/free/email.png" action="Z010"/>  
40.             <shortcut text="All Open Purchase Orders" tooltip="Tooltip"   
41.                             icon="/free/chart.png" action="Z010"/>  
42.             <shortcut text="Search in Address Book" tooltip="Tooltip"   
43.                             icon="/free/user.png" action="Z010"/>  
44.             <shortcut text="All Online Users" tooltip="Tooltip"   
45.                             icon="/free/email.png" action="Z010"/>  
46.             <shortcut text="All Open Purchase Orders" tooltip="Tooltip"   
47.                             icon="/free/chart.png" action="Z010"/>  
48.