最近对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("");
}
}
分享到：
相关推荐
gwt-ext-选课系统gwt-ext-选课系统gwt-ext-选课系统gwt-ext-选课系统
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-ext-treegwt-ext-treegwt-ext-treegwt-ext-treegwt-ext-tree
GWT-Developer-Plugin
gwt代码调试插件gwt-dev-plugin-x86.msi，针对ie浏览器使用
gwt-dev-plugin
gwt-dev-windows.jar 大小:9.60 MB
gwt-servlet-2.3.0.jar
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-windows-1.7.1
gwt - dev - firefox16 plugin
gwt-dev-plugin是GWT针对浏览器的安装插件，包含IE、FireFox、Chrome的。不需要的匆下，非学习文档
原地址如下 http://google-web-toolkit.googlecode.com/files/gwt-dev-plugin-1.26-rc1.xpi
GWT-window-1.7.0 版本的sdk，实现ajax技术，一个很好的技术
里面东西很多，都是关于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包。
the Gwt Developer Plugin For Firefox
gwt-servlet-1.4.61.jar
一个非常出色的gwt实例，基于gwt-windows-1.5.2实例，是非常好的gwt经典学习实例
一个相当完整的例子，从前台客户端到后台服务器端及数据库，一步一步交你学会使用GWT-EXT