通信程序中图文混排与表情选择的实现

      最近在做的一个仿QQ的通信项目中，需要实现QQ聊天界面中的表情选择和显示功能，纠结了许久，终于解决。
首先对这个流程进行分析：点击单人聊天界面上的表情按钮后，自动弹出表情选择框，单击表情框中图标，聊天界面编辑区添加上表情包中指定的表情图标，点击发送按钮后，程序获取编辑区的图文混合信息，按照通信协议传输该信息，接收方收到之后，解析该图文信息，区分开图标和文本信息，然后在己方聊天显示界面上显示表情包中指定的图标。分析清楚后就开始一步步着手解决。
      在实现过程中纠结于以下问题：1、如何显示无边框的表情选择框，表情图标如何选择和显示？？2、JTextField和JTextArea都只能用于显示文本，如何在界面的显示和编辑区域中插入图标？选用何种组件？3、点击发送按钮，发送消息时，程序如何获取显示组件中图文混发的消息，图文混合消息如何表示？4、接收消息方如何解析和重现图文混发的消息？
      查找资料后，终于找到了实现了类似Word功能的文本组件JTextPane和无边框的显示窗体JWindow，问题解决大半，剩下的就是学习其中的方法实现需要的功能。我的方法算法效率比较差，但是功能勉强实现了。
      首先找到无边框的窗体JWindow，就可以将表情作为按钮的图标布局到JWindow中，然后将表情的名称作为 ActionCommand，对JWindow中的所有按钮进行监听，至此，在聊天界面上点击表情选择按钮，就可以弹出表情选择窗。
     然后对于JTextPane jt,插入文本的方法两种，直接调用jt.setText()设置显示文本。以及先通过jt.getStyledDocument()获取StyledDocument doc,再用doc.insertString(doc.getLength(), str, null)在光标位置处插入指定文本str.插入图标方法为insertIcon(new ImageIcon(lis.get(i)))。需要注意的就是要保证插入文本或图标时光标的位置都在上次输入之后的位置，可以通过setCaretPosition(doc.getLength())方法来调整光标到当前输入的最后位置。当点击发送按钮，需要获取图文信息时，可以调用Element e=doc.getCharacterElement(int position)来获取指定位置处的元素样式，e.getName()得到样式名，分别为"content"和"icon",由此便可区分编辑区每个可编辑位置处的文本类型，jt.getText().length()获取到编辑区编辑内容的长度，空格，字符和图标都占一个。而对于图标，使用icon.getDescription()即可获取图标的来源路径信息，根据需要设置路径，即可作为标记。如此，便解决了图文混排和混排信息区分识别的问题。    

       

 
       表情选择，图文混排在一个项目中只是很小的问题，但是回想纠结过的几天还是很有感慨，最开始的情况就是大体思路想通了，但是觉得组件是小事，始终很浮躁，只想找现成的代码参考，不愿意扎扎实实去看文档。虽然知道问题其实就集中在一个组件上，但是沉不下心，所以很奇怪的在空格和图标在getText()方法中如何区分的问题上纠结了半天，后来稍微认真学习了JTextPane，发现那些纠结的问题全都有现成的方法解决。由此及彼，学习还是要扎扎实实，沉的下心，长远看才会有收获。

      

 
     啰嗦许多，关于JTextPane的示例详细学习，可以参见http://www.java2s.com。新博客，旨在改掉懒惰，拖延症，欢迎批评灌水，谢过。

 

评论

3 楼 luliangy 2012-01-27  

哈哈，我在做斗地主游戏，借鉴一下哈！

2 楼 firefly_zp 2011-10-19  

很不错，学习要稳扎稳打啊。呵呵。

1 楼 贾懂凯 2011-10-19  

不错，推荐试试swixat，一个java swing的框架