搭建简单的EXT-GWT(GXT)的开发环境(一)

yx200404

浏览: 78680 次
性别:
来自: 深圳

最近访客更多访客>>

wangyy

xiexueze

jacktan123

i221bci

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

gwt web gxt eclipse

随便写着玩玩.不要太认真哦^^

这里就不废话了,假设你的 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..运行一下看看是不是有效果出来了喃?