最近对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-Tree 是一个基于 Google ...总之，GWT-Ext-Tree 是 GWT 平台上构建高效、美观、交互性强的树形界面的重要工具。它的强大功能和灵活性使得开发者能够创建满足各种需求的树形视图，提升 RIA 应用程序的用户体验。
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是GWT框架的一部分，主要负责处理服务器端的交互。`gwt-servlet-2.3.0.jar`是GWT 2.3.0版本的Servlet库，这个库包含了运行GWT应用所需的服务器端组件。 在GWT的应用程序中，客户端部分通常由JavaScript...
标题中的"gwt-dev-plugin-x86-对ie浏览器使用"指的是一个特定的GWT开发插件，适用于x86架构的机器，并且是专为Internet Explorer（IE）浏览器设计的。在GWT的早期版本中，为了实现Java到JavaScript的编译和在浏览器...
GWT-Developer-Plugin
gwt-dev-plugin
gwt-dev-windows.jar 大小:9.60 MB
标题 "gwt-maven-archetype source code" 暗示了我们正在讨论一个与Google Web Toolkit (GWT) 和 Maven 相关的项目模板。GWT 是一个用于开发富互联网应用程序（RIA）的开放源代码框架，它允许开发者使用 Java 语言...
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
2. **gwt-dev-plugin-x86.msi**：这是一个Windows安装程序包，用于32位系统。MSI是Microsoft Installer的文件格式，用户可以通过双击此文件进行标准的Windows安装过程。 3. **gwt-dev-plugin.xpi**：这是Firefox...
Gwt-Ext是一种基于Google Web Toolkit (GWT)的JavaScript库，它扩展了GWT的功能，提供了丰富的用户界面组件和更美观的外观。这个压缩包包含的资源是关于Gwt-Ext的基础、中级和进阶学习资料，适合想要深入理解和应用...
gwt - dev - firefox16 plugin
原地址如下 http://google-web-toolkit.googlecode.com/files/gwt-dev-plugin-1.26-rc1.xpi
### Gwt-ext学习笔记之基础篇 #### 一、安装CypalStudio工具 为了能够开始Gwt-ext的学习之旅，首先需要确保开发环境已经搭建好。CypalStudio是一款非常实用的工具，它能帮助开发者更高效地进行GWT项目的开发。 1....
标题 "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。这个压缩包可能包含了GWT库的所有组件，包括开发者需要的JAR文件、文档、示例代码以及其他必要的资源，使得...
"gwt-windows-1.7.1"指的是GWT的一个特定版本，即1.7.1，适配于Windows操作系统。这个版本可能包含了GWT开发所需的库文件、编译器、运行时环境和其他相关工具。 在GWT 1.7.1中，有几个关键的知识点值得深入探讨： ...
3. **UI构建工具**：GWT提供了Widget库，包含了大量的用户界面组件，如按钮、表单、表格等，可以快速构建出复杂的用户界面。 4. **开发与调试工具**：GWT SDK包含了开发和调试工具，如Development Mode，可以在本地...
里面东西很多，都是关于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包。