web版聊天工具开发中的一些体验（1）

web版聊天工具开发中的一些体会（1）
   这个东西做了也有一点时间了，主要涉及的有dwr，jquery，dhtmltree，以及打了点酱油的dom4j.做到一半才知道ext是干什么的，但是好像这第一个版本已经没有它的施展余地了，留到下一次好了。用到的东西比较散，除了对dwr看的比较多意外，其他的都只是两天左右看了看，只看了需要的部分，所以了解不是很深，所以只能简单的谈一谈感想。

1.数据库
数据库建的很简单，一共7张表,暂时只用到三张




2.关于dwr
dwr最大的好处是让有点繁琐的ajax变成了在javascript里面写java。但是由于页面前端和后台是异步的，当需要执行的函数比较复杂时，就需要同步一下，免得前端反应太“快”而没有取得dwr返回的数据：

dwr.util.setAsync(false);//dwr语句dwr.util.setAsync(true);

另外，dwr在执行过程中，如果在web-inf/lib下缺少某些类库的话，eclipse的控制台是不会报错的，页面前端也只是弹出一个error的提示框。今天在使用dom4j编写一个xml文件时就遇到这个问题，这个后面后提到。

3.jquery
jquery是个很强大的框架，也支持ajax，但是dwr在这方面更强大一点，不过，在对于页面的一些操作上，dwr的util工具就逊色很多了。w3school上的教程很详细，不过我也没有仔细看，一直是当成查询手册，想用什么就看什么。
我曾遇到过这个问题：

$(document).ready(function(){   function f1(){   }});function f2(){    }

在这里f1和f2中的方法是不能相互调用的，而且在页面的事件中，也就是onclick=""这里是不能调用f1的方法。假如要调用怎么办？jquery实际上对事件的支持很强大，对于事件的定义都可以在jquery中完成，而不需要在html页面里面做过多的编写，所以像f2这样的方法是完全不需要的。如下：

$("#[属性ID]").click(function(){  //事件方法});

4.dom4j + dhtmlxtree = 好友列表的动态加载
从昨天晚上到今天早上一直都在做这个事情；
4.1 xml
dhtmlxtree树形组件的内容完全可以有xml文件直接加载得到
xml一般格式如下：

<?xml version="1.0" encoding="UTF-8"?><tree id="0">  <item text="我的好友" id="list1" im0="" im1="" im2="">    <item text="SwineLP" id="friend10001" im0="" im1="" im2=""/>  </item></tree>

tree标签是必须的，id必须与

tree=new dhtmlXTreeObject("[div id]","200%","200%","treeid");

中的第四个参数treeid一致(我今天在这里就吃了亏，老是说我没有父节点什么的)
im0:若无子节点是的图片
im1:节点未打开时的图片
im2:节点打开时的图片
想关的标签属性还有很多。

4.2 基本流程
登陆成功 -- 数据库搜索好友数据 -- 整理成xml格式字符串 -- 通过dwr发送到页面 -- 通过tree.loadXMLString([xmlstring],[callback])实现列表的加载



这里就直接贴代码了

数据库读取:

/** * 获得xxno用户的当前好友列表信息map * @param xxno * @return */public static HashMap<String,ArrayList<User>> getFriends(String xxno){HashMap<String,ArrayList<User>> friendList = new HashMap<String,ArrayList<User>>();try{Connection conn = ConnFactory.getConn();//获得列表数据String sql = "select seryname from series where userno = ?";PreparedStatement pstmt = conn.prepareStatement(sql);pstmt.setString(1, xxno);ResultSet smrs = pstmt.executeQuery();while(smrs.next()){friendList.put(smrs.getString(1), null);}sql = "select s.seryname,f.xxno,f.remark,u.nickname,u.state from series as s,friends as f,user as u where s.seryid = f.seryid and f.xxno = u.xxno and s.userno = ?";pstmt = conn.prepareStatement(sql);pstmt.setString(1, xxno);ResultSet frs = pstmt.executeQuery();while(frs.next()){String seryname = frs.getString(1);if(  null == friendList.get(seryname)){ArrayList<User> flist = new ArrayList<User>();friendList.put(seryname, flist);}//打包好友信息，加入好友队列中User user = new User();user.setXxno(frs.getString(2));user.setRemark(frs.getString(3));user.setNickname(frs.getString(4));user.setState(frs.getByte(5));friendList.get(seryname).add(user);}return friendList;}catch(Exception ef){Diary.println(ef, "用户注册时:");return null;}}

整理成xml格式字符串

public static String getFriendList(String xxno){Document doc = DocumentHelper.createDocument();HashMap<String,ArrayList<User>> friendList = UserDao.getFriends(xxno);Set<String> series = friendList.keySet();//将好友列表信息打包成xml格式文件Element tree = doc.addElement("tree");tree.addAttribute("id", "0");int col = 0;//好友分类数for(String seryname : series){ArrayList<User> flist = friendList.get(seryname);Element sery = tree.addElement("item");sery.addAttribute("text", seryname);sery.addAttribute("id", "list" + ++col);sery.addAttribute("im0","serypic.jpg");sery.addAttribute("im1","serypic.jpg");sery.addAttribute("im2","serypic.jpg");while(flist.size() > 0){User user = flist.remove(0);Element f = sery.addElement("item");if(null == user.getRemark()){f.addAttribute("text", user.getNickname());}else{f.addAttribute("text", user.getRemark() + "("+ user.getNickname() +")");}f.addAttribute("id", "friend" + user.getXxno());f.addAttribute("im0", "head.jpg");f.addAttribute("im1", "head.jpg");f.addAttribute("im2", "head.jpg");}}return doc.asXML();}

这里本来用拼接字符串就能够得到的，但是还是借用了一下dom4j，哈哈，看起来爽一点。


然后是dwr层

public String getFriendsXML(String xxno){return FriendsList.getFriendList(xxno);}

最后就是在页面里面调用了

$(document).ready(function(){  //获得好友xml  var xxno = $("#xxno").html();  dwr.engine.setAsync(false);  var treexml = XXIMPage.getFriendsXML(xxno);  dwr.engine.setAsync(true);    var tree = new dhtmlXTreeObject("friendtree","100%","100%",0);  tree.setImagePath("images/");  tree.loadXMLString(treexml, function(){  alert("载入成功!");  });  tree.enableTreeLines(false);  tree.setImageArrays("plus","plus_ar.gif","plus_ar.gif","plus_ar.gif","plus_ar.gif");  tree.setImageArrays("minus","minus_ar.gif","minus_ar.gif","minus_ar.gif","minus_ar.gif");  tree.setStdImages("plus_ar.gif","minus_ar.gif","plus_ar.gif");});

tree中的setImageArray()和setStdImages()的方法还有问题，ignore！！关键在于列表xml的载入

查看更多 下一篇