文章分类:Web前端
如何下载和配置请参考“Ext GWT 2.0
开发入门”,这个帖子是我第一次接触GXT(Ext-Gwt)时,通过Google搜索出来的,虽然按这个帖子把测试小例子调通了,但是仍是一头雾水,示
例中加入的那些参数是干什么的,因为没注释,完全看不明白,让我走了不少弯路,现在以这篇帖子为基础,把我对GXT如何创建、配置、部署的心得整理一下。
我直接从创建项目开始整理,其实如何创建一个项目在从官网下载的gxt-2.1.1文件包中写得倒是蛮清楚的。(打开gxt2.1.1文件包可以看到setup.txt 在这个txt中其实已经写明了如何创建一个GXT项目,且每加入的一项参数都是干什么的了)
![点击查看原始大小图片](http://dl.javaeye.com/upload/picture/pic/64754/af9c3f56-8379-326c-a03c-231daeaf12b4.jpg)
![点击查看原始大小图片](http://dl.javaeye.com/upload/picture/pic/64752/2c2c2ed9-edee-30bf-8d8b-a23227bc5096.jpg)
以下是创建步骤
1、 如果已经安装好了GXT的插件,则可以在eclipse3.4上看到,标红的那个
(下载GWT插件,cypal.studio.for.gwt- 1.0。复制到eclipse的plugins目录下)
![点击查看原始大小图片](http://dl.javaeye.com/upload/picture/pic/64750/f27c7cff-cc2d-3ffe-bbf5-1dbab6ff6b61.jpg)
2、 点击,并填入工程名,包名后,选择Finish即可创建成功一个新的工程了。
![](http://dl.javaeye.com/upload/picture/pic/64748/637ac27c-ce2e-3e45-b06e-c8cc5c558dfa.jpg)
3、 实际上这个工程一经创建就是可以运行的,因为这个工程里相关的接口类和实现类都已经写好了,运行效果如下
![点击查看原始大小图片](http://dl.javaeye.com/upload/picture/pic/64764/ab7d5162-ebe9-3a77-9f6c-67ec77764e83.jpg)
4、 现在在这个工程的基础上修改下
(1)首先删除标红色框的这三个接口及实现类
![](http://dl.javaeye.com/upload/picture/pic/64746/88e784e6-8a4d-3d1a-a621-86d31a238c81.jpg)
(2)将GXT_test.java中的代码修改成下面这样,删除一些无关的代码和注释,只留下onModuleLoad()方法即可
![](http://dl.javaeye.com/upload/picture/pic/64762/9dfa5f95-eb19-391b-b8da-e9c5a40cdbc4.jpg)
(3)删除web.xml中的蓝色代码
![](http://dl.javaeye.com/upload/picture/pic/64760/0aec619d-1e0d-30cf-9ff1-74720a9e65db.jpg)
(4)将gxt.jar包放到lib中
(5)通过Properties—Java Build Path—Libraries中的Add JARs…来添加刚复制到lib中的gxt.jar包
![点击查看原始大小图片](http://dl.javaeye.com/upload/picture/pic/64758/9c45e47a-0b7b-3a44-91a9-2d8335672439.jpg)
(6)将gxt2.1.1中的resources文件整个拷贝到war下
![点击查看原始大小图片](http://dl.javaeye.com/upload/picture/pic/64756/81e9d315-3aa1-3446-bbf2-0e24234aca89.jpg)
![](http://dl.javaeye.com/upload/picture/pic/64774/2e74b256-93b7-37d8-9e2c-a44eeaa080e5.jpg)
(7)在GXT_test.html中
![](http://dl.javaeye.com/upload/picture/pic/64772/ad553655-b8db-3125-ab64-60646335936e.jpg)
添加下面的样式表,到主页面,当然主页面里删除了注释
<link rel="stylesheet" type="text/css" href="{资源文件名称}/css/gxt-all.css" />
如果需使用图表,则添加下面的脚本到主页面
<script language='javascript' src='{资源文件名称}/flash/swfobject.js'></script>
这里因为用不到图表,所以就加入上面的样式表就可以了
![点击查看原始大小图片](http://dl.javaeye.com/upload/picture/pic/64770/0dca8a4c-620c-3d88-b417-abc2f7b1d78f.jpg)
(8)将下面这句添加到GXT_test.gwt.xml中
![](http://dl.javaeye.com/upload/picture/pic/64768/a08efd0f-718b-396b-8e7a-4e5dbdbf25d9.jpg)
![](http://dl.javaeye.com/upload/picture/pic/64766/479158bc-99e3-3b27-a5b4-3daf4f18e8b3.jpg)
![](http://dl.javaeye.com/upload/picture/pic/64784/cdb5a35b-ad5b-372c-91f3-936a90534182.jpg)
(9)好了,在GXT_test.java中写几行打开一个新窗口的代码,开能否正常跑起来
![](http://dl.javaeye.com/upload/picture/pic/64782/02211c61-dd3e-34bd-98f4-eb0841ed4172.jpg)
(10)看到一个窗口,则表示能够使用项目配置完成了,也能正常跑了。
(11) 如果想作些小demo则可以参考官方的小例子。直接打开explorer.html即可
![](http://dl.javaeye.com/upload/picture/pic/64778/a2100490-4f8f-3eef-94c6-0b8622d52e47.jpg)
这里的例子范围很广,如果能看明白一大半,以后作项目也就没什么问题了。
![点击查看原始大小图片](http://dl.javaeye.com/upload/picture/pic/64776/981e7b54-b99a-32ad-bed9-3da2ab7b856a.jpg)
5、 部署到Tomcat
(1)选择带红框的图标,会弹出一个提示框,里面会有工程名称,选择好后,点击Compile,即可编译好
![](http://dl.javaeye.com/upload/picture/pic/64802/f44b9e37-2099-313b-aa45-88142c4d5163.jpg)
(2)编译成功后,在工程的war下多出了一个gxt_test
![](http://dl.javaeye.com/upload/picture/pic/64800/d348a145-79cc-3eb1-aa90-084a6822e001.jpg)
(3)找到该工程的存放目录,直接将war文件夹,复制并粘贴到tomcat的webapps目录下即可