Ext Gwt 实用例子--类似meebo的聊天界面

    最近对Google 出的gwt工具很感兴趣， 前段时间开发的一个项目由于没有美工，那界面真的惨不忍睹，呵呵， 这几天闲着没事我就想起了这个AJAX工具， 用JAVA代码就能写html界面真是不错， 我是那种不怕写代码，就怕没把握那种人，用html+css+js， 我实在是没把握写出好看好用的界面，  下面的代码是Ext Gwt，  它是在Gwt api 基础上的扩展， 既有ExtJS 的漂亮强大的界面，又有Gwt 高效，开发容易的优点。

 

代码分为三个包， 其中com.maxwell.chatroom包是放gwt需要的静态页面，资源，和*.gwt.xml的配置文件的。

com.maxwell.chatroom.client 包括主程序类和主窗口类

com.maxwell.chatroom.client.component 包括Tree容器，聊天窗口

 

另外需要注意的事， 你需要下载gwt的SDK， 和  ext gwt  的包 ，你需要把gxt的目录下 samples\resources\src\com\extjs\gxt\samples\resources\public   目录下所有的资源拷贝到自己的工程com.maxwell.chatroom包中（不需要那个data.xml配置文件）

 

我的项目是一个Dynmic Web Project， 里面的Gwt module是通过Cypal Studio for Gwt 插件生成的，你也可以直接通过

gwt 的小工具生成项目和模块， 这个过程就不介绍了，IBM development 上面有相关的介绍。

 

代码：

下面是Gwt的配置文件 Main.gwt.xml

 

<?xml version="1.0" encoding="UTF-8" standalone="no"?><module>

	<inherits name="com.extjs.gxt.ui.GXT"/>
	<entry-point class="com.maxwell.chatroom.client.Main"/>

	<stylesheet src="Startup.css"/>
	<stylesheet src="Resources.css"/>

	
</module>

  

 

启动类：

 

package com.maxwell.chatroom.client;

import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.widget.Info;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.form.FormPanel;
import com.extjs.gxt.ui.client.widget.form.Radio;
import com.extjs.gxt.ui.client.widget.form.RadioGroup;
import com.extjs.gxt.ui.client.widget.form.TextField;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;


/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class Main implements EntryPoint{

	/**
	 * This is the entry point method.
	 */
	
	public void onModuleLoad() {
		final FormPanel fp = new FormPanel();
		fp.setAutoWidth(true);
		fp.setHeading("请登录");
		final TextField<String> username = new TextField<String>();
		username.setFieldLabel("姓名");
		username.setAllowBlank(false);
		username.setMaxLength(10);
		fp.add(username);

		Radio male = new Radio();
		male.setBoxLabel("男");
		male.setValue(true);
		Radio female = new Radio();
		female.setBoxLabel("女");
		final RadioGroup gender = new RadioGroup();
		gender.setFieldLabel("性别");
		gender.add(male);
		gender.add(female);
		fp.add(gender);
		fp.addButton(new Button("登陆", new SelectionListener<ButtonEvent>() {
			public void componentSelected(ButtonEvent ce) {
				if (fp.isValid()) {
					
					fp.disable();
					Info.display("提示","maxwell登陆了");
					MainWindow win=new MainWindow();
					win.show();					
				}
			}
		}));
		RootPanel.get().add(fp);
	}
}

 主窗口：

package com.maxwell.chatroom.client;

import com.extjs.gxt.ui.client.event.WindowEvent;
import com.extjs.gxt.ui.client.event.WindowListener;
import com.extjs.gxt.ui.client.widget.Info;
import com.extjs.gxt.ui.client.widget.Window;
import com.extjs.gxt.ui.client.widget.form.FormPanel;
import com.extjs.gxt.ui.client.widget.toolbar.SeparatorToolItem;
import com.extjs.gxt.ui.client.widget.toolbar.TextToolItem;
import com.extjs.gxt.ui.client.widget.toolbar.ToolBar;
import com.google.gwt.user.client.ui.RootPanel;
import com.maxwell.chatroom.client.component.TreePanel;


public class MainWindow extends Window {


	public MainWindow() {
		super();
		init();
		initComponent();

	}
	private void init(){
		setMaximizable(true);  
		setHeading("聊天室");  
		setSize(200,350);
		setCloseAction(null);
		addWindowListener(new WindowListener(){
			public void windowClose(WindowEvent we) {
				// TODO Auto-generated method stub
				FormPanel fp=(FormPanel) RootPanel.get().getWidget(0);
				fp.enable();
				
				Info.display("提示","maxwell退出了");
				super.windowClose(we);
			}});
			
		
		
	}
	private void initComponent(){
		ToolBar toolBar = new ToolBar();  
		this.setTopComponent(toolBar);
		
		TextToolItem item = new TextToolItem();  
		item.setIconStyle("icon-connect");  
		toolBar.add(item);  
		toolBar.add(new SeparatorToolItem());
		
		TreePanel tp=new TreePanel();
		add(tp);
	}
	
}

 

 主窗口里面的树状列表，显示在线用户的

package com.maxwell.chatroom.client.component;

import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.event.TreeEvent;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.Window;
import com.extjs.gxt.ui.client.widget.tree.Tree;
import com.extjs.gxt.ui.client.widget.tree.TreeItem;
import com.google.gwt.user.client.Event;

public class TreePanel extends ContentPanel {
	private Tree tree;

	public TreePanel() {
		init();
		initComponents();
		initEventHandle();

	}

	private void init() {
		tree = new Tree();
		this.setHeading("Chat");
		this.setBodyBorder(false);
	}

	private void initComponents() {
		TreeItem family = new TreeItem("Family");
		tree.getRootItem().add(family);
		/* 子树内容 */
		family.add(newItem("Darrell", "user"));
		family.add(newItem("Maro", "user-girl"));
		family.add(newItem("Lia", "user-kid"));
		family.add(newItem("Alec", "user-kid"));
		family.add(newItem("Andrew", "user-kid"));
		family.setExpanded(true);

		TreeItem friends = new TreeItem("Friends");
		tree.getRootItem().add(friends);
		/* 子树内容 */
		friends.add(newItem("Bob", "user"));
		friends.add(newItem("Mary", "user-girl"));
		friends.add(newItem("Sally", "user-girl"));
		friends.add(newItem("Jack", "user"));
		friends.setExpanded(true);
		add(tree);
	}

	private TreeItem newItem(String text, String iconStyle) {
		TreeItem item = new TreeItem(text);
		item.setIconStyle(iconStyle);
		return item;
	}

	private void initEventHandle() {
		Listener<TreeEvent> listener = new Listener<TreeEvent>() {
			public void handleEvent(TreeEvent be) {
				TreeItem item = be.tree.getSelectedItem();
				if (item.isLeaf()) {
					Window win = new DialogWindow("1",item.getText());
					win.show();
				}
			}
		};
		tree.addListener(Event.ONCLICK, listener);
	}

}

 

 

双击用户名后， 显示一个聊天窗口，以下代码：

package com.maxwell.chatroom.client.component;

import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.Style.Orientation;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.KeyListener;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.widget.Window;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.form.TextArea;
import com.extjs.gxt.ui.client.widget.layout.RowLayout;
import com.extjs.gxt.ui.client.widget.toolbar.TextToolItem;
import com.extjs.gxt.ui.client.widget.toolbar.ToolBar;


public class DialogWindow extends Window {
//	private CometServiceAsync cometService;
	private class MselectListener extends SelectionListener<ButtonEvent> {
		public void componentSelected(ButtonEvent ce) {
			handleSendEvent();
		}
	}
	private class MkeyListener extends KeyListener{
		public void componentKeyPress(ComponentEvent event) {
			if(event.getKeyCode()==10&&event.isControlKey()){
				handleSendEvent();
			}
		}
		
	}
	private StringBuilder sb;
	private TextArea input;
	private TextArea history;
	private String id;
	private String name;

	public DialogWindow(String id, String name) {
		this.id = id;
		this.name = name;
		init();
		initComponent();
		
	}

	private void init() {
		this.setHeading("与" + name + "的对话");
		this.setLayout(new RowLayout(Orientation.VERTICAL));
		this.setSize(400, 300);
		this.setFrame(true);
		this.setCollapsible(true);
		this.setCloseAction(CloseAction.CLOSE);
	}

	private void initComponent() {
		history = new TextArea();
		history.setSize("100%", "60%");
		this.add(history);

		input = new TextArea();
		input.setSize("100%", "40%");
		input.addKeyListener(new MkeyListener());
		this.add(input);

		ToolBar toolBar = new ToolBar();
		this.setTopComponent(toolBar);

		TextToolItem item = new TextToolItem();
		toolBar.add(item);
		item.setIconStyle("user");
		item.setText(name);

		this.setButtonAlign(HorizontalAlignment.RIGHT);
		this.addButton(new Button("发送",new MselectListener()));

	}
	private void handleSendEvent(){
		if (!input.getValue().trim().equals("")) {
			String content=name + ":"+input.getValue() + "\n";
			String dialog = history.getValue()==null?content:history.getValue()+content;
			history.setValue(dialog);
			
		}
		input.setValue("");
	}
}