web版聊天工具開發中的一些體會（1）

這個東西做了也有一點時間了，主要涉及的有dwr，jquery，dhtmltree，以及打了點醬油的dom4j.做到一半才知道ext是幹什麼的，但是好像這第一個版本已經沒有它的施展餘地了，留到下一次好了。用到的東西比較散，除了對dwr看的比較多意外，其他的都只是兩天左右看了看，只看了需要的部分，所以瞭解不是很深，所以只能簡單的談一談感想。

[size=xx-large]1.數據庫[/size]
數據庫建的很簡單，一共7張表,暫時只用到三張

[img]http://dl.iteye.com/upload/attachment/434784/5d093a00-d456-36df-8cea-5935d3ab4e80.jpg[/img]


[size=large]2.關於dwr[/size]
dwr最大的好處是讓有點繁瑣的ajax變成了在javascript裏面寫java。但是由於頁面前端和後臺是異步的，當需要執行的函數比較複雜時，就需要同步一下，免得前端反應太“快”而沒有取得dwr返回的數據：

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

另外，dwr在執行過程中，如果在web-inf/lib下缺少某些類庫的話，eclipse的控制檯是不會報錯的，頁面前端也只是彈出一個error的提示框。今天在使用dom4j編寫一個xml文件時就遇到這個問題，這個後面後提到。

[size=xx-large]3.jquery[/size]
jquery是個很強大的框架，也支持ajax，但是dwr在這方面更強大一點，不過，在對於頁面的一些操作上，dwr的util工具就遜色很多了。w3school上的教程很詳細，不過我也沒有仔細看，一直是當成查詢手冊，想用什麼就看什麼。
我曾遇到過這個問題：

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

function f2(){
    }

在這裏f1和f2中的方法是不能相互調用的，而且在頁面的事件中，也就是onclick=""這裏是不能調用f1的方法。假如要調用怎麼辦？jquery實際上對事件的支持很強大，對於事件的定義都可以在jquery中完成，而不需要在html頁面裏面做過多的編寫，所以像f2這樣的方法是完全不需要的。如下：

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

[size=xx-large]4.dom4j + dhtmlxtree = 好友列表的動態加載[/size]
從昨天晚上到今天早上一直都在做這個事情；
[size=x-large]4.1 xml[/size]
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:節點打開時的圖片
想關的標籤屬性還有很多。

[size=x-large]4.2 基本流程[/size]
登陸成功 -- 數據庫搜索好友數據 -- 整理成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的載入