GWT ExtJS开发图文教程

JS的前台开发相对JAVA还不算方便，各种优化处理也很让人讨厌，看了GWT的说明，尝试了一下EXT-GWT的开发，写个简单的教程备用。

 

================无语的分割线==================

好好的ExtJS搞什么了授权变化，弄得GWT-EXT项目终止，虽然作者去做了SmartGWT，但是SmartClient本身较差的用户体验还是不能与ExtJS比较。唉``````无语啊

============================================

 

看图说话开始

 

1、安装插件，具体过程看GWT官网，我安装了Plugin for Eclipse 和 GWT Designer两个插件

 

2、新建一个WTP项目

 

2、右键点该项目选择Google > Web Toolkit Setting...

 

3、勾选上Use Google Web Toolkit 这样就可以在项目中使用GWT

 

3.5、重要的一步～～～～！！！！！

由于tomcat 6.0的lib中有一个org.eclipse.jdt.internal.compiler.impl.CompilerOptions的类貌似版本不够，在GWT编译JS的时候会报错【java.lang.NoSuchFieldError: reportUnusedDeclaredThrownExceptionIncludeDocCommentReference】，所以项目建立后必需在Java Build Path > Order and Export 中把GWT SDK移动到最上面（至少要在Tomcat的上面）

 

4、右键点项目 Google Web Tookit > GWT module

 

5、选择Ext GWT（不是GWT EXT 这个项目非常不错，可以已经停止了）

 

6、点击Finish之后会让你选择gxt.jar所在目录，注意在ExtJS的下载中有两个gxt的包，一个是对GWT1.7的一个是2.0的，我这里用的2.0

 

7、这个时候会自动打开新建的class，在编辑器的左下有三个选项，源码、设计和数据绑定，在设计可以可见即所得的进行编辑，这个好啊，比ExtJS官网的那个编辑器感觉还好，还可以直接预览... Good!。数据绑定如果大家做过SWT的就是一样的。可以实现多语言等等。

 

8、在class的源码编辑界面中，点右键 > debug / run > Compile GWT Application就可以将class编译出静态的js对象，这样就可以直接使用tomcat来运行。当然GWT还有一个更好的调试方法，以前叫做Hotsts模式，现在就是点击Web application这个时候会自动启动一个jetty的服务器，当然我们也可以选择Web Application(running on an external server) 直接在tomcat的环境中调试。

 

9、选择Web Application(running on an external server) 后，填入项目在tomcat中运行的地址

 

10、跑起来吧`````阿门，不过首先还要选择一下WAR所在目录，本项目就是 WebContent 目录

 

11、JAVA大神，让代码跑起来吧。yeah 真的可以了，这个时候我们只需要在class中修改内容，然后直接刷新浏览器，前台的js就能够自动刷新出效果来了。和直接写js差不多吧哈哈``````（说明：采用这种模式需要给浏览器安装一个插件，最好是使用Chrome浏览器，但是```可惜这个插件不支持Linux下的Chrome，所以我无奈的选择了Firefox来调试）

 

12、写在最后：GWT好东西，但是资料少（至少在国内）。对JS有点包装过度，如果需要直接增加一些JS就有点麻烦。最主要的，扩展EXT-GWT比扩展ExtJS难得多。总之，没有差得框架只有不适合的框架。

 

评论

27 楼 char1st 2010-12-07  

这个怎么说呢，同样是封装了ext
http://www.ext.net/。
ps.其实gwt的作用远不在做前端

26 楼 simen_net 2010-11-29  

dengzhangtao 写道

楼主你的java ee  eclipse  ，是什么版本哦

Eclipse IDE for Java EE Developers标准版+EditorList插件

25 楼 dengzhangtao 2010-11-27  

楼主你的java ee  eclipse  ，是什么版本哦

24 楼 dengzhangtao 2010-11-27  

我想问 ，有必要么？  没看到效率得到提高

23 楼 simen_net 2010-11-26  

shmily2038 写道

使用的少，但是能大体介绍下extjs和gwt extjs有什么本质区别？

EXT-GWT(GXT)是ExtJS的GWT官方实现，GWT是Google Web Tools，简单说就是用于将JAVA编译成JS

22 楼 dir_murong 2010-11-26  

lz 你的工具很不错  看来得学习学习

21 楼 pengjj2 2010-11-26  

lanjia728604 写道

diggywang 写道

pengjj2 写道

大哥们，你们真认为这个减少了调试时间，我的天，这个东西的调试简直就是一场灾难。

服了！

晕，调试快多了！可以直接断点调试。你用js要调试还比较麻烦列。各位是否同感！  

我从来不觉得firebug不能断点调试，我也没觉得gwt提供的调试工具比firebug更快。gwt客户端代码的调试，需要自己的插件，然后进入eclipse。我十次调试能死5五次。

20 楼 shmily2038 2010-11-25  

使用的少，但是能大体介绍下extjs和gwt extjs有什么本质区别？

19 楼 black.angel 2010-11-25  

wilsonjunjie 写道

只要会写swing 就会gwt，有Swing基础的java程序员很好上手，就是gwt开发的时候，需要一台强劲的电脑，否则太卡了。

GWT 远远没有仁兄说的这么简单。特别是扩展纯JS的时候。很多东西让人吐血。
不过GWT还是蛮适合JAVA开发人员的。

18 楼 aws 2010-11-24  

may_cauc 写道

aws 写道

对于习惯些swing的可能更适合一些
但是感觉对JS比较熟的还是直接写JS吧

不要老是拿习惯来说是。

我觉得GWT想解决的是用java这种强约束的语言去生成js，减少调试时间。
用java熟悉的swing风格去约束编程的方式，更利于多人协作。

Extjs用得好的话，写起来很像开发C/S系统而不是在写JSP+js

17 楼 lanjia728604 2010-11-22  

diggywang 写道

pengjj2 写道

大哥们，你们真认为这个减少了调试时间，我的天，这个东西的调试简直就是一场灾难。

服了！

晕，调试快多了！可以直接断点调试。你用js要调试还比较麻烦列。各位是否同感！  

16 楼 diggywang 2010-11-22  

pengjj2 写道

大哥们，你们真认为这个减少了调试时间，我的天，这个东西的调试简直就是一场灾难。

服了！

15 楼 pengjj2 2010-11-22  

大哥们，你们真认为这个减少了调试时间，我的天，这个东西的调试简直就是一场灾难。

14 楼 andy54321 2010-11-22  

这个入门的话都不容易；
不过Google的产品很是好用，最近研究Maps

13 楼 may_cauc 2010-11-22  

aws 写道

对于习惯些swing的可能更适合一些
但是感觉对JS比较熟的还是直接写JS吧

不要老是拿习惯来说是。

我觉得GWT想解决的是用java这种强约束的语言去生成js，减少调试时间。
用java熟悉的swing风格去约束编程的方式，更利于多人协作。

12 楼 aws 2010-11-22  

对于习惯些swing的可能更适合一些
但是感觉对JS比较熟的还是直接写JS吧

11 楼 simen_net 2010-11-20  

jordan_micle 写道

觉得LZ的开发工具出奇的舒服

Ubuntu10.04后的风格，我也非常喜欢

10 楼 simen_net 2010-11-20  

witcheryne 写道

楼主现在在用Gxt 开发项目？？？？

去年Gxt用了一年``` 从  Gwt 1.5  -> Gwt1.7.1  Gxt 1.2.3 -> Gxt2.0
升级升吐血了！

Ext项目的通病，尤其是3.1 > 3.2的时候小虫子一堆堆

9 楼 witcheryne 2010-11-20  

楼主现在在用Gxt 开发项目？？？？

去年Gxt用了一年``` 从  Gwt 1.5  -> Gwt1.7.1  Gxt 1.2.3 -> Gxt2.0
升级升吐血了！

8 楼 wilsonjunjie 2010-11-20  

也不用重新编译，客户端代码只要刷新下页面下就可以了，服务端修改了只要重启下服务就行了，不过感觉在开发时会不断生成大量js代码，会造成机器很卡，一个项目下来，可能又几个G的临时文件