`
cobrano1
  • 浏览: 28588 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

 

 

 

分享到:
评论
5 楼 cobrano1 2009-08-17  
witcheryne 写道
kungstriving 写道
不错,我们项目也准备使用ext-gwt来进行前台页面开发,请问下,前台页面的具体形状、大小、位置等怎么设置?是像java中的swing那样做吗?还是有其他方法(通过xml?css?),我很迷惑。
有没有想过的eclipse插件可以做这些工作?谢谢


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支持的更好。
4 楼 witcheryne 2009-06-18  
kungstriving 写道
不错,我们项目也准备使用ext-gwt来进行前台页面开发,请问下,前台页面的具体形状、大小、位置等怎么设置?是像java中的swing那样做吗?还是有其他方法(通过xml?css?),我很迷惑。
有没有想过的eclipse插件可以做这些工作?谢谢


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等其他很好的插件,非常容易扩展..
3 楼 fengjinfu 2009-06-06  
kungstriving 写道
不错,我们项目也准备使用ext-gwt来进行前台页面开发,请问下,前台页面的具体形状、大小、位置等怎么设置?是像java中的swing那样做吗?还是有其他方法(通过xml?css?),我很迷惑。
有没有想过的eclipse插件可以做这些工作?谢谢

设置组件的大小、位置一般采用java.swing那样做。设置组件的样式比如颜色,采用css的方式。GWT组件中可以设置CSS样式。
2 楼 kungstriving 2009-05-22  
不错,我们项目也准备使用ext-gwt来进行前台页面开发,请问下,前台页面的具体形状、大小、位置等怎么设置?是像java中的swing那样做吗?还是有其他方法(通过xml?css?),我很迷惑。
有没有想过的eclipse插件可以做这些工作?谢谢
1 楼 spc 2009-03-26  
感觉是杀鸡用牛刀啊。

相关推荐

    gwt-ext-tree

    GWT-Ext-Tree 是一个基于 Google ...总之,GWT-Ext-Tree 是 GWT 平台上构建高效、美观、交互性强的树形界面的重要工具。它的强大功能和灵活性使得开发者能够创建满足各种需求的树形视图,提升 RIA 应用程序的用户体验。

    gwt-ex t学习必备资料

    gwt ext gwt-ext gwt-ex t学习必备资料gwt ext gwt-ext gwt-ex t学习必备资料gwt ext gwt-ext gwt-ex t学习必备资料gwt ext gwt-ext gwt-ex t学习必备资料gwt ext gwt-ext gwt-ex t学习必备资料gwt ext gwt-ext gwt-...

    gwt-servlet-2.3.0.jar

    GWT-Servlet是GWT框架的一部分,主要负责处理服务器端的交互。`gwt-servlet-2.3.0.jar`是GWT 2.3.0版本的Servlet库,这个库包含了运行GWT应用所需的服务器端组件。 在GWT的应用程序中,客户端部分通常由JavaScript...

    gwt-dev-plugin-x86-对ie浏览器使用

    标题中的"gwt-dev-plugin-x86-对ie浏览器使用"指的是一个特定的GWT开发插件,适用于x86架构的机器,并且是专为Internet Explorer(IE)浏览器设计的。在GWT的早期版本中,为了实现Java到JavaScript的编译和在浏览器...

    GWT-Developer-Plugin

    GWT-Developer-Plugin

    gwt-dev-plugin

    gwt-dev-plugin

    gwt-dev-windows.jar

    gwt-dev-windows.jar 大小:9.60 MB

    gwt-maven-archetype source code

    标题 "gwt-maven-archetype source code" 暗示了我们正在讨论一个与Google Web Toolkit (GWT) 和 Maven 相关的项目模板。GWT 是一个用于开发富互联网应用程序(RIA)的开放源代码框架,它允许开发者使用 Java 语言...

    gwt-windows-1.7.1.zip

    gwt-windows-1.7.1.zipgwt-windows-1.7.1.zipgwt-windows-1.7.1.zipgwt-windows-1.7.1.zipgwt-windows-1.7.1.zipgwt-windows-1.7.1.zip

    gwt-benchmark-viewer.jar

    gwt-benchmark-viewer.jar

    gwt-dev-plugin for IE、FireFox、Chrome

    2. **gwt-dev-plugin-x86.msi**:这是一个Windows安装程序包,用于32位系统。MSI是Microsoft Installer的文件格式,用户可以通过双击此文件进行标准的Windows安装过程。 3. **gwt-dev-plugin.xpi**:这是Firefox...

    Gwt-Ext基础-中级-进阶

    Gwt-Ext是一种基于Google Web Toolkit (GWT)的JavaScript库,它扩展了GWT的功能,提供了丰富的用户界面组件和更美观的外观。这个压缩包包含的资源是关于Gwt-Ext的基础、中级和进阶学习资料,适合想要深入理解和应用...

    gwt - dev - firefox16 plugin

    gwt - dev - firefox16 plugin

    gwt-dev-plugin-1.26-rc1.xpi for firefox插件

    原地址如下 http://google-web-toolkit.googlecode.com/files/gwt-dev-plugin-1.26-rc1.xpi

    Gwt-ext学习笔记之基础篇

    ### Gwt-ext学习笔记之基础篇 #### 一、安装CypalStudio工具 为了能够开始Gwt-ext的学习之旅,首先需要确保开发环境已经搭建好。CypalStudio是一款非常实用的工具,它能帮助开发者更高效地进行GWT项目的开发。 1....

    gwt-dev-2.6.0-rc4.zip

    标题 "gwt-dev-2.6.0-rc4.zip" 暗示这是一个与Google Web Toolkit (GWT)相关的开发工具包,具体版本为2.6.0的Release Candidate 4。GWT是一个开放源代码的Java框架,用于构建和优化富互联网应用程序(RIA)。这个...

    gwt-windows-1.4.60.zip

    标题中的"gwt-windows-1.4.60.zip"可能是一个GWT的发行版本,适用于Windows操作系统,版本号为1.4.60。这个压缩包可能包含了GWT库的所有组件,包括开发者需要的JAR文件、文档、示例代码以及其他必要的资源,使得...

    gwt-windows-1.7.1

    "gwt-windows-1.7.1"指的是GWT的一个特定版本,即1.7.1,适配于Windows操作系统。这个版本可能包含了GWT开发所需的库文件、编译器、运行时环境和其他相关工具。 在GWT 1.7.1中,有几个关键的知识点值得深入探讨: ...

    GWT—window-sdk

    3. **UI构建工具**:GWT提供了Widget库,包含了大量的用户界面组件,如按钮、表单、表格等,可以快速构建出复杂的用户界面。 4. **开发与调试工具**:GWT SDK包含了开发和调试工具,如Development Mode,可以在本地...

    gwt-comet-jar包+实例+source.jar包,

    里面东西很多,都是关于GWT-COMET的内容,实现gwt的服务器推技术,包括gwt-comet-examples-...gwt-comet-1.2.3.jar:jar包,gwt-example:聊天实例源代码(.java的),gwt-event-source-1.0.0.jar:comet事件源jar包。

Global site tag (gtag.js) - Google Analytics