随便写着玩玩.不要太认真哦^^
这里就不废话了,假设你的 eclipse 以及 Google Plugin for Eclipse 都安装好了
下载地址:http://code.google.com/intl/zh-CN/webtoolkit/download.html
这里强调下就是说GWT Designer其实没必要安装..
然后就是 gxt的下载地址(2.2.4是在gwt2.3上面运行的,估计在gwt2.2.0上面运行也是没问题的.不过我没升级)
http://dev.sencha.com/deploy/gxt-2.2.3.zip
我的开发环境组合是 eclipse3.6+gwt2.2.0+gxt(ext-gwt)2.2.3-gwt22+spring2.5
一般来说,这个时候安装Google Plugin for Eclipse后默认的gwt版本是2.3的,如果你用这个版本的gwt的话,那么gxt应该去下载
2.2.4的版本就可以了
如果按照我现在的配置环境的话,你需要修改一下gwt版本...
把下载下来的gwt2.2.0的sdk解压后,点击eclipse的
window->Preferences->Google->Web Toolkit
将gwt2.2.0添加进来即可
然后就是新建项目了,创建时候注意选择gwt的版本,然后取消掉GAE的支持即可.
项目创建好了,我们就直接来运行下看看能不能正常显示吧.
展开client包,对到你和你项目同名的java类点击右键->run as->web Application
这时,注意控制台输出(貌视什么都没输出--!),点击控制台旁边的选项卡
对到这个url地址点右键->Open就可以啦~~不出意外的话,你应该能在浏览器里面看到点东西...这个没什么CSS装饰的页面是不是
有点难看啊XD..没事,呆会就把他改造成gxt版的吧:)
如果你是第一次运行gwt程序的话,会被提示需要下载一个GWT Developer Plugin
下面附件里面送一个在chrome上面用的插件..有时候"长城"扯拐..导致google的HTTPS不能访问~
如果你用IE6的话.................................OTZ
接下来,加入gxt的功能吧.
1.展开war/WEB-INF/lib,把下载的gxt2.2.3解压,然后把里面的gxt-2.2.3-gwt22.jar复制进来,然后添加到classpath即可.
2.把gxt的一些资源文件导入进来.具体位置在解压包中的\resources这文件夹中.直接复制到工程的war中.我这里是在war下建立了一个gxt文件夹来存放这些资源.
3.打开war下的GoogleMapV3.html,在<head>中添加css进来就可以了.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="GoogleMapV3.css">
<link rel="stylesheet" type="text/css" href="gxt/css/gxt-all.css" />
<title>Web Application Starter Project</title>
<script type="text/javascript" language="javascript" src="googlemapv3/googlemapv3.nocache.js"></script>
</head>
<body>
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
</body>
</html>
4.添加gxt模块到项目中,我这里修改的是GoogleMapV3.gwt.xml文件
<inherits name="com.extjs.gxt.ui.GXT" />
5.然后呢,打开GoogleMapV3.java(你的可能不是这个名字),里面好多代码哦..老火的很..我第一次用的gwt1.6都没这么多..不管了
这些个类啊是干啥子的了,先删~~~只留下下面的代码就好了~这个onModuleLoad就是入口了.
public class GoogleMapV3 implements EntryPoint {
public void onModuleLoad() {
}
}
好了,其实gxt和gwt的区别就是gxt中的button什么的东西都是有CSS装饰过,有报表,有比较炫的效果等等~,比较好看..然后就是gxt中的事件处理和gwt的稍微有点区别(其实只是代码的样子不一样)~不过在gxt第3版(预览版)中,gxt把事件处理模式改成和gwt一样了.
6.最后添加一些代码进去
import com.extjs.gxt.ui.client.GXT;
import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.util.Theme;
import com.extjs.gxt.ui.client.widget.MessageBox;
import com.extjs.gxt.ui.client.widget.Viewport;
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.TextField;
import com.extjs.gxt.ui.client.widget.layout.CenterLayout;
import com.extjs.gxt.ui.client.widget.layout.FormData;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.RootPanel;
public class GoogleMapV3 implements EntryPoint {
private final GreetingServiceAsync greetingService = GWT
.create(GreetingService.class);
public void onModuleLoad() {
//设置样式
GXT.setDefaultTheme(Theme.GRAY, true);
Button sendButton = new Button("发 送");
final TextField<String> nameField = new TextField<String>();
nameField.setFieldLabel("GXT 用户");
nameField.setAllowBlank(false);
Viewport view = new Viewport();
view.setLayout(new CenterLayout());
FormData formData = new FormData("-20");
FormPanel panel = new FormPanel();
panel.setFrame(true);
panel.setHeading("Simple");
panel.setWidth(350);
panel.add(nameField, formData);
panel.setButtonAlign(HorizontalAlignment.CENTER);
panel.addButton(sendButton);
//给发送按钮添加事件
sendButton.addSelectionListener(new SelectionListener<ButtonEvent>() {
@Override
public void componentSelected(ButtonEvent ce) {
greetingService.greetServer(nameField.getValue(), new AsyncCallback<String>() {
@Override
public void onSuccess(String result) {
MessageBox.alert("成功", result, null);
}
@Override
public void onFailure(Throwable caught) {
MessageBox.alert("失败", caught.getMessage(), null);
}
});
}
});
view.add(panel);
RootPanel.get().add(view);
}
}
OK..运行一下看看是不是有效果出来了喃?
下次再来说怎么加入spring的servlet的拦截功能.