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("");
	}
}

 

 

 

感觉是杀鸡用牛刀啊。

不错，我们项目也准备使用ext-gwt来进行前台页面开发，请问下，前台页面的具体形状、大小、位置等怎么设置？是像java中的swing那样做吗？还是有其他方法（通过xml？css？），我很迷惑。
有没有想过的eclipse插件可以做这些工作？谢谢

设置组件的大小、位置一般采用java.swing那样做。设置组件的样式比如颜色，采用css的方式。GWT组件中可以设置CSS样式。

ext gwt 中可以使用布局管理器对页面进行布局.. 各种布局管理器用法都和Swing非常相似...

对于GWT Eclipse已经有了很好的 插件支持(Cypal Studio),, Eclipse中只需要配置好GWT插件即可... Ext Gwt只是gwt上的一个ExtJs的扩展,使用这个插件已经能够很好的完成代码编写和调试工作..

如果项目中使用Ext GWT 2.0的话， 此时使用的GWT版本是1.6,
对于GWT1.6版，google已经有了相应的Eclipse插件，使用非常方便...


最近公司项目在用Ext Gwt 1.X... 感觉还是没只用Ext JS方便..
如果有时间来学习Ext JS， 建议还是用Ext JS来开发, 文档支持度高,Demo很多,扩展插件也非常丰富....
可以集成jQuery等其他很好的插件，非常容易扩展..

谢谢楼上回复，  最近google更新了开发gwt的工具， 有兴趣可以下载试试，比cypal studio更完善， 对eclipse支持的更好。