技术改变世界

 

Swing第三刀:做套ERP,要配得上我的登录界面!

在《Swing第一刀》和《Swing第二刀》中提到了一个我正在折腾的一个ERP界面小框架,不少童鞋表示灰常感兴趣,这里继续和大家分享一个新的小进展:一个全新的登录界面。也许可以改变一些你对Swing和UI设计的看法。

为啥又是登录界面

登录界面是一个软件系统中最简单的一个界面,也是最重要的一个界面。为什么?因为它是用户看到的第一个界面;因为它是用户每天都要看的界面。要想让用户爱上你的软件,一个美观、耐看、友好的登录界面是一个重要的前提。下功夫做一个好的登录界面,你的系统就成功了一半。这就是为什么很多美工初学者总是喜欢从模仿、创作登录界面开始。

不信咱仔细瞅瞅。瞧,这是你做的登录界面:



抓图来自网络,版权归作者所有

瞧,这是我的登录界面(来自本文案例):



美工设计效果图



程序实际运行图

哪个更讨人喜欢?你是凤姐,我是志玲姐;你是芙蓉姐姐,我是Lady Gaga姐,不大好比哦。嗯,正如你所说,是“各有所长”吧!不过,除非你有严重的自虐倾向,否则你的选择应当跟我一样。

估计有人已经在叫了:“你这是Swing做的?”“用JNI了?”“这透明圆角,这透明文字,这阴影…咋弄的?”“快扔源码!”“Flex做这个太容易了”“花里胡哨有P用?”…你看,程序员的“老毛病”又来了。

不错,这个界面是Swing做的;也没有JNI(从来也没整过JNI);代码也极其简单,就是窗户纸一捅就破;也谈不上多么高深技术;也无意和Flex、.NET之类的技术相比较。我只是想让大家更多的了解Java和Swing的能力,以及我们对待技术和UI的态度。如果急吼吼的看一下代码run一下demo “哦!”一下,继续扭头堆代码,那我就算是白费这劲了。

Swing变冷了,还是变热了

 

JavaEye上最近关于Swing的帖子络绎不绝,不少人惊呼:Swing似乎难道又要热了?面对这样的疑问,国内著名Java专家、《程序员》杂志特约撰稿人、美国密苏里州立大学计算机科学与技术学院客座教授、JavaEye创始人Robbin却表现的很坦然,他告诉我说“对于我们Swing程序员来说,这是很正常的事情。”在Robbin看来,这是再正常不过的现象了。“Swing本来就很强大, 而最近频频出现的热帖也不是因为Swing发展加快了,只是媒体关注变多了。我使用Swing已经30多年了,在我上大学读书开始就接触Swing,”Robbin说,“毫无疑问,我相信Swing会取得成功”。“美洲大陆已经存在上亿年了,只是哥伦布发现了它而已。所以,不必惊呼新大陆很美很新鲜,只能怪我们很傻很无知。”

(注:以上访谈纯属自编自导个人杜撰,如有雷同,纯属巧合。)

Swing做界面,是快刀还是钝刀

 

用Swing做一个上面的登录界面,需要多少时间?答绝不可能是几分钟。而要做到“技惊四座、一鸣惊人”,用“鬼斧神工”搬的精致来彻底讨好和吸引用户,就必须下足功夫。这往往不是程序员一个人在战斗!美工师、程序员、熟悉业务的系统工程师…需要一起雕章琢句、废寝忘食。然而,好的设计带来的回报也会远远超过你的想象。所以,讨论所谓**技术更“快”和更“慢”毫无意义,当初快如闪电的PB、Delphi如今也难觅踪迹。所以,程序的价值和回报不在于速度,更多的在于我们的态度:精雕细琢成大器,还是粗制滥造堆垃圾呢?

程序员:我们并不在意程序是否好看

 

真的吗?你真的这样看吗?真是很可怕的一件事情。当然,在Java领域里,只要一提到J2EE、企业应用,大家就会立刻想到业务、重构、集群、云计算、松耦合、SOA、线程池、EJB、JPA、Hibernate、Spring、JBPM、SSH、JBoss、Lucene、Seam数之不尽的buzzword和framework。很多程序员浸淫在各种框架之中乐此不疲、无法自拔,甚至从来没有写下过例如“public class MyClass extends *** implements ***”亲手create过一个自己的class,实在是挺可怕。软件说到底是拿来“用”的,不是用来“学”的。再多的框架和技术,最终还是要为用户服务,和用户交互就要有好的UI。UI无非就是User Interface,是一切between在用户和机器之间的东西。忽视UI技术和UI设计,确实对一个程序员的成长是不利的。

程序员:我们需要左脑还是右脑

 

美国的斯佩里和日本角田等人的研究表明,左脑支配右半身的神经和感觉,是理解语言的中枢,主要完成语言、逻辑、分析、代数的思考认识和行为,它是进行有条不紊的条理化思维,即逻辑思维,是程序员的典型活跃区域,也是我们的“国家级重点保护区”。喜欢踢足球的程序员们注意了:尽量不要头球;用也要尽量用右脑;用左脑最好戴个摩托头盔先,别把吃饭的家什整坏了。右脑支配左半身的神经和感觉,是没有语言中枢的哑脑,但有接受音乐的中枢,主要负责可视的、综合的、几何的、绘画的思考认识和行为,也就是负责鉴赏绘画、观赏自然风光、欣赏音乐,凭直觉观察事物,纵观全局,把握整体。右脑具有类别认识能力、图形认识、空间认识、绘画认识、形象认识能力,是形象思维。看上去右脑似乎也恰恰是咱们程序员的软肋。但这能很好的解释为什么程序员弹吉他蓬蓬作响却像弹棉花,拉二胡一身汗还是像驴叫,跟大妈吵架被骂的插不上嘴,这不能怨我们自己,原来是有生理原因的。

但是从事逻辑思维的程序员恰恰还需要有很强的创造力。而右脑在创造性工作中具有不可替代的作用。美国科学家在《思维的艺术》一书中,将创造过程分为四个阶段,即准备阶段、酝酿阶段、闪光阶段和验证阶段。这其中,直觉和顿悟是创造的泉源,但是它必须经过语言的描述和逻辑的检验才具有价值。左右脑的这种协同关系是创造力的真正基础和源泉。如果我们一味的抱怨右脑发育不良,甚至自认右脑天生脑残,那就只能一生一世做一个不折不扣的coder编码机器了。

勤奋和聪明,哪个更重要

 

这个话题有点大。作为程序员,不管缺了哪样,都是致命的,还不如早点放弃这条路的好。这论调似乎很没新意,如果非要选择一个的话,我选择勤奋。不聪明,哪怕做不了程序员还可以干其他的嘛,比如当个官员、干个城管、踢个足球啥的(仅限国足,男队)。但要是不勤奋,恐怕就一事无成了,想做贪官都难(不勤奋你以为就能贪的到啊)。勤奋又聪明,再加上那么一点点激情,你就厉害了!

细节是魔鬼:登录还是登陆?

 

这真是一个问题。Google一下看,很多人都在争论和分析是“登陆”还是“登录”,这似乎不仅仅是一个软件问题,而变成了一个语言学术研究问题。《北京晚报》还在2007年5月专门发表解青的署名文章《“登陆网站”还是“登录网站”》进行深入的分析。经过一系列复杂的公式推导逻辑运算,作者最终得出的结论是应当使用“登陆网站”。我们程序员语言能力一向很差,虽然“登陆网站”还说得过去,但是软件的login界面如果用“登陆”那我们就会感觉有点点怪了,总让人想起彪炳史册的伟大的“诺曼底”这个地方。毫无疑问,“登录”是更正确的选择。别说程序员不用这样较真,别说这个跟我程序员无关。如果哪个大型软件的login界面用“登陆”两个字,请你立刻鄙视它、嘲笑它、讽刺它、挖苦它、打击它、永远别买它、永远离开它,离啊离开它,离~开~它!不服气现在就重启系统看看Windows界面用的什么,去Google一下主流软件抓图用的是什么。如果你做的软件真的由此而不能卖出去,此事也与你无关吗?细节决定成败,细节就是魔鬼,这不是口号。你不提防它,它就吃掉你。

Swing与不规则窗体的“哥德巴赫猜想”

 

不管你信不信,“如何用Swing做不规则窗体”是近10年来Swing被最常问到的几个问题之一。Google上搜索“Swing 不规则 窗体”有将近10万个中文结果,而且从1999年就有人在致力于这一问题的解决方法,至今甚至已经出现多种不同“流派”的解决方案。

第一招:抓屏法


最早出现的比较靠谱的一个解决方法出现在《Swing Hacks》一书中。《Swing Hacks》一书是著名的图书出版商O’Reilly在2007年出版的Swing技巧图书,作者是Swing开发组成员Joshua Marinacci,他也是目前JavaFX开发组成员。在这本书的41章中介绍了一种制作透明窗体和不规则窗体的方法。由于当时的JDK功能所限,Java本身并未提供任何直接的API来制作半透明或不规则窗体,所以这一技巧是利用Robot来截取屏幕原有内容生成内存图片,然后将图片显示在Swing的窗体中作为背景,“欺骗”大家的眼睛误以为是窗口“透”过去了。这一招确实体现了程序员的聪明才智。

不过这一方法的缺陷是,当窗口被移动一下后就会露馅,所谓“透明”区域的抓图不知道位置变化,也不会随之改变。所以在该书的例子程序中,作者又将JFrame的setUndecorated设置为true去掉了标题栏,让你无法移动窗口;再启动了一个线程,每250毫秒就重新抓屏一次,更新Swing窗口的图片背景。不过由于Swing窗口显示出来后,它本身又遮挡了屏幕后面的物体,作者只好先frame.hide()把窗口隐藏一下,然后马上抓图,然后再frame.show恢复窗口显示。透明效果是勉强出来了,但是程序在那里有事没事的一直忽隐忽现,真是够怪异的,效率、实时性也都惨不忍睹。

以下是相关代码:

 1 public   void  run( )  {  
 2
 3       try   {  
 4
 5           while ( true {  
 6
 7              Thread.sleep( 250 );  
 8
 9               long  now  =   new  Date( ).getTime( );  
10
11               if (refreshRequested  & amp; & amp;  
12
13                  ((now  -  lastupdate)  & gt;  1000 ))  {  
14
15                   if (frame.isVisible( ))  {  
16
17                      Point location  =  frame.getLocation( );  
18
19                      frame.hide( );  
20
21                      updateBackground( );  
22
23                      frame.show( );  
24
25                  frame.setLocation(location);  
26
27                      refresh( );  
28
29                  }
  
30
31                  lastupdate  =  now;  
32
33                  refreshRequested  =   false ;  
34
35                  }
  
36
37              }
  
38
39          }
  catch  (Exception ex)  {  
40
41              p(ex.toString( ));  
42
43              ex.printStackTrace( );  
44
45          }
  
46
47      }
 
48

《Swing Hacks》中介绍的方法代码片段

第二招:AWTUtilities.setWindowShape法


随着Sun公司对JavaFX技术的猛醒和大力持续投入,JDK从6就开始从底层为JavaFX的未来做好准备,提供更多底层功能支撑。作为“酷”、“炫”的UI技术的先锋,窗口透明、不规则窗口自然是将来JavaFX不可缺少的元素和特性。所以,Sun在JDK6中提供了几个新的函数,用来支持窗口透明度、窗口任意形状:

1 void  setWindowOpacity(Window window,  float  opacity)   // 设置窗口透明度  
2 void  setWindowShape(Window window, Shape shape)    // 设置窗口形状 

这里有官方的具体介绍:

http://java.sun.com/developer/technicalArticles/GUI/translucent_shaped_windows/

setWindowOpacity方法提供了官方的、彻底的方法来生成不规则形状窗体。不过依旧有以下几个问题:

        1,  AWTUtilities并非JDK公开类,将来可能会发生变化。当然除了编译时的一个不爽的警告外,也不用过度担心,即使将来API发生变化,相信Sun和Oracle也会妥善处理好。

        2, 用Shape形状定义的窗口边缘粗糙,显示效果差。使用setWindowShape函数对窗口设定形状后,其窗口切割的边缘并未做抗锯齿(anti-alias)处理,也没有相应的函数或参数进行控制,导致显示效果粗糙。看看Sun自己做出来的例子: http://java.sun.com/developer/technicalArticles/GUI/translucent_shaped_windows/9.jpg ,一个简单的椭圆Shape,其边缘就已经粗糙不堪。更不用说更复杂的透明图片边缘了。本人经过好几天的反复尝试,发现其效果始终不甚理想(如图),无论对图片的透明边缘如何精细处理,甚至直接new Shape,都完全达不到美工设计出来的效果图。

        3, 透明PNG图片的边缘Shape不好获取。如果我们的窗体不是一个规则的、可定义的几何形状Shape,而是一个任意透明PNG图片,该如何获取图片的透明边缘Shape,进而设置window的不规则形状呢?这确实是一个难题。在网上有人专门讨论这一算法,基本上是读取PNG图片的每一个像素,获得像素透明边界点,对边界点进行不断的合并与逼近,最后形成一个最终Shape。TWaver的TWaverUtil工具类中就有一个getImageShape方法用来获得任意图片的边缘shape。经反复测试验证,就是采用了这种算法。不过这种算法的缺点很明显:边缘必须是连续的,甚至必须是“外凸”的;如果png图片中间有一个透明的“洞”,甚至边缘有一个凹陷透明区域,生成的Shape都无法准确反映出来。

第三招:终极解决之道



经过反复的研究探索,终于获得了一个完美的解决方法:不用shape、不用抓图、不用workaround,真正的、彻底的、完全的、随意的在桌面上任意绘图、涂鸦、撒野,真正的属于程序员的Freedom!下面就来一起揭开这层窗户纸吧!

在程序中依次设置以下几个参数:

         设置窗口完全透明:AWTUtilities.setWindowOpaque(frame, false);

         设置窗口无边缘:frame.setUndecorated(true);

         设置窗口的ContentPane为要显示的Pane:frame.setContentPane(myPane);

         在myPane中放置具体要显示的内容,也可以重载paint方法进行Java2D绘制。这些paint会直接发生在桌面背景上。

接下来,就是见证奇迹的时刻!



(不好意思,暴露我的桌面了)

通过上面方法,可以做一个任意大小、任意位置的window,在相应的桌面位置上随意显示Swing组件,或做任意Java2D画图。比如下面小例子可以在屏幕上直接画一个红色的立体矩形,而没有显示窗口:

 1 import com.sun.awt.AWTUtilities;  
 2
 3 import java.awt.Color;  
 4
 5 import java.awt.Graphics;  
 6
 7 import javax.swing.JFrame;  
 8
 9 import javax.swing.JPanel;  
10
11    
12
13 public class Test {  
14
15    
16
17     public static void main(String[] args) {  
18
19         JFrame frame = new JFrame();  
20
21         frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);  
22
23         frame.setUndecorated(true);  
24
25         frame.setBounds(500500300300);  
26
27         AWTUtilities.setWindowOpaque(frame, false);  
28
29    
30
31         JPanel pane = new JPanel() {  
32
33    
34
35             @Override 
36
37             public void paint(Graphics g) {  
38
39                 super.paint(g);  
40
41    
42
43                 g.setColor(Color.red);  
44
45                 g.fill3DRect(1010100100true);  
46
47             }
  
48
49         }
;  
50
51    
52
53         frame.setContentPane(pane);  
54
55    
56
57         frame.setVisible(true);  
58
59     }
  
60
61 }
 
62

运行效果如下图:


窗口的拖拽移动

窗口不再规则,窗口标题栏不再出现,如何移动窗口?按照其他类似软件的习惯做法,应当允许用鼠标直接拖拽窗体任意位置进行窗口移动。做一个鼠标监听器对窗口中的元素进行拖动监听,对窗口进行相应拖动距离的移动:

 1private MouseAdapter moveWindowListener = new MouseAdapter() {  
 2
 3    
 4
 5         private Point lastPoint = null;  
 6
 7    
 8
 9         @Override 
10
11         public void mousePressed(MouseEvent e) {  
12
13             lastPoint = e.getLocationOnScreen();  
14
15         }
  
16    
17
18         @Override 
19
20         public void mouseDragged(MouseEvent e) {  
21
22             Point point = e.getLocationOnScreen();  
23
24             int offsetX = point.x - lastPoint.x;  
25
26             int offsetY = point.y - lastPoint.y;  
27
28             Rectangle bounds = FreeLoginUI.this.getBounds();  
29
30             bounds.x += offsetX;  
31
32             bounds.y += offsetY;  
33
34             FreeLoginUI.this.setBounds(bounds);  
35
36             lastPoint = point;  
37
38         }
  
39
40 }

41

对窗体上的组件安装这一listener,就可以对窗口中任意元素进行拖拽,直接拖动窗体四处晃悠了。

图片的切割

要做好的界面,需要一个耐心、有创意的美工大力协助,例如图片的切割就很重要。下图展示了如何从效果图进行具体切割素材:

制作渐变背景Panel

 

仔细观察中间的输入区域部分,其背景是有渐变设计的。其制作方法也很简单:首先让美工帮助制作一个一个像素宽、整个panel高度的小图片作为素材;然后用这个图片创建纹理Paint;最后用这个纹理对真个panel进行fill。


 1private JPanel inputPane = new JPanel() {  
 2
 3    
 4
 5         private String backgroundImageURL = FreeUtil.getImageURL("login_background.png");  
 6
 7         private TexturePaint paint = FreeUtil.createTexturePaint(backgroundImageURL);  
 8
 9    
10
11         @Override 
12
13         protected void paintComponent(Graphics g) {  
14
15             super.paintComponent(g);  
16
17             Graphics2D g2d = (Graphics2D) g;  
18
19             g2d.setPaint(paint);  
20
21             g2d.fillRect(00this.getWidth(), this.getHeight());  
22
23         }
  
24
25     }

26

肆虐你的桌面:六月飘雪!

既然窗户纸捅破了,在桌面上就随意折腾吧。这几天窗外酷热难耐,咱们就来个桌面飘雪,也许可以望梅止渴,带来丝丝清凉吧!

先准备一个雪花的png透明图片,然后在桌面上随机生成50个雪花坐标,每次paint让每个雪花的左右略微抖一下(snowX[i] += TWaverUtil.getRandomInt(5) – 3),垂直距离下坠5像素(snowY[i] += 5),再旋转个小角度。然后,用一个线程不停的repaint窗口。

雪花png图片:

  1public class TestSnow {  
  2
  3    
  4     public static void main(String[] args) {  
  5
  6         final JFrame frame = new JFrame();  
  7
  8         frame.setAlwaysOnTop(true);  
  9
 10         frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);  
 11
 12         frame.setUndecorated(true);  
 13
 14         frame.setExtendedState(JFrame.MAXIMIZED_BOTH);  
 15
 16         AWTUtilities.setWindowOpaque(frame, false);  
 17
 18    
 19
 20         final JPanel pane = new JPanel() {  
 21
 22    
 23
 24             private int[] snowX = null;  
 25
 26             private int[] snowY = null;  
 27
 28             private int[] angles = null;  
 29
 30             private int count = 50;  
 31
 32    
 33
 34             @Override 
 35
 36             public void paint(Graphics g) {  
 37
 38                 super.paint(g);  
 39
 40                 Rectangle bounds = frame.getBounds();  
 41
 42                 if (snowX == null{  
 43
 44    
 45
 46                     snowX = new int[count];  
 47
 48                     for (int i = 0; i < snowX.length; i++{  
 49
 50                         snowX[i] = TWaverUtil.getRandomInt(bounds.width);  
 51
 52                     }
  
 53
 54                     snowY = new int[count];  
 55
 56                     for (int i = 0; i < snowY.length; i++{  
 57
 58                         snowY[i] = TWaverUtil.getRandomInt(bounds.height);  
 59
 60                     }
  
 61
 62                     angles = new int[count];  
 63
 64                     for (int i = 0; i < snowY.length; i++{  
 65
 66                         angles[i] = TWaverUtil.getRandomInt(360);  
 67
 68                     }
  
 69
 70                 }
  
 71
 72    
 73
 74                 Graphics2D g2d = (Graphics2D) g;  
 75
 76                 Image image = TWaverUtil.getImage("/free/test/snow.png");  
 77
 78                 for (int i = 0; i < count; i++{  
 79
 80                     snowX[i] += TWaverUtil.getRandomInt(5- 3;  
 81
 82                     snowY[i] += 5;  
 83
 84                     angles[i] += i / 5;  
 85
 86                     snowY[i] = snowY[i] > bounds.height ? 0 : snowY[i];  
 87
 88                     angles[i] = angles[i] > 360 ? 0 : angles[i];  
 89
 90                     int x = snowX[i];  
 91
 92                     int y = snowY[i];  
 93
 94                     int angle = angles[i];  
 95
 96                     g2d.translate(x, y);  
 97
 98                     double angleValue = Math.toRadians(angle);  
 99
100                     g2d.rotate(angleValue);  
101
102                     g2d.drawImage(image, 00null);  
103
104                     g2d.rotate(-angleValue);  
105
106                     g2d.translate(-x, -y);  
107
108                 }
  
109
110             }
  
111
112         }
;  
113
114    
115
116         frame.setContentPane(pane);  
117
118         frame.setVisible(true);  
119
120         Thread thread = new Thread() {  
121
122    
123
124             @Override 
125
126             public void run() {  
127
128                 while (true{  
129
130                     try {  
131
132                         Thread.sleep(10);  
133
134                     }
 catch (Exception ex) {  
135
136                         ex.printStackTrace();  
137
138                     }
  
139
140                     pane.repaint();  
141
142                 }
  
143
144             }
  
145
146         }
;  
147
148    
149
150         thread.start();  
151
152     }
  
153
154 }
 
155


快快运行代码,让雪花飘起来吧!


如果愿意折腾,还可以修改代码中的:

         private int count = 50,调整雪花的数量; 
         修改angles[i] += i / 5,调整雪花翻滚的速度; 
         修改snowY[i] += 5,调整雪花下坠的速度; 
         修改snowX[i] += TWaverUtil.getRandomInt(5) – 3,调整雪花左右摆动的速度;

别说你不知道怎么结束程序啊,不会Alt+F4的话,你这个程序员肯定不合格了。

秘密背后的秘密

当把透明窗口Frame设置特别大以后(例如10000*10000),你会发现不但界面变得极其缓慢,而且还会内存溢出。Sun的秘密不言自明了:还是使用了BufferedImage。否则,鼠标点击你画的椭圆或桌面的图标,它如何知道是点击了窗体,还是操作了桌面?只能生成内存图片,在里面进行像素判断了。要挖掘再深入的秘密,我也不清楚了,自己继续探索吧!

代码大家接着到我之前发表的TWaver中文社区下载吧。

posted on 2010-08-06 19:29 老三 阅读(5929) 评论(0)  编辑  收藏

导航

公告

一个不错的UI技术中文社区:http://twaver.servasoft.com/
还有一个论坛:http://twaver.servasoft.com/forum/

常用链接

随笔档案

最新随笔

搜索

最新评论