TWaver - 专注UI技术

http://twaver.servasoft.com/
posts - 171, comments - 191, trackbacks - 0, articles - 2
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

让JTextField添加“自动完成”功能

Posted on 2012-06-12 14:28 TWaver 阅读(2558) 评论(4)  编辑  收藏
     在越来越重视“用户体验”的今天,一个简单的文本框也演进的越来越智能了。比如Google的搜索,当我们输入搜索关键字的过程中,文本框就会动态的下拉列出最常输入的近似文字,以便我们快速输入要查询的内容。当然一直抄袭Google的百度自然也是一样。类似的例子还有很多,例如一般的邮件客户端,在敲入地址时,也会动态列出符合要求的地址,方便快速录入,也会减少出错。


     那么,Swing的文本框要做到这一点是否容易呢?网上的例子也能搜索到一些,不过要么功能做的太简单,要么实现的代码太繁琐罗嗦。还有一些商业的Swing组件,则完全是要付费的。本文结合了2BizBox免费ERP软件开发中的实践,尝试了一种非常简单、有效的方法来制作这一效果。

     首先仔细观察这种效果:它外观上、本质上,都完全是一个文本框,而不是下拉框。所以,我们不想把它做成下拉框,也就是不想从JComboBox继承。另外,下拉列表提示的出现,是完全异步、动态的,它仅仅作为提示,不能干预正常的文本框的输入。最后,那个下拉列表的外观和行为则完全是一个JComboBox的下拉列表行为。所以,这个“可自动完成的JTextField”应当是一个JTextField和JComboBox下拉列表部分的结合体。
     经过以上分析,思路基本确定:它本质是一个JTextField,但是又结合利用了一个JComboBox的下拉列表。二者合而为一即可。那么是从谁继承呢?JTextField吗?
     仔细想想,继承并不是最好的方法。俗话说:继承是混蛋。能不继承就不要继承。为啥呢?继承,意味着别人只能继承你的类,才能使用这一功能。假如你的项目已经写了一万多个界面,想给这里面的一些文本框增加这种智能提示功能,难道要对所有代码进行修改,让那些东西重新继承你的类吗?这无疑是个烂主意。所以,那些刚学会OO的童鞋,总是喜欢动不动就要继承的思路,并不妥当。如果我们只是提供一个Util方法,对已经存在的普通JTextField实例处理一下,就可以具有智能提示,岂不是更好?
     要做到JTextField和JComboBox这两个组件的结合,这里使用了非常“怪异”的一个绝招,你绝对想不到:把一个JComboBox塞到JTextField的身体里面,并让它看不见。看一下代码:
1 JTextField txtInput = new JTextField();
2 JComboBox cbInput = new JComboBox();
3 txtInput.setLayout(new BorderLayout());
4 txtInput.add(cbInput, BorderLayout.SOUTH);

     什么?把JTextField设置一个layout?并且还add一个JComboBox且放在SOUTH?我相信你绝对闻所未闻这种事情。怎么看都是怪胎啊。不要紧,把JComboBox的高度变成0,别人就看不出破绽了:
1 JComboBox cbInput = new JComboBox(model) {
2     public Dimension getPreferredSize() {
3         return new Dimension(super.getPreferredSize().width, 0);
4     }
5 };

     虽然combo看不见,但是它实实在在存在于文本框的身体里,且位于其下方。我们的思路是:当文本框输入内容时,我们判断下拉框中是否有符合要求的列表,如果有,就马上主动弹出下拉;否则就让下拉消失。
     监控文本框输入并不难:给它的document增加listener就行了。这里我们使用了“不区分大小写”、“和输入字符串开头相同的项”的规则进行过滤。将所有备选字符串置于单独一个数组中,每次用户输入后,动态过滤出符合条件的字符串,动态添加到JComboBox中,并将其下拉列表Popup出来即可:
 1 txtInput.getDocument().addDocumentListener(new DocumentListener() {
 2     public void insertUpdate(DocumentEvent e) {
 3         updateList();
 4     }
 5 
 6     public void removeUpdate(DocumentEvent e) {
 7         updateList();
 8     }
 9 
10     public void changedUpdate(DocumentEvent e) {
11         updateList();
12     }
13 
14     private void updateList() {
15         setAdjusting(cbInput, true);
16         model.removeAllElements();
17         String input = txtInput.getText();
18         if (!input.isEmpty()) {
19             for (String item : items) {
20                 if (item.toLowerCase().startsWith(input.toLowerCase())) {
21                     model.addElement(item);
22                 }
23             }
24         }
25         cbInput.setPopupVisible(model.getSize() > 0);
26         setAdjusting(cbInput, false);
27     }
28 });

    此外,为了更方便操作,我们再增加几个快捷键:当输入ESC,主动关掉下拉列表;当输入回车或空格,直接把第一项符合要求的字符串输入文本框:
 1 txtInput.addKeyListener(new KeyAdapter() {
 2 
 3     @Override
 4     public void keyPressed(KeyEvent e) {
 5         setAdjusting(cbInput, true);
 6         if (e.getKeyCode() == KeyEvent.VK_SPACE) {
 7             if (cbInput.isPopupVisible()) {
 8                 e.setKeyCode(KeyEvent.VK_ENTER);
 9             }
10         }
11         if (e.getKeyCode() == KeyEvent.VK_ENTER || e.getKeyCode() == KeyEvent.VK_UP || e.getKeyCode() == KeyEvent.VK_DOWN) {
12             e.setSource(cbInput);
13             cbInput.dispatchEvent(e);
14             if (e.getKeyCode() == KeyEvent.VK_ENTER) {
15                 txtInput.setText(cbInput.getSelectedItem().toString());
16                 cbInput.setPopupVisible(false);
17             }
18         }
19         if (e.getKeyCode() == KeyEvent.VK_ESCAPE) {
20             cbInput.setPopupVisible(false);
21         }
22         setAdjusting(cbInput, false);
23     }
24 });

      还有一个非常重要的技术要点要进行说明。在popup列表弹出的时候,我们希望用箭头能够上下移动选择条目,但是又同时希望当前的光标和焦点不要离开文本框。这个好像非常难实现啊!请看我们是如何做到的:在监控到上下箭头输入时候,把当前的键盘事件的source动态修改为JComboBox,然后派发给JComboBox。也就是说,本来事件是输入到文本框的,我们把邮递员拦截下来,把收件人改一下,继续交给邮递员进行派发。这样,就做到“移花接木”了:
1 if (e.getKeyCode() == KeyEvent.VK_ENTER || e.getKeyCode() == KeyEvent.VK_UP || e.getKeyCode() == KeyEvent.VK_DOWN) {
2     e.setSource(cbInput);
3     cbInput.dispatchEvent(e);
4     if (e.getKeyCode() == KeyEvent.VK_ENTER) {
5         txtInput.setText(cbInput.getSelectedItem().toString());
6         cbInput.setPopupVisible(false);
7     }
8 }

      最后,为了演示效果,我们放一些数据到下拉列表中。放什么呢?自己造假数据太麻烦了,干脆用Java中的“所有国家”的数据吧,简单省事:
1 Locale[] locales = Locale.getAvailableLocales();
2 for (int i = 0; i < locales.length; i++) {
3     String item = locales[i].getDisplayName();
4     items.add(item);
5 }

      最后看一下效果,完全符合我们的预期:
      以下是完整代码:
  1 import java.awt.*;
  2 import java.awt.event.*;
  3 import java.util.*;
  4 
  5 import javax.swing.*;
  6 import javax.swing.event.*;
  7 
  8 import twaver.*;
  9 
 10 public class Test {
 11 
 12     public static void main(String[] args) throws Exception {
 13         UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
 14         JFrame frame = new JFrame();
 15         frame.setTitle("Auto Completion Test");
 16         frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
 17         frame.setBounds(200, 200, 500, 400);
 18 
 19         ArrayList<String> items = new ArrayList<String>();
 20         Locale[] locales = Locale.getAvailableLocales();
 21         for (int i = 0; i < locales.length; i++) {
 22             String item = locales[i].getDisplayName();
 23             items.add(item);
 24         }
 25         JTextField txtInput = new JTextField();
 26         setupAutoComplete(txtInput, items);
 27         txtInput.setColumns(30);
 28         frame.getContentPane().setLayout(new FlowLayout());
 29         frame.getContentPane().add(txtInput, BorderLayout.NORTH);
 30         frame.setVisible(true);
 31     }
 32 
 33     private static boolean isAdjusting(JComboBox cbInput) {
 34         if (cbInput.getClientProperty("is_adjusting") instanceof Boolean) {
 35             return (Boolean) cbInput.getClientProperty("is_adjusting");
 36         }
 37         return false;
 38     }
 39 
 40     private static void setAdjusting(JComboBox cbInput, boolean adjusting) {
 41         cbInput.putClientProperty("is_adjusting", adjusting);
 42     }
 43 
 44     public static void setupAutoComplete(final JTextField txtInput, final ArrayList<String> items) {
 45         final DefaultComboBoxModel model = new DefaultComboBoxModel();
 46         final JComboBox cbInput = new JComboBox(model) {
 47             public Dimension getPreferredSize() {
 48                 return new Dimension(super.getPreferredSize().width, 0);
 49             }
 50         };
 51         setAdjusting(cbInput, false);
 52         for (String item : items) {
 53             model.addElement(item);
 54         }
 55         cbInput.setSelectedItem(null);
 56         cbInput.addActionListener(new ActionListener() {
 57             @Override
 58             public void actionPerformed(ActionEvent e) {
 59                 if (!isAdjusting(cbInput)) {
 60                     if (cbInput.getSelectedItem() != null) {
 61                         txtInput.setText(cbInput.getSelectedItem().toString());
 62                     }
 63                 }
 64             }
 65         });
 66 
 67         txtInput.addKeyListener(new KeyAdapter() {
 68 
 69             @Override
 70             public void keyPressed(KeyEvent e) {
 71                 setAdjusting(cbInput, true);
 72                 if (e.getKeyCode() == KeyEvent.VK_SPACE) {
 73                     if (cbInput.isPopupVisible()) {
 74                         e.setKeyCode(KeyEvent.VK_ENTER);
 75                     }
 76                 }
 77                 if (e.getKeyCode() == KeyEvent.VK_ENTER || e.getKeyCode() == KeyEvent.VK_UP || e.getKeyCode() == KeyEvent.VK_DOWN) {
 78                     e.setSource(cbInput);
 79                     cbInput.dispatchEvent(e);
 80                     if (e.getKeyCode() == KeyEvent.VK_ENTER) {
 81                         txtInput.setText(cbInput.getSelectedItem().toString());
 82                         cbInput.setPopupVisible(false);
 83                     }
 84                 }
 85                 if (e.getKeyCode() == KeyEvent.VK_ESCAPE) {
 86                     cbInput.setPopupVisible(false);
 87                 }
 88                 setAdjusting(cbInput, false);
 89             }
 90         });
 91         txtInput.getDocument().addDocumentListener(new DocumentListener() {
 92             public void insertUpdate(DocumentEvent e) {
 93                 updateList();
 94             }
 95 
 96             public void removeUpdate(DocumentEvent e) {
 97                 updateList();
 98             }
 99 
100             public void changedUpdate(DocumentEvent e) {
101                 updateList();
102             }
103 
104             private void updateList() {
105                 setAdjusting(cbInput, true);
106                 model.removeAllElements();
107                 String input = txtInput.getText();
108                 if (!input.isEmpty()) {
109                     for (String item : items) {
110                         if (item.toLowerCase().startsWith(input.toLowerCase())) {
111                             model.addElement(item);
112                         }
113                     }
114                 }
115                 cbInput.setPopupVisible(model.getSize() > 0);
116                 setAdjusting(cbInput, false);
117             }
118         });
119         txtInput.setLayout(new BorderLayout());
120         txtInput.add(cbInput, BorderLayout.SOUTH);
121     }
122 }

评论

# re: 让JTextField添加“自动完成”功能  回复  更多评论   

2012-06-12 14:37 by 杭州房产
老师说的真的很清楚,对于我们想要学习变成的人真的很有帮助,谢谢老师。

# re: 让JTextField添加“自动完成”功能  回复  更多评论   

2012-06-18 09:25 by allenny
几行

# re: 让JTextField添加“自动完成”功能  回复  更多评论   

2012-07-05 10:13 by 唐军虎
谁都知道,继承是面向对象的基本思想之一,不鼓励继承,我怀疑作者的水平。
全部的代码,从上到下,过程执行,有几个函数,但是总体来说,封装性极差。

# re: 让JTextField添加“自动完成”功能  回复  更多评论   

2012-07-05 10:15 by 唐军虎
另外,程序的可读性极差,这不是用来欣赏的代码,而是用来害人的代码,不看为好。

只有注册用户登录后才能发表评论。


网站导航: